/* TSW Timetable Viewer — prototype styles.
   Chrome stays quiet cool grey; the workbook's own train colours carry meaning.
   The one accent is highlighter yellow: the selected train's column, as marked on a paper WTT. */

:root {
  --ink: #18232d;
  --muted: #5b6873;
  --paper: #eef2f4;
  --surface: #ffffff;
  --zebra: #f6f8f9;
  --rule: #cbd4db;
  --rule-soft: #e1e7eb;
  --hl: #ffe58a;
  --hl-soft: #fff4c2;
  --focus: #1d5fa8;
  --gap-bg: #f4d9d5;
  --gap-ink: #7f2a21;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --side: 17.5rem;
  --header-h: 3.4rem;
  --panel: 23rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e3e9ed;
    --muted: #97a4ae;
    --paper: #12191f;
    --surface: #19232b;
    --zebra: #1d2830;
    --rule: #34434e;
    --rule-soft: #26323b;
    --hl: #8a7320;
    --hl-soft: #3d3619;
    --focus: #79aef0;
    --gap-bg: #4a2723;
    --gap-ink: #f1c0b8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
/* One scroll for the whole page: the route list and the side panel stick to the window, the timetable rows scroll with the page. */
.app {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - var(--header-h));
}
body.has-panel .app { grid-template-columns: var(--side) minmax(0, 1fr) var(--panel); }

.routes {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1rem 2rem;
}
.routes-title { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 700; }

.field { display: grid; gap: .25rem; font-size: .8rem; color: var(--muted); }
.field input {
  width: 100%;
  padding: .45rem .55rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  font-size: .9rem;
  color: var(--ink);
}
.field + .field { margin-top: .6rem; }
.field select {
  width: 100%;
  padding: .4rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-size: .9rem;
}
.field.inline { display: flex; align-items: center; gap: .4rem; }
.field.inline input { width: auto; }
.field.inline input.time-in { width: 4.6rem; font-family: var(--mono); text-align: center; }
.field.grow { flex: 1 1 12rem; }
.field.grow input { width: 100%; min-width: 8rem; }

.route-list { margin-top: 1rem; }
.region h3 {
  margin: 1.1rem 0 .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}
