@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(vendor/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(vendor/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Serif'; font-weight: 500; font-display: swap; src: url(vendor/fonts/ibm-plex-serif-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: 'IBM Plex Serif'; font-weight: 500; font-display: swap; src: url(vendor/fonts/ibm-plex-serif-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(vendor/fonts/ibm-plex-serif-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(vendor/fonts/ibm-plex-serif-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Sampled from the 1912 section drawing: stained paper, iron-gall ink, salmon wall wash, blue pipe lines, violet stamp. */
  --bg: #e9cfa4;
  --paper: #efd9b3;
  --paper-2: #f6e6c8;
  --paper-3: #fbf1dd;
  --panel:
    radial-gradient(ellipse at 18% 8%, rgba(190, 134, 78, .20), transparent 58%),
    radial-gradient(ellipse at 88% 92%, rgba(172, 112, 60, .18), transparent 52%),
    var(--paper);
  --line: rgba(59, 42, 30, .28);
  --line-2: rgba(59, 42, 30, .62);
  --text: #33241a;
  --muted: #65503f;
  --accent: #e3a184;
  --stamp: #4f4296;
  --stamp-tint: rgba(79, 66, 150, .13);
  --focus: #2f5f9e;
  --pin: #d42a20;
  --pin-done: #9c2a20;
  --on-pin: #fffaf0;
  --ring: #fff6e6;
  --ink-hover: #4a3527;
  --err: #8f2f1c;      /* the route points in the scene (#e5342a), a shade darker so white numerals pass AA */
  --route: #b52cf0;    /* the violet route ribbon; decorative only, never text */
  --c-high: #3f7a4c; --c-medium: #9a6d17; --c-low: #b4472d; --c-other: #5f6f83; --c-unknown: #8a7a66;
  --r: 2px;
  --gap: 16px;
  --tap: 40px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --top-h: 56px;
  --dock-h: 72px;
  --shadow: 0 1px 0 rgba(59, 42, 30, .35), 0 8px 22px rgba(59, 42, 30, .22);
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --serif: 'IBM Plex Serif', Georgia, serif;
  --script: 'Snell Roundhand', 'Savoye LET', 'Apple Chancery', 'Segoe Script', 'URW Chancery L', var(--serif);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
@media (pointer: coarse) { :root { --tap: 44px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 400 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; flex: none; }
.muted { color: var(--muted); }
.note { margin: var(--s-2) 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#app { position: fixed; inset: 0; }
#app canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; }
#labels > * { pointer-events: auto; }

/* ---------- paper surfaces: one sheet style, a ruled inner frame like the drawing's border ---------- */
.sheet, #stop, #card, .pop, #dock, .brand, #help, #sec-chip {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); color: var(--text);
}
#stop, #card, .pop, #help { outline: 1px solid var(--line); outline-offset: -5px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); min-width: var(--tap); padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper-2); color: var(--text);
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, transform .1s;
}
.btn:hover { background: var(--paper-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; transform: none; background: var(--paper-2); }
.btn.icon { padding: 0; }
.btn.small { min-height: 32px; min-width: 32px; }
.btn.small svg { width: 16px; height: 16px; }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--paper-3); }
.btn.primary:hover { background: var(--ink-hover); }
.btn.wide { width: 100%; }
.btn.active { background: var(--stamp); border-color: var(--stamp); color: var(--paper-3); }
.btn svg { width: 20px; height: 20px; }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper-2); }
.seg > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border: 0; background: none;
  font: 600 15px/1 var(--sans); color: var(--text); transition: background-color .15s, color .15s;
}
.seg > button + button { border-left: 1px solid var(--line); }
.seg > button:hover { background: var(--paper-3); }
.seg > button[aria-pressed="true"] { background: var(--stamp); color: var(--paper-3); }
.seg > button:focus-visible { outline-offset: -3px; position: relative; z-index: 1; }

