/* Page styles for "The Byzantine Generals Problem". Builds on tokens.css + components.css.

   .night  A scoped "night map" theme: it redefines the kit's token names (never new names) to a
           moonlit palette, so anything inside, including widgets that use var(--surface),
           var(--ink), var(--c1)… automatically renders as part of the night scene in both page themes.
   Colour meaning across the whole piece (widgets too):
     ATTACK  = var(--c2) + sword icon (#i-attack)      RETREAT = var(--c1) + U-turn icon (#i-retreat)
     a MESSAGE carrying either = envelope (#i-msg) in that colour + the quoted word, e.g. ✉ “ATTACK”
       (the sword / U-turn is kept for what a general decides or does, never for a message in transit)
     traitor = var(--c5) + mask icon (#i-mask)         doubt   = var(--c4) + "?" icon (#i-q)
     goal met / agree = var(--good) + check (#i-check) failure  = var(--bad) + X (#i-x) */

.night {
  color-scheme: dark;
  --bg: #0a0f1e; --surface: #0f1729; --surface-2: #18223b;
  --ink: #eef2fb; --ink-2: #c5cde1; --ink-3: #97a3c2; --ink-4: #4d5a7c; --line: #27334f;
  --accent: #9db7ff; --accent-ink: #0a0f1e; --focus: #c2d1ff;
  --good: #63d6a0; --bad: #ff8686; --warn: #ffc85e;
  --c1: #8fb0ff; --c2: #ff8090; --c3: #4fd1ab; --c4: #ffc85e; --c5: #c9adff; --c6: #a3adb5;
  --c1-soft: #8fb0ff2e; --c2-soft: #ff80902e; --c3-soft: #4fd1ab2e; --c4-soft: #ffc85e2e;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .45);
  color: var(--ink);
}

:root { --pbar-h: 40px; --col: 42rem; }  /* prose column ≈ 66ch of body serif; in rem so headings and cards line up with it */
html { scroll-padding-top: calc(var(--pbar-h) + var(--sp-2)); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- progress bar ------------------------------------------------------------------------- */
.pbar { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1);
  height: var(--pbar-h); padding: 0 var(--sp-2); align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
.pbar a { display: flex; flex-direction: column; justify-content: center; gap: 4px; text-decoration: none; min-width: 0; height: var(--tap); margin: -2px 0; }  /* 44px hit area; the visible bar stays 40px */
.pbar-label { font: 600 11px/12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-2); }
.pbar a.on .pbar-label, .pbar a.done .pbar-label { color: var(--ink); }
.pbar-track { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pbar-fill { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--accent); }

/* ---- page frame: no rail, so centre the column ------------------------------------------ */
.d-main > section { max-width: none; }
.d-main > * { margin-inline: auto; }
.d-main > .d-wide, .d-main > section > .d-wide { margin-inline: auto; }
.d-main > *, .d-main section > * { max-width: var(--col); margin-inline: auto; }
.d-main section > .d-wide, .d-main section > .scrolly-wide { max-width: min(100%, 960px); }
.d-main section > h2 { margin-top: var(--sp-4); }
.d-main section + section { margin-top: var(--sp-10); }
.d-page { padding-bottom: var(--sp-8); }

.sec-kicker { display: flex; align-items: center; gap: var(--sp-1); font: 600 var(--fs-caption)/var(--lh-caption) var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 auto !important; }
.sec-kicker svg { width: 22px; height: 22px; flex: none; }
.sec-kicker + h2 { margin-top: var(--sp-1) !important; }

/* ---- hero: the night map --------------------------------------------------------------- */
.hero { background: radial-gradient(120% 80% at 70% 0%, var(--surface-2) 0%, var(--bg) 62%); border-bottom: 1px solid var(--line); }
.hero-inner { max-width: 1040px; margin: 0 auto; padding: var(--sp-8) var(--sp-2) var(--sp-6); }
.hero .d-kicker { color: var(--accent); }
.hero h1 { font: 750 var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: -0.025em; margin: var(--sp-1) 0 var(--sp-2); max-width: 20ch; text-wrap: balance; color: var(--ink); }
.hero .d-standfirst { color: var(--ink-2); }
.hero .d-meta { margin-top: var(--sp-3); }
.hero .d-meta div { color: var(--ink-2); }
.hero .d-meta b { color: var(--ink-3); }
@media (max-width: 599px) {
  .hero .d-meta { flex-direction: column; gap: 4px; }
  .hero .d-meta b { display: inline; margin-right: var(--sp-1); }
}
.hero-fig { margin: var(--sp-4) 0 0; }
.hero-map { position: relative; }
.hero-svg { max-width: 100%; }
.only-narrow { display: none !important; }
@media (max-width: 599px) {
  .only-wide { display: none !important; }
  .only-narrow { display: block !important; }
  .hero-inner { padding-top: var(--sp-5); }
}
.hero-replay { display: flex; justify-content: flex-end; margin-top: var(--sp-1); }
.night .d-replay { color: var(--ink-2); border-color: var(--line); }
.hero-replay .d-replay { min-height: var(--tap); padding: 0 var(--sp-2); }

