/* Trading Lab: Caiet de laborator + Hartă de traseu.
   Public class contract and audited colour pairs: docs/ui/DESIGN_SYSTEM.md. */
:root {
  color-scheme: light;
  --bg: #F5F1E8;
  --surface: #FFFCF5;
  --surface-raised: #FFFFFF;
  --ink: #20354B;
  --ink-muted: #52616C;
  --rule: #DDD9D0;
  --border: #777B76;
  --primary: #254968;
  --primary-ink: #FFFCF5;
  --primary-bg: #E8EEF2;
  --attention: #934F35;
  --attention-bg: #F6E6DC;
  --success: #35604F;
  --success-bg: #E4EDE5;
  --danger: #953F3F;
  --danger-bg: #F6E6E4;
  --focus: #285889;
  --line-sim: #285889;
  --line-sim-bg: #E8EFF5;
  --line-models: #66528A;
  --line-models-bg: #EEE9F4;
  --line-paper: #27675F;
  --line-paper-bg: #E4EFEA;
  --neutral-bg: #EDE8DE;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Iowan Old Style', 'Charter', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 6px #20354B0D;
  --shadow-raised: 0 8px 24px #20354B1A;
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --ease: ease-out;
  --container: 80rem;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #111E2A;
    --surface: #192A39;
    --surface-raised: #213545;
    --ink: #EDE9DF;
    --ink-muted: #B2BFC5;
    --rule: #354653;
    --border: #8195A0;
    --primary: #BDD2E0;
    --primary-ink: #111E2A;
    --primary-bg: #233746;
    --attention: #E4AC8E;
    --attention-bg: #382E2C;
    --success: #A7C7B4;
    --success-bg: #253A32;
    --danger: #ECB0A7;
    --danger-bg: #3D2D33;
    --focus: #A4C5E6;
    --line-sim: #A4C5E6;
    --line-sim-bg: #20374B;
    --line-models: #C8B9E4;
    --line-models-bg: #302F45;
    --line-paper: #99CFC3;
    --line-paper-bg: #203C39;
    --neutral-bg: #233746;
    --shadow-sm: 0 2px 6px #0000001A;
    --shadow-raised: 0 8px 24px #00000033;
  }
}

/* Base: intrinsic sizing is allowed to shrink, never masked by page clipping. */
*, *::before, *::after { box-sizing: border-box; }
* { min-width: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-6); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--text-base)/1.6 var(--font-body);
  overflow-wrap: anywhere;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
button, input, select, textarea, .btn { max-width: 100%; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[id] { scroll-margin-top: var(--space-6); }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl)); margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
h3 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
h4 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
small { font-size: var(--text-sm); }
strong { font-weight: 650; }
figure, dl { margin: 0; }
dd { margin-inline-start: 0; }
img, picture, svg { max-width: 100%; }
img { height: auto; }
hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: var(--space-6); }
code, pre, kbd, samp { font: inherit; }
.container, main, body > header, body > footer {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-8);
}
main { margin-block: var(--space-8) var(--space-12); }
body > header, .site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8);
  padding-block: var(--space-6); border-bottom: 1px solid var(--rule);
}
body > header > div { flex: 1 1 16rem; }
body > header h1 { margin: 0; }
nav, .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 3px; }
body > footer, .site-footer { padding-block: var(--space-6); border-top: 1px solid var(--rule); color: var(--ink-muted); font-size: var(--text-sm); }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; inset-block-start: var(--space-4); inset-inline-start: var(--space-4); z-index: 100;
  max-width: calc(100% - 2rem); padding: var(--space-3) var(--space-4);
  background: var(--primary); color: var(--primary-ink); border-radius: var(--radius-sm);
}
.muted, .help, .field-help { color: var(--ink-muted); font-size: var(--text-sm); }
.eyebrow { display: block; color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.lead { font-size: var(--text-lg); }
.stack { display: grid; gap: var(--space-6); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-6); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.card-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.card-heading h2, .card-heading h3, .card-heading p { margin-bottom: 0; }

/* Controls: one primary action per step, with ordinary secondary disclosures. */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--primary);
  font-weight: 650; line-height: 1.5; text-align: center; text-decoration: none;
  white-space: normal; overflow-wrap: anywhere; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