.region ul { list-style: none; margin: 0; padding: 0; }
.route-link {
  display: block;
  padding: .35rem .5rem;
  margin: 0 -.5rem;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.route-link:hover { background: var(--zebra); }
.route-link.is-active { background: var(--hl-soft); border-left-color: var(--hl); }
.route-link .rn { display: block; font-weight: 600; font-size: .92rem; }
.route-link .rt { display: block; font-size: .78rem; color: var(--muted); }

.main {
  min-width: 0;
  padding: 1rem 1.25rem 2rem;
}
.topbar { display: flex; align-items: flex-start; gap: .75rem; }
.routes-toggle { display: none; }
.route-head h2 { margin: 0; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.015em; }
.route-head p { margin: .15rem 0 0; color: var(--muted); }

.view { min-width: 0; }
.empty-start, .empty { padding: 3rem 0; color: var(--muted); }
.empty p { margin: 0 0 1rem; }
.none { color: var(--muted); }

/* ---------- tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; }
.sheet-tabs { margin-top: .9rem; border-bottom: 1px solid var(--rule); }
.sheet-tabs button {
  border: 1px solid transparent;
  border-bottom: 0;
  background: none;
  padding: .45rem .8rem;
  border-radius: 4px 4px 0 0;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: -1px;
}
.sheet-tabs button[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--rule);
  color: var(--ink);
}
.sheet-desc { margin: .6rem 0 0; color: var(--muted); font-size: .85rem; max-width: 75ch; }

.dir-tabs button {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .85rem;
}
.dir-tabs button[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ---------- controls ---------- */
.controls { display: grid; gap: .6rem; padding: .8rem 0 .6rem; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.btn, .btn-quiet {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 4px;
  padding: .4rem .7rem;
  font-size: .85rem;
}
.btn-quiet { border-color: transparent; background: none; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); padding-inline: .2rem; }
.btn-quiet:hover { color: var(--ink); }
.count { margin: 0; font-size: .82rem; color: var(--muted); }

.key { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.key-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--rule-soft);
  background: var(--surface);
  border-radius: 4px;
  padding: .15rem .45rem .15rem .2rem;
  max-width: 21rem;
  font-size: .8rem;
}
.key-item:disabled { cursor: default; }
.key-item .key-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: .3rem .65rem; font-size: .8rem; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--surface); }
.key-hint { font-size: .8rem; color: var(--muted); }
.key-item.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--hl-soft); }
.key-item.is-dim { opacity: .45; }
.key-item.is-dim .hc { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.key-item.is-off { opacity: .45; }
.key-item.is-off .hc { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.key-item.is-off .key-text { text-decoration: line-through; }

/* ---------- headcode chip (train describer berth) ---------- */
.hc {
  display: inline-block;
  font: 700 .82rem/1.25 var(--mono);
  padding: .1rem .3rem;
  border-radius: 2px;
  background: var(--bg, var(--surface));
  color: var(--fg, var(--ink));
  white-space: nowrap;
  letter-spacing: .02em;
}
.hc-plain { box-shadow: inset 0 0 0 1px var(--rule); }
.hc-lg { font-size: 1.05rem; padding: .15rem .45rem; }

/* ---------- grid ---------- */
.grid-wrap {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;   /* a sideways swipe at either end doesn't become browser back / forward */
  contain: layout paint;            /* scrolling the table doesn't make the browser re-check the rest of the page */
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.grid-wrap::-webkit-scrollbar { height: 0; }      /* the sideways scrollbar is the one pinned to the window (.grid-hbar) */
.grid-wrap { scrollbar-width: none; }

/* Copy of the header rows, pinned to the top of the window once the real ones scroll out of view */
.grid-float { position: sticky; top: 0; z-index: 6; height: 0; }
.grid-float-inner {
  overflow: hidden;
  overscroll-behavior-x: contain;
  visibility: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 0;
  box-shadow: 0 6px 12px -8px rgba(15, 25, 35, .35);
}
.grid-float.is-on .grid-float-inner { visibility: visible; }
.grid-clone { table-layout: fixed; will-change: transform; }
.grid-clone thead tr > :first-child { position: relative; will-change: transform; }

/* Sideways scrollbar pinned to the bottom of the window while the table is taller than the window */
.grid-hbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  margin-top: -1px;
  overscroll-behavior-x: contain;
  background: var(--paper);
}
.grid-hbar > div { height: 1px; }
.grid-hbar.is-off { visibility: hidden; }
.grid {
  border-collapse: separate;
  border-spacing: 0;
  font: .84rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}
.grid thead { position: relative; z-index: 3; }
.grid thead tr > * { background: var(--surface); }
.grid th, .grid td { padding: .2rem .4rem; text-align: center; white-space: nowrap; }
.grid tbody th, .grid thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  text-align: left;
  border-right: 1px solid var(--rule);
  font: 600 .84rem/1.2 var(--sans);
  max-width: 15rem;
}
.grid thead th:first-child { z-index: 4; }
.grid .corner { color: var(--muted); font-weight: 600; vertical-align: bottom; }
.row-hc th { padding-top: .45rem; padding-bottom: .35rem; }
.hc-btn { border: 0; background: none; padding: 0; }
.hc-btn:hover .hc { outline: 2px solid var(--ink); outline-offset: 1px; }

.row-meta th, .row-meta td {
  font: italic .72rem/1.2 var(--sans);
  color: var(--muted);
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule-soft);
}
.row-meta th { font-style: normal; }
.row-meta td span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  max-width: 6.5rem;
  min-width: 3.4rem;
  margin: 0 auto;
}
.grid thead tr:last-child > * { border-bottom: 1px solid var(--rule); }

.grid tbody tr.z > * { background: var(--zebra); }
body:not(.is-scrolling) .grid tbody tr:hover > * { background: var(--rule-soft); }
.grid tbody tr.row-end th .stn { font-weight: 700; }

