:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f3f2ee;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  /* Precedent brand: logo ring blue, pink, green. Bright values are for fills; --accent is the text-safe blue */
  --brand-blue: #31a8f7;
  --brand-pink: #f4279d;
  --brand-green: #2fd12f;
  --accent: #0a72b8;
  --accent-ink: #ffffff;
  --tint: #eef7fe;
  /* city fills that carry text (white on light, ink on dark) */
  --wel-ink: #0a72b8;
  --akl-ink: #c2127a;
  --chc-ink: #1a7f1a;
  --city-on: #ffffff;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --nodata: #b9b7ae;
  --early: #2a78d6;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232321;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #4fb6f9;
    --accent-ink: #0b0b0b;
    --tint: #10202b;
    --wel-ink: #4fb6f9;
    --akl-ink: #f4279d;
    --chc-ink: #2fd12f;
    --city-on: #0b0b0b;
    --nodata: #5a5955;
    --early: #3987e5;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232321;
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #4fb6f9;
  --accent-ink: #0b0b0b;
  --tint: #10202b;
  --wel-ink: #4fb6f9;
  --akl-ink: #f4279d;
  --chc-ink: #2fd12f;
  --city-on: #0b0b0b;
  --nodata: #5a5955;
  --early: #3987e5;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--page); color: var(--ink); font: 14px/1.45 var(--font);
  display: flex; flex-direction: column; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: var(--accent); }