button:hover:not(:disabled):not([aria-disabled="true"]), .btn:hover:not([aria-disabled="true"]) { text-decoration: underline; text-underline-offset: 0.2em; border-color: var(--primary); }
.btn-primary, button.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--border); }
.btn-quiet { background: transparent; color: var(--primary); border-color: transparent; }
.btn-small { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); min-height: 44px; }
button:disabled, .btn[aria-disabled="true"], input:disabled, select:disabled, textarea:disabled {
  color: var(--ink-muted); background: var(--neutral-bg); border-color: var(--border); cursor: not-allowed;
}
button[aria-busy="true"] { cursor: progress; }
button.danger, .btn-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.card, .panel, .person-card, .result-card, .guide {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--space-6);
}
.panel { margin-bottom: var(--space-6); }
.card > :last-child, .panel > :last-child, .callout > :last-child, .margin-note > :last-child { margin-bottom: 0; }

/* The transit line runs behind explicit, accessible station numbers. */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: var(--space-6) 0; }
.station { position: relative; display: grid; align-content: start; justify-items: start; gap: var(--space-2); padding-inline-end: var(--space-4); color: var(--ink-muted); font-size: var(--text-sm); }
.station::before { content: ""; position: absolute; inset-block-start: 15px; inset-inline: 0; height: 2px; background: var(--border); }
.station:last-child::before { display: none; }
.station-dot {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px;
  border: 2px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink-muted);
  font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.station.done::before { background: var(--primary); }
.station.done .station-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.station.current, .station[aria-current="step"] { color: var(--ink); font-weight: 650; }
.station.current .station-dot, .station[aria-current="step"] .station-dot { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 3px; color: var(--primary); }
.station.next .station-dot { border-style: dashed; }
.here-marker { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--primary-ink); background: var(--primary); font: 650 var(--text-xs)/1.5 var(--font-body); }
.mode-sim { --mode-color: var(--line-sim); --mode-bg: var(--line-sim-bg); }
.mode-models { --mode-color: var(--line-models); --mode-bg: var(--line-models-bg); }
.mode-paper { --mode-color: var(--line-paper); --mode-bg: var(--line-paper-bg); }
.mode-line { padding: var(--space-4); border-inline-start: 4px solid var(--mode-color, var(--primary)); background: var(--mode-bg, var(--primary-bg)); color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-4) 0; }
.legend-chip { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid currentColor; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); color: var(--mode-color, var(--primary)); background: var(--mode-bg, var(--primary-bg)); font-size: var(--text-sm); }
.legend-chip::before { content: ""; flex: 0 0 20px; height: 3px; background: currentColor; }
.callout { border-inline-start: 3px solid var(--primary); background: var(--primary-bg); color: var(--ink); padding: var(--space-4); margin-block: var(--space-4); }
.callout-attention { border-color: var(--attention); background: var(--attention-bg); }
.margin-note { padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--border); color: var(--ink-muted); }
.margin-note h3, .margin-note h4 { font-style: italic; color: var(--primary); }
summary { min-height: 44px; padding-block: var(--space-2); cursor: pointer; color: var(--primary); font-weight: 650; }
summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
details[open] > summary { margin-bottom: var(--space-3); }
.term-toggle { font-size: var(--text-sm); margin-block: var(--space-3); }
.tech-details { border-block-start: 1px solid var(--rule); margin-top: var(--space-4); padding-top: var(--space-2); }
pre { max-width: 100%; max-height: 28rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space-4); background: var(--neutral-bg); color: var(--ink); border-radius: var(--radius-sm); tab-size: 2; }
/* Monospace is an exception for technical data, never for ordinary UI copy. */
.tech-details pre, .tech-details code, details pre { font-family: monospace; font-size: var(--text-sm); }