/* map drawing (all colours via scoped tokens) */
.hero-svg .star { fill: var(--ink-2); }
.hero-svg .ground { fill: var(--surface-2); opacity: .55; }
.hero-svg .road { fill: none; stroke: var(--ink-4); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.hero-svg .wall { fill: var(--surface); stroke: var(--ink-3); stroke-width: 2; }
.hero-svg .crenel { fill: none; stroke: var(--ink-3); stroke-width: 7; stroke-dasharray: 5 5; }
.hero-svg .bldg { fill: var(--surface-2); stroke: var(--ink-4); stroke-width: 1; }
.hero-svg .win { fill: var(--c4); opacity: .85; }
.hero-svg .tent { color: var(--ink-2); }
.hero-svg .fire { opacity: .75; }
.hero-svg .banner { fill: var(--c3); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); transform-box: fill-box; transform-origin: left center; }
.hero-svg .pole { stroke: var(--ink-3); stroke-width: 1.5; }
.hero-svg .camp-label { font: 650 13px/1 var(--font-sans); fill: var(--ink); }
.hero-svg .city-label { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-3); }
.hero-svg .rider { color: var(--ink); }
.hero-svg .rider .halo { fill: var(--accent); opacity: .22; }
.hero-svg .mask, .hero-svg .captured { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-2), transform 400ms cubic-bezier(.3,1.6,.5,1); }
.hero-svg.beat-x .captured, .hero-svg.beat-m .mask { opacity: 1; transform: none; }
.hero-svg.beat-m .banner-c { opacity: 0; transform: scaleX(.2); }
.hero-svg .captured .xmark { color: var(--bad); }
.hero-svg .captured text { fill: var(--bad); font: 700 13px/1 var(--font-sans); }
.hero-svg .mask { color: var(--c5); }
.hero-svg .mask text { fill: var(--c5); font: 700 13px/1 var(--font-sans); }
.hero-svg .rider.caught { color: var(--ink-3); }
.d-svg .d-halo, .hero-svg .halo-text { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (max-width: 599px) { .split { grid-template-columns: 1fr; } }
.split-card { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-2);
  background: color-mix(in srgb, var(--surface) 80%, transparent); transition: border-color 500ms, box-shadow 500ms; }
.split-card.lit[data-split="1"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad), 0 0 24px -6px var(--bad); }
.split-card.lit[data-split="2"] { border-color: var(--c5); box-shadow: 0 0 0 1px var(--c5), 0 0 24px -6px var(--c5); }
.split-icon { width: 40px; height: 40px; flex: none; }
.split-card[data-split="1"] .split-icon { color: var(--bad); }
.split-card[data-split="2"] .split-icon { color: var(--c5); }
.split-kicker { margin: 0; font: 650 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink); }
.split-text { margin: 0; font: var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink-2); }

.intro .lede { font-size: calc(var(--fs-body) * 1.06); margin-top: var(--sp-6); }

/* ---- scrollytelling ------------------------------------------------------------------------ */
.d-scrolly { position: relative; }
.d-scrolly-canvas { top: calc(var(--pbar-h) + var(--sp-1)); }
/* phones: the canvas stays on top and the step cards slide beneath it, so controls on the
   canvas (Send another rider) are never covered by the step being read */
@media (max-width: 899px) { .d-scrolly-canvas { z-index: 2; } .d-scrolly-steps { z-index: 1; } }
/* canvas-height contract (review P-01/P-02): below 900px a canvas grows to fit its content
   instead of being capped at 55vh, and the s-04 widget mount is never shorter than 420px */