/* header */
.top {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--brand-blue) 0 33.3%, var(--brand-pink) 33.3% 66.6%, var(--brand-green) 66.6%); }
.brand svg { color: var(--accent); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink); text-decoration: none; white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--ink-2);
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.tabs a:hover { background: var(--surface-2); }
.tabs a[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--critical); box-shadow: 0 0 0 0 var(--critical); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(208,59,59,.55); } 70% { box-shadow: 0 0 0 7px rgba(208,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(208,59,59,0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.icon-btn {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); display: grid; place-items: center; cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.small { margin: 0; width: 28px; height: 28px; font-size: 18px; line-height: 1; }

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* map view */
.mapwrap { position: relative; flex: 1; min-height: 560px; }
.map { position: absolute; inset: 0; }
.panel {
  position: absolute; top: 16px; left: 16px; width: var(--panel-w, 400px); max-height: calc(100% - 200px);
  overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px; z-index: 5; display: flex; flex-direction: column; gap: 12px;
}
#panel-live, #panel-trains { max-height: calc(100% - 32px); }
.peek { display: none; }
/* drag the panel's right edge to widen it (desktop); placed over the edge by JS */
.pgrip { position: absolute; z-index: 6; width: 10px; margin-left: -5px; cursor: ew-resize; touch-action: none; }
.pgrip::after { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--border); transition: background .15s; }
.pgrip:hover::after, .pgrip:focus-visible::after, .pgrip.drag::after { background: var(--accent); }
.pgrip:focus-visible { outline: none; }
body.resizing { cursor: ew-resize; user-select: none; }
.panel[hidden], .timeline[hidden], .routesview[hidden], .mapwrap[hidden] { display: none; }
.search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--page); color: var(--muted); }
.search input { border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; width: 100%; }
.search:focus-within { border-color: var(--accent); }
.results { list-style: none; margin: -6px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: 10px; max-height: 260px; overflow: auto; background: var(--surface); }
.results li { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.results li:hover, .results li.on { background: var(--surface-2); }
.results .nm { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 6px;
  border-radius: 6px; font-weight: 650; font-size: 12px; background: var(--surface-2); color: var(--ink); flex: none;
  box-shadow: inset 0 0 0 1px var(--border);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-2); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.seg.wide, .panel .seg { display: flex; flex-wrap: nowrap; } .seg.wide button, .panel .seg button { flex: 1; padding: 5px 4px; white-space: nowrap; }
.legend { display: grid; grid-template-columns: 1fr; gap: 5px; font-size: 12px; color: var(--ink-2); }
.legend .k { display: flex; align-items: center; gap: 8px; }
.sw { width: 22px; height: 6px; border-radius: 3px; flex: none; }
.sw.dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.sw.dash { background: repeating-linear-gradient(90deg, var(--nodata) 0 5px, transparent 5px 8px); }
.ico { font-size: 11px; width: 14px; text-align: center; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.fine { font-size: 12px; color: var(--muted); margin: 0; }
.card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--page); display: flex; flex-direction: column; gap: 8px; }
.card h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.card .row { display: flex; justify-content: space-between; color: var(--ink-2); }
.card .row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.linkbtn { border: 0; background: none; color: var(--accent); padding: 0; cursor: pointer; text-align: left; font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.status i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* tooltip */
.tip {
  position: absolute; z-index: 30; pointer-events: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px;
  font-size: 12px; min-width: 190px; max-width: 280px;
}
.tip h4, .maplibregl-popup-content h4 { margin: 0 0 6px; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.tip .r, .maplibregl-popup-content .r { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-2); }
.tip .r b, .maplibregl-popup-content .r b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
/* "20 s ago · 12:52:01 am" stays on one line; the label gives way instead */
.tip .r:has(b.age), .maplibregl-popup-content .r:has(b.age) { white-space: nowrap; }
.tip .r, .maplibregl-popup-content .r { min-width: 0; }

/* timeline */
.timeline {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px 12px;
}
.tl-head { display: flex; align-items: center; gap: 8px; }
.tl-head .icon-btn { margin-left: 0; }
.tl-date { display: flex; flex-direction: column; min-width: 190px; padding: 0 4px; }
.tl-date strong { font-size: 15px; }
.tl-date span { font-size: 12px; color: var(--ink-2); }
.tl-net { margin-left: auto; display: flex; gap: 18px; font-size: 12px; color: var(--ink-2); }
.tl-net b { display: block; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart { position: relative; width: 100%; }
#netchart { height: 70px; margin-top: 6px; }
#slider { width: 100%; margin: 2px 0 0; accent-color: var(--accent); }
.chart svg { display: block; overflow: visible; }
.chart .gl { stroke: var(--grid); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: var(--accent); opacity: .10; }
.chart .mark { stroke: var(--ink); stroke-width: 1.5; }
.chart .xh { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart .bar { fill: var(--accent); }
.chart .bar:hover, .chart .bar.on { opacity: .8; }
.chart .ctip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 8px; padding: 6px 8px; font-size: 12px; white-space: nowrap; z-index: 3; }

/* live */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { background: var(--page); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.kpi b { display: block; font-size: 22px; line-height: 1.1; font-weight: 650; }
.kpi span { font-size: 12px; color: var(--ink-2); }
.livelist { display: flex; flex-direction: column; gap: 8px; }
.alert { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--page); }
.alert .hd { display: flex; gap: 8px; align-items: flex-start; }
.alert .hd strong { font-size: 13px; }
.alert .meta { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.alert .routes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.chip-link { text-decoration: none; border-radius: 6px; }
.chip-link:hover .chip, .chip-link:focus-visible .chip { outline: 2px solid var(--accent); outline-offset: 1px; }
.alert details { margin-top: 6px; font-size: 12px; color: var(--ink-2); white-space: pre-line; }
.alert summary { cursor: pointer; color: var(--accent); }
.eff { font-size: 11px; font-weight: 650; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.eff.NO_SERVICE, .eff.REDUCED_SERVICE { background: var(--critical); color: #fff; }
.eff.DETOUR, .eff.STOP_MOVED, .eff.SIGNIFICANT_DELAYS { background: var(--warning); color: #0b0b0b; }
.cx { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 10px; align-items: center; font-size: 13px; }
.cx .t { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.cx .past { opacity: .5; }
.none { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* routes view */
.routesview { display: flex; flex-direction: column; gap: 12px; padding: 16px; flex: 1; min-height: 0; }
.rv-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rv-controls .search { width: 280px; }
.rv-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tablewrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 190px); }
.rtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtable th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 600; color: var(--ink-2); padding: 10px; border-bottom: 1px solid var(--grid); cursor: pointer; user-select: none; white-space: nowrap; }
.rtable th[aria-sort]::after { content: " ↓"; color: var(--muted); }
.rtable th[aria-sort="ascending"]::after { content: " ↑"; }
.rtable td { padding: 8px 10px; border-bottom: 1px solid var(--grid); }
.rtable td.nm { color: var(--ink-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.rtable tbody tr { cursor: pointer; }
.rtable tbody tr:hover, .rtable tbody tr.on { background: var(--surface-2); }
.detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 72px; }
.detail h2 { margin: 0; font-size: 18px; display: flex; gap: 10px; align-items: center; }
.detail h3 { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.detail .sub { color: var(--ink-2); margin: -10px 0 0; }
.detail .empty { color: var(--ink-2); }
.detail .empty h2 { color: var(--ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.deps { width: 100%; border-collapse: collapse; font-size: 12px; }
.deps th, .deps td { padding: 5px 6px; border-bottom: 1px solid var(--grid); text-align: left; }
.deps th { color: var(--ink-2); font-weight: 600; }
.deps .num { text-align: right; font-variant-numeric: tabular-nums; }

.foot { padding: 10px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.madeby { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.madeby:hover, .madeby:focus-visible { color: var(--accent); text-decoration: underline; }
.about a { color: var(--accent); }
.madeby img { height: 22px; width: auto; display: block; }
.madeby .logo-d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .madeby .logo-l { display: none; } :root:not([data-theme="light"]) .madeby .logo-d { display: block; } }
:root[data-theme="dark"] .madeby .logo-l { display: none; }
:root[data-theme="dark"] .madeby .logo-d { display: block; }
.brand .region { font-weight: 600; color: var(--ink-2); padding-left: 8px; border-left: 1px solid var(--border); }

/* maplibre chrome */
.maplibregl-ctrl-group { background: var(--surface) !important; border: 1px solid var(--border); box-shadow: var(--shadow) !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--border) !important; }
:root[data-theme="dark"] .maplibregl-ctrl-icon, :root:not([data-theme="light"]) .dark-ctrl .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: var(--ink-2); }
.maplibregl-ctrl-attrib a { color: var(--ink-2) !important; }
.maplibregl-popup-content { background: var(--surface); color: var(--ink); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px; }
.maplibregl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }
.btn-map { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 12px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; font-size: 13px; }
.btn-map::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.liveroute { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.liveroute .lr-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.liveroute .lr-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.liveroute .lr-all { font-weight: 600; font-size: 13px; }
.follow-btn { margin-top: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); font-weight: 600; cursor: pointer; }
.follow-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* narrow screens */
@media (max-width: 860px) {
  /* the page scrolls as a whole, so the footer sits after the content instead of over it */
  html, body { height: auto; }
  main { flex: none; }
  .top { gap: 8px; padding: 8px 12px; }
  .brand span { display: none; }
  .mapwrap { display: flex; flex-direction: column; min-height: 0; }
  .map { position: relative; height: 52vh; min-height: 320px; flex: none; }
  .panel { position: static; width: auto; max-height: none; margin: 12px 16px 0; box-shadow: none; }
  .pgrip { display: none; }
  .timeline { position: static; margin: 12px 16px; box-shadow: none; }
  .tl-head { flex-wrap: wrap; }
  .tl-net { margin-left: 0; width: 100%; justify-content: space-between; }
  .tl-date { min-width: 0; flex: 1; }
  .rv-body { grid-template-columns: 1fr; }
  .rv-controls .search { width: 100%; }
  .detail { position: static; }
  .two { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  /* live and trains: the map fills the screen above a short strip of the panel, so a vehicle's
     card covers map rather than half the figures, and the strip shows there's more below */
  body[data-view="live"] .map, body[data-view="trains"] .map { height: calc(100svh - 56px - 64px); min-height: 320px; }
  /* playing the timeline: map fills the screen above the timeline, which docks to the bottom */
  body.playing .map { height: calc(100svh - var(--top-h, 56px) - var(--tl-h, 150px)); min-height: 200px; }
  body.playing .timeline { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 15; border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0; box-shadow: 0 -6px 20px rgba(0, 0, 0, .18); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  body.playing .foot { padding-bottom: var(--tl-h, 150px); }
  .peek { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -4px 0 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
  .peek .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--axis); }
  .tablewrap { max-height: 60vh; }
}

/* worst periods */
.worst summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.worst summary::-webkit-details-marker { display: none; }
.worst summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.worst[open] summary::before { content: "▾"; }
.worst .seg { margin: 8px 0; }
.worstlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: w; }
.worstlist li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; cursor: pointer; counter-increment: w; }
.worstlist li::before { content: counter(w); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.worstlist li:hover, .worstlist li.on { background: var(--surface-2); }
.worstlist .wd { font-weight: 600; }
.worstlist .wn { display: block; font-size: 11px; color: var(--ink-2); font-weight: 400; }
.worstlist .wv { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.worstlist .wv small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.worstdays { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.worstdays li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--grid); }
.worstdays b { font-variant-numeric: tabular-nums; }

/* buses: route list (same look as the trains table) */
.blist { flex: none; max-height: 42vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.blines th { position: sticky; top: 0; background: var(--surface); cursor: pointer; z-index: 1; }
.blines th[aria-sort="ascending"] { color: var(--ink); }
.blines td.nm { max-width: 0; width: 100%; }
.blines .rn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.blines .rn small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12px; }
.blines tbody tr.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }

/* trains */
.tmonth { display: flex; align-items: center; gap: 8px; }
.tmonth .tl-date { flex: 1; text-align: center; }
.tlines { width: 100%; border-collapse: collapse; font-size: 12px; }
.tlines th { color: var(--ink-2); font-weight: 600; text-align: right; padding: 4px 6px; }
.tlines th:first-child { text-align: left; }
.tlines td { padding: 6px; border-top: 1px solid var(--grid); text-align: right; font-variant-numeric: tabular-nums; }
.tlines td:first-child { text-align: left; }
.tlines tbody tr { cursor: pointer; }
.tlines tbody tr:hover { background: var(--surface-2); }
.tlines tbody tr.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.tlines .nm small { display: block; color: var(--muted); font-size: 11px; }
.tlines .tot td { font-weight: 650; }
.chart .ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .reft { fill: var(--muted); font-size: 10px; }
.lates { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.lates li { display: flex; align-items: center; gap: 6px; }
.lates li .hs { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lates li b { font-variant-numeric: tabular-nums; }
.tip.sheet {
  position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom));
  max-width: none; min-width: 0; max-height: 45vh; overflow: auto; pointer-events: auto; z-index: 50;
  padding-right: 40px; font-size: 13px;
}
.tip-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }

/* intro page */
body.intro { display: block; height: auto; overflow-x: clip; }
.page { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; display: block; }
.page section { margin-top: 44px; }
.page h2 { font-size: 20px; margin: 0 0 14px; }
.hero { margin-top: 0 !important; position: relative; padding: 56px 0 8px; }
.hero > * { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0 -50vw; z-index: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 85% 20%, color-mix(in srgb, var(--brand-blue) 18%, transparent), transparent 70%),
              radial-gradient(500px 260px at 100% 85%, color-mix(in srgb, var(--brand-pink) 12%, transparent), transparent 70%),
              radial-gradient(420px 220px at 65% 100%, color-mix(in srgb, var(--brand-green) 12%, transparent), transparent 70%); }
.hero h1 { font-size: clamp(40px, 8vw, 72px); line-height: 1; margin: 0 0 16px; letter-spacing: -0.02em; }
.lede { font-size: clamp(17px, 2.4vw, 21px); color: var(--ink-2); max-width: 640px; margin: 0 0 22px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 28px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 14px 17px;
  position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--axis); }
.stat[class*="rc-"]::before { background: var(--rc); }
.stat b { display: block; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--ink-2); }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.icard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.icard h3, .region-card h3 { margin: 0 0 6px; font-size: 16px; }
.icard p, .region-card p { margin: 0; color: var(--ink-2); }
/* region cards: same shape for every city, links pinned to the bottom */
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.region-card { display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--rc); border-radius: var(--radius); padding: 16px 18px 18px;
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.region-card:hover { transform: translateY(-2px); border-color: var(--rc); }
.region-card h3 { font-size: 20px; margin: 0; }
.region-card .rc-hist { font-size: 13px; }
.region-card .rc-hist b { color: var(--ink); font-weight: 600; }
.region-links { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 10px; }
.region-links .sub { display: flex; justify-content: center; gap: 20px; white-space: nowrap; }
.region-links .sub span { color: var(--rc-ink, var(--accent)); font-weight: 600; font-size: 14px; }
.region-links .sub span:hover { text-decoration: underline; text-underline-offset: 3px; }
.region-links span.live { display: block; text-align: center; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--rc);
  background: var(--surface); color: var(--ink); font-weight: 650; font-size: 14px; }
.region-links span.live:hover { background: color-mix(in srgb, var(--rc) 12%, var(--surface)); }
.rc-stats { display: grid; margin: auto 0 0; padding: 4px 0 0 12px; border-left: 3px solid var(--rc); }
.rc-stats:empty { display: none; }
.rc-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; }
.rc-stats div + div { border-top: 1px solid var(--grid); }
.rc-stats span { font-size: 13px; color: var(--ink-2); }
.rc-stats b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .region-card { transition: none; } .region-card:hover { transform: none; } }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 32px; }
.plain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); }
.plain b { color: var(--ink); }
.about p { color: var(--ink-2); max-width: 760px; margin: 0; }
@media (max-width: 860px) { .brand .region { display: none; } }

