/* GB Trains: base styles. Colours are tokens on :root, redefined for dark mode. */
:root {
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --fg: #16181D;
  --muted: #5B6170;
  --rule: #E2E0DA;
  --accent: #1C3F94;
  --warn-bg: #FFF2CC;
  --warn-fg: #7A5300;
  --radius: 10px;
  --wm-blue: #175EFE;
  --wm-red: #E31B23;
  --font: 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: #111317; --surface: #1A1D23; --fg: #ECEDEF; --muted: #A2A8B4; --rule: #2C3038;
    --accent: #8FB0FF; --warn-bg: #3A2F12; --warn-fg: #F2CF7A; color-scheme: dark;
    --wm-blue: #9AAEFF; --wm-red: #EF3F48;
  }
}
:root[data-theme="dark"] {
  --bg: #111317; --surface: #1A1D23; --fg: #ECEDEF; --muted: #A2A8B4; --rule: #2C3038;
  --accent: #8FB0FF; --warn-bg: #3A2F12; --warn-fg: #F2CF7A; color-scheme: dark;
  --wm-blue: #9AAEFF; --wm-red: #EF3F48;
}

*, *::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; } }
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(--accent); }
: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: 1.55rem; display: block; }  /* Archivo Black outlines, tools/make_wordmark.py */
@media (max-width: 560px) { .brand .wordmark { height: 1.3rem; } .brand-mark { height: 1.6rem; } }

/* 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.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; 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); }
.ft-brand { display: flex; align-items: center; gap: 8px; }
.ft-brand .brand-mark { height: 1.6rem; } .ft-brand .wordmark { height: 1.25rem; 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.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; 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 { display: inline-block; font-size: 0.7rem; font-weight: 600; vertical-align: middle; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--warn-bg); color: var(--warn-fg); padding: 1px 6px; border-radius: 4px; }

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

.line-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.line-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 18px; background: var(--surface);
  border: 1px solid var(--rule); border-left: 6px solid var(--c); border-radius: var(--radius); text-decoration: none; color: var(--fg); }
.line-card:hover { border-color: var(--c); }
.line-card-name { font-weight: 650; }
.line-card-meta { font-size: 0.85rem; color: var(--muted); }

.line-title { border-bottom: 8px solid var(--c); padding-bottom: 6px; display: inline-block; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); margin-right: 8px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(127,127,127,0.4); }

.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; }
th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.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; }
.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 { color: var(--muted); font-size: 0.8rem; }
.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: 14px; flex-wrap: wrap; }
.line-title .ln { display: block; width: auto; }  /* height set per name by outline_svg */
.line-card-name .ln { display: block; width: auto; max-width: 100%; }