/* ---------- top bar ---------- */
#topbar {
  position: fixed; top: calc(var(--gap) + var(--safe-t)); left: calc(var(--gap) + var(--safe-l)); right: calc(var(--gap) + var(--safe-r));
  display: flex; gap: var(--s-3); align-items: center; pointer-events: none; z-index: 6;
}
#topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: var(--s-3); padding: 6px 18px 6px 8px; min-height: var(--top-h); }
.mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--stamp); outline: 1px solid var(--stamp); outline-offset: -5px; color: var(--stamp); font: 500 20px/1 var(--serif); transform: rotate(-8deg); opacity: .85; flex: none; }
.brand h1 { margin: 0; font: 500 27px/1 var(--script); letter-spacing: .01em; white-space: nowrap; }
#topbar .tools { margin-left: auto; display: flex; gap: var(--s-2); }
#topbar .btn { box-shadow: var(--shadow); }
#topbar .btn.lang { font-size: 13px; letter-spacing: .06em; }

#sec-chip {
  position: fixed; z-index: 5; top: calc(var(--gap) + var(--safe-t) + var(--top-h) + var(--s-3)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-2); max-width: calc(100% - 2 * var(--gap)); padding: 4px 4px 4px 12px; font: 600 15px/1.2 var(--sans);
}
#sec-chip > svg { color: var(--stamp); }
#sec-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- popovers (sections, settings) ---------- */
.pop {
  position: fixed; z-index: 7; top: calc(var(--gap) + var(--safe-t) + var(--top-h) + var(--s-2)); right: calc(var(--gap) + var(--safe-r));
  width: min(360px, calc(100% - 2 * var(--gap))); max-height: calc(100dvh - var(--top-h) - var(--dock-h) - 4 * var(--gap) - var(--safe-t) - var(--safe-b));
  overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px 22px;
  animation: drop .22s var(--ease);
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.pop h2 { margin: 0; font: 500 18px/1.25 var(--serif); }
.pop h3, .pop legend { margin: var(--s-5) 0 var(--s-2); padding: 0; font: 600 13px/1.2 var(--sans); color: var(--muted); }
.pop fieldset { border: 0; margin: 0; padding: 0; }
.pop legend { margin-top: 0; }
.pop fieldset + fieldset { margin-top: var(--s-5); }
.pop .seg { display: flex; }
.pop .seg > button { flex: 1; padding: 0 6px; }
.pop .floors > button { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.range-row { display: flex; align-items: center; gap: var(--s-3); }
.range-row input { flex: 1; accent-color: var(--stamp); min-height: var(--tap); }
.range-row output { font: 500 18px/1 var(--serif); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.sec-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sec-items button {
  display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left; font: 400 15px/1.3 var(--sans); color: var(--text);
}
.sec-items button:hover { background: var(--paper-3); }
.sec-items button[aria-pressed="true"] { background: var(--stamp-tint); color: var(--stamp); font-weight: 600; }
.sec-items button:focus-visible { outline-offset: -3px; }
.switch { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); margin: var(--s-4) 0 var(--s-3); font-size: 15px; cursor: pointer; }
.switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--stamp); flex: none; }
.pop-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.pop-foot .btn { flex: 1; }

