:root {
  --drone: #1772d0;
  --wheeled: #e07b1f;
  --legged: #2f8f7a;
  --ink: #222;
  --muted: #6d6d6d;
  --rule: #e2e2e2;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
}

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

.wrap h1 {
  margin: 0 0 3px;
  font-size: 32px;
  font-weight: 400;
}

.crumb {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 18px;
}

/* ── layout ───────────────────────────────────────────── */

.stage {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mapcol {
  flex: 1 1 58%;
  min-width: 0;
}

.railcol {
  flex: 0 0 340px;
  max-width: 340px;
}

@media (max-width: 720px) {
  .stage { display: block; }
  .railcol { max-width: none; margin-top: 20px; }
}

/* ── map ──────────────────────────────────────────────── */

.map {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fbfaf7;
  touch-action: none;
}

.route-casing { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.route-ghost  { fill: none; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; opacity: .22; }
.route-done   { fill: none; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.agent-layer, .route-layer { transition: opacity .15s ease; }
.dimmed { opacity: .1; }

.tgt { stroke: #7d7d7d; stroke-width: .45; fill: #fff; transition: fill .18s ease, stroke .18s ease; }
.tgt.served { stroke: #fff; stroke-width: .5; }
.tgt.masked { stroke: #c33; stroke-dasharray: .9 .7; }
.maskx { stroke: #c33; stroke-width: .55; pointer-events: none; }

.terr-water { fill: #cfe4f4; stroke: #a7cce6; stroke-width: .4; }
.terr-rock  { stroke: #cabca0; stroke-width: .4; }
.terr-bridge { fill: #e8dcc2; stroke: #bda87e; stroke-width: .35; }
.bridge-rail { stroke: #bda87e; stroke-width: .45; }
.terrlabel {
  font-size: 3.1px;
  fill: #9a9a9a;
  letter-spacing: .3px;
  stroke: #fff;            /* halo, so a route crossing the label stays legible */
  stroke-width: .9;
  paint-order: stroke;
  stroke-linejoin: round;
}

/* ── controls ─────────────────────────────────────────── */

.mapkey {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;          /* spacing separates the entries, no bullets needed */
  font-size: 13px;
  color: var(--muted);
  margin: 9px 2px 0;
  line-height: 1.6;
}

.mapnote {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 2px 0;
  line-height: 1.6;
}

.mapkey .glyph {
  color: #444;
  font-size: 15px;
}

.chart-hd + .controls {
  margin-top: 0;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

button.btn {
  font: inherit;
  font-size: 14px;
  color: #1772d0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}

button.btn:hover { color: #f09228; border-color: #d8d8d8; }
button.btn.on { background: #f4f8fd; border-color: #bcd8f2; }

.seedtag {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.seedbox {
  font-size: 14px;
  color: var(--muted);
}

.seedbox input {
  font: inherit;
  font-size: 14px;
  width: 78px;
  margin-left: 4px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.seedbox input:focus {
  outline: none;
  border-color: #bcd8f2;
}

input[type="range"] {
  flex: 1 1 120px;
  min-width: 100px;
  accent-color: #1772d0;
}

.clock {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 104px;
  text-align: right;
}

/* ── rail ─────────────────────────────────────────────── */

.makespan {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.makespan .num {
  font-size: 32px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.makespan .cap {
  font-size: 13px;
  color: var(--muted);
}

.chart {
  margin-bottom: 12px;
}

.chart-hd {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 5px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.chart-hd b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.crow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: 5px;
  cursor: pointer;
  transition: opacity .15s ease;
}

.crow.dim {
  opacity: .35;
}

.crow .nm {
  flex: 0 0 62px;
  font-weight: 700;
}

.crow .track {
  flex: 1 1 auto;
  height: 10px;
  background: #f1f1f1;
  border-radius: 3px;
  overflow: hidden;
}

.crow .fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width .25s ease;
}

.crow .val {
  flex: 0 0 46px;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.crow.is-max .val {
  color: var(--ink);
  font-weight: 700;
}

.card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 11px 10px;
  margin-bottom: 9px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.card:hover { border-color: #cfcfcf; background: #fcfcfc; }

.card .hd {
  display: flex;
  align-items: center;
  gap: 7px;
}

.card .hd svg { flex: 0 0 auto; }

.card .nm { font-weight: 700; font-size: 15px; }

.card .sp {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.card .note {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 7px;
  line-height: 1.35;
}

.bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.bar .lab { flex: 0 0 46px; }

.bar .track {
  flex: 1 1 auto;
  height: 7px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.bar .fill {
  display: block;          /* a bare inline span ignores width/height */
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width .25s ease;
}

.bar .val {
  flex: 0 0 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bar.is-max .val { color: var(--ink); font-weight: 700; }

.err {
  border: 1px solid #e3c9c9;
  background: #fdf6f6;
  border-radius: 4px;
  padding: 14px;
  font-size: 14px;
}