/* GB Trains: base styles. Colours are tokens on :root, redefined for dark mode. */
/* Archivo, the wordmark's family, self-hosted: the variable Latin subset Google Fonts serves (widths 62-125%,
   weights 100-900; SIL Open Font Licence 1.1, fonts/Archivo-OFL.txt). Nothing loads from Google at runtime. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/assets/fonts/Archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #FBFAF7;     /* the original off-white, restored on 2 October 2026 (Kyle preferred it to step 3's #F6F5F1) */
  --surface: #FFFFFF;
  --fg: #14161B;
  --muted: #5D626E;
  --rule: #E2E0DA;
  --accent: var(--fg);  /* colour means a line (style study step 3): the interface itself is ink */
  --warn-bg: #FFF2CC;
  --warn-fg: #7A5300;
  --radius: 10px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1114; --surface: #16191E; --fg: #EDEEF0; --muted: #A4AAB5; --rule: #2A2E35;
    --accent: var(--fg); --warn-bg: #3A2F12; --warn-fg: #F2CF7A; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1114; --surface: #16191E; --fg: #EDEEF0; --muted: #A4AAB5; --rule: #2A2E35;
  --accent: var(--fg); --warn-bg: #3A2F12; --warn-fg: #F2CF7A; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }  /* pseudo-elements too, so drawn circles centre on their lines */

/* ---- Page dimensions and behaviour, matched to GB Electricity (gbelectricity.uk) ----------------------------------
   One 1280 px column for masthead, content and footer, sharing one left edge. Gutters: 14 px, 20 px at 900 px and
   below, 12 px at 760 px and below, 10 px at 400 px and below. The masthead is sticky, 64 px tall (56 px on phones),
   and never changes on scroll; --mast-h lets anything pinned below it, and every anchor target, clear it. */
:root { --mast-h: 64px; --gutter: 14px; --wrap: 1280px; --gap: 24px; }
@media (max-width: 900px) { :root { --gutter: 20px; } }
@media (max-width: 760px) { :root { --gutter: 12px; } }
@media (max-width: 560px) { :root { --mast-h: 56px; } }
@media (max-width: 400px) { :root { --gutter: 10px; } }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@media (max-width: 760px) { html, body { overflow-x: clip; } }  /* clip, not hidden, so the masthead still sticks */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Motion, only for readers who haven't asked for less (design/animation-options.html).
   Arriving on a page (option 2, version C, which replaced the card flying into the page on 2 October 2026): the old
   page goes at once and the new one fades up, with the masthead holding still, and on a
   line page the title's underline then draws itself in the line colour. Browsers without cross-document view
   transitions just load the page; the underline draws in every browser. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .masthead { view-transition-name: masthead; }
  @keyframes gbt-page-in { from { opacity: 0; transform: translateY(8px); } }
  ::view-transition-old(root) { animation: none; opacity: 0; }
  ::view-transition-new(root) { animation: gbt-page-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  @keyframes gbt-underline { from { transform: scaleX(0); } }
  .line-title-bar { transform-origin: left center; animation: gbt-underline 0.42s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s backwards; }
  /* Option 4: the line-up's trains run in from the right edge of their own cell (lineup.js; the clip is in the line-up rules) */
  /* Option 5: the Route switch's marker (line.js), sliding behind the chips; strip map stations grow from their centres */
  .view-switch.has-ind { position: relative; isolation: isolate; }
  .view-switch.has-ind button { position: relative; background: transparent; transition: color 0.2s ease, border-color 0.2s ease; }
  .view-switch.has-ind button[aria-pressed="true"] { background: transparent; border-color: transparent; }
  .view-switch-ind { position: absolute; left: 0; top: 0; z-index: -1; background: var(--fg); border-radius: 999px;
    transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.2s cubic-bezier(0.3, 0.7, 0.2, 1); }
  .route-view .map svg circle { transform-box: fill-box; transform-origin: center; }
  /* Option 6: "On this page" has one marker (line.js) that slides to the section being read */
  .toc.has-ind ol { position: relative; }
  .toc.has-ind a[aria-current="true"] { border-color: transparent; }
  .toc-ind { position: absolute; left: 0; top: 0; background: var(--c, var(--fg)); pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.25s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.25s ease; }
  .toc-ind.is-jump { transition: none; }
  /* Option 7: switching section with the all-lines menu open moves the marked column (theme.js does the fades) */
  .lp-col { transition: background-color 0.2s ease, border-color 0.2s ease; }
  /* Option 9: the headlights fade up rather than switch on */
  .brand-mark .hl, .brand-mark .hl-glow { transition: fill 0.2s ease, opacity 0.2s ease; }
  /* Option 8: pointing at a train drawing opens its doors; each leaf slides into the body (svg_stock_detail.py door_svg).
     Switched off on the live site (Kyle, 2 October 2026) and kept for a possible return: every rule needs the class
     "doors-open" on <html>, which no page sets. Add it in build.py's page() to bring the doors back. */
  html.doors-open svg .leaf { transition: transform 0.9s cubic-bezier(0.45, 0, 0.3, 1); }
  html.doors-open svg .door-gap { transition: opacity 0s linear 0.9s; }   /* the opening shows as the doors part, and hides once they've shut */
  @media (hover: hover) {
    html.doors-open :is(.stock-full, .card, .hero-train):hover svg .leaf { transform: translateX(var(--slide)); }
    html.doors-open :is(.stock-full, .card, .hero-train):hover svg .door-gap { opacity: 1; transition-delay: 0s; }
  }
  html.doors-open .card a:focus-visible svg .leaf { transform: translateX(var(--slide)); }
  html.doors-open .card a:focus-visible svg .door-gap { opacity: 1; transition-delay: 0s; }
}
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 var(--font); min-height: 100dvh;
  display: flex; flex-direction: column; }