.badge, .state-pill { display: inline-flex; align-items: center; align-self: start; gap: var(--space-2); max-width: 100%; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--neutral-bg); color: var(--ink-muted); font-size: var(--text-sm); font-weight: 650; }
.pill-active, .pill-ok, .badge[data-tone="approved"] { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.pill-invited, .pill-attention, .badge[data-tone="pending"] { background: var(--attention-bg); color: var(--attention); border-color: var(--attention); }
.pill-disabled { background: var(--neutral-bg); color: var(--ink-muted); border-color: var(--border); }
.pill-running { background: var(--primary-bg); color: var(--primary); border-color: var(--primary); }
.pill-failed { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Notices occupy real document space; no sticky/absolute status overlays. */
.notice, .status, .action-status, #notice, #users-notice, #password-notice {
  position: static; padding: var(--space-3) var(--space-4); margin-block: var(--space-4) var(--space-6);
  border: 1px solid var(--rule); border-inline-start: 3px solid var(--primary);
  background: var(--primary-bg); color: var(--ink); border-radius: var(--radius-sm); overflow-wrap: anywhere;
}
.notice:empty, .status:empty, .action-status:empty, #notice:empty, #users-notice:empty, #password-notice:empty, .help:empty { display: none; }
[data-tone="error"], .field-error, .failure { color: var(--danger); }
:is(.notice, .status, .action-status, #notice, #users-notice, #password-notice)[data-tone="error"] { border-color: var(--danger); background: var(--danger-bg); }
:is(.notice, .status, .action-status)[data-tone="attention"] { border-color: var(--attention); background: var(--attention-bg); color: var(--attention); }
:is(.notice, .status, .action-status)[data-tone="success"] { border-color: var(--success); background: var(--success-bg); color: var(--success); }

/* Forms: labels remain visible; help/error copy is tied with aria-describedby. */
.field { display: grid; gap: var(--space-2); margin-block: var(--space-4); }
label { display: block; font-weight: 600; margin-block: var(--space-4) var(--space-2); }
.field label { margin: 0; }
input, select, textarea {
  display: block; width: 100%; min-height: 44px; margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink);
}
.field input, .field select, .field textarea { margin-top: 0; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }
textarea { min-height: 7rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: 20px; height: 20px; min-height: 0; flex-shrink: 0; margin: 0; accent-color: var(--primary); }
.inline-label { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-weight: 400; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], input:user-invalid, select:user-invalid, textarea:user-invalid { border: 2px solid var(--danger); }
.field-help, .field-error { margin: 0; font-size: var(--text-sm); }
.password-control { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: start; }
.password-control input { flex: 1 1 12rem; width: auto; margin: 0; }
.password-toggle { flex: 0 1 auto; }
.password-meter { display: block; color: var(--ink-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.password-meter[data-state="valid"] { color: var(--success); }
.password-meter[data-state="invalid"] { color: var(--danger); }
progress, meter { display: block; width: 100%; max-width: 100%; height: var(--space-2); accent-color: var(--primary); margin-block: var(--space-2) var(--space-4); }
progress::-webkit-progress-bar { background: var(--neutral-bg); }
progress::-webkit-progress-value { background: var(--primary); }
progress::-moz-progress-bar { background: var(--primary); }
dialog, .dialog {
  width: min(42rem, calc(100% - 2rem)); max-width: calc(100% - 2rem);
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto;
  margin: auto; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink); background: var(--surface-raised); box-shadow: var(--shadow-raised);
}
dialog::backdrop, .dialog::backdrop { background: #111E2AB3; }
.empty-state, .empty { padding: var(--space-6); margin-block: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink-muted); }
.empty-example { margin-block: var(--space-4); padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--primary); color: var(--ink); font-family: var(--font-heading); font-size: var(--text-lg); }
/* A disclosure popup remains in flow, so it cannot cover a person's next action. */
.menu { max-width: 100%; }
.menu > summary { width: fit-content; }
.menu-list { list-style: none; display: grid; gap: var(--space-2); width: 100%; max-width: 24rem; padding: var(--space-3); margin: var(--space-2) 0 0; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.menu-list button, .menu-list a { width: 100%; justify-content: flex-start; text-align: start; }
.menu-list a { display: flex; align-items: center; min-height: 44px; padding: var(--space-2); }
.icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 20px; height: 20px; flex-basis: 20px; }
.diagram { margin: var(--space-6) 0; padding: var(--space-4); border-block: 1px solid var(--rule); background: var(--surface); }
.diagram picture, .diagram img, .diagram svg { display: block; width: 100%; max-width: 100%; height: auto; }
.diagram figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); max-width: var(--measure); }
.result-card { display: grid; gap: var(--space-3); }
.result-value { font-family: var(--font-heading); font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); line-height: 1.2; font-variant-numeric: tabular-nums; }
.result-unit { font-family: var(--font-body); font-size: var(--text-base); }
.result-label { color: var(--ink-muted); font-size: var(--text-sm); }
.result-tag { justify-self: start; color: var(--ink-muted); font-size: var(--text-xs); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.person-card { border-block-start: 2px solid var(--primary); }
.person-card + .person-card { margin-top: var(--space-6); }
.person-card header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.guide { max-width: 100%; }
dialog.guide { width: min(64rem, calc(100% - 2rem)); max-width: calc(100% - 2rem); }
.glossary { margin-block: var(--space-6); }
.glossary dt { font-weight: 650; border-block-start: 1px solid var(--rule); padding-top: var(--space-4); }
.glossary dd { margin: var(--space-2) 0 var(--space-4); max-width: var(--measure); }
.choice-card { display: flex; align-items: start; gap: var(--space-4); width: 100%; min-height: 88px; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-align: start; text-decoration: none; }
.choice-card strong { display: block; font: 500 var(--text-xl)/1.3 var(--font-heading); }
.choice-card:hover, .choice-card[aria-pressed="true"], .choice-card:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.choice-card:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }

