:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --ink: #111111;
  --muted: #6b6b6b;
  --rule: #e6e6e6;
  --accent: #7d3c98; /* line colour; set per line from app.js */
  --accent-text: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --ink: #ededed; --muted: #9a9a9a; --rule: #2a2a2a; --accent-text: color-mix(in srgb, var(--accent) 55%, #fff); }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.line select {
  appearance: none; font: inherit; font-weight: 800; color: #fff; background: var(--accent);
  border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.line select:disabled { cursor: default; opacity: 1; }
.day { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.day h1 { font-size: 1.1rem; font-weight: 650; margin: 0; min-width: 0; }
.day h1::first-letter { text-transform: uppercase; }
.day button { font: inherit; font-size: 1.2rem; line-height: 1; color: var(--ink); background: none; border: 1px solid var(--rule); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; }
.day button:disabled { opacity: .3; cursor: default; }
.status { width: 100%; margin: 0; color: var(--muted); font-size: .85rem; }

table { width: 100%; border-collapse: collapse; margin-top: 12px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--rule); }
td { padding: 9px 6px; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.num { text-align: right; white-space: nowrap; }
td.time { font-weight: 600; white-space: nowrap; }
td.train { color: var(--muted); }
td.trip small { display: block; color: var(--muted); font-size: .78rem; }
tr.past td { color: var(--muted); }
tr.past td.delay.late { color: var(--accent-text); }
td.delay { font-weight: 650; }
td.delay.late { color: var(--accent-text); }
td.delay.none { color: var(--muted); font-weight: 400; }
tr.live td.time::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.empty { color: var(--muted); text-align: center; padding: 24px 0; }

footer { padding-top: 12px; padding-bottom: 32px; color: var(--muted); font-size: .8rem; }
footer p { margin: 4px 0; }
a { color: var(--accent-text); }

@media (max-width: 480px) {
  th.train-h, td.train { display: none; }
}