body > .site-footer { margin-top: auto; }  /* the footer sits at the bottom of short pages */
a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:where([id]) { scroll-margin-top: calc(var(--mast-h) + 16px); }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main.wrap { padding-top: 0; padding-bottom: 44px; }
.skip-link { position: fixed; left: 12px; top: 8px; z-index: 100; padding: 10px 14px; border: 2px solid var(--fg);
  border-radius: 8px; background: var(--surface); color: var(--fg); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { clip-path: none; width: auto; height: auto; }

h1 { font-size: 42px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 20px 0 12px; }
@media (max-width: 900px) { h1 { font-size: 32px; } }
@media (max-width: 620px) { h1 { font-size: 27px; } }
h2 { margin-top: 2em; }
.lede { font-size: 1.1rem; line-height: 1.6; color: var(--muted); max-width: 840px; margin: 0 0 28px; }
.note { color: var(--muted); font-size: 0.9rem; }
.crumbs { margin: 16px 0 0; font-size: 0.9rem; }

/* Masthead */
.masthead { position: sticky; top: 0; z-index: 60; height: var(--mast-h); background: var(--surface);
  border-bottom: 1px solid var(--rule); }
.mast-bar { display: flex; align-items: center; gap: 20px; height: 100%; }
.brand { color: var(--fg); text-decoration: none; display: flex; align-items: center; gap: 8px; flex: none; }
.brand-mark { width: auto; height: 1.9rem; }  /* the 1972 Stock front, drawn by tools/make_favicon.py */
.brand .wordmark { width: auto; height: 2.13rem; display: block; }  /* Archivo Black outlines, tools/make_wordmark.py */
@media (max-width: 560px) { .brand .wordmark { height: 1.79rem; } .brand-mark { height: 1.6rem; } }
/* The wordmark's line diagram takes the line's colour on line and operator pages (--wm-line); a colour under 3:1
   against the masthead in the current theme gets a keyline (build.py marks the page with data-wm-kl) */
.wordmark { overflow: visible; }  /* the keyline's end bars stand 3.5 units beyond the letters */
.wordmark .wm-kl { display: none; }
:root[data-theme="light"][data-wm-kl~="light"] .wordmark .wm-kl,
:root[data-theme="dark"][data-wm-kl~="dark"] .wordmark .wm-kl { display: inline; }
@media (prefers-color-scheme: light) { :root:not([data-theme])[data-wm-kl~="light"] .wordmark .wm-kl { display: inline; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme])[data-wm-kl~="dark"] .wordmark .wm-kl { display: inline; } }
/* Headlights (make_favicon.py mark_svg): the logo's lamps light when you point at or tab to it, and stay lit in dark mode */
.brand-mark .hl-glow { opacity: 0; }
.brand:hover .brand-mark .hl, .brand:focus-visible .brand-mark .hl { fill: #FFF6CF; }
.brand:hover .brand-mark .hl-glow, .brand:focus-visible .brand-mark .hl-glow { opacity: 0.9; }
:root[data-theme="dark"] .brand-mark .hl { fill: #FFF6CF; }
:root[data-theme="dark"] .brand-mark .hl-glow { opacity: 0.9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark .hl { fill: #FFF6CF; }
  :root:not([data-theme="light"]) .brand-mark .hl-glow { opacity: 0.9; }
}

/* Navigation: tabs that don't fit fold into "More"; on phones every tab folds into "All pages" */
.mainnav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow: hidden; justify-content: flex-start; }
.mainnav > a { display: grid; flex: none; align-items: center; height: 36px; padding: 0 10px; border-radius: 6px;
  color: var(--muted); text-decoration: none; white-space: nowrap; }
.mainnav > a::before { content: attr(data-label); font-weight: 650; visibility: hidden; height: 0; grid-area: 1 / 1; }
.mainnav > a .nav-t { grid-area: 1 / 1; }
.mainnav > a:hover { color: var(--fg); background: var(--bg); }
.mainnav > a[aria-current="page"] { color: var(--fg); font-weight: 650; }
.mainnav > a[aria-current="page"] .nav-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mainnav > a.is-out { display: none; }
.nav-more { margin-left: auto; flex: none; }
.nav-more-btn { height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface);
  color: var(--fg); font: inherit; font-weight: 650; cursor: pointer; white-space: nowrap; }
.nav-menu { position: fixed; z-index: 70; list-style: none; margin: 0; padding: 6px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.nav-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px; color: var(--fg);
  text-decoration: none; font-weight: 650; }
.nav-menu a:hover { background: var(--bg); }
.nav-menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
html.nav-open { overflow: hidden; }
@media (max-width: 560px) {  /* no flash before the script runs: the CSS alone gives the phone layout */
  .mainnav > a { display: none; }
  .mainnav > .nav-more[hidden] { display: block; }
}

/* Footer: a four-part card (2 columns at 900 px and below, 1 at 560 px and below), then a base row with the theme control */
.site-footer { color: var(--muted); font-size: 0.85rem; padding: 0 0 12px; }
.ft-card { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.35fr; gap: 22px 28px; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
@media (max-width: 900px) { .ft-card { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft-card { grid-template-columns: 1fr; padding: 18px 16px; } }
.ft-card h2 { margin: 0 0 6px; font-size: 0.72rem; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg); }
.ft-card p { margin: 0 0 8px; }
.ft-card ul { list-style: none; margin: 0; padding: 0; }
.ft-card li { margin: 4px 0; }
.ft-card a { color: var(--fg); text-decoration: none; }
.ft-card a:hover, .ft-card a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.ft-brand { display: flex; align-items: center; gap: 8px; }
.ft-brand .brand-mark { height: 1.6rem; } .ft-brand .wordmark { height: 1.72rem; width: auto; color: var(--fg); }
.ft-base { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 16px; }
.ft-top { color: var(--fg); }
.theme-pref { display: inline-flex; align-items: center; margin-left: auto; }
.theme-pref-label { font-size: 0.72rem; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 8px; }
.theme-opt { font: inherit; font-size: 0.8rem; font-weight: 650; padding: 5px 10px; min-height: 28px; background: var(--surface);
  color: var(--fg); border: 1px solid var(--rule); border-left-width: 0; cursor: pointer; }
.theme-opt:first-of-type { border-left-width: 1px; border-radius: 8px 0 0 8px; }
.theme-opt:last-of-type { border-radius: 0 8px 8px 0; }
.theme-opt.is-on { background: var(--bg); box-shadow: inset 0 -2px 0 var(--accent); }
@media (pointer: coarse) { .theme-opt, .nav-more-btn { min-height: 44px; } }

/* "unverified": a quiet note on a figure, not a warning. Lower case, muted, a thin outline and a hollow dot */
.unverified { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75em; font-weight: 500; line-height: 1.5;
  vertical-align: 0.1em; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px 0 7px;
  white-space: nowrap; }
.unverified::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }

.hero-train svg, .stock-fig svg { width: 100%; height: auto; display: block; }
.hero-train { margin: 24px 0 0; }

.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); margin-right: 8px; vertical-align: -1px; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--surface); border-radius: var(--radius); }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td.wrap { white-space: normal; min-width: 9em; }  /* a long text column that may wrap rather than widen the table */
/* The National Rail index: the terminals and fleets get the room (a wrapping cell's min-width would otherwise fix them
   at 9em, and the operator name take the rest) */