/* ---------- dock: route stepper drawn like the ribbon on the ground ---------- */
#dock {
  position: fixed; z-index: 5; left: 50%; bottom: calc(var(--gap) + var(--safe-b)); transform: translateX(-50%);
  width: min(1000px, calc(100% - 2 * var(--gap) - var(--safe-l) - var(--safe-r))); min-height: var(--dock-h);
  display: grid; grid-template-columns: auto auto auto auto minmax(0, 1fr); grid-template-areas: "modes prev pins next cap";
  align-items: center; gap: var(--s-1); padding: 10px 18px 10px 12px;
}
#dock .modes { grid-area: modes; margin-right: var(--s-4); }
#prev-btn { grid-area: prev; } #next-btn { grid-area: next; } #pins { grid-area: pins; } #dock .caption { grid-area: cap; margin-left: var(--s-4); }
#dock .modes svg { width: 18px; height: 18px; }
.btn.step { background: transparent; border-color: transparent; }
.btn.step:hover:not(:disabled) { background: var(--paper-3); border-color: var(--line); }
#pins { position: relative; display: flex; margin: 0; padding: 0; list-style: none; }
#pins::before { content: ''; position: absolute; left: 22px; right: 22px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--route); opacity: .9; }
#pins li { position: relative; }
#pins button {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  font: 600 15px/1 var(--sans); color: var(--on-pin); font-variant-numeric: tabular-nums;
}
#pins button::before {
  content: ''; position: absolute; z-index: -1; inset: 8px; border-radius: 50%; background: var(--pin);
  box-shadow: 0 0 0 2px var(--ring), 0 1px 3px rgba(59, 42, 30, .45); transition: transform .2s var(--ease), box-shadow .2s;
}
#pins button:hover::before { transform: scale(1.12); }
#pins button.done::before { background: var(--pin-done); }
#pins button[aria-current]::before { transform: scale(1.22); box-shadow: 0 0 0 2px var(--ring), 0 0 0 4.5px var(--text), 0 2px 6px rgba(59, 42, 30, .5); }
#pins button:focus-visible { outline-offset: -1px; border-radius: 50%; }
.caption { min-width: 0; }
.caption p { margin: 0; }
#cap-title { font: 500 18px/1.25 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-n { margin-right: 4px; font: 600 13px/1 var(--sans); color: var(--stamp); font-variant-numeric: tabular-nums; }
#cap-credit { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: italic 400 13px/1.3 var(--serif); color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#cap-credit svg { width: 15px; height: 15px; }

/* ---------- stop sidebar (route.js renders it) ---------- */
#stop {
  position: fixed; z-index: 4; top: calc(var(--gap) + var(--safe-t) + var(--top-h) + var(--s-3)); right: calc(var(--gap) + var(--safe-r));
  bottom: calc(var(--dock-h) + 2 * var(--gap) + var(--safe-b)); width: min(380px, calc(100% - 2 * var(--gap)));
  overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 24px; animation: slide .3s var(--ease);
}
@keyframes slide { from { opacity: 0; transform: translateX(12px); } }
.stop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.stop-toggle { display: none !important; }
.stop-toggle svg { transition: transform .2s var(--ease); }
#stop.open .stop-toggle svg { transform: rotate(180deg); }
.stop-eyebrow { font: 600 13px/1 var(--sans); color: var(--stamp); }
#stop h2 { margin: 6px 0 4px; font: 500 30px/1.1 var(--serif); }
#stop h3 { margin: 20px 0 6px; font: 600 13px/1.2 var(--sans); color: var(--muted); }
#stop p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 65ch; }
#stop figure { margin: 0 0 16px; }
#stop figure img { display: block; width: 100%; height: auto; min-height: 60px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper-2); filter: sepia(.25); }
#stop figure a:hover img, #stop figure a:focus-visible img { filter: none; }
#stop figcaption { margin-top: 6px; font: italic 400 13px/1.4 var(--serif); color: var(--muted); }

/* ---------- info card ---------- */
#card {
  position: fixed; z-index: 5; top: calc(var(--gap) + var(--safe-t) + var(--top-h) + var(--s-3)); left: calc(var(--gap) + var(--safe-l));
  width: min(360px, calc(100% - 2 * var(--gap))); max-height: calc(100dvh - var(--top-h) - var(--dock-h) - 5 * var(--gap) - var(--safe-t) - var(--safe-b));
  overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 20px; animation: drop .22s var(--ease);
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.card-head .btn { margin: -6px -8px 0 0; background: transparent; border-color: transparent; }
.card-head .btn:hover { background: var(--paper-3); border-color: var(--line); }
#card .eyebrow { margin: 0 0 4px; font: 600 13px/1 var(--sans); color: var(--stamp); }
#card h2 { margin: 0; font: 500 24px/1.15 var(--serif); }
.card-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
#card h3 { margin: var(--s-4) 0 4px; font: 600 13px/1.2 var(--sans); color: var(--muted); }
.card-fn { margin: 0; font-size: 15px; line-height: 1.55; }
.conf { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-4); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(246, 230, 200, .65); }
.conf p { margin: 0; font-size: 15px; line-height: 1.4; }
.conf p span { color: var(--muted); }
.conf-dots { display: flex; gap: 3px; padding-top: 4px; }
.conf-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c); }
.conf { --c: var(--c-unknown); --n: 0; }
.conf-high { --c: var(--c-high); } .conf-medium { --c: var(--c-medium); } .conf-low { --c: var(--c-low); } .conf-other { --c: var(--c-other); }
.conf-high i, .conf-medium i:nth-child(-n+2), .conf-low i:first-child, .conf-other i:first-child { background: var(--c); }
.sources { margin-top: var(--s-3); }
.sources summary { display: flex; align-items: center; gap: 6px; min-height: var(--tap); cursor: pointer; font: 600 15px/1 var(--sans); list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.sources[open] summary svg { transform: rotate(180deg); }
.sources ul { margin: 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.45; }
.sources li + li { margin-top: 4px; }
.sources a { color: var(--focus); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.card-actions .btn { flex: 1 1 auto; }
.pin-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pin); color: var(--on-pin); font: 600 13px/1 var(--sans); box-shadow: 0 0 0 1.5px var(--ring); }