@media (max-width: 899px) { .d-scrolly-canvas { max-height: none; } }
.canvas-card { background: radial-gradient(120% 90% at 80% 0%, var(--surface-2), var(--surface) 70%); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: var(--sp-2); box-shadow: 0 12px 32px -18px rgb(0 0 0 / .6); }
@media (min-width: 900px) {
  .d-scrolly-canvas { top: calc(var(--pbar-h) + 8vh); }
}
/* landscape phones: a sticky canvas taller than the viewport would trap the reader */
@media (max-height: 540px) and (max-width: 899px) {
  .d-scrolly-canvas { position: relative; top: 0; max-height: none; }
  .d-step { margin-bottom: var(--sp-4); }
}
.d-step { font-size: var(--fs-body); }
.d-step p { margin: 0 0 var(--sp-2); }
.d-step p:last-child { margin-bottom: 0; }
.d-step { transition: border-color var(--dur-2), opacity var(--dur-2), filter var(--dur-2); }
.d-scrolly-steps .d-step:not(.is-active) { opacity: .72; }
@media (max-width: 899px) { .d-scrolly-steps .d-step:not(.is-active) { opacity: 1; } }

/* gates: steps stay blurred and inert until the check above is answered */
.lock-note { display: none; }
.d-scrolly.is-locked .lock-note { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 3; margin: 0;
  font: 600 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink-2); text-align: center;
  padding: var(--sp-1) var(--sp-2); background: var(--surface); border: 1px dashed var(--ink-4); border-radius: var(--radius-2); }
@media (min-width: 900px) { .d-scrolly.is-locked .lock-note { top: 30vh; transform: translateY(calc(-100% - var(--sp-2))); } }
.d-scrolly.is-locked .d-step, .d-step.is-locked { filter: blur(7px); opacity: .45; user-select: none; pointer-events: none; }
.d-step.is-locked { position: relative; }

/* ---- w-handshake (low complexity, built inline) -------------------------------------------- */
.hs { display: flex; flex-direction: column; gap: var(--sp-1); font-family: var(--font-sans); }
.hs-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-1); }
.hs-count { font: 600 var(--fs-caption)/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.hs-count b { font: 700 1.5rem/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; letter-spacing: 0; }
.hs-rule { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hs-stage { position: relative; height: 128px; overflow: hidden; border-radius: var(--radius-2); }
.hs-valley { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.hs-hill { fill: var(--surface-2); }
.hs-hill2 { fill: var(--bg); opacity: .7; }
.hs-path { position: absolute; left: 56px; right: 56px; top: 86px; border-top: 2px dashed var(--ink-4); }
.hs-camp { position: absolute; top: 46px; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-2); }
.hs-camp svg { width: 40px; height: 40px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c4) 55%, transparent)); }
.hs-camp span { font: 650 12px/16px var(--font-sans); color: var(--ink); white-space: nowrap; }
.hs-a { left: 0; } .hs-b { right: 0; }
.hs-chip { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 6px; max-width: calc(100% - 16px);
  padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; opacity: 0; transition: opacity var(--dur-1); }
.hs-chip.on { opacity: 1; }
.hs-chip-n { font: 600 11px/1 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.hs-chip-t { font: 600 13px/16px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.hs-chip-ic { width: 16px; height: 16px; flex: none; align-self: center; color: var(--ink-2); }
.hs-rider { position: absolute; left: 0; top: 64px; width: 32px; height: 32px; color: var(--ink); opacity: 0; will-change: transform; }
.hs-rider.on { opacity: 1; }
.hs-rider svg { width: 32px; height: 32px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.hs-fan { position: absolute; inset: 0; pointer-events: none; }
.hs-fan .fr { position: absolute; left: 0; width: 20px; height: 20px; color: var(--ink-2); }
.hs-fan .fr svg { width: 20px; height: 20px; }
.hs-fan .fr.lost { color: var(--bad); }
.hs-badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); min-height: 56px; align-items: start; }
.hs-badge { display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius-2); font: 500 13px/18px var(--font-sans);
  color: var(--ink-3); border: 1px solid transparent; }
.hs-badge svg { width: 18px; height: 18px; flex: none; margin-top: 0; }
.hs-badge[data-camp="B"] { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.hs-badge.unsure { color: var(--ink); background: var(--c4-soft); border-color: var(--c4); }
.hs-badge.unsure svg { color: var(--c4); }
.hs-badge.sure svg { color: var(--good); }
.hs-badge.soft { opacity: .8; font-size: 12px; border-style: dashed; }
.hs-badge.pop { animation: hs-pop 360ms var(--ease-out); }
@keyframes hs-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.hs-controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); }
.hs-send { min-height: var(--tap); }
.hs-reset { min-height: var(--tap); padding: 0 var(--sp-1); background: none; border: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
  font: 500 var(--fs-small)/1 var(--font-sans); cursor: pointer; }