/* Compatibility with the existing pages while their owners replace markup. */
.mandate-bar, .objective-banner { display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-6); }
.mandate-bar > div, .objective-banner > div { flex: 1 1 20rem; }
.mandate-picker { flex: 1 1 15rem; margin: 0; }
.mandate-bar details { flex: 1 1 15rem; }
.objective-banner { margin-block: var(--space-8); }
.section-nav { border-block-end: 1px solid var(--rule); padding-block-end: var(--space-4); margin-block-end: var(--space-6); }
.section-nav span { color: var(--ink-muted); font-size: var(--text-sm); }
.section-title { font-size: var(--text-xl); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding: 0; margin-block: var(--space-6); list-style: none; }
.steps li { display: flex; align-items: start; gap: var(--space-3); }
.steps li > span { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid var(--primary); border-radius: 50%; color: var(--primary); background: var(--surface); }
.steps small { display: block; color: var(--ink-muted); }
.workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.configuration, .review, .execution { border-block-start: 2px solid var(--primary); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-4); margin-block: var(--space-4); }
.facts dt { color: var(--ink-muted); }
.facts .facts { display: block; margin: 0; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-block: var(--space-4); }
.metrics > div { background: var(--neutral-bg); padding: var(--space-4); border-radius: var(--radius-sm); }
.metrics dt { color: var(--ink-muted); font-size: var(--text-sm); }
.metrics dd { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.progress-label { font-weight: 650; font-variant-numeric: tabular-nums; }
.paper-session { padding: var(--space-4); margin-top: var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius); }
.messages { max-height: 24rem; overflow: auto; padding: var(--space-4); border: 1px solid var(--rule); }
.message, .model-row, .user-row { padding-block: var(--space-4); border-bottom: 1px solid var(--rule); }
.message p { white-space: pre-wrap; }
.message-meta { color: var(--ink-muted); font-size: var(--text-sm); }
.job { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--rule); }
.row-copy { flex: 1 1 18rem; }
.catalog, #history { margin-top: var(--space-8); }
#proposal { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
#source { white-space: pre-wrap; }
#user-control { max-width: 64rem; margin-inline: auto; }
#local, #keycloak { max-width: 40rem; margin-inline: auto; }

@media (max-width: 760px) {
  .container, main, body > header, body > footer { padding-inline: var(--space-4); }
  main { margin-block-start: var(--space-4); }
  .card, .panel, .person-card, .result-card, .guide, dialog, .dialog, .choice-card { padding: var(--space-4); }
  .workflow-grid { grid-template-columns: minmax(0, 1fr); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .stepper { grid-template-columns: minmax(0, 1fr); }
  .station { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: 0 0 var(--space-6); }
  .station > :not(.station-dot) { grid-column: 2; }
  .station-dot { grid-row: 1 / span 3; }
  .station::before { inset-inline-start: 15px; inset-inline-end: auto; inset-block-start: 0; height: 100%; width: 2px; }
  .station:last-child { padding-block-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .station-dot, .here-marker, .badge, .btn, .choice-card { border-color: ButtonText; }
  .station::before, .legend-chip::before { background: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}