/* city colours: Wellington blue, Auckland pink, Christchurch green (intro cards, stats, buttons, region headers).
   Charts and the map keep --accent blue so the city colour never reads as a status colour. */
.rc-wellington, body[data-region="wellington"] { --rc: var(--brand-blue); --rc-ink: var(--wel-ink); }
.rc-auckland, body[data-region="auckland"] { --rc: var(--brand-pink); --rc-ink: var(--akl-ink); }
.rc-christchurch, body[data-region="christchurch"] { --rc: var(--brand-green); --rc-ink: var(--chc-ink); }
.btn[class*="rc-"] { background: var(--surface); color: var(--ink); border: 2px solid var(--rc); padding: 9px 15px; }
.btn[class*="rc-"]:hover { background: color-mix(in srgb, var(--rc) 12%, var(--surface)); }
body[data-region] .top::after { background: var(--rc); }
body[data-region] .tabs a[aria-selected="true"] { background: var(--rc-ink); color: var(--city-on); }
body[data-region] .tabs a[aria-selected="true"] .pulse { background: currentColor; }
@media (min-width: 861px) { body[data-region] .brand .region { display: inline-flex; align-items: center; gap: 6px; } }
body[data-region] .brand .region::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rc); }

/* intro page: labelled theme switch */
.theme-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--accent);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.theme-btn:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hw-lede { margin: 0 0 12px; color: var(--ink-2); }
.hw-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.hw-region { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--rc); border-radius: var(--radius); padding: 14px 16px; }
.hw-region h3 { margin: 0 0 8px; font-size: 16px; }
.hw-region p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
.hw-region p:last-child { margin-bottom: 0; }
.hw-region b { color: var(--ink); }
.about .pitch { margin-top: 12px; padding: 12px 16px; border-left: 4px solid var(--brand-blue); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink); }