.nr-table { table-layout: fixed; min-width: 860px; }   /* fixed shares; a phone scrolls the table rather than squash it */
.nr-table th.w-op { width: 18%; } .nr-table th.w-term { width: 26%; } .nr-table th.w-since { width: 10%; }
.nr-table th.w-km { width: 8%; } .nr-table th.w-st { width: 8%; } .nr-table th.w-fleet { width: 30%; }
.nr-table td.wrap { min-width: 0; }
.nr-table td.fleet a { white-space: nowrap; }
td.lines { width: 16em; }  /* lines and operators: room for two names a row, each dot kept with its name (a table
   cell ignores min-width, so this sets its share) */
td.lines a { white-space: nowrap; }
@media (max-width: 560px) {  /* phones: the table still fits the screen, the lines column taking the larger share */
  table:has(td.lines) :is(th, td) { padding: 8px 6px; }
  td.lines { width: 12em; }
  td.lines .swatch { width: 9px; height: 9px; margin-right: 4px; vertical-align: 0; }
}
table.wrap-head th { white-space: normal; }
th .unit { text-transform: none; }  /* units stay in lower case: km, not KM */
th { text-transform: uppercase; font-size: 0.72rem; font-weight: 600; font-stretch: 75%; letter-spacing: 0.05em; color: var(--muted); line-height: 1.3; }  /* a condensed-capitals label, like the figures' captions */
.num { text-align: right; font-variant-numeric: tabular-nums; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 16px 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.map { margin: 0; overflow-x: auto; }
.map svg { width: 100%; height: auto; display: block; }
.map + .map { margin-top: 8px; }
.map h3 { font-size: 1rem; margin: 18px 0 4px; }
figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.stock-fig { margin: 0 0 24px; max-width: 520px; }
.stock-full { margin: 16px 0; }
.scroll-x { overflow-x: auto; }
.stock-full svg { min-width: 900px; width: 100%; height: auto; }

.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.stock-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); text-decoration: none; color: var(--fg); }
.stock-card img { width: 100%; height: auto; }

.count { font-size: 0.8rem; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px;
  padding: 1px 8px; vertical-align: middle; }