/* ---------- joystick (nav.js mounts nipplejs here on touch screens) ---------- */
#joystick { position: fixed; z-index: 4; left: calc(var(--gap) + var(--safe-l)); bottom: calc(var(--dock-h) + 2 * var(--gap) + var(--safe-b)); width: 150px; height: 150px; visibility: hidden; }
body.walking #joystick { visibility: visible; }
@media (pointer: fine) { #joystick { display: none; } }

/* ---------- toast ---------- */
#toast {
  position: fixed; z-index: 9; left: 50%; bottom: calc(var(--dock-h) + 2 * var(--gap) + var(--safe-b)); transform: translate(-50%, 8px);
  max-width: calc(100% - 2 * var(--gap)); padding: 10px 16px; border-radius: var(--r); background: var(--text); color: var(--paper-3);
  font: 500 15px/1.35 var(--sans); text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#stats { position: fixed; left: var(--gap); top: 90px; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font: 12px/1.4 ui-monospace, monospace; white-space: pre; z-index: 8; pointer-events: none; }

/* ---------- help ---------- */
#help { width: min(760px, calc(100% - 2 * var(--gap))); max-height: calc(100dvh - 2 * var(--gap)); padding: 24px 28px 26px; }
#help::backdrop { background: rgba(51, 36, 26, .45); }
#help h2 { margin: 0 0 var(--s-2); font: 500 24px/1.2 var(--serif); }
#help h2:focus { outline: none; }
.help-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-2) var(--s-6); }
.help-cols h3 { margin: var(--s-4) 0 var(--s-2); font: 600 13px/1.2 var(--sans); color: var(--muted); }
.help-cols dl { margin: 0; }
.help-cols dl div { padding: 6px 0; border-top: 1px solid var(--line); }
.help-cols dt { font: 600 15px/1.35 var(--sans); }
.help-cols dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
#help form { margin-top: var(--s-5); }