.hs[data-step="0"] .hs-controls, .hs[data-step="1"] .hs-controls, .hs[data-step="2"] .hs-controls, .hs[data-step="3"] .hs-controls, .hs[data-step="5"] .hs-controls { visibility: hidden; }
.hs-line { margin: 0; min-height: 20px; text-align: center; font: 600 13px/20px var(--font-sans); color: var(--ink-2); }
.hs-line.moral { color: var(--c4); }
@media (min-width: 900px) {
  .hs-stage { height: 168px; }
  .hs-camp { top: 60px; width: 88px; }
  .hs-camp svg { width: 64px; height: 64px; }
  .hs-path { top: 120px; left: 72px; right: 72px; }
  .hs-rider { top: 96px; }
  .hs-chip { top: 24px; }
  .hs-chip-t { font-size: 15px; }
  .hs-badge { font-size: 14px; }
}

/* ---- f-roles -------------------------------------------------------------------------------- */
.roles { margin: 0; }
.roles-svg .camp-ring { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1.5; }
.roles-svg .camp-icon { color: var(--ink-2); }
.roles-svg .role { font: 650 13px/1 var(--font-sans); fill: var(--ink); }
.roles-svg .chip-bg { stroke-width: 1.5; }
.roles-svg .chip text { font: 650 12px/1 var(--font-sans); fill: var(--ink); }
.roles-svg [data-from] { transition: opacity var(--dur-2); }
.goals { margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--bg);
  font: 13px/18px var(--font-sans); color: var(--ink-2); }
.goal { margin: 0 0 2px; display: flex; gap: 6px; align-items: baseline; }
.goal b { color: var(--ink); white-space: nowrap; }
.goal-tick { display: inline-block; width: 14px; flex: none; color: var(--good); font-weight: 700; }
.goals.met .goal-tick::before { content: "✓"; }
.goals.met .goal b { color: var(--good); }
.goals-note { margin: 2px 0 0 20px; font-size: 12px; color: var(--ink-3); }

/* ---- the rules of the game (s-01) and the rule change (s-03 step 1): one visual language ---- */
.rules-card { margin: var(--sp-4) auto 0; padding: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-2); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow-1); font-family: var(--font-sans); }
@media (max-width: 599px) { .rules-card { padding: var(--sp-2) var(--sp-2) var(--sp-2) 12px; } }
.rules-card-h { font: 600 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.rules-card-h a { color: inherit; text-underline-offset: 3px; }
.rules-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rules-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.rules-list svg { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); box-sizing: border-box; }
.rules-list .rules-p1 svg, .rules-list .is-old svg { color: var(--bad); }
.rules-list p { font: 500 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink); padding-top: 6px; }
.rules-list b { font-weight: 700; }
.rules-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid var(--bad); border-radius: var(--radius-1);
  font: 600 11px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--bad); vertical-align: 1px; }
.rules-note { color: var(--ink-3); }
.rules-list .is-old p { color: var(--ink-3); }
.rules-list .is-old s { text-decoration-thickness: 2px; text-decoration-color: var(--bad); }
.rules-step { border-color: var(--accent); border-left-width: 4px; font-family: var(--font-sans); }
.rules-step .rules-list { margin-bottom: var(--sp-2); }
.rules-step > p:last-child { font: 600 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink); }
.later { color: var(--ink-3); font-style: italic; }
.nocaps { text-transform: none; font: italic 600 var(--fs-small)/1 var(--font-serif); letter-spacing: 0; }

/* ---- widget mounts (reserved height; widget builders fill them) ------------------------------ */
.mount-two-worlds { min-height: 440px; }
@media (max-width: 899px) { .mount-two-worlds { min-height: max(calc(55vh - 34px), 420px); } }
.mount-traitor { min-height: 520px; margin-top: var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--radius-3); }

/* w-traitor measures 542px tall once its content box is < 600px wide (viewport < 666px) */
@media (max-width: 665px) { .mount-traitor { min-height: 542px; } }