.jump { font-size: 0.95rem; }
.stock-list { padding-left: 1.2em; }
.stock-list li { margin: 4px 0; }
/* an operator's routes, listed beside its page */
.route-list { list-style: none; margin: 0; padding: 0; }
.route-list li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
/* a train not yet designed, drawn as the stock it's expected to resemble: faded grey and labelled indicative */
.indicative img, img.indicative, .indicative svg { filter: grayscale(1); opacity: .45; }
.no-drawing { display: flex; align-items: center; justify-content: center; height: 60px; border: 1px dashed var(--rule);
  border-radius: 6px; color: var(--muted); font-size: 0.85rem; }
.sources li { margin: 4px 0; }

.terminus { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 4px 20px; margin: 16px 0; }
.terminus h2 { margin-top: 0.8em; }

/* Line pages (style A, "Platform"): key figures as tiles, train in a line-coloured card, vertical station list. */
.line-top { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
.line-top.has-side { grid-template-columns: 1.15fr 1fr; }
.line-top .side { border-left: 1px solid var(--rule); padding-left: 28px; }
.line-top .side h2 { margin-top: 0.6em; font-size: 1.1rem; }
@media (max-width: 820px) {
  .line-top.has-side { grid-template-columns: 1fr; }
  .line-top .side { border-left: 0; padding-left: 0; }
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; }
.stat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; }
.stat b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 2px; }  /* a wrapped caption keeps its own tight line spacing */
.card { background: var(--surface); border: 1px solid var(--rule); border-left: 6px solid var(--c, var(--accent));
  border-radius: var(--radius); padding: 12px 14px; margin: 12px 0 0; }
.card svg { width: 100%; height: auto; display: block; }
.stops { list-style: none; padding: 0 0 0 5px; margin: 14px 0 0 8px; }
/* The line is drawn per station so it starts and ends at the centre of the first and last circles (and of each branch) */
.stops li::after { content: ""; position: absolute; left: -5px; top: 0; bottom: 0; width: 5px; background: var(--c, var(--fg)); }
.stops li:first-child::after, .stops .seg + li::after { top: 15.5px; }
.stops li:last-child::after, .stops li:has(+ .seg)::after { bottom: calc(100% - 15.5px); }
.stops li:first-child:last-child::after { display: none; }
.stops li { padding: 3px 0 3px 16px; position: relative; }
.stops li::before { content: ""; position: absolute; z-index: 1; left: -9px; top: 9px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--fg); }
.stops .note { display: block; font-size: 0.8rem; }

/* Line pages: history timeline and the all-stations table */
.timeline { list-style: none; padding: 0; margin: 12px 0; border-left: 3px solid var(--c, var(--rule)); }
.timeline li { position: relative; padding: 4px 0 10px 18px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 11px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--c, var(--fg)); }
.timeline time { display: block; font-weight: 650; font-variant-numeric: tabular-nums; }
.stations-table td:last-child { white-space: normal; }
.stops .seg { list-style: none; margin: 14px 0 4px -14px; font-size: 0.85rem; font-weight: 650; color: var(--muted); }
.stops .seg::before, .stops .seg::after { display: none; }

/* Line names in Archivo Black outlines (tools/make_wordmark.py outline_svg); the text itself stays for screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.line-title { display: inline-flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.line-title-bar { flex: 0 0 100%; height: 8px; background: var(--c); }  /* the underline: its own element, so it can draw itself */
.line-title .ln { display: block; width: auto; }  /* height set per name by outline_svg */

/* Sortable tables: the header buttons are added by theme.js; aria-sort carries the state for screen readers */
table.sortable th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; }
table.sortable th button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
table.sortable th button::after { content: "↕"; opacity: 0.35; font-size: 0.85em; }
table.sortable th[aria-sort="ascending"] button::after { content: "▲"; opacity: 0.8; }
table.sortable th[aria-sort="descending"] button::after { content: "▼"; opacity: 0.8; }
table.sortable th.num button { flex-direction: row-reverse; }

/* The rolling-stock line-up (build.py lineup_html, lineup.js): every drawn train standing on one rail level, its caption
   above it, at Fit (to the column) or To scale (10 px per metre, scrolling sideways with an overview strip). Steps 1
   and 2 of design/lineup-and-labels.html, approved by Kyle on 2 October 2026; one layout serves every width. */