/* ---------- loading / entry ---------- */
#loading {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--gap); overflow-y: auto;
  background: radial-gradient(ellipse at 22% 18%, rgba(190,134,78,.28), transparent 45%), radial-gradient(ellipse at 80% 78%, rgba(172,112,60,.24), transparent 50%), radial-gradient(ellipse at 50% 40%, #f3e0bd 0%, var(--bg) 70%);
  transition: opacity .6s, visibility .6s;
}
#loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
.load-box { width: min(560px, 100%); text-align: center; }
.load-year { font: 600 15px/1 var(--sans); letter-spacing: .5em; color: var(--stamp); margin-bottom: 10px; padding-left: .5em; }
.load-box h1 { margin: 0; font: 500 clamp(56px, 14vw, 96px)/1.1 var(--script); letter-spacing: .01em; }
.load-sub { margin: 10px 0 0; font: italic 400 18px/1.4 var(--serif); }
.load-lead { margin: 14px auto 28px; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.bar { height: 8px; border: 1px solid var(--line-2); background: var(--paper-2); overflow: hidden; }
#load-bar { height: 100%; width: 0; background: var(--route); transition: width .25s; }
#load-step { margin: 14px 0 0; font-size: 15px; color: var(--muted); min-height: 1.4em; }
#load-start { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); animation: rise .4s var(--ease); }
#load-start .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
#load-error { padding: 14px 16px; border: 1px solid var(--c-low); border-radius: var(--r); background: var(--paper-2); text-align: left; }
#load-error p { margin: 0 0 8px; }
#load-error-msg { font-weight: 600; color: var(--err); }
#load-error-detail { font: 12px/1.4 ui-monospace, monospace; word-break: break-word; }

/* ---------- tablets and phones ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  #dock { grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "prev pins next cap" "modes modes modes modes"; row-gap: var(--s-2); }
  #dock .modes { justify-self: start; margin-right: 0; }
  :root { --dock-h: 124px; }
}
@media (max-width: 760px) {
  :root { --gap: 10px; --top-h: 50px; --dock-h: 128px; }
  .brand { padding: 4px 12px 4px 6px; gap: var(--s-2); }
  .mark { width: 32px; height: 32px; font-size: 17px; }
  .brand h1 { font-size: 21px; }
  #topbar { gap: var(--s-2); }
  #topbar .lbl { display: none; }
  #topbar #sec-btn { padding: 0; }
  #back-btn span { display: none; }
  #back-btn { padding: 0; }

  /* row 1: previous, caption, next, one overview/walk toggle; row 2: the seven pins across the full width */
  #dock {
    grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "prev cap next modes" "pins pins pins pins";
    gap: var(--s-1) var(--s-1); padding: 6px 6px 4px;
  }
  #dock .caption { margin-left: var(--s-1); }
  #dock .modes { margin: 0 0 0 var(--s-1); }
  #dock .modes span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #dock .modes > button { padding: 0; width: 44px; }
  #dock .modes > button[aria-pressed="true"] { display: none; }
  #dock .modes > button + button { border-left: 0; }
  #pins { justify-content: space-between; }
  #pins li { flex: 1; display: flex; justify-content: center; }
  #pins::before { left: 22px; right: 22px; }
  
  .brand:has(~ #back-btn:not([hidden])) h1 { display: none; }

  .pop { left: calc(var(--gap) + var(--safe-l)); right: calc(var(--gap) + var(--safe-r)); width: auto; }

  /* stop and card become sheets above the dock */
  #stop, #card {
    top: auto; left: calc(var(--gap) + var(--safe-l)); right: calc(var(--gap) + var(--safe-r)); width: auto;
    bottom: calc(var(--dock-h) + 2 * var(--gap) + var(--safe-b)); animation-name: rise;
  }
  #stop { max-height: 136px; overflow: hidden; padding: 14px 16px 16px; }
  #stop.open { max-height: min(58dvh, calc(100dvh - var(--dock-h) - var(--top-h) - 6 * var(--gap))); overflow-y: auto; }
  #stop:not(.open)::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 36px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
  .stop-toggle { display: inline-flex !important; margin: -4px -6px 0 0; background: transparent; border-color: transparent; }
  #stop h2 { font-size: 24px; }
  #card { max-height: min(62dvh, calc(100dvh - var(--dock-h) - var(--top-h) - 6 * var(--gap))); padding: 14px 16px 16px; }
  body.has-card #stop { display: none; }
  #sec-chip { left: calc(var(--gap) + var(--safe-l)); right: calc(var(--gap) + var(--safe-r)); transform: none; justify-content: space-between; }
  body.has-section.at-stop #sec-chip { display: none; }
}
@media (max-width: 380px) { .brand h1 { font-size: 18px; } #topbar .btn.lang { min-width: 40px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  #pins button::before { forced-color-adjust: none; }
  .seg > button[aria-pressed="true"], .sec-items button[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -4px; }
}

#ar-btn { background: #7d3f84; border-color: #7d3f84; color: #fff; font-weight: 700; text-decoration: none; }
#ar-btn:hover { background: #69336f; }