/* TaxiGPT explorer — one house style, taken from the paper's figures (plots/viz.py).
   Colours keep their figure meanings: green = true intersection, red = wrong intersection / illegal move,
   clay = the model's own choice and the current moment, slate = a move imposed by the detour test,
   sand→charcoal = time along the route. */

@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(fonts/SourceSans3-Regular.woff) format("woff"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap;
  src: url(fonts/SourceSans3-Semibold.woff) format("woff"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/SourceSans3-Bold.woff) format("woff"); }

:root {
  --ink: #1a1a1a;
  --charcoal: #383838;
  --muted: #6f6f6f;
  --sand: #B3A89A;
  --grid: #DCD6CC;
  --grid-soft: #ECE8E1;
  --clay: #CC785C;
  --clay-soft: #F4E4DD;
  --slate: #5B6E8C;
  --compass: #6E5C7A;      /* the goal compass, from viz.py's categorical set; clay stays the model's choice */
  --cab: #D9A73A;          /* the taxi itself, and nothing else */
  --good: #5E8C57;
  --good-soft: #E6EEE3;
  --bad: #B0463A;
  --paper: #FFFFFF;
  --page: #F4F2ED;         /* a warm off-white ground; the map and the panel column sit on it as white cards */
  --play: var(--clay);     /* the play button */
  --card: #E4DFD6;         /* card edge */
  --card-shadow: 0 1px 2px rgba(56, 56, 56, .05), 0 8px 24px rgba(120, 108, 92, .12);

  --font: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --fs-body: 13px;
  --fs-small: 11px;
  --fs-title: 19px;
  --gap: 16px;
  --dash-w: 500px;
  --hair: 1px solid var(--grid);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--page); color: var(--ink); }