.stn {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
  max-width: 14.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.stn:hover { text-decoration: underline; text-underline-offset: 2px; }

td.pass { color: var(--muted); font-family: var(--sans); }
td.sim { font-style: italic; color: var(--muted); }
td.arr { font-weight: 700; }
td.gap { background: var(--gap-bg) !important; color: var(--gap-ink); font: italic .72rem/1.1 var(--sans); }
td.word { font: italic .75rem/1.1 var(--sans); }
td.rng { font-size: .74rem; line-height: 1.1; }
td.rng span { display: block; }

tr.row-div th.divider {
  font: 700 .78rem/1.2 var(--sans);
  color: var(--ink);
  background: var(--paper) !important;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-top: .35rem;
  padding-bottom: .35rem;
}
tr.row-div td { background: var(--paper) !important; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* ---------- specials list ---------- */
.specials { padding-bottom: 1rem; }
.layer { font-size: 1rem; margin: 1.4rem 0 .5rem; }
.special {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .8rem 1rem;
  margin-bottom: .75rem;
  max-width: 40rem;
}
.special header { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.formation { margin: .3rem 0 .6rem; color: var(--muted); font-style: italic; font-size: .88rem; }
.mini { border-collapse: collapse; width: 100%; font: .84rem/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.mini th, .mini td { padding: .2rem .4rem; text-align: center; border-bottom: 1px solid var(--rule-soft); }
.mini th:first-child, .mini tbody th { text-align: left; font: 600 .84rem/1.3 var(--sans); }
.mini thead th { color: var(--muted); font: 600 .78rem/1.3 var(--sans); }
.mini tr.row-end th { font-weight: 700; }

/* ---------- side panel ---------- */
.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem 1rem .6rem;
  border-bottom: 1px solid var(--rule-soft);
}
.panel-title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.panel-name { font-weight: 700; font-size: 1.1rem; }
.close { border: 1px solid var(--rule); background: var(--surface); border-radius: 4px; padding: .3rem .6rem; font-size: .85rem; }
.panel-body { overflow-y: auto; padding: .8rem 1rem 2rem; }
.panel-sub { margin: 0 0 .4rem; color: var(--muted); font-size: .85rem; }
.panel-key { margin: 0 0 .6rem; font-size: .9rem; }
.panel-h { font-size: .9rem; margin: 1.1rem 0 .4rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: .4rem 0 0; font-size: .9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.run { list-style: none; margin: 0; padding: 0; }
.run li { display: grid; grid-template-columns: 6.6rem 1fr; gap: .5rem; padding: .18rem 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.run .run-time, .calls .run-time { font: .86rem/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.run li.is-pass { color: var(--muted); }
.run li.is-pass .run-time { font: italic .8rem/1.3 var(--sans); }
.run li.sim .run-time, .calls .run-time.sim { font-style: italic; color: var(--muted); }
.run li.arr .run-time, .calls .run-time.arr { font-weight: 700; }
.run .stn, .panel .stn { max-width: none; white-space: normal; }

.calls { list-style: none; margin: 0; padding: 0; }
.call {
  display: grid;
  grid-template-columns: 6.6rem auto 1fr;
  grid-template-areas: "time hc to" "time hc dir";
  align-items: center;
  column-gap: .5rem;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: none;
  padding: .3rem 0;
}
.call:hover { background: var(--zebra); }
.call .run-time { grid-area: time; }
.call .hc { grid-area: hc; justify-self: start; }
.call-to { grid-area: to; font-size: .85rem; }
.call-dir { grid-area: dir; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-to { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.passes { margin-top: 1rem; }
.passes summary { cursor: pointer; color: var(--muted); font-size: .88rem; }

.notes { margin: 0; padding-left: 1.1rem; font-size: .88rem; }
.notes li { margin-bottom: .45rem; max-width: 70ch; }
.key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .88rem; }
.key-list li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.legend { margin-top: 1.2rem; color: var(--muted); font-size: .8rem; }

/* ---------- site header and footer (layout.js) ---------- */
.site-header {
  height: var(--header-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
#site-header:empty { height: var(--header-h); }
.site-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav { display: flex; gap: .25rem; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.site-nav a {
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--hl); }
.site-actions { margin-left: auto; display: flex; gap: .5rem; }

.placeholder-btn {
  position: relative;
  display: inline-block;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 4px;
  padding: .3rem .7rem;
  font-size: .82rem;
  color: var(--ink);
  text-decoration: none;
}
.placeholder-btn:hover { border-color: var(--muted); }
.placeholder-btn.is-told::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--surface);
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.site-header .placeholder-btn.is-told::after { bottom: auto; top: calc(100% + 6px); }

.site-footer { flex: none; background: var(--surface); border-top: 1px solid var(--rule); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 2rem;
  padding: 1rem 1.25rem 1.2rem;
}
/* timetables page: the footer sits at the bottom of the middle column, so the route list and panel stay full height */
.main .site-footer { margin: 2rem -1.25rem -2rem; }
.main .footer-inner { padding-inline: 1.25rem; }
.footer-note { margin: 0; max-width: 60ch; font-size: .8rem; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- content pages (home, PIS board, downloads, about) ---------- */
body:not(.page-app) { display: flex; flex-direction: column; min-height: 100vh; }
.page { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
.page h1 { margin: 0 0 .4rem; font-size: 2rem; line-height: 1.15; letter-spacing: -0.015em; }
.lede { margin: 0 0 1.8rem; font-size: 1.1rem; color: var(--muted); max-width: 60ch; }
.placeholder-box {
  border: 1px dashed var(--rule);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  background: var(--surface);
}
.placeholder-label { margin: 0 0 .4rem; font-weight: 700; font-size: .85rem; color: var(--muted); }
.placeholder-box ul { margin: 0; padding-left: 1.1rem; }
.placeholder-box li { margin-bottom: .3rem; }
.placeholder-box a { color: var(--focus); }

/* ---------- home: routes by region ---------- */
.page-wide { max-width: 72rem; }
.region-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; }
.region-jump a {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.region-jump a:hover { border-color: var(--ink); }
.region-block { margin-bottom: 2.4rem; scroll-margin-top: 1rem; }
.region-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .4rem;
  margin-bottom: .9rem;
}
.region-head h2 { margin: 0; font-size: 1.45rem; letter-spacing: -0.01em; }
.region-count { color: var(--muted); font-size: .9rem; }
.route-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: .5rem;
}
.route-tile {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  height: 100%;
  padding: .65rem .8rem .7rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
}
.route-tile:hover { border-color: var(--muted); border-left-color: var(--hl); background: var(--zebra); }
.tile-name { font-weight: 700; }
.tile-tt { font-size: .85rem; color: var(--muted); }
.tile-country { font-size: .78rem; color: var(--muted); font-style: italic; }

/* ---------- PIS board ---------- */
.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; }
.page-pis { max-width: 80rem; padding-top: 1.25rem; }
.pis-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1rem; }
.pis-controls .field { min-width: 9rem; }
.pis-controls .field + .field { margin-top: 0; }
.pis-controls select { min-width: 12rem; max-width: 22rem; }
.pis-controls #pisLook { min-width: 7rem; }
.pis-time { display: flex; align-items: center; gap: .5rem; }
.pis-time .seg button { font-size: .85rem; padding: .4rem .7rem; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.pis-time .time-in {
  width: 4.8rem; padding: .4rem .5rem; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); font-family: var(--mono); text-align: center; color: var(--ink);
}
.pis-time .time-in:disabled { opacity: .5; }
.pis-full { margin-left: auto; }
.pis-status { margin: 0 0 .8rem; color: var(--muted); }
.pis-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  background: #050505;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #262626, 0 8px 22px rgba(15, 25, 35, .22);
}
.pis-stage canvas { display: block; max-width: 100%; }
.pis-stage:fullscreen { padding: 0; border-radius: 0; background: #000; }
.pis-note { margin: .8rem 0 0; font-size: .82rem; color: var(--muted); max-width: 75ch; }
.pis-controls .seg button { font-size: .85rem; padding: .4rem .7rem; }
.pis-controls #pisLook { min-width: 13rem; }
.pis-controls #pisColour { min-width: 6rem; }

/* ----- screen looks (pis-screens.js); sizes are in em, the script sets font-size from the board width ----- */
.pis-dom { width: 100%; overflow: hidden; box-sizing: border-box; position: relative; }
.pis-stage[data-look="de-platform"], .pis-stage[data-look="tft"], .pis-stage[data-look="flap"] { padding: 14px; }
.pis-stage:fullscreen .pis-dom { height: 100vh !important; }

/* German platform display: white on dark blue */
.look-de {
  background: linear-gradient(180deg, #0f3478 0%, #0a275f 100%);
  color: #fff;
  font-family: var(--sans);
  padding: .55em .9em .7em;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #06173a;
}
.de-head { display: flex; align-items: baseline; gap: 1em; font-size: .78em; color: #d5def0; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: .35em; }
.de-station { font-weight: 700; color: #fff; }
.de-tag { font-style: italic; }
.de-clock { margin-left: auto; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; font-size: 1.25em; }
.de-next { display: grid; grid-template-columns: 6.2em 1fr; gap: 1em; padding: .6em 0 .7em; border-bottom: 2px solid rgba(255,255,255,.55); }
.de-time { font-size: 1.75em; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.de-train { margin-top: .25em; font-size: .95em; }
.de-train b { display: inline-block; background: #fff; color: #0a275f; padding: 0 .25em; border-radius: 2px; }
.de-op { margin-top: .2em; font-size: .78em; color: #c7d3ea; }
.de-mid { min-width: 0; }
.de-via { font-size: .82em; color: #e3e9f6; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.de-dest { font-size: 2.5em; font-weight: 700; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de-follow { padding-top: .35em; }
.de-fh { font-size: .75em; color: #c7d3ea; margin-bottom: .2em; }
.de-row { display: grid; grid-template-columns: 3.6em 6.5em 1fr auto; gap: .8em; font-size: 1.05em; line-height: 1.5; border-top: 1px solid rgba(255,255,255,.18); }
.de-row .t { font-weight: 700; font-variant-numeric: tabular-nums; }
.de-row .d, .de-row .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de-row .o { color: #c7d3ea; font-size: .85em; }
.de-empty { padding: 1em 0; font-size: 1.3em; }

/* German station board: the hall board, blue with white text */
.look-deb { background: #0b2b68; color: #fff; font-family: var(--sans); border-radius: 3px; box-shadow: inset 0 0 0 2px #061a40; }
.deb-head { display: flex; align-items: baseline; gap: .9em; padding: .45em .9em .4em; background: #071f4f; border-bottom: 2px solid rgba(255,255,255,.7); }
.deb-ab { font-size: 1.55em; font-weight: 700; }
.deb-station { color: #cdd8ee; }
.deb-tag { color: #cdd8ee; font-style: italic; font-size: .8em; }
.deb-clock { margin-left: auto; align-self: center; background: #fff; color: #0b2b68; font-weight: 700; font-size: 1.2em; padding: 0 .35em; border-radius: 2px; font-variant-numeric: tabular-nums; }
.deb-grid { display: grid; grid-template-columns: 3.4em 6.4em minmax(0, 1.25fr) minmax(0, 1fr) 6.5em; gap: .8em; align-items: baseline; padding: 0 .9em; }
.deb-grid.with-op { grid-template-columns: 3.4em 6.4em minmax(0, 1.25fr) minmax(0, 1fr) 5em 6.5em; }
.deb-cols { color: #b9c8e6; padding-top: .45em; padding-bottom: .3em; }
.deb-cols > span { font-size: .75em; }
.deb-row { padding-top: .42em; padding-bottom: .42em; border-top: 1px solid rgba(255,255,255,.16); }
.deb-row:nth-of-type(odd) { background: rgba(0,0,0,.13); }
.deb-row .t { font-weight: 700; font-size: 1.12em; font-variant-numeric: tabular-nums; }
.deb-row .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deb-row .n b { background: #fff; color: #0b2b68; padding: 0 .25em; border-radius: 2px; font-size: .9em; }
.deb-row .v { font-size: .8em; color: #d4ddf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deb-row .d { font-weight: 700; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deb-row .o { font-size: .8em; color: #cdd8ee; }
.deb-note { display: inline-block; background: #ffd23f; color: #0b2b68; font-weight: 700; font-size: .85em; padding: 0 .35em; border-radius: 2px; }
.deb-empty { padding: 1em .9em; font-size: 1.2em; }
.look-deb.narrow .deb-grid, .look-deb.narrow .deb-grid.with-op { grid-template-columns: 3.2em 6.4em minmax(0, 1fr) auto; gap: .5em; padding: 0 .6em; }
.look-deb.narrow .v, .look-deb.narrow .o { display: none; }

/* Modern screen */
.look-tft { background: #0d1013; color: #f2f4f5; font-family: var(--sans); border-radius: 3px; }
.tft-head { display: flex; justify-content: space-between; align-items: center; padding: .55em .9em; background: #000; border-bottom: 3px solid #ffd23f; }
.tft-title { font-size: 1.35em; font-weight: 700; line-height: 1.1; }
.tft-station { color: #a8b3bd; font-size: .9em; }
.tft-right { display: flex; align-items: baseline; gap: .8em; }
.tft-tag { color: #a8b3bd; font-size: .8em; }
.tft-clock { font-size: 1.7em; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffd23f; }
.tft-grid { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) 6.5em 7em; gap: .9em; align-items: baseline; padding: 0 .9em; }
.tft-grid.with-op { grid-template-columns: 4.2em minmax(0, 1fr) 7.5em 6.5em 7em; }
.tft-cols { color: #8b96a0; padding-top: .55em; padding-bottom: .35em; border-bottom: 1px solid #262e35; }
.tft-cols > span { font-size: .78em; }
.tft-row { padding-top: .45em; padding-bottom: .45em; border-bottom: 1px solid #1d2329; }
.tft-row.first { background: #161c22; }
.tft-row .t { font-weight: 700; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.tft-row .d { min-width: 0; }
.tft-row .dn { display: block; font-size: 1.2em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tft-row .tft-call { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8em; color: #c9d1d8; margin-top: .15em; }
.tft-row .n { color: #a8b3bd; font-size: .9em; font-variant-numeric: tabular-nums; }
.tft-row .chip { display: inline-block; font-size: .78em; padding: .05em .45em; border: 1px solid #3a444d; border-radius: 3px; color: #dde3e8; }
.tft-row .s { color: #57d97b; font-weight: 600; }
.tft-row .s.boarding { color: #ffd23f; }
.tft-grid .r { text-align: right; }
.tft-empty { padding: 1.2em .9em; color: #a8b3bd; }

/* 1980s-90s TV monitor */
.pis-stage[data-look="crt"] { background: #2b2a27; }
.look-crt {
  background: linear-gradient(180deg, #d8d1c1, #b3ac9b);
  border-radius: 22px;
  padding: 4.5% 5%;
  box-shadow: inset 0 2px 0 #ece7db, inset 0 -3px 6px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.45);
}
.crt-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 28px / 22px;
  background: radial-gradient(ellipse at center, #2638b5 0%, #1a2a95 60%, #101b6b 100%);
  box-shadow: inset 0 0 40px rgba(0,0,20,.7), 0 0 0 6px #1e1e1c;
  padding: 3% 4%;
  font-family: "VT323", "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  line-height: 1.12;
  color: #f4f6ff;
  text-shadow: 0 0 2px rgba(255,255,255,.55), 0 0 9px rgba(140,170,255,.35);
  animation: crt-flicker 7s infinite;
}
.crt-screen::after {      /* scanlines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
.crt-screen::before {     /* curved-glass glare */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.10), transparent 45%);
}
.crt-head { display: flex; gap: 1em; color: #ffe14a; border-bottom: 2px solid #ffe14a; padding-bottom: .15em; margin-bottom: .3em; }
.crt-station { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.crt-clock { font-variant-numeric: tabular-nums; }
.crt-row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 6.2em; gap: .6em; }
.crt-row.with-op { grid-template-columns: 3.2em minmax(0, 1fr) 6em 6.2em; }
.crt-row .t { color: #ffe14a; }
.crt-row .d { white-space: nowrap; overflow: hidden; }
.crt-row .o { color: #6ff0ff; }
.crt-row .s { color: #6dff95; text-align: right; }
.crt-call { color: #6ff0ff; padding-left: 3.8em; font-size: .85em; margin-bottom: .2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crt-tag { position: absolute; left: 4%; bottom: 2.5%; color: #ffe14a; font-size: .75em; }
@keyframes crt-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .93; } 98% { opacity: 1; } 99% { opacity: .96; } }

/* Split-flap board */
.look-flap {
  --cw: 22px; --ch: 33px;
  background: #121212;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: "Atkinson Hyperlegible Next", Helvetica, Arial, sans-serif;
  color: #f1f1ea;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}
.flap-head { display: flex; align-items: center; gap: 1em; margin-bottom: calc(var(--ch) * .3); }
.flap-station { font-weight: 700; font-size: calc(var(--ch) * .62); letter-spacing: .04em; }
.flap-tag { color: #a9a9a0; font-size: calc(var(--ch) * .4); }
.flap-clock { margin-left: auto; display: flex; align-items: center; }
.flap-clock .colon { font-size: calc(var(--ch) * .7); padding: 0 2px; color: #f1f1ea; }
.flap-cols { display: flex; gap: var(--cw); font-size: calc(var(--ch) * .36); color: #9d9d95; margin-bottom: 4px; }
.flap-cols span { flex: none; }
.flap-row { display: flex; gap: var(--cw); margin-bottom: 5px; }
.fseg { display: flex; gap: 2px; flex: none; }
.fc {
  position: relative; display: inline-block; flex: none;
  width: calc(var(--cw) - 2px); height: var(--ch);
  perspective: calc(var(--ch) * 4);
  font-weight: 700; font-size: calc(var(--ch) * .72); line-height: var(--ch); text-align: center;
}
.fc .h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #262626; }
.fc .h > span { display: block; height: var(--ch); }
.fc .h.t { top: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#2b2b2b, #232323); }
.fc .h.b { bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(#1f1f1f, #262626); }
.fc .h.b > span { transform: translateY(-50%); }
.fc::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #050505; z-index: 3; }
.fc .flap { z-index: 2; backface-visibility: hidden; }
.fc .flap.f1 { transform-origin: 50% 100%; animation: flap-top .08s ease-in forwards; }
.fc .flap.f2 { transform-origin: 50% 0; transform: rotateX(90deg); animation: flap-bottom .08s ease-out forwards; }
@keyframes flap-top { to { transform: rotateX(-90deg); } }
@keyframes flap-bottom { to { transform: rotateX(0deg); } }
.fseg.rem .fc, .fseg.time .fc { color: #ffd23f; }

/* rows open their train on the timetables page */
.pis-dom [data-dep]:hover { box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, .07); }
#pisSr:focus-within {            /* keyboard users: the hidden list of trains appears when tabbed into */
  position: static; width: auto; height: auto; margin: .8rem 0 0; overflow: visible; clip: auto; white-space: normal;
  border-collapse: collapse; font-size: .85rem; background: var(--surface);
}
#pisSr:focus-within td, #pisSr:focus-within th { padding: .2rem .6rem; border-bottom: 1px solid var(--rule-soft); text-align: left; }
#pisSr a { color: var(--focus); }

/* phones: the destination keeps its room */
.look-tft.narrow .tft-grid, .look-tft.narrow .tft-grid.with-op { grid-template-columns: 3.4em minmax(0, 1fr) 5.4em; gap: .6em; padding: 0 .6em; }
.look-tft.narrow .tft-grid > :nth-child(3):not(.r), .look-tft.narrow .tft-grid.with-op > :nth-child(4):not(.r) { display: none; }
.look-tft.narrow .tft-grid .o, .look-tft.narrow .tft-grid .n { display: none; }
.look-tft.narrow .tft-cols > span:nth-child(n+3):not(.r) { display: none; }
.look-crt.narrow .crt-row, .look-crt.narrow .crt-row.with-op { grid-template-columns: 3.2em minmax(0, 1fr) auto; }
.look-crt.narrow .crt-row .o { display: none; }
.look-crt.narrow .crt-call { padding-left: 0; }
.look-crt.narrow { padding: 3% 3.5%; border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .crt-screen { animation: none; }
}

/* ---------- station search (station-search.js) ---------- */
.ss-label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }
.ss-box { position: relative; }
.ss-box input {
  width: 100%; padding: .55rem .75rem; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); color: var(--ink); font-size: 1rem;
}
.ss-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: .25rem 0; list-style: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 10px 24px rgba(15, 25, 35, .2);
  max-height: min(26rem, 60vh); overflow-y: auto;
}
.ss-list li[role="option"] { display: flex; align-items: center; gap: .75rem; padding: .45rem .75rem; cursor: pointer; }
.ss-list li.is-active { background: var(--hl-soft); }
.ss-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ss-name { font-weight: 600; }
.ss-sub { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-country, .ss-count { flex: none; font-size: .75rem; color: var(--muted); text-align: right; }
.ss-more { flex: none; color: var(--muted); font-size: 1.15rem; line-height: 1; }
.ss-head { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem .5rem; font-size: .85rem; color: var(--muted); border-bottom: 1px solid var(--rule-soft); }
.ss-head b { color: var(--ink); }
.ss-back { flex: none; border: 1px solid var(--rule); background: var(--surface); border-radius: 4px; padding: .15rem .5rem; font-size: .8rem; }
.ss-empty { padding: .6rem .75rem; color: var(--muted); font-size: .9rem; }
.pis-find { max-width: 36rem; margin-bottom: 1rem; }

/* home: the departure boards section, a dark panel like the boards themselves */
.home-boards {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: .8rem 2rem; align-items: center;
  margin: 0 0 2.2rem; padding: 1.2rem 1.4rem 1.3rem;
  background: #16120c; color: #e9e2d4; border-radius: 6px;
  box-shadow: inset 0 0 0 1px #2d2618;
}
.home-boards h2 {
  margin: 0; font: 700 1.25rem/1.2 var(--mono); color: #ffb028; letter-spacing: .02em;
  text-shadow: 0 0 6px rgba(255, 176, 40, .45);
}
.home-boards p { margin: .3rem 0 0; color: #bfb6a5; font-size: .92rem; }
.home-boards .ss-box input { border-color: #3a3122; font-size: 1.05rem; padding: .65rem .8rem; }

/* ---------- downloads page ---------- */
.downloads { max-width: 40rem; }
.dl-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 1.2rem 1.3rem 1.3rem; display: grid; gap: 1rem; }
.dl-card .field { font-size: .85rem; }
.dl-card select { width: 100%; padding: .55rem .6rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 1rem; }
.dl-file { margin: -.4rem 0 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.dl-file .dl-name { font-family: var(--mono); color: var(--ink); }
.dl-agree { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .8rem .9rem; border: 1px solid var(--rule-soft); border-left: 4px solid var(--hl); border-radius: 4px; background: var(--paper); cursor: pointer; line-height: 1.45; }
.dl-agree input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--ink); }
.dl-agree input:disabled + span { color: var(--muted); }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.dl-open { display: inline-block; padding: .6rem 1.1rem; border-radius: 4px; background: var(--ink); color: var(--surface); font-weight: 700; text-decoration: none; }
.dl-open:hover { filter: brightness(1.15); }
.dl-open[aria-disabled="true"] { background: var(--rule-soft); color: var(--muted); cursor: not-allowed; pointer-events: none; }
.dl-hint { font-size: .85rem; color: var(--muted); }
.dl-note { margin-top: 1rem; font-size: .85rem; color: var(--muted); max-width: 65ch; }
.dl-note a { color: var(--focus); }

/* ---------- contact page ---------- */
.contact-form, .contact-done { margin: 1.6rem 0 .6rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 1.2rem 1.3rem 1.3rem; display: grid; gap: 1rem; }
.contact-form[hidden], .contact-done[hidden] { display: none; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-form .field { font-size: .85rem; }
.contact-form .field + .field { margin-top: 0; }
.contact-form .field i { font-style: normal; color: var(--muted); opacity: .85; }
.contact-form .field input, .contact-form .field select, .contact-form textarea { font-size: 1rem; padding: .55rem .6rem; }
.contact-form textarea { width: 100%; min-height: 9rem; resize: vertical; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.45; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.contact-count { justify-self: end; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-human:empty { display: none; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.contact-send { padding: .6rem 1.1rem; border: 0; border-radius: 4px; background: var(--ink); color: var(--surface); font: inherit; font-weight: 700; cursor: pointer; }
.contact-send:hover { filter: brightness(1.15); }
.contact-send:disabled { background: var(--rule-soft); color: var(--muted); cursor: not-allowed; filter: none; }
.contact-status { margin: 0; font-size: .85rem; color: var(--muted); }
.contact-status.is-bad { color: #b3261e; font-weight: 600; }
.about .contact-done h2 { margin: 0; font-size: 1.15rem; }
.contact-done p { margin: 0; }
.contact-done button { justify-self: start; cursor: pointer; font: inherit; font-size: .85rem; }
.contact-done:focus { outline: none; }
@media (prefers-color-scheme: dark) { .contact-status.is-bad { color: #ffb4ab; } }
@media (max-width: 640px) { .contact-row { grid-template-columns: minmax(0, 1fr); } .contact-form { padding: 1rem; } }

/* ---------- contact page (email) ---------- */
.contact-card { margin: 1.6rem 0 .4rem; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--hl); border-radius: 4px; padding: .9rem 1.1rem 1rem; }
.about .contact-card h2 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.contact-email { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.contact-address { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.contact-soon { margin: 0; color: var(--muted); }
.contact-copy { cursor: pointer; font: inherit; font-size: .82rem; }

/* ---------- about page ---------- */
.about { max-width: 44rem; line-height: 1.55; }
.about section { margin-top: 2.2rem; scroll-margin-top: 1rem; }
.about h2 { margin: 0 0 .6rem; font-size: 1.3rem; letter-spacing: -0.01em; }
.about p { margin: 0 0 .8rem; max-width: 70ch; }
.about ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.about li { margin-bottom: .45rem; max-width: 68ch; }
.about a { color: var(--focus); }
.glance { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--hl); border-radius: 4px; padding: .8rem 1rem .4rem 1rem; }
.glance ul { padding-left: 1.1rem; }
.toc { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.toc a { border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; color: var(--ink); text-decoration: none; }
.toc a:hover { border-color: var(--ink); }
.legend-list { display: grid; grid-template-columns: 7.5rem 1fr; gap: .55rem 1rem; margin: 0 0 1rem; align-items: baseline; }
.legend-list dt { text-align: right; }
.legend-list dd { margin: 0; }
.lg { display: inline-block; font: .9rem/1.3 var(--mono); font-variant-numeric: tabular-nums; padding: .1rem .4rem; background: var(--surface); border: 1px solid var(--rule-soft); border-radius: 3px; }
.lg-sim { font-style: italic; color: var(--muted); }
.lg-arr { font-weight: 700; }
.lg-pass { color: var(--muted); font-family: var(--sans); }
.lg-hc { background: #1f3864; color: #fff; border-color: #1f3864; font-weight: 700; }
.about .updated { color: var(--muted); font-size: .85rem; }
.about .credits { color: var(--muted); font-size: .88rem; }
@media (max-width: 560px) {
  .legend-list { grid-template-columns: 1fr; gap: .2rem; }
  .legend-list dt { text-align: left; margin-top: .5rem; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  body.has-panel .app { grid-template-columns: var(--side) minmax(0, 1fr); }
  .panel {
    position: fixed;
    inset: 0 0 0 auto;
    height: auto;
    width: min(var(--panel), 92vw);
    z-index: 20;
    box-shadow: -8px 0 24px rgba(15, 25, 35, .18);
  }
}
@media (max-width: 760px) {
  .home-boards { grid-template-columns: minmax(0, 1fr); }
  .site-header { gap: .75rem; padding: 0 .75rem; }
  .site-name { display: none; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 0 .45rem; font-size: .82rem; }
  .site-actions { display: none; }
  .app, body.has-panel .app { grid-template-columns: minmax(0, 1fr); }
  .routes {
    position: fixed;
    inset: 0 auto 0 0;
    height: auto;
    width: min(20rem, 88vw);
    z-index: 15;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 8px 0 24px rgba(15, 25, 35, .18);
  }
  body.routes-open .routes { transform: none; }
  .routes-toggle {
    display: inline-block;
    border: 1px solid var(--rule);
    background: var(--surface);
    border-radius: 4px;
    padding: .35rem .65rem;
    font-size: .85rem;
    flex: none;
  }
  .main { padding: .75rem 1rem 1.5rem; }
  .main .site-footer { margin: 1.5rem -1rem -1.5rem; }
  .main .footer-inner { padding-inline: 1rem; }
  .grid tbody th, .grid thead th:first-child { max-width: 9.5rem; }
  .grid .stn { max-width: 9rem; }
  .route-head h2 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .routes { transition: none; }
}