/* Stroke routing simulator. Dispatch-console panel beside a quiet map.
   Colours: paper figure palette (Okabe-Ito) for hospital types and escalating tiers. */
:root {
  --console: #13273f;
  --console-2: #1b3452;
  --console-line: #2c4a6e;
  --on-console: #eef3f8;
  --on-console-dim: #a9bbd0;
  --paper: #f7f8f6;
  --ink: #18222f;
  --su: #0072b2;
  --ns: #cc79a7;
  --both: #009e73;
  --tier-wait: #7d93ad;
  --tier-below: #56b4e9;
  --tier-71: #e69f00;
  --tier-81: #d55e00;
  --tier-91: #c2312a;
  --livery: #f2342b;
  --radius-s: 6px;
  --radius-m: 10px;
  --panel-w: 420px;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--tier-71); outline-offset: 2px; }

.app { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr var(--panel-w); }
.map { grid-column: 1; position: relative; min-height: 0; }

/* Watermark: always visible over the map */
.watermark {
  position: absolute; left: 16px; top: 14px; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 0;
  color: var(--console);
}
.watermark strong {
  font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1;
  letter-spacing: 0.02em; opacity: 0.85;
}
.watermark span { font-size: 13px; opacity: 0.8; max-width: 26ch; }

/* Panel */
.panel {
  grid-column: 2; display: flex; flex-direction: column; gap: 18px;
  background: var(--console); color: var(--on-console);
  padding: 20px 22px 18px; overflow-y: auto; z-index: 3;
}
.sheet-handle { display: none; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.panel-head h1 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0; letter-spacing: 0.01em; }
.link {
  background: none; border: 0; padding: 4px 0; color: var(--on-console-dim);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px;
}
.link:hover { color: var(--on-console); }

/* The decision read-out: the one bold element */
.decision {
  --tier: var(--tier-wait);
  background: var(--console-2); border-radius: var(--radius-m);
  border-left: 8px solid var(--tier);
  padding: 16px 18px; display: grid; gap: 8px;
}
.decision[data-tier="below"] { --tier: var(--tier-below); }
.decision[data-tier="t71"] { --tier: var(--tier-71); }
.decision[data-tier="t81"] { --tier: var(--tier-81); }
.decision[data-tier="t91"] { --tier: var(--tier-91); }
.tier { margin: 0; font-size: 15px; color: var(--on-console-dim); }
.target-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--on-console-dim); }
.fp:empty, .notice:empty, .alt:empty { display: none; }
.evidence { justify-self: start; }
.fp { margin: 0; font-size: 14px; color: var(--on-console-dim); border-top: 1px solid var(--console-line); padding-top: 8px; }
.alt { font-size: 14px; color: var(--on-console-dim); display: grid; gap: 2px; }
.alt b { color: var(--on-console); font-weight: 700; }
.notice { margin: 0; font-size: 15px; color: var(--on-console); background: rgba(255, 255, 255, 0.06); padding: 10px 12px; border-radius: var(--radius-s); }


/* Map story: badge, result marker, national legend */
.badge {
  /* in the band between the label (left) and the zoom buttons (right), centred there */
  position: absolute; z-index: 2; top: 14px; left: 252px; right: calc(var(--panel-w) + 56px); margin: 0 auto; max-width: 560px;
  padding: 12px 16px; border-radius: var(--radius-m);
  background: #ffffff; color: var(--ink); box-shadow: 0 4px 16px rgba(19, 39, 63, 0.22);
  display: grid; gap: 4px; border-left: 6px solid var(--ns);
}
.badge strong { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.badge span { font-size: 14px; color: #3d4b5c; }
/* the decision after the first scan: the next step, centred; the race waits, blurred behind it (as behind the start box) */
.decision-ask {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px;
  background: rgba(19, 39, 63, 0.3); backdrop-filter: blur(7px) saturate(0.8); -webkit-backdrop-filter: blur(7px) saturate(0.8);
}
.decision-ask[hidden] { display: none; }
.ask-card {
  width: min(540px, 100%); display: grid; gap: 8px; padding: 22px 24px 24px; border-radius: var(--radius-m);
  background: var(--console); color: var(--on-console); box-shadow: 0 18px 60px rgba(8, 20, 36, 0.45);
}
.ask-card strong { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; }
.ask-card span { font-size: 15px; opacity: 0.85; }
.ask-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ask-btn {
  flex: 1 1 200px; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; font-weight: 600; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; color: var(--on-console); cursor: pointer;
}
.ask-btn[hidden] { display: none; }
.ask-rule { font-size: 13px; opacity: 0.8; }
.ask-rule[hidden] { display: none; }
.ask-btn:hover { background: rgba(255, 255, 255, 0.1); }
.ask-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.result-marker { display: flex; align-items: center; gap: 6px; pointer-events: none; }
.result-marker .tube {
  width: 34px; height: 34px; border-radius: 50%; background: #F0E442; border: 2px solid #18222F;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(19, 39, 63, 0.4);
}
.result-marker .tube svg { width: 22px; height: 22px; }
.result-label {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; background: #F0E442; color: #18222F;
  border: 2px solid #18222F; border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.natlegend {
  position: absolute; z-index: 2; left: 16px; bottom: 48px; max-width: 300px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.94); border-radius: var(--radius-m); font-size: 13px; color: var(--ink);
  box-shadow: 0 2px 10px rgba(19, 39, 63, 0.18);
}
.natlegend-title { margin: 0 0 6px; font-weight: 700; }
.natlegend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.natlegend li { display: flex; align-items: center; gap: 6px; }
.natlegend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex: none; }
.natlegend-share { margin: 8px 0 0; font-weight: 700; }
.natlegend-share:empty { display: none; }