body {
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.35;
  font-feature-settings: "tnum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sand); }
a:hover { border-bottom-color: var(--clay); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
svg text { font-family: var(--font); }
.muted { color: var(--muted); }

/* ── page frame: header, explorer, one-line footer; fits 1440×900 and 1280×800 without scrolling ─ */
.page {
  height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: 12px 22px 12px; gap: 10px;
}
/* the header shares the explorer's two columns: title and intro over the map, the ride picker over the panels */
.masthead { display: grid; grid-template-columns: minmax(0, 1fr) var(--dash-w); align-items: start; gap: 8px var(--gap); }
.masthead .title { display: grid; gap: 2px; min-width: 0; }
.masthead .title-row { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.masthead .intro { margin: 0; color: var(--muted); }
.masthead .intro .help { margin-left: 6px; }
.masthead h1 { font-size: var(--fs-title); font-weight: 600; margin: 0; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.masthead h1 span { font-weight: 400; color: var(--muted); }
.masthead .meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-small); }
.masthead .meta a { color: var(--ink); }

.ride-picker { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; justify-self: stretch; }
/* a small callout under the picker once a ride has ended, pointing up at it */
.ride-hint {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 5; max-width: 100%;
  background: var(--paper); border: 1px solid var(--card); border-radius: 6px; padding: 6px 10px; box-shadow: var(--card-shadow);
  font-size: var(--fs-small); color: var(--ink); white-space: nowrap; animation: hint-in .25s ease-out;
}
.ride-hint::before { content: ""; position: absolute; right: 230px; top: -6px; width: 10px; height: 10px; background: var(--paper); border-left: 1px solid var(--card); border-top: 1px solid var(--card); transform: rotate(45deg); }
.ride-picker .ride-hint button { height: auto; border: 0; background: none; padding: 0; display: inline; color: var(--clay); font-weight: 600; cursor: pointer; }
.ride-hint button:hover { text-decoration: underline; text-underline-offset: 2px; }
.ride-hint[hidden] { display: none; }
@keyframes hint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ride-hint { animation: none; } }
.ride-picker select {
  font: inherit; color: var(--ink); background: var(--paper); border: var(--hair); border-radius: 3px;
  padding: 4px 26px 4px 8px; max-width: min(340px, 100%); flex: 1 1 120px; min-width: 0; appearance: none; height: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.ride-picker select:hover { border-color: var(--sand); }
.ride-picker button {
  height: 28px; border: var(--hair); background: var(--paper); border-radius: 3px; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0 8px;
}
.ride-picker button.icon { width: 28px; padding: 0; flex: none; }
.ride-picker button.text { white-space: nowrap; flex: none; }
.ride-picker button svg { width: 12px; height: 12px; fill: var(--ink); }
.ride-picker button:hover { border-color: var(--sand); background: var(--grid-soft); }
.ride-picker button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ride-picker .tour-btn { margin-left: 6px; color: var(--clay); border-color: var(--card); }
.ride-picker .tour-btn:hover { border-color: var(--clay); background: var(--clay-soft); }
.ride-picker .demo { color: var(--clay); font-size: var(--fs-small); margin-left: 4px; cursor: help; white-space: nowrap; flex: none; }

/* ── explorer: the map fills the left, everything else sits in one right-hand column ───────── */
.explorer { display: grid; grid-template-columns: minmax(0, 1fr) var(--dash-w); gap: var(--gap); min-height: 0; }
/* leftover height is shared evenly between the panels rather than left as one gap */
/* the trace row is elastic: it takes what is left, between 70 and 142 px, so the column never overflows */
.dash { display: grid; grid-template-rows: auto auto auto minmax(70px, 142px); align-content: space-between; gap: 18px; min-width: 0; min-height: 0; overflow: hidden; }
/* the column sits in one rounded frame, white like the map, so it reads as a single instrument */
/* white like the map, set apart by a slightly firmer border and a soft warm shadow */
.dash { border: 1px solid var(--card); border-radius: 8px; padding: 10px 12px 12px; background: var(--paper); box-shadow: var(--card-shadow); }
.dash-head { display: flex; align-items: baseline; gap: 8px; border-bottom: var(--hair); padding-bottom: 4px; font-weight: 600; }
.dash-head .where { margin-left: auto; font-weight: 400; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }

/* ── the map ───────────────────────────────────────────────────────────────────── */
.map-frame { position: relative; border: 1px solid var(--card); border-radius: 8px; background: var(--paper); overflow: hidden; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); box-shadow: var(--card-shadow); }
.map-stage { position: relative; min-height: 0; }
.map-frame svg.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-frame .streets { stroke: var(--grid); stroke-width: 1.1; fill: none; stroke-linecap: round; }
.map-frame .route-future { stroke: var(--sand); stroke-opacity: .45; stroke-width: 1.6; fill: none; stroke-dasharray: 3 4; }
.map-frame .route-seg { fill: none; stroke: var(--charcoal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.map-frame .milestone { stroke: #fff; stroke-width: .8; }
.map-frame .origin { fill: var(--ink); stroke: #fff; stroke-width: 1.2; }
.map-frame .goal { fill: var(--ink); stroke: #fff; stroke-width: 1; }
.map-frame .taxi-body { fill: var(--cab); stroke: var(--charcoal); stroke-width: 1; stroke-linejoin: round; }
.map-frame .taxi-window { fill: var(--charcoal); }
.map-frame .taxi-wheel { fill: var(--ink); }
.map-frame .move { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.map-frame .move.own { stroke: var(--clay); }
.map-frame .move.forced { stroke: var(--slate); }
.map-frame .move.proposed { stroke: var(--clay); stroke-dasharray: 4 3; stroke-width: 2; }
.map-frame .move.illegal { stroke: var(--bad); }
.map-frame .illegal-x { stroke: var(--bad); stroke-width: 2; stroke-linecap: round; }
.map-frame .wrong-node { fill: none; stroke: var(--bad); stroke-width: 2; }
.map-frame .wrong-node.offmap { stroke-dasharray: 2 2; }
.map-frame .wrong-link { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 2 3; stroke-opacity: .7; }
.map-frame .hover-ring { fill: none; stroke-width: 2.5; opacity: 0; transition: opacity .18s ease; }
.map-frame .hover-ring.on { opacity: 1; }
.map-frame .compass-ring { fill: none; stroke: var(--sand); stroke-width: .8; stroke-opacity: .9; }
.map-frame .compass-decoded { fill: var(--compass); }
.map-frame .ray.decoded { stroke: var(--compass); stroke-width: 1.4; }
.map-frame .ray.actual { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; }
.compass-dial, #compass-readouts { cursor: crosshair; }
.map-frame .compass-actual { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.map-frame .node-label { font-size: 11px; fill: var(--muted); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

.map-frame .locator { position: absolute; right: 10px; top: 10px; width: 62px; height: 112px; pointer-events: none; }
.map-frame .locator .island { stroke: var(--grid); stroke-width: .6; fill: none; }
.map-frame .locator .view { fill: none; stroke: var(--charcoal); stroke-width: 1; }
.map-frame .map-note { position: absolute; left: 10px; top: 8px; font-size: var(--fs-small); color: var(--muted); pointer-events: none; line-height: 1.35; }
.map-frame .map-note b { color: var(--ink); font-weight: 600; }
.map-frame .map-note .outcome-illegal { color: var(--bad); }
.map-frame .map-note .outcome-success { color: var(--good); }

.map-legend {
  position: absolute; left: 8px; bottom: 8px; right: 240px; display: flex; flex-wrap: wrap; gap: 3px 13px; align-items: center;
  font-size: var(--fs-small); color: var(--muted); pointer-events: none;
}
.map-legend .k { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.85); padding: 1px 3px; border-radius: 2px; }
.map-legend .k[hidden] { display: none; }
.map-legend svg { width: 22px; height: 12px; overflow: visible; }

/* ── dashboard panels ──────────────────────────────────────────────────────────── */
.panel { display: grid; gap: 6px; min-width: 0; align-content: start; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.panel-head h2 { font-size: var(--fs-body); font-weight: 600; margin: 0; }
.panel-head .where { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.tag { display: inline-block; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 2px; vertical-align: 1px; white-space: nowrap; cursor: help; }
.tag.illustrative { color: var(--clay); background: var(--clay-soft); }
.tag.recorded { color: var(--good); background: var(--good-soft); }
.tag.mixed { color: var(--muted); background: var(--grid-soft); }

/* next-move prediction */
.moves { display: grid; grid-template-columns: 30px 1fr 60px; column-gap: 8px; row-gap: 2px; align-items: center; }
.moves .hdr { font-size: var(--fs-small); color: var(--muted); padding-bottom: 2px; border-bottom: var(--hair); }
.moves .hdr.effect { text-align: center; white-space: nowrap; }
.moves .lbl { font-weight: 600; font-variant-numeric: tabular-nums; }
.moves .lbl.row-illegal { color: var(--bad); font-weight: 400; }
.moves .track { position: relative; height: 9px; background: var(--grid-soft); border-radius: 1px; }
.moves .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sand); border-radius: 1px; transition: width .22s ease; }
.moves .row-illegal .bar { background: var(--bad); opacity: .45; }
.moves .row-executed .bar { background: var(--clay); opacity: 1; }
.moves .row-forced .bar { background: var(--slate); opacity: 1; }
.moves .row-proposed .bar { background: var(--clay); opacity: 1; }
.moves .row-executed.row-illegal .bar { background: var(--bad); opacity: 1; }
.moves .val { text-align: right; font-variant-numeric: tabular-nums; }
.moves .val small { color: var(--muted); font-size: var(--fs-small); margin-left: 4px; }
.moves .effect { justify-self: center; }
.moves .effect svg { width: 118px; height: 11px; overflow: visible; display: block; }
.moves .effect .zero { stroke: var(--grid); stroke-width: 1; }
.moves .effect .stem { stroke: var(--muted); stroke-width: 1.2; }
.moves .effect .dot { fill: var(--ink); }
/* hovering the compass, its readouts or the effect column: the effect dots and the dial turn plum */
.moves.compass-lit .effect .dot { fill: var(--compass); }
.moves.compass-lit .effect .stem { stroke: var(--compass); }
.moves .effect { cursor: crosshair; }
.panel.lit h2 { color: var(--compass); }
.panel.lit .compass-dial .ring { stroke: var(--compass); stroke-opacity: .6; }
.prediction-note { font-size: var(--fs-small); color: var(--muted); min-height: 2.5em; line-height: 1.3; }
.prediction-note b { color: var(--ink); font-weight: 600; }
.prediction-note .own { color: var(--clay); font-weight: 600; }
.prediction-note .forced { color: var(--slate); font-weight: 600; }
.prediction-note .illegal { color: var(--bad); font-weight: 600; }

/* position code + compass */
.readouts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-content: start; font-variant-numeric: tabular-nums; margin: 0; }
.readouts dt { color: var(--muted); }
.readouts dd { margin: 0; }
.readouts .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 1px; margin-right: 6px; vertical-align: -0.5px; }
.readouts .swatch.good { background: var(--good); }
.readouts .swatch.bad { background: var(--bad); }
.readouts .swatch.compass { background: var(--compass); }
.readouts .swatch.ink { background: var(--ink); }
.readouts .swatch.noise { background: var(--muted); }
.readouts .row-hover { cursor: crosshair; }
.readouts .row-hover.on dt, .readouts .row-hover:hover dt { color: var(--ink); }
.readouts .row-hover.on dd b, .readouts .row-hover:hover dd b { text-decoration: underline dotted; text-underline-offset: 3px; }
.readouts .row-hover.bad-row.on dt, .readouts .row-hover.bad-row:hover dt { color: var(--bad); }
.readouts .row-hover.good-row.on dt, .readouts .row-hover.good-row:hover dt { color: var(--good); }
.readouts .win { color: var(--bad); font-size: var(--fs-small); }

/* the two lower panels share one structure: a framed graphic of one height, then readouts, then a note */
.graphic { height: 132px; display: grid; place-items: center; padding: 2px 0; min-width: 0; }
.sketch { width: 100%; height: 100%; display: block; }
.sketch .axis-true { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sketch .axis-wrong { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 3 3; }
.sketch .write { stroke: var(--ink); stroke-width: 2; }
.sketch .remainder { stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 2 2; }
.sketch .resultant { stroke-width: 2.6; stroke-linecap: round; }
.sketch .resultant.good { stroke: var(--good); }
.sketch .resultant.bad { stroke: var(--bad); }
.sketch .lab { font-size: var(--fs-small); fill: var(--muted); }
.sketch .noise-disc { fill: var(--muted); fill-opacity: .12; stroke: var(--muted); stroke-width: .7; stroke-dasharray: 2 2; }
.sketch .boundary { stroke: var(--sand); stroke-width: 1; stroke-dasharray: 1.5 3; }
.sketch .lab.bad { fill: var(--bad); }
.sketch .lab.good { fill: var(--good); }
.sketch .lab.ink { fill: var(--ink); }
.sketch .arrow-ink { fill: var(--ink); }
.sketch .arrow-good { fill: var(--good); }
.sketch .arrow-bad { fill: var(--bad); }
.sketch-caption { font-size: var(--fs-small); color: var(--muted); line-height: 1.3; min-height: 2.6em; }
.readouts dd { white-space: nowrap; }

.compass-dial { width: 112px; height: 112px; display: block; }
.compass-dial .ring { fill: none; stroke: var(--grid); stroke-width: 1; }
.compass-dial .cardinal { font-size: 10.5px; fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
.compass-dial .tick { stroke: var(--grid); stroke-width: 1.5; }
.compass-dial .tick.legal { stroke: var(--charcoal); }
.compass-dial .needle { stroke: var(--compass); stroke-width: 2.2; stroke-linecap: round; }
.compass-dial .needle-head { fill: var(--compass); }
.compass-dial .actual { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.compass-dial .actual-star { fill: var(--ink); }
.compass-dial .err { fill: none; stroke: var(--compass); stroke-width: 4; stroke-opacity: .22; }
.compass-dial .hub { fill: var(--paper); stroke: var(--charcoal); stroke-width: 1; }
.compass-note { font-size: var(--fs-small); color: var(--muted); line-height: 1.3; }

/* ── transport, in the map's lower-right corner; the trace at the foot of the column ─────── */
.timeline-panel { gap: 4px; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.transport {
  position: absolute; right: 8px; bottom: 8px; display: grid; gap: 5px; justify-items: end;
  background: rgba(255,255,255,.94); border: var(--hair); border-radius: 3px; padding: 6px 8px;
}
.transport .buttons { display: flex; gap: 3px; align-items: center; }
.transport button {
  width: 30px; height: 26px; border: var(--hair); background: var(--paper); border-radius: 3px; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0;
}
.transport button svg { width: 12px; height: 12px; fill: var(--ink); }
.transport button:hover { border-color: var(--sand); background: var(--grid-soft); }
.transport button.play { width: 40px; background: var(--play); border-color: var(--play); }
.transport button.play svg { fill: #fff; }
.transport button.play:hover { background: #B8684E; }
.transport select { font: inherit; font-size: var(--fs-small); border: var(--hair); background: var(--paper); border-radius: 3px; padding: 3px 4px; color: var(--ink); margin-left: 4px; height: 26px; }
.transport .status { display: flex; gap: 10px; align-items: baseline; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.transport .status b { color: var(--ink); font-weight: 600; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }

.timeline { position: relative; min-height: 40px; }
.timeline svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; cursor: crosshair; touch-action: none; }
.timeline .spine { stroke: var(--muted); stroke-width: .8; }
.timeline .tick-text { font-size: 10.5px; fill: var(--muted); }
.timeline .series-true { fill: none; stroke: var(--good); stroke-width: 1.5; stroke-linejoin: round; }
.timeline .series-wrong { fill: none; stroke: var(--bad); stroke-width: 1.4; stroke-linejoin: round; }
.timeline .series-noise { fill: none; stroke: var(--muted); stroke-width: .9; stroke-linejoin: round; stroke-opacity: .8; }
.timeline .series-true.dim, .timeline .series-wrong.dim { stroke-opacity: .25; }
.timeline .series-true.lit { stroke-width: 2.4; }
.timeline .series-wrong.lit { stroke-width: 2.2; }
.timeline .timebar { stroke: var(--muted); stroke-width: .8; }
.timeline .timebar-rest { stroke: var(--grid); stroke-width: .8; }
.timeline .milestone { stroke: #fff; stroke-width: .8; }
.timeline .forced-tick { stroke: var(--slate); stroke-width: 1.5; }
.timeline .cursor { stroke: var(--clay); stroke-width: 1.4; }
.timeline .cursor-head { fill: var(--clay); }
.timeline .hover { stroke: var(--sand); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0; }
.timeline .hover.on { opacity: 1; }
.timeline .illegal-stem { stroke: var(--bad); stroke-width: 1; }
.timeline .illegal-x { stroke: var(--bad); stroke-width: 1.6; stroke-linecap: round; }
.timeline .end-mark { fill: var(--ink); }
.timeline .end-mark-off { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.timeline .legend { font-size: 10.5px; }
.timeline .legend .t { fill: var(--good); }
.timeline .legend .w { fill: var(--bad); }
.timeline .legend .f { fill: var(--slate); }
.timeline .legend .n { fill: var(--muted); }
.timeline .legend .m { fill: var(--muted); }
.timeline .unmeasured { fill: var(--grid-soft); }

/* ── help buttons and popovers ────────────────────────────────────────────── */
.help {
  display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 5px; padding: 0; vertical-align: 1px;
  border: 1px solid var(--sand); border-radius: 50%; background: var(--paper); color: var(--muted);
  font-size: 10px; font-weight: 600; line-height: 1; cursor: help;
}
.help:hover, .help.on { border-color: var(--ink); color: var(--ink); }
h2 .help { margin-left: 6px; vertical-align: 2px; }
.map-legend .help { pointer-events: auto; }
.hdr .help { margin-left: 4px; vertical-align: 0; }
.readouts dt .help { margin-left: 4px; }
.map-note .help { pointer-events: auto; }
.help-pop {
  position: fixed; z-index: 20; width: 340px; max-width: calc(100vw - 16px); background: var(--paper);
  border: 1px solid var(--sand); border-radius: 3px; padding: 10px 12px 12px; box-shadow: 0 6px 18px rgba(26, 26, 26, .10);
  font-size: var(--fs-body); line-height: 1.4;
}
.help-pop[hidden] { display: none; }
.help-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.help-close { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
.help-close:hover { color: var(--ink); }
.help-body p { margin: 0 0 8px; }
.help-body p:last-of-type { margin-bottom: 0; }
.help-body .layer-sketch { display: block; margin: 10px auto 0; max-width: 100%; height: auto; }
.layer-sketch .lab { font-size: 9.5px; fill: var(--muted); }

/* ── guided tour ───────────────────────────────────────────────────────────── */
.tour { position: fixed; inset: 0; z-index: 40; }
.tour-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-shade > rect { fill: rgba(26, 26, 26, .42); }
.tour-card {
  position: absolute; width: 360px; max-width: calc(100vw - 24px); background: var(--paper); border: 1px solid var(--card);
  border-radius: 8px; box-shadow: 0 12px 32px rgba(26, 26, 26, .22); padding: 12px 14px 12px; font-size: var(--fs-body); line-height: 1.45;
}
.tour-count { font-size: var(--fs-small); color: var(--muted); }
.tour-title { font-size: 15px; font-weight: 600; margin: 2px 0 6px; }
.tour-body { margin: 0 0 12px; }
.tour-body p { margin: 0; }
.tour-body p + p { margin-top: 10px; }
.tour-nav { display: flex; align-items: center; gap: 8px; }
.tour-spacer { flex: 1; }
.tour-nav button { font: inherit; font-size: var(--fs-small); border: var(--hair); background: var(--paper); border-radius: 3px; padding: 5px 10px; cursor: pointer; color: var(--ink); }
.tour-nav button:hover { border-color: var(--sand); background: var(--grid-soft); }
.tour-nav .tour-next { background: var(--clay); border-color: var(--clay); color: #fff; font-weight: 600; }
.tour-nav .tour-next:hover { background: #B8684E; border-color: #B8684E; }
.tour-nav .tour-skip { border: 0; color: var(--muted); padding-left: 0; }
.tour-nav .tour-skip:hover { background: none; color: var(--ink); }
.tour-nav button[hidden] { display: none; }

/* ── footer ──────────────────────────────────────────────────────────────────── */
.foot { color: var(--muted); font-size: var(--fs-small); border-top: 1px solid var(--card); padding-top: 6px; }
.foot p { margin: 0; }
kbd { font: inherit; font-size: 10px; border: var(--hair); border-radius: 3px; padding: 0 4px; color: var(--ink); }

/* ── smaller screens ─────────────────────────────────────────────────────────── */
/* ── resizing: the map gives way first; the panel column keeps its width until the map would be too
   small, then the type shrinks a step, then the column narrows, and only under 900px does the layout stack.
   Short windows drop the caption, then the trace. ─────────────────────────────────────────────────────── */
@media (max-width: 1300px) and (min-width: 901px) {
  .masthead .meta span { display: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  :root { --fs-body: 12px; --fs-small: 10.5px; --fs-title: 17px; --dash-w: 460px; }
  .moves .track { height: 8px; }
  .compass-dial { width: 92px; height: 92px; }
}
@media (max-width: 1040px) and (min-width: 901px) {
  :root { --dash-w: 420px; --gap: 12px; }
  .page { padding: 8px 14px 6px; }
  .moves { grid-template-columns: 26px 1fr 56px !important; }
  .moves .effect, .moves .hdr.effect { display: none; }      /* the compass-effect column goes first */
  .sketch-caption { display: none; }
}
@media (max-height: 840px) and (min-width: 901px) {
  :root { --fs-body: 12px; --fs-small: 10.5px; --fs-title: 17px; }
  .page { padding: 8px 18px 6px; gap: 8px; }
  .dash { gap: 10px; }
  .moves { row-gap: 1px; }
  .moves .track { height: 7px; }
  .readouts { gap: 1px 10px; }
  .prediction-note { min-height: 0; }
  .sketch-caption { display: none; }
  .masthead .intro { font-size: var(--fs-small); }
  .foot { display: none; }
}
@media (max-height: 660px) and (min-width: 901px) {
  .timeline-panel { display: none; }                          /* the trace is the first panel to go */
  .dash { grid-template-rows: auto auto auto; }
  .graphic { height: 110px; }
  .compass-dial { width: 96px; height: 96px; }
}
@media (max-width: 900px) {
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .ride-picker { justify-self: stretch; flex-wrap: wrap; min-width: 0; }
  .ride-picker select { min-width: 0; flex: 1; }
  .page { height: auto; min-height: 100vh; padding: 12px 14px 8px; }
  .explorer { grid-template-columns: 1fr; }
  .map-stage { aspect-ratio: 1 / 1; max-height: 70vh; }
  .dash { grid-template-rows: none; align-content: start; overflow: visible; }
  .pair-row { grid-template-columns: 1fr 1fr; }
  .timeline-panel { height: 180px; }
  .foot { display: none; }
}
@media (max-width: 620px) {
  .pair-row { grid-template-columns: 1fr; }
  .ride-picker { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .ride-picker select { max-width: 100%; }
  .ride-picker button.text { grid-column: 1 / -1; }
  /* the controls and the legend leave the map and stack under it */
  .map-frame { grid-template-rows: auto auto auto; }
  .transport { position: static; border: 0; border-top: var(--hair); border-radius: 0; padding: 6px 8px; grid-auto-flow: column; justify-content: space-between; align-items: center; background: none; }
  .transport .status { white-space: normal; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px; text-align: right; }
  .map-legend { position: static; padding: 4px 8px 6px; gap: 3px 10px; }
  .map-legend .k { padding: 0; }
  .graphic { height: auto; }
  .sketch { max-width: 300px; margin: 0 auto; }
  .compass-dial { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .moves .bar, .map-frame .hover-ring { transition: none; }
}