/* ---- checks ------------------------------------------------------------------------------- */
.d-check { font-family: var(--font-sans); }
.d-check .d-feedback p { margin: 0 0 var(--sp-1); }
.d-check .d-feedback:empty { display: none; }
.fb-head { font-weight: 650; color: var(--ink); }
.d-option:hover { border-color: var(--ink-4); }
.d-option[disabled] { cursor: default; }
.opts-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 599px) { .opts-grid { grid-template-columns: 1fr; } }
.step-check .d-check { margin: 0; padding: 0; border: 0; background: none; }
.step-check .d-check-prompt { font-size: var(--fs-small); line-height: var(--lh-small); }
.reveal-btn { min-height: var(--tap); }

/* ---- rule & table ----------------------------------------------------------------------------- */
.rule { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); margin: 0 auto var(--sp-3); }
.rule-formula { margin: 0 !important; font: 700 2rem/1.2 var(--font-serif); letter-spacing: .02em; color: var(--ink); }
.rule-table { border-collapse: collapse; font: var(--fs-small)/var(--lh-small) var(--font-sans); min-width: 240px; }
.rule-table caption { caption-side: bottom; text-align: left; font: var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-3); padding-top: var(--sp-half); }
.rule-table th { text-align: left; font: 600 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 4px var(--sp-2) 4px 0; border-bottom: 1px solid var(--line); }
.rule-table td { padding: 4px var(--sp-2) 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- s-06 route cards ------------------------------------------------------------------------- */
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-4) auto; }
@media (max-width: 899px) { .routes { grid-template-columns: 1fr; } }
.route { background: radial-gradient(120% 70% at 90% 0%, var(--surface-2), var(--surface) 70%); border: 1px solid var(--line); border-radius: var(--radius-3);
  padding: var(--sp-3) var(--sp-2) var(--sp-2); font: var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink-2); }
.route h3 { display: flex; align-items: center; gap: var(--sp-1); margin: 0 0 var(--sp-2) !important; font: 700 var(--fs-h3)/var(--lh-h3) var(--font-sans); color: var(--ink); }
.route h3 svg { width: 28px; height: 28px; flex: none; color: var(--c4); }
.route dl { margin: 0; }
.route dt { font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--sp-2); }
.route dt:first-child { margin-top: 0; }
.route dd { margin: 2px 0 0; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-1) var(--sp-2); margin-top: 4px; border-left: 3px solid var(--c4); background: var(--c4-soft); border-radius: 0 var(--radius-1) var(--radius-1) 0; }
.stat-num { font: 700 1.75rem/1.1 var(--font-mono); color: var(--c4); }
.stat-text { color: var(--ink); }

/* ---- s-07 recap ------------------------------------------------------------------------------- */
.recap { list-style: none; padding: 0; margin: 0 auto var(--sp-3); display: grid; gap: var(--sp-2); }
.recap li { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-2); align-items: center; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--surface); }
.recap li > svg, .recap-icons { color: var(--accent); }
.recap li > svg { width: 36px; height: 36px; justify-self: center; }
.recap-icons { display: flex; justify-content: center; gap: 2px; }
.recap-icons svg { width: 22px; height: 22px; }
.recap li p { margin: 0; font: 600 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink); }
.closing { font-size: calc(var(--fs-body) * 1.06); }
.replay-link { font: 600 var(--fs-small)/1 var(--font-sans); display: inline-flex; min-height: var(--tap); align-items: center; }

/* ---- sources ------------------------------------------------------------------------------------ */
.sources { max-width: var(--col); margin: 0 auto; padding: var(--sp-4) var(--sp-2) var(--sp-10); border-top: 1px solid var(--line);
  font: var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-3); }
.sources h2 { font: 600 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--sp-1); color: var(--ink-3); }
.sources ol { margin: 0; padding-left: var(--sp-3); }
.sources li { margin-bottom: 4px; }
.sources a { color: var(--ink-2); }
.sources .credit { margin: var(--sp-4) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--line); }

/* kit's `.d-main p` margin must not leak into component paragraphs */
.d-main .hs p, .d-main .goals p, .d-main .split p { margin: 0; }
.d-main .goals .goal { margin-bottom: 2px; }
.d-main .goals .goals-note { margin: 2px 0 0 20px; }
.d-main .rules-card-h, .d-main .d-step .rules-card-h { margin: 0 0 12px; }
.d-main .rules-list p, .d-main .d-step .rules-list p { margin: 0; }