/* Panel: blood draw, verdict, details */
.draws label { flex: 1 1 calc(50% - 6px); justify-content: center; }
.verdict { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.saving { margin: 0; font-size: 17px; font-weight: 700; color: var(--on-console); }
.timing { margin: 0; font-size: 15px; color: var(--on-console-dim); }
.saving:empty, .timing:empty, .verdict:empty, .target-name:empty { display: none; }
.more { display: grid; gap: 14px; }
.more[open] { padding-bottom: 4px; }
.more summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.more > * + * { margin-top: 12px; }
.legend i.bar { width: 22px; height: 0; border-radius: 0; border-top: 4px solid var(--c); background: none; }
.legend i.bar.dash { border-top-style: dashed; }
.legend .chip-key { flex: none; font-weight: 700; font-size: 12px; color: #ffffff; background: #D7263D; border-radius: 4px; padding: 0 5px; }
.legend i.road-key { width: 22px; height: 5px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 1.5px var(--e); }
.legend i.tube-dot { background: #F0E442; border: 2px solid #18222F; }

/* Controls */
.controls { display: grid; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn {
  min-height: 44px; padding: 8px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--console-line); background: transparent; color: var(--on-console);
  cursor: pointer; font-weight: 700;
}
.btn:hover { background: rgba(255, 255, 255, 0.07); }
.btn.primary { background: var(--on-console); color: var(--console); border-color: var(--on-console); }
.btn.primary:hover { background: #ffffff; }
.btn.quiet { border-color: transparent; color: var(--on-console-dim); font-weight: 400; }
.btn[disabled] { opacity: 0.45; cursor: default; }
.segmented { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.segmented legend { font-size: 14px; color: var(--on-console-dim); margin-bottom: 6px; padding: 0; }
.segmented label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--console-line); cursor: pointer; font-variant-numeric: tabular-nums;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + span { font-weight: 700; }
.segmented label:has(input:checked) { background: var(--on-console); color: var(--console); border-color: var(--on-console); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--tier-71); outline-offset: 2px; }
.inline { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--on-console-dim); }
.inline select { min-height: 40px; padding: 6px 8px; border-radius: var(--radius-s); border: 1px solid var(--console-line); background: var(--console-2); color: var(--on-console); max-width: 100%; }
.inline.place { flex-wrap: wrap; }
.inline input {
  width: 5.5em; min-height: 40px; padding: 6px 8px; border-radius: var(--radius-s);
  border: 1px solid var(--console-line); background: var(--console-2); color: var(--on-console);
}
.transport { gap: 10px; }
.rates { display: flex; gap: 4px; }
.rates button { min-height: 40px; min-width: 44px; padding: 4px 8px; border-radius: var(--radius-s);
  border: 1px solid var(--console-line); background: transparent; color: var(--on-console-dim); cursor: pointer; }
.rates button[aria-pressed="true"] { color: var(--console); background: var(--on-console-dim); border-color: var(--on-console-dim); font-weight: 700; }
#scrub { flex: 1 1 120px; accent-color: var(--tier-71); min-height: 40px; }

.panel-foot { margin-top: auto; display: grid; gap: 8px; border-top: 1px solid var(--console-line); padding-top: 12px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.small { margin: 0; font-size: 13px; color: var(--on-console-dim); }

/* Ambulance marker: top view, white with luminous red stripe (German RTW livery) */
.ambulance { width: 46px; height: 46px; cursor: grab; touch-action: none; filter: drop-shadow(0 3px 4px rgba(19, 39, 63, 0.45)); }
.ambulance:active { cursor: grabbing; }
.ambulance:focus-visible { outline: 3px solid var(--tier-71); outline-offset: 2px; border-radius: 8px; }
.ambulance svg { width: 100%; height: 100%; display: block; }

/* The race: clock, dots, chips */
.place-hint { margin: 0; padding: 8px 10px; border-left: 3px solid var(--ns); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--on-console); font-size: 14px; line-height: 1.35; }
.place-search { position: relative; }
.place-search input {
  width: 100%; min-height: 44px; padding: 10px 12px 10px 38px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a6d' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 12px center / 17px;
  color: var(--ink); font: inherit; font-size: 16px;
}
.place-search input::placeholder { color: #6b7a8a; }
.place-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none;
  background: #ffffff; color: var(--ink); border-radius: 8px; box-shadow: 0 10px 28px rgba(19, 39, 63, 0.4); max-height: 340px; overflow: auto;
}
.place-list .opt { padding: 7px 12px; cursor: pointer; display: grid; gap: 1px; }
.place-list .opt b { font-weight: 700; }
.place-list .opt small { font-size: 12px; color: #4a5a6d; }
.place-list .opt.active, .place-list .opt:hover { background: #EAF0F6; }
.place-list .opt.active { box-shadow: inset 3px 0 0 var(--ns); }
.place-list .opt-head { padding: 8px 12px 2px; font-size: 12px; font-weight: 700; color: #4a5a6d; }
.place-list .opt-note { padding: 8px 12px; font-size: 13px; color: #4a5a6d; }
.route-pill {
  pointer-events: none; white-space: nowrap; padding: 1px 8px; border-radius: 999px; border: 2px solid var(--c);
  background: #ffffff; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.35;
  font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(19, 39, 63, 0.3);
}
.route-pill.direct { font-size: 14px; }
.route-pill.via { border-style: dashed; }
.play { width: 100%; min-height: 44px; font-weight: 700; cursor: pointer; }
.race-clock {
  position: absolute; z-index: 3; top: 14px; left: calc((100% - var(--panel-w)) / 2); transform: translateX(-50%);
  padding: 8px 18px; border-radius: var(--radius-m); background: var(--console); color: var(--on-console);
  box-shadow: 0 4px 16px rgba(19, 39, 63, 0.3); display: grid; justify-items: center; gap: 2px; min-width: 220px;
}
.race-clock strong { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.race-clock > span { font-size: 13px; color: var(--on-console-dim); }
/* live heading: what each dot is doing now */
.race-phase { list-style: none; margin: 6px 0 2px; padding: 7px 0 0; border-top: 1px solid var(--console-line); display: grid; gap: 4px; justify-self: stretch; }
.race-phase li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.race-phase i { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid #ffffff; }
.race-phase .with i { background: #D7263D; }
.race-phase .without i { background: #5B6B7C; }
.race-phase .without { color: var(--on-console-dim); }
/* lap timer: clock times of the milestones, upper right of the map */
.lap-box {
  position: absolute; z-index: 3; overflow: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
  padding: 8px 10px; border-radius: var(--radius-m); background: rgba(19, 39, 63, 0.92); color: var(--on-console);
  box-shadow: 0 4px 16px rgba(19, 39, 63, 0.3);
}
.lap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.lap-head { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; padding-bottom: 4px; border-bottom: 1px solid var(--console-line); font-size: 13px; font-weight: 700; }
.lap-head i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #ffffff; flex: none; }
.lap-col.with .lap-head i { background: #D7263D; }
.lap-col.without .lap-head i { background: #5B6B7C; }
.lap-col.without { color: var(--on-console-dim); }
.lap-list li { display: grid; grid-template-columns: 3.1em 1fr; align-items: baseline; gap: 6px; line-height: 1.3; }
.lap-list time { font-weight: 700; font-variant-numeric: tabular-nums; }
.lap-list .amb { color: #FFB4BE; font-weight: 700; }
.lap-list li.now { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--console-line); color: var(--tier-71); }
.race-phase span.event { color: var(--tier-71); }
/* the end table has the times: no lap timers at the end */
body.race-summary .lap-box { display: none; }
/* desktop: clock and lap timers in one column under the label, clear of the badge, the zoom buttons and the routes
   (the race view is fitted to the map right of it) */
@media (min-width: 900px) {
  .race-side {
    position: absolute; z-index: 3; left: 16px; top: 96px; width: 400px; max-height: calc(100% - 96px - 130px);
    display: flex; flex-direction: column; gap: 10px;
  }
  .race-side > .race-clock, .race-side > .lap-box { position: static; transform: none; min-width: 0; }
  .race-side > .lap-box { min-height: 0; flex: 0 1 auto; }
  .race-side .race-phase li { white-space: normal; }
}
.race-dot { border-radius: 50%; pointer-events: none; }
/* what each dot is doing, riding with it: red above right, grey below left (apart where they share the road) */
.dot-label {
  position: absolute; z-index: 1; white-space: nowrap; pointer-events: none; padding: 3px 9px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2;
  background: var(--console); color: #ffffff; box-shadow: 0 2px 8px rgba(19, 39, 63, 0.35);
}
.race-dot.red .dot-label { left: calc(100% + 10px); bottom: calc(100% + 6px); border-left: 4px solid #D7263D; }
.race-dot.grey .dot-label { right: calc(100% + 10px); top: calc(100% + 6px); border-left: 4px solid #8E9AA8; }
.race-dot.red .dot-label.flip { left: auto; right: calc(100% + 10px); }
.race-dot.grey .dot-label.flip { right: auto; left: calc(100% + 10px); }
.race-dot.grey { width: 26px; height: 26px; background: #5B6B7C; border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(19, 39, 63, 0.45); }
.race-dot.red { position: relative; width: 16px; height: 16px; background: #D7263D; border: 2px solid #ffffff; box-shadow: 0 0 0 0 rgba(215, 38, 61, 0.6); animation: race-pulse 1.2s ease-out infinite; }
.race-dot.red.still { animation: none; }
.race-dot.red.flash::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box;
  border-radius: 50%; border: 3px solid #F0E442; box-shadow: 0 0 0 1px rgba(24, 34, 47, 0.5);
  animation: race-flash 0.9s ease-out 1 forwards; pointer-events: none;
}
@keyframes race-flash { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
.race-dot.red.faded { background: #8E9AA8; animation: none; }
.race-dot .ring { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%) rotate(-90deg); overflow: visible; }
.race-dot .ring circle { fill: none; stroke: #F0E442; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 1px #18222F); }
@keyframes race-pulse { 0% { box-shadow: 0 0 0 0 rgba(215, 38, 61, 0.6); } 100% { box-shadow: 0 0 0 16px rgba(215, 38, 61, 0); } }
.race-chip {
  pointer-events: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; white-space: nowrap;
  padding: 2px 8px; border-radius: 6px; background: #ffffff; color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 2px 6px rgba(19, 39, 63, 0.3);
}
.race-chip.treat { background: #D7263D; color: #ffffff; border-color: #ffffff; }
.race-chip.treat.grey { background: #5B6B7C; }
.race-chip.route { background: var(--ns); color: #ffffff; border-color: #ffffff; }
.race-chip.clock { background: var(--console); color: var(--on-console); border-color: var(--console); font-variant-numeric: tabular-nums; }
.race-chip.clock.dti { background: linear-gradient(90deg, #3E6A96 var(--p, 0%), var(--console) var(--p, 0%)); border-color: #F0E442; }

/* The race: two lanes while it runs, the summary at the end */
.race-lanes {
  position: absolute; z-index: 2; left: 12px; right: calc(var(--panel-w) + 12px); bottom: 48px; /* above the map attribution */
  padding: 8px 12px; border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.96); color: var(--ink);
  box-shadow: 0 4px 16px rgba(19, 39, 63, 0.22); display: grid; gap: 6px; font-size: 13px;
}
.lane { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 8px; }
.lane-name { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.lane-name::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #5B6B7C; flex: none; }
.lane[data-lane="with"] .lane-name::before { background: #D7263D; }
.track { position: relative; height: 14px; border-radius: 3px; background: #E9EDF1; overflow: hidden; }
.seg { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; }
.seg.drive { background: var(--ink); }
.seg.branch { background: var(--ns); }
.seg.wait { background: #B9C4D0; }
.seg.dti { background: #6F8399; }
.seg.test { top: 0; bottom: auto; height: 3px; background: #E2D43A; }
.cover { position: absolute; top: 0; bottom: 0; right: 0; background: #E9EDF1; }
.head { position: absolute; top: 0; bottom: 0; width: 2px; background: #D7263D; }
.mark { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #ffffff; border: 2px solid #D7263D; display: none; }
.mark.on { display: block; }
.mark.grey { border-color: #5B6B7C; }
.sum-title { margin: 0; font-weight: 700; }
.race-lanes.summary { background: #ffffff; max-height: min(52vh, 560px); overflow-y: auto; } /* the map keeps room above the end table */
body.racing .natlegend { display: none; }
.sum-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.sum-table th, .sum-table td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid #E9EDF1; vertical-align: baseline; }
.sum-table thead th { font-size: 13px; border-bottom: 2px solid #C9D3DD; }
.sum-table tbody th { font-weight: 400; }
.sum-table td b { font-family: var(--font-display); font-size: 17px; font-variant-numeric: tabular-nums; }
.sum-table td small { margin-left: 6px; font-size: 12px; color: #4a5a6d; white-space: nowrap; }
.sum-table td.none { color: #9AA6B2; }
.sum-table tr.key th { font-weight: 700; }
.sum-table tr.sep > * { border-top: 2px solid #C9D3DD; }
.sum-table td.diff { font-weight: 700; white-space: nowrap; }
.sum-table td.diff.good { color: #17663F; }
.sum-table td.diff.bad { color: #A3261E; }
.sum-table th.with .lane-name::before { background: #D7263D; }
.sum-note { margin: 0; font-size: 12px; color: #4a5a6d; }
.sum-note.conservative { margin: 0 0 6px; color: #2A3A4D; }
.sum-actions { margin: 8px 0 0; }
.outcome-btn { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid #9AA6B2; border-radius: 6px; background: #fff; color: #2A3A4D; cursor: pointer; }
.outcome-btn:hover { border-color: #4a5a6d; }
.outcome-btn:focus-visible { outline: 2px solid #2A3A4D; outline-offset: 2px; }
/* explainers under the end table: one line each, open to the study */
.explain { border-top: 1px solid #DCE2E8; font-size: 13px; color: #2A3A4D; }
.explain summary { display: flex; align-items: center; gap: 8px; padding: 7px 0; cursor: pointer; list-style: none; font-weight: 700; }
.explain summary::-webkit-details-marker { display: none; }
.explain summary::after { content: '+'; margin-left: auto; font-weight: 400; font-size: 16px; color: #5B6B7C; }
.explain[open] summary::after { content: '−'; }
.explain .i {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: #13273F; color: #ffffff; font: italic 700 12px/1 Georgia, serif;
}
.explain summary:focus-visible { outline: 2px solid #3A72B8; outline-offset: 2px; }
.explain p { margin: 0 0 8px 26px; line-height: 1.45; max-width: 68ch; }
.explain .cite { padding-left: 10px; border-left: 3px solid #DCE2E8; font-size: 12px; color: #4a5a6d; }
.explain .cite span { display: block; font-size: 11px; font-weight: 700; color: #5B6B7C; }
.explain .cite a { color: #23518C; word-break: break-all; }

/* Popups and dialog */
.maplibregl-popup-content { font-family: var(--font-body); border-radius: var(--radius-m); padding: 12px 14px; max-width: 290px; }
.pop-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; margin: 0 0 2px; }
.pop-meta { margin: 0 0 6px; font-size: 14px; }
.pop-note { margin: 0; font-size: 12px; color: #4a5a6d; }
.start {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 0; border-radius: var(--radius-m);
  padding: 22px 24px 24px; background: var(--console); color: var(--on-console); box-shadow: 0 18px 60px rgba(8, 20, 36, 0.45);
}
.start::backdrop { background: rgba(19, 39, 63, 0.3); backdrop-filter: blur(7px) saturate(0.8); -webkit-backdrop-filter: blur(7px) saturate(0.8); }
.start-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.start h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 0 0 6px; }
.start-scene { margin: 0 0 18px; color: var(--on-console-dim); border-left: 3px solid var(--livery); padding-left: 10px; }
.start-step { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.start-step h3, .start-step legend { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin: 0 0 8px; padding: 0; color: var(--on-console); }
.step-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--on-console); color: var(--console); font-size: 13px; font-weight: 700;
}
.tier-cards { display: grid; gap: 8px; }
.tier-card {
  position: relative; display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--console-line); border-left: 5px solid var(--c); border-radius: var(--radius-s); background: var(--console-2);
}
.tier-card input { position: absolute; opacity: 0; pointer-events: none; }
.tier-card b { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; }
.tier-card small { font-size: 14px; color: var(--on-console-dim); }
.tier-card:has(input:checked) { background: var(--on-console); color: var(--console); border-color: var(--on-console); border-left-color: var(--c); }
.tier-card:has(input:checked) small { color: #33475b; }
.tier-card:has(input:focus-visible) { outline: 3px solid var(--tier-71); outline-offset: 2px; }
.btn.pick-map { width: 100%; margin-top: 8px; }
.race-bar { display: none; }
.pick-bar {
  position: absolute; z-index: 6; top: 14px; left: 252px; right: calc(var(--panel-w) + 56px); margin: 0 auto; width: fit-content;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: var(--radius-m);
  background: var(--console); color: var(--on-console); font-weight: 700; box-shadow: 0 6px 24px rgba(19, 39, 63, 0.4);
  border-left: 4px solid var(--livery);
}
body.picking .panel { pointer-events: none; opacity: 0.45; }
body.picking .badge { display: none; }
body.picking .map { cursor: crosshair; }
.pick-text { display: grid; gap: 2px; }
.pick-text small { font-size: 13px; font-weight: 400; color: var(--tier-71); }
/* zoom hint: a scrolling mouse on desktop, a pinch on touch screens */
.pick-zoom { display: flex; align-items: center; gap: 8px; }
.pick-zoom[hidden] { display: none; }
.pick-zoom svg { flex: none; }
.ico-pinch, .z-pinch { display: none; }
@media (hover: none), (pointer: coarse) {
  .ico-mouse, .z-mouse { display: none; }
  .ico-pinch, .z-pinch { display: inline; }
}
.ico-mouse .wheel { animation: wheel 1.4s ease-in-out infinite; }
.ico-pinch .tip.a { animation: pinch-a 1.6s ease-in-out infinite; }
.ico-pinch .tip.b { animation: pinch-b 1.6s ease-in-out infinite; }
@keyframes wheel { 0%, 20% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(5px); opacity: 0.2; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes pinch-a { 0%, 15% { transform: translate(0, 0); } 65%, 100% { transform: translate(-5px, 5px); } }
@keyframes pinch-b { 0%, 15% { transform: translate(0, 0); } 65%, 100% { transform: translate(5px, -5px); } }
@media (prefers-reduced-motion: reduce) { .ico-mouse .wheel, .ico-pinch .tip { animation: none; } }
.start-note { margin: 8px 0 0; font-size: 13px; color: var(--on-console-dim); }
.start-foot {
  position: sticky; bottom: -24px; margin: 0 -24px -24px; padding: 12px 24px 24px; background: var(--console);
  box-shadow: 0 -12px 16px -12px rgba(8, 20, 36, 0.6); /* status and Start always in view */
}
.start-status { min-height: 1.4em; margin: 0 0 8px; font-size: 14px; color: var(--on-console-dim); }
.start .btn.play { width: 100%; }
.btn.new-sim { width: 100%; margin-top: 8px; }
.about { max-width: 640px; border: 0; border-radius: var(--radius-m); padding: 24px 26px; color: var(--ink); }
.about::backdrop { background: rgba(19, 39, 63, 0.55); }
.about h2 { font-family: var(--font-display); font-weight: 600; margin-top: 0; }
.about p { max-width: 70ch; }
.about .btn { color: var(--ink); border-color: #b7c2cf; }

/* Phone: bottom sheet */
@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .map { grid-row: 1; grid-column: 1; }
  .panel {
    position: absolute; left: 0; right: 0; bottom: 0; grid-column: 1;
    max-height: 36vh; border-radius: 16px 16px 0 0; padding: 6px 16px calc(14px + env(safe-area-inset-bottom));
    gap: 12px; box-shadow: 0 -6px 20px rgba(19, 39, 63, 0.3); transition: max-height 0.25s ease;
  }
  .panel.open { max-height: 82vh; }
  .panel-head, .panel-foot { display: none; }
  .panel.open .panel-head, .panel.open .panel-foot { display: flex; }
  .panel.open .panel-foot { display: grid; }
  .decision { padding: 12px 14px; gap: 6px; }
  .sheet-handle { display: flex; justify-content: center; background: none; border: 0; padding: 12px 0 10px; margin: -6px -16px 0; cursor: grab; touch-action: none; }
  .sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--console-line); }
  .panel-head h1 { font-size: 17px; }
  .watermark { left: 10px; top: 8px; }
  .badge { top: 34px; left: 12px; right: 12px; max-width: none; padding: 8px 12px; }
  .race-side { display: contents; }
  .race-clock { top: 34px; left: 50%; min-width: 0; padding: 6px 14px; }
  /* phones: no lanes while racing (the map is small) */
  .race-lanes:not(.summary) { display: none; }
  .race-lanes { top: 34px; bottom: auto; left: 8px; right: 8px; max-height: 55vh; overflow: auto; }
  .lane { grid-template-columns: 6.5em 1fr; }
  .sum-table { font-size: 13px; }
  .sum-table td small { display: block; margin-left: 0; white-space: normal; }
  .sum-table th, .sum-table td { padding-right: 6px; }
  .sum-table td b { font-size: 15px; }
  .sum-table td.diff { white-space: normal; } /* the table fits a 360 px screen */
  .race-clock strong { font-size: 26px; }
  .race-phase li { font-size: 13px; white-space: normal; }
  .pick-bar { left: 12px; right: 56px; top: 34px; width: auto; margin: 0; justify-content: space-between; font-size: 14px; }
  /* choosing the place on a phone: the card and the verdict step aside, the map gets the screen */
  body.picking .panel, body.picking .badge { display: none; }
  .lap-box { top: auto; bottom: calc(var(--sheet-h, 16vh) + 10px); right: 8px; width: calc(100% - 16px); max-height: 30vh; gap: 8px; }
  .lap-list { font-size: 11.5px; }
  .lap-list li:nth-last-child(n+6) { display: none; } /* the last 4 milestones and 'now'; the end table has all */
  .lap-head { font-size: 12px; }
  .race-clock { max-width: calc(100vw - 24px); }
  .badge strong { font-size: 18px; }
  .badge span { font-size: 13px; }
  .natlegend { display: none; }
  .verdict { font-size: 20px; }
  .watermark strong { font-size: 18px; }
  .watermark span { display: none; }
  /* the race on a phone: the card steps aside, the map gets the screen; clock on top, lap timers and a slim bar below */
  body.racing .panel { display: none; }
  body.racing .race-bar {
    display: flex; gap: 8px; position: absolute; z-index: 5; left: 8px; right: 46px; bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .race-bar .btn { flex: 1; min-height: 42px; box-shadow: 0 2px 10px rgba(19, 39, 63, 0.35); }
  .race-bar .btn:not(.primary) { background: var(--console); color: var(--on-console); }
  /* clock and lap timers together at the top, clear of the zoom buttons; the map below them */
  body.racing .race-side { display: flex; flex-direction: column; gap: 6px; position: absolute; z-index: 3; top: 8px; left: 8px; right: 56px; }
  body.racing .race-side > .race-clock, body.racing .race-side > .lap-box { position: static; transform: none; width: auto; max-width: none; min-width: 0; margin: 0; }
  body.racing .lap-box { height: 22vh; max-height: none; }
  body.racing .race-clock { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 4px 10px; }
  body.racing .race-clock strong { font-size: 22px; }
  body.racing .watermark { top: auto; bottom: calc(60px + env(safe-area-inset-bottom)); }
  .dot-label { font-size: 13px; padding: 2px 7px; }
  body.racing .watermark strong { font-size: 13px; }
  body.racing .race-lanes { top: 8px; max-height: calc(100% - 80px); }
  /* the attribution's (i) sits beside the bar, off the map, so no label lies under it */
  body.racing .maplibregl-ctrl-bottom-right { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
  /* the end: headline on top, the table at most half the screen above the bar, the map in between */
  body.racing.race-summary .badge { display: grid; top: 8px; right: 56px; }
  body.racing.race-summary .race-lanes { top: auto; bottom: calc(62px + env(safe-area-inset-bottom)); max-height: 48vh; }
  body.racing.race-summary .watermark { top: 54px; bottom: auto; } /* under the headline, clear of the route chips */
}
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } .race-dot.red { animation: none; } .race-dot.red.flash::after { display: none; } }