.lu { margin: 8px 0 28px; }
.lu-controls { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; align-items: center; }
.lu-controls[hidden] { display: none; }
.lu-ov { position: relative; margin: 0 14px 10px 0; padding: 6px 0 0; cursor: pointer; touch-action: none; user-select: none; }
.lu-ov[hidden] { display: none; }
.lu-ov-bars { display: grid; gap: 1px; padding: 0 0 4px; }
.lu-ov-bars i { display: block; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 30%, transparent); }
.lu-ov-axis { position: relative; height: 16px; border-top: 1px solid var(--muted); }
.lu-ov-axis span { position: absolute; top: 0; height: 6px; border-left: 1px solid var(--muted); }
.lu-ov-axis b { position: absolute; top: 3px; left: 3px; font-size: 0.7rem; font-weight: 600; font-stretch: 75%; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lu-ov-win { position: absolute; top: 0; bottom: 14px; border: 2px solid var(--fg); border-radius: 4px; background: color-mix(in srgb, var(--fg) 6%, transparent); pointer-events: none; }
.lu-scroll { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.lu[data-scale="true"] .lu-scroll { cursor: grab; scrollbar-width: thin; }
.lu .lu-scroll.dragging { cursor: grabbing; user-select: none; }
.lu-inner { position: relative; width: 100%; padding-bottom: 2px;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px); background-repeat: repeat-x; }
.lu-row { position: relative; padding: 9px 0 10px; border-bottom: 1px solid var(--rule); }
.lu-row[hidden] { display: none; }
.lu-cap { position: sticky; left: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; width: max-content;
  max-width: calc(100vw - 2 * var(--gutter) - 16px); margin-bottom: 4px; padding-right: 8px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
.lu-cap a { font-weight: 650; }
.lu-fig { font-size: 0.78rem; font-weight: 600; font-stretch: 75%; letter-spacing: 0.02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lu-fig b { color: var(--fg); font-weight: 700; font-size: 1.12em; font-stretch: 85%; letter-spacing: 0.01em; }
.lu-meta { font-size: 0.82rem; color: var(--muted); }
.lu-meta .swatch { width: 9px; height: 9px; margin-right: 3px; }
.lu-draw { position: relative; }
.lu[data-scale="fit"] .lu-draw { overflow-x: clip; }   /* the run-in starts beyond the right edge */
.lu-draw img { display: block; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.lu-ruler { position: relative; height: 24px; border-top: 1px solid var(--muted); }
.lu-ruler span { position: absolute; top: 0; height: 7px; border-left: 1px solid var(--muted); }
.lu-ruler span.maj { height: 12px; }
.lu-ruler b { position: absolute; top: 10px; left: 3px; white-space: nowrap; font-size: 0.78rem; font-weight: 600; font-stretch: 75%; color: var(--muted); font-variant-numeric: tabular-nums; }
.lu-read b { color: var(--fg); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-label { color: var(--muted); font-size: 0.85rem; margin-right: 2px; }
.chips button { font: inherit; font-size: 0.85rem; color: var(--fg); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chips button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lineup-tag { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px;
  white-space: nowrap; }

/* The find box (build.py find_box, assets/js/find.js): in the masthead, behind a button on phones, and in the home hero */
.find { position: relative; flex: none; }
.find[hidden] { display: none; }
.find-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--surface); color: var(--fg); cursor: pointer; }
.find-panel { position: relative; }
.find-input { width: 15rem; font: inherit; font-size: 0.9rem; color: var(--fg); background: var(--bg); border: 1px solid var(--rule);
  border-radius: 8px; padding: 7px 10px 7px 32px; -webkit-appearance: none; appearance: none; }
.find-input::placeholder { color: var(--muted); }
.find-input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.find-input::-webkit-search-cancel-button { display: none; }
.find-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.find-icon svg { width: 15px; height: 15px; }  /* a magnifying glass inside the box; "/" still focuses it (find.js) */
.find-results { position: absolute; right: 0; top: calc(100% + 6px); width: min(26rem, calc(100vw - 24px)); max-height: 70vh;
  overflow: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 4px 6px 6px; z-index: 70; }
.find-results[hidden] { display: none; }
.find-results h3 { margin: 10px 8px 4px; }
.find-results a { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; border-radius: 6px; color: var(--fg); text-decoration: none; }
.find-results a:hover, .find-results a.active { background: var(--bg); }
.find-results a .swatch { margin-right: 2px; flex: none; }
.find-sub { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.find-sub .swatch { width: 9px; height: 9px; margin-right: 2px; }
.find-more { font-size: 0.75rem; margin-left: 2px; }
.find-empty { margin: 8px; color: var(--muted); font-size: 0.9rem; }
.find-hero { margin: 18px 0 4px; max-width: 30rem; }
.find-hero .find-input { width: 100%; font-size: 1rem; padding: 10px 12px 10px 38px; background: var(--surface); }
.find-hero .find-icon { left: 13px; }
.find-hero .find-icon svg { width: 17px; height: 17px; }
.find-hero .find-results { left: 0; right: auto; width: 100%; }
@media (max-width: 1180px) {  /* narrower screens: a button in the masthead opens the box under it, so the section tabs keep their room */
  .find-mast .find-toggle { display: flex; }
  .find-mast .find-panel { display: none; position: fixed; right: 16px; top: calc(var(--mast-h) + 8px); width: min(26rem, calc(100vw - 24px)); z-index: 70; }
  .find-mast.open .find-panel { display: block; }
  .find-mast .find-input { width: 100%; font-size: 1rem; padding: 10px 12px 10px 38px; background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
  .find-mast .find-icon { left: 13px; }
  .find-mast .find-results { left: 0; right: 0; width: auto; }
}
@media (max-width: 560px) { .find-mast .find-panel { left: 12px; right: 12px; width: auto; } }

/* Line and operator pages (build.py line page template, assets/js/line.js): pills, the Route section, the sidebar */
.crumbs [aria-current="page"] { color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.pills a { display: inline-flex; align-items: center; font-size: 0.85rem; padding: 3px 10px; border: 1px solid var(--rule);
  border-radius: 999px; color: var(--fg); background: var(--surface); text-decoration: none; white-space: nowrap; }
.pills a:hover { border-color: var(--muted); }
.pills a .swatch { width: 9px; height: 9px; margin-right: 6px; }
.pills a[aria-current="page"] { border-color: var(--fg); font-weight: 650; }
@media (max-width: 760px) { .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } }
.line-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 0 40px; align-items: start; }
.line-main { min-width: 0; }
.page-side { position: sticky; top: calc(var(--mast-h) + 16px); margin-top: 22px; }
.page-side h2 { margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.toc a { display: block; padding: 4px 0 4px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--fg); }
.toc a[aria-current="true"] { color: var(--fg); font-weight: 650; border-left-color: var(--c, var(--fg)); }
.toc .count { margin-left: 4px; }
.glance { margin-top: 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; }
.glance dl { margin: 0; }
.glance dt { margin-top: 8px; }
.glance dt:first-child { margin-top: 0; }
.glance dd { margin: 0; font-size: 0.9rem; }
.view-switch { margin: 0 0 12px; }
.view-switch[hidden], .route-view[hidden] { display: none; }
details.seg { border-top: 1px solid var(--rule); }
details.seg summary { cursor: pointer; padding: 10px 0; font-weight: 650; }
details.seg[open] summary { padding-bottom: 2px; }
details.seg .map { margin-bottom: 8px; }
.map.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.prev-next { display: flex; justify-content: space-between; gap: 16px; margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
.prev-next a { color: var(--fg); font-weight: 650; text-decoration: none; }
.prev-next a:hover { text-decoration: underline; }
.prev-next a span:first-child { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.prev-next .next { margin-left: auto; text-align: right; }
@media (max-width: 960px) {  /* the sidebar becomes a sticky row of jump links under the masthead */
  .line-layout { grid-template-columns: minmax(0, 1fr); }
  .page-side { order: -1; position: sticky; top: var(--mast-h); z-index: 50; margin: 8px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--rule); }
  .page-side h2, .glance { display: none; }
  .toc ol { display: flex; gap: 2px; border-left: 0; overflow-x: auto; scrollbar-width: none; }
  .toc a { white-space: nowrap; margin: 0; padding: 10px 8px; border-left: 0; border-bottom: 2px solid transparent; }
  .toc a[aria-current="true"] { border-bottom-color: var(--c, var(--fg)); }
  .line-layout [id] { scroll-margin-top: calc(var(--mast-h) + 60px); }
}

/* The all-lines menu (build.py page(), theme.js linesMenu): opened from the Underground, London rail and National Rail tabs */
.nav-caret { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 2px; border: 4px solid transparent;
  border-top-color: currentColor; border-bottom-width: 0; transition: transform .15s ease; }
.mainnav > a[aria-expanded="true"] { color: var(--fg); background: var(--bg); }
.mainnav > a[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.lines-panel { position: fixed; z-index: 70; overflow-y: auto; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .16); padding: 14px; }
.lines-panel[hidden] { display: none; }
.lp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-col { padding: 10px; border-radius: 8px; border: 1px solid transparent; }
.lp-col.is-on { background: var(--bg); border-color: var(--rule); }
.lp-col h2 { margin: 0 0 6px; }
.lp-col ul { list-style: none; margin: 0; padding: 0; }
.lp-col li a { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; color: var(--fg); text-decoration: none; }
.lp-col li a:hover, .lp-col li a:focus-visible { background: var(--surface); }
.lp-col.is-on li a:hover, .lp-col.is-on li a:focus-visible { background: var(--surface); }
.lp-bar { flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--c); }
.lp-n { margin-left: auto; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.lp-all { display: inline-block; margin: 8px 6px 0; font-size: 0.9rem; }
.lp-note { margin: 10px 10px 0; color: var(--muted); font-size: 0.78rem; }
.nav-menu .menu-sec > ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 12px; }
.nav-menu .menu-sec > ul a { min-height: 36px; gap: 10px; font-size: 0.95rem; }

/* Phones: the sections as a row of links under the masthead; it scrolls with the page, so only the jump row sticks */
.section-strip { display: none; }
@media (max-width: 560px) {
  .section-strip { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter);
    background: var(--surface); border-bottom: 1px solid var(--rule); }
  .section-strip::-webkit-scrollbar { display: none; }
  .section-strip a { white-space: nowrap; padding: 10px 8px; color: var(--muted); text-decoration: none; }
  .section-strip a[aria-current="page"] { color: var(--fg); font-weight: 650; text-decoration: underline;
    text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
.stat b small { font-size: 0.85rem; font-weight: 650; }  /* "250 million": the number large, the word smaller */

/* The home page's section cards (build.py, home page): four across, two by two on phones */
.sec-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 8px; }
@media (max-width: 760px) { .sec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sec-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.sec-card:hover, .sec-card:focus-visible { border-color: var(--muted); }
.sec-card-name { font-weight: 650; font-size: 1.05rem; }
.sec-card-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.sec-card-status { margin-top: auto; padding-top: 8px; }

/* What's new (build.py, from data/updates.json): the latest five on the home page, every entry at /updates/ */
.whats-new { margin: 28px 0 8px; }
.whats-new h2 { margin-bottom: 6px; }
.updates-list { list-style: none; margin: 0; padding: 0; }
.updates-list li { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 2px 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.updates-list li:not(:has(time)) { grid-template-columns: minmax(0, 1fr); }
.updates-list time { color: var(--muted); font-size: 0.88rem; }
@media (max-width: 560px) { .updates-list li { grid-template-columns: minmax(0, 1fr); } }

/* The home page's lines and operators: three compact columns (build.py home page), folded on phones */
.home-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin: 32px 0 8px; align-items: start; }
@media (max-width: 960px) { .home-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-cols { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.home-col > summary { list-style: none; }
.home-col > summary::-webkit-details-marker { display: none; }
.home-col > summary h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.25rem; }
.home-col > summary h2 a { color: var(--fg); text-decoration: none; }
.home-col > summary h2 a:hover { text-decoration: underline; }
@media (min-width: 561px) {  /* wide screens: the columns are always open; the heading is only a link */
  .home-col > summary { pointer-events: none; }
  .home-col > summary a { pointer-events: auto; }
}
@media (max-width: 560px) {  /* phones: each column folds to its heading and count */
  .home-col { border-bottom: 1px solid var(--rule); }
  .home-col > summary { cursor: pointer; padding: 12px 0; }
  .home-col > summary h2 { margin: 0; }
  .home-col > summary h2::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
  .home-col[open] > summary h2::after { transform: rotate(-135deg); }
  .home-col[open] { padding-bottom: 12px; }
}
.home-col-note { margin: 0 0 10px; color: var(--muted); font-size: 0.85rem; }
.home-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.home-row { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 7px 12px 7px 17px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 8px; color: var(--fg); text-decoration: none; overflow: hidden; }
.home-row-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.home-row:hover, .home-row:focus-visible { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.home-row-name { line-height: 1.2; }
.home-row-meta { font-size: 0.8rem; color: var(--muted); }

/* The "unverified" tag is a link to its key on the About page: still quiet, but clearly a link */
a.unverified { color: var(--muted); text-decoration: none; }
a.unverified:hover { color: var(--fg); border-color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
a.unverified:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* One typeface, Archivo (style study, direction A, step 2): narrow, heavy headings; figures in tabular width; small
   labels in capitals */
h1, h2, h3 { font-weight: 800; font-stretch: 88%; letter-spacing: -0.022em; }
.stat b, .num, .timeline time, .lp-n { font-variant-numeric: tabular-nums; font-weight: 700; font-stretch: 90%; }
/* Word labels in condensed capitals (line-up and labels study, step 3): scanned, not read; figures and units never go
   into capitals */
.stat span, .sec-card-status, .page-side h2, .glance dt, .lp-col h2, .find-results h3 { text-transform: uppercase; font-size: 0.72rem; font-weight: 600; font-stretch: 75%; letter-spacing: 0.05em; color: var(--muted); line-height: 1.3; }

/* Calmer components (style study step 4). Stat tiles become figures divided by hairlines; the section cards become
   ruled columns; the find box is a pill. Line and operator cards keep their colour bars: that colour means the line. */
.stats { display: flex; flex-wrap: wrap; gap: 0; margin: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { flex: 1 1 120px; background: none; border: 0; border-left: 1px solid var(--rule); border-radius: 0; padding: 12px 18px; }
.stat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 560px) {  /* phones: two figures a row, hairlines between rows and down the middle */
  .stats { display: grid; grid-template-columns: 1fr 1fr; }
  .stat { border-left: 0; padding: 10px 0; border-top: 1px solid var(--rule); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 14px; }
}
.sec-cards { gap: 12px 24px; }
.sec-card { background: none; border: 0; border-top: 2px solid var(--fg); border-radius: 0; padding: 12px 0 4px; }
.sec-card:hover, .sec-card:focus-visible { border-color: var(--fg); }
.sec-card:hover .sec-card-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sec-card-name { font-weight: 750; font-stretch: 92%; }
.find-input, .find-toggle { border: 1.5px solid var(--fg); border-radius: 999px; }

/* Drawing-office details on full train drawings only (style study step 5): a faint grid behind the drawing and a
   dimension line under it, with end ticks and the record's length in the middle */
:root { --grid: rgba(20, 22, 27, 0.055); }
:root[data-theme="dark"] { --grid: rgba(237, 238, 240, 0.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grid: rgba(237, 238, 240, 0.06); } }
.stock-full .dw { min-width: 900px; padding-bottom: 6px;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px; }
.stock-full .dw svg { min-width: 0; display: block; }
.dim { position: relative; height: 14px; margin-top: 4px; border-left: 1px solid var(--muted); border-right: 1px solid var(--muted); }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--muted); }
.dim span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 8px; background: var(--bg);
  font-size: 0.78rem; font-weight: 600; font-stretch: 75%; letter-spacing: 0.02em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Line colours too faint against the page (under 3:1 against --bg or --surface in the current theme: Northern,
   Piccadilly and Eurostar in dark mode, Circle in light mode, and others) get a 1px ink keyline at 60% wherever they're
   drawn, the same rule as the wordmark's. build.py marks those elements with data-kl, naming the themes. */
:root { --kl-ink: color-mix(in srgb, var(--fg) 60%, transparent); }
.kl-casing { display: none; }
:root[data-theme="light"] .swatch[data-kl~="light"], :root[data-theme="light"] .lp-bar[data-kl~="light"], :root[data-theme="light"] .home-row[data-kl~="light"] .home-row-bar, :root[data-theme="light"] .line-layout[data-kl~="light"] .line-title-bar,
:root[data-theme="light"] .line-layout[data-kl~="light"] .stops li::after, :root[data-theme="light"] .line-layout[data-kl~="light"] .toc-ind { box-shadow: inset 0 0 0 1px var(--kl-ink); }
:root[data-theme="light"] .line-layout[data-kl~="light"] .timeline, :root[data-theme="light"] .line-layout[data-kl~="light"] .card { box-shadow: -1px 0 0 var(--kl-ink), inset 1px 0 0 var(--kl-ink); }
:root[data-theme="light"] .line-layout[data-kl~="light"] .timeline li::before { box-shadow: 0 0 0 1px var(--kl-ink); }
:root[data-theme="light"] .line-layout[data-kl~="light"] .toc a[aria-current="true"] { box-shadow: inset 1px 0 0 var(--kl-ink); }
:root[data-theme="light"] svg[data-kl~="light"] .kl-casing { display: inline; }
:root[data-theme="dark"] .swatch[data-kl~="dark"], :root[data-theme="dark"] .lp-bar[data-kl~="dark"], :root[data-theme="dark"] .home-row[data-kl~="dark"] .home-row-bar, :root[data-theme="dark"] .line-layout[data-kl~="dark"] .line-title-bar,
:root[data-theme="dark"] .line-layout[data-kl~="dark"] .stops li::after, :root[data-theme="dark"] .line-layout[data-kl~="dark"] .toc-ind { box-shadow: inset 0 0 0 1px var(--kl-ink); }
:root[data-theme="dark"] .line-layout[data-kl~="dark"] .timeline, :root[data-theme="dark"] .line-layout[data-kl~="dark"] .card { box-shadow: -1px 0 0 var(--kl-ink), inset 1px 0 0 var(--kl-ink); }
:root[data-theme="dark"] .line-layout[data-kl~="dark"] .timeline li::before { box-shadow: 0 0 0 1px var(--kl-ink); }
:root[data-theme="dark"] .line-layout[data-kl~="dark"] .toc a[aria-current="true"] { box-shadow: inset 1px 0 0 var(--kl-ink); }
:root[data-theme="dark"] svg[data-kl~="dark"] .kl-casing { display: inline; }

/* Line and operator pages on wide screens: "On this page" and "At a glance" as one white panel, a hairline between them
   (Kyle, 2 October 2026; design/mock-bakerloo-page.html). At 960 px and below the sidebar is the sticky jump-link row. */
@media (min-width: 961px) {
  .page-side { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px 16px; }
  .page-side .glance { background: none; border: 0; border-radius: 0; padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--rule); }
}

/* Compare two or three trains (design/lineup-and-labels.html, step 4, approved by Kyle on 2 October 2026). For
   /stock/compare/ (build.py build_compare_page, compare.js). The drawing rows reuse the line-up's lu-* rules already in site.css (caption, drawing, ruler,
   10 m grid); these add the picker, the "shorter" marks and the table. */
.cmp-pick { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; margin: 0 0 12px; }
.cmp-pick label { display: grid; gap: 3px; }
.cmp-pick label > span { text-transform: uppercase; font-size: 0.72rem; font-weight: 600; font-stretch: 75%; letter-spacing: 0.05em; color: var(--muted); }
.cmp-pick select { font: inherit; font-size: 0.9rem; color: var(--fg); background-color: var(--surface); border: 1.5px solid var(--fg); border-radius: 999px;
  padding: 5px 30px 5px 12px; max-width: 17rem; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position: right 15px top 55%, right 10px top 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.cmp-pick select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmp-lu .lu-rows { position: relative; }
.cmp-gap { position: absolute; bottom: 9px; height: 0; border-top: 1.5px dashed var(--muted); }
.cmp-gap::after { content: ""; position: absolute; right: -1px; top: -6px; height: 11px; border-left: 1.5px solid var(--muted); }
/* a figure, so condensed in lower case (units never in capitals) */
.cmp-diff { position: absolute; left: 8px; bottom: 4px; white-space: nowrap; color: var(--fg); font-size: 0.78rem; font-weight: 600;
  font-stretch: 75%; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.cmp-end { position: absolute; top: 0; bottom: 0; border-left: 1px dashed color-mix(in srgb, var(--fg) 35%, transparent); pointer-events: none; }
.cmp-table td, .cmp-table thead th { text-align: right; }
.cmp-table td { font-variant-numeric: tabular-nums; }
/* the train names heading each column at reading size; the row labels in the first column stay condensed capitals */
.cmp-table thead th { font-size: 0.95rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; color: var(--fg); text-transform: none; }
.cmp-table thead th .unverified { font-size: 0.72rem; font-weight: 400; }
.cmp-table td.best { font-weight: 700; }