/* design-natur – the landscape the trains run through. This layer sits at the end of the file and gives the
   page its light ground, its typeface and its photograph; the rules before it are the shared structure. */
/* Knutpunkt – white and yellow on black, and little else.
   – a box: black with a thin edge. Everything on the page stands in one, or directly on the page.
   – text: white. What matters less is grey.
   – yellow: a large heading's second language (as "Avgående Departures" on a station's board), what is chosen,
     a new time, the one button that starts something – and what is a little late or at some risk. One yellow.
   – red only where something is late or at serious risk. Both always with words or a mark. On time has no colour,
     except where how a departure has gone is drawn day by day: there a day on time is green.
   – one typeface, the system's; figures in its bold.
   – a line's own colour (purple Pågatåg, grey Öresundståg) marks the train's type and is never a status colour.
   – every size is a step on a scale: seven sizes of text (--t-…), distances in fours (--s-…), three corners (--r-…).
     What can be pressed is at least 44 px high (--hit), and answers when the pointer is over it, when it is
     pressed, and when the keyboard stands on it. */
:root {
  color-scheme: dark;
  --bar-h: 64px;
  --page: #050507;
  --sign: #0a0a0c;
  --edge: rgba(255, 255, 255, 0.1);
  --field: #17171a;
  --field-hi: #25252a;
  --field-down: #303036;
  --text: #f5f5f7;
  --text-2: #c7c7cf;
  --muted: #8e8e93;
  --yellow: #ffd60a;
  --yellow-hi: #ffe566;
  --yellow-down: #e6c009;
  --yellow-ink: #1a1500;
  --warning: #ffd60a;
  --critical: #ff453a;
  --warning-ink: #ffd60a;
  --critical-ink: #ff6961;
  --ok: #30d158;
  /* the names the scripts read for maps and charts: the forecast is drawn in yellow, what was measured in white,
     history and what is compared with in grey; "good" is no colour at all */
  --surface: #0a0a0c;
  --surface-2: #25252a;
  --border: rgba(255, 255, 255, 0.1);
  --grid: rgba(255, 255, 255, 0.08);
  --track: #77777f;
  --series-1: #ffd60a;
  --series-2: #636366;
  --hist: #c7c7cf;
  --good: #8e8e93;
  /* risk from low to high: grey through yellow to red; 0 is "no trains" */
  --seq-0: #101012; --seq-1: #222226; --seq-2: #34343a; --seq-3: #5a4f12;
  --seq-4: #9a7f0c; --seq-5: #d98a0a; --seq-6: #f0652a; --seq-7: #ff453a;
  --line-pagatag: #a35ce0; --line-oresund: #80838e; --line-other: #5a8fd6;
  /* text: 12, 14, 16, 18, 20, 24 and 32 px */
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.25rem; --t-2xl: 1.5rem; --t-3xl: 2rem;
  /* distances, in fours; --s0 is the half step between a figure and its label */
  --s0: 2px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px;
  /* one corner for a box, one for what is inside it, one for a control */
  --r-box: 16px;
  --r-in: 12px;
  --r-ctl: 8px;
  --pad: var(--s5);
  --board-w: 920px;
  --hit: 44px;
  --ease: 0.2s ease;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); -webkit-text-size-adjust: 100%; scrollbar-color: var(--field-down) transparent; }
html, body { margin: 0; }
body { min-height: 100vh; color: var(--text); font: 400 var(--t-md)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body.sheet-open, body.map-open { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1, h2, h3, summary { font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-xs); font-weight: 600; color: var(--muted); margin: var(--s4) 0 var(--s2); }
/* the second language of a large heading, or where a train or a journey is going: yellow */
h1 em, h2 em, h3 em, .brand em { font-style: normal; color: var(--yellow); margin-left: 0.25em; }
.brand em { margin: 0; }
/* a label in two languages, as over a board's columns: Swedish, and English in yellow under it */
.both b { display: block; font: 600 var(--t-sm)/1.2 var(--font); color: var(--text); }
.both i { display: block; font: normal 500 var(--t-xs)/1.2 var(--font); color: var(--yellow); }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
input, select { font: inherit; color: inherit; accent-color: var(--yellow); }
a { color: var(--yellow); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-size: var(--t-sm); padding: 0 var(--s1); border-radius: var(--s1); background: var(--field); }
s { text-decoration-thickness: 1px; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.num { font-variant-numeric: tabular-nums; }
.footnote { font-size: var(--t-xs); color: var(--muted); max-width: 80ch; padding: 0 var(--s1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* status: only what is late or at risk has a colour */
.warn { --tone-ink: var(--warning-ink); }
.bad { --tone-ink: var(--critical-ink); }

/* ---------- a box ---------- */
.card, .sign, .widgets, .metric-grid, .grid.kpis, .warn-card { background: var(--sign); border: 1px solid var(--edge); border-radius: var(--r-box); }
.card, .sign { padding: var(--pad); }
.card-head, .sign-head { display: flex; align-items: baseline; gap: var(--s1) var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.card-head > .muted, .sign-head > .muted, .sign-head > .more { margin-left: auto; text-align: right; max-width: 60ch; }
/* a board has the board's own large heading, and what it is for in capitals */
.sign-title { font-size: var(--t-2xl); line-height: 1.1; }
.sign-place { margin-left: auto; font: 700 var(--t-md)/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); text-align: right; }
.sign-foot { padding-top: var(--s4); font-size: var(--t-xs); color: var(--muted); }
.sign-foot:empty { display: none; }
/* a board that can be asked for more: a line closes the last row, and the button under it has the row's width */
.sign-foot:has(.btn) { margin: 0 calc(-1 * var(--pad)); padding: var(--s2) var(--pad) 0; border-top: 1px solid var(--edge); }
.sign-foot .btn.wide { margin-top: 0; }
.empty { color: var(--muted); }
.announced { color: var(--warning-ink); }
.explain { color: var(--text-2); max-width: 78ch; }
.explain p + p { margin-top: var(--s3); }
.banner { padding: var(--s3) var(--s4); font-size: var(--t-sm); margin-bottom: var(--s3); border: 1px solid var(--warning); border-radius: var(--r-in); }

/* something folded away until it is asked for */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3); min-height: var(--hit); font-size: var(--t-md); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform var(--ease), border-color var(--ease); }
details > summary:hover::after { border-color: var(--text); }
details[open] > summary::after { transform: translateY(2px) rotate(225deg); }
details.fold[open] > summary { margin-bottom: var(--s3); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 900; height: var(--bar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s5);
  padding: 0 var(--s6); background: var(--sign); border-bottom: 1px solid var(--edge); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--hit); justify-self: start; color: var(--text); font: 700 var(--t-xl) var(--font); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 32px; height: 32px; flex: none; }
.logo-bg { fill: var(--yellow); }
.logo-a, .logo-b { fill: none; stroke: var(--yellow-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hall { display: flex; align-items: center; gap: var(--s3); justify-self: end; }
.feed { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.feed.waiting { color: var(--warning-ink); }
/* the clock: hours and minutes, and the seconds smaller in yellow on the same line */
.clock { flex: none; height: var(--hit); padding: 0 var(--s3); border-radius: var(--r-ctl); background: var(--field);
  font-size: var(--t-xl); font-weight: 700; line-height: var(--hit); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock .sec { margin-left: var(--s1); font-size: var(--t-sm); font-weight: 600; color: var(--yellow); }

/* ---------- what can be pressed or typed in ----------
   One shape: a dark grey field, lighter under the pointer and lighter still when pressed. What is chosen is written
   in yellow; the one button that starts something is yellow all through. */
.btn, .icon-btn, .toggle span, .filters select, .filters input[type="search"], .time-field, nav.tabs button, nav.subtabs button, .map-full-btn {
  border: none; border-radius: var(--r-ctl); background-color: var(--field); color: var(--text-2); font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: background-color var(--ease), color var(--ease), transform var(--ease); }
.btn:hover, .icon-btn:hover, .toggle:hover span, .filters select:hover, nav.tabs button:hover, nav.subtabs button:hover, .map-full-btn:hover { background-color: var(--field-hi); color: var(--text); }
.btn:active, .icon-btn:active, .toggle input:active + span, .filters select:active, nav.tabs button:active, nav.subtabs button:active, .map-full-btn:active { background-color: var(--field-down); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); white-space: nowrap; height: var(--hit); padding: 0 var(--s4); color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background-color: var(--yellow); color: var(--yellow-ink); height: 48px; padding: 0 var(--s6); font-size: var(--t-md); font-weight: 700; }
.btn.primary:hover { background-color: var(--yellow-hi); color: var(--yellow-ink); }
.btn.primary:active { background-color: var(--yellow-down); transform: translateY(1px); }
.btn.primary:disabled { background-color: var(--yellow); transform: none; }
.btn.quiet { background-color: transparent; color: var(--yellow); padding: 0 var(--s3); }
.btn.quiet:hover { background-color: var(--field); color: var(--yellow-hi); }
.btn.quiet:active { background-color: var(--field-hi); }
.btn.wide { width: 100%; margin-top: var(--s3); }
button.link { background: none; border: none; padding: 0; color: var(--yellow); font-weight: 600; cursor: pointer; }
button.link:hover { color: var(--yellow-hi); text-decoration: underline; }
button.link:active, a:active { color: var(--yellow-down); }
/* a link among the text keeps its size, and takes a press in a full-height zone around it */
a.more, button.link { position: relative; display: inline-block; }
a.more::before, button.link::before { content: ""; position: absolute; inset: min(0px, calc((100% - var(--hit)) / 2)); }
.icon-btn { width: var(--hit); height: var(--hit); flex: none; display: grid; place-items: center; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn svg *, nav.tabs svg * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* a small button is drawn small, but takes a press in the same square as the others */
.icon-btn.sm { position: relative; width: 32px; height: 32px; line-height: 1; font-size: var(--t-md); }
.icon-btn.sm::after { content: ""; position: absolute; inset: calc((32px - var(--hit)) / 2); }
.chev { display: inline-block; width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.chev.back { transform: rotate(-135deg); margin-right: calc(-1 * var(--s0)); }
nav.tabs, nav.subtabs { display: inline-flex; gap: var(--s1); max-width: 100%; }
nav.subtabs { overflow-x: auto; scrollbar-width: none; }
nav.subtabs::-webkit-scrollbar { display: none; }
nav.tabs button, nav.subtabs button { display: flex; align-items: center; gap: var(--s2); height: var(--hit); padding: 0 var(--s4); white-space: nowrap; }
nav.subtabs button:focus-visible { outline-offset: -2px; }  /* the row of tabs scrolls sideways and would cut a ring outside it */
nav.tabs svg { width: 20px; height: 20px; flex: none; }
nav.tabs button[aria-selected="true"], nav.subtabs button[aria-selected="true"], .toggle input:checked + span { background-color: var(--field-hi); color: var(--yellow); }
.toggle { position: relative; display: inline-flex; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle span { display: inline-flex; align-items: center; height: var(--hit); padding: 0 var(--s3); }
.toggle input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.filters { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s2); }
.filter-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.filters input[type="search"] { width: 100%; height: var(--hit); outline: none; padding: 0 var(--s4); font-size: var(--t-md); font-weight: 400; color: var(--text); cursor: text;
  transition: background-color var(--ease), box-shadow var(--ease); }
.filters input[type="search"]:hover { background-color: var(--field-hi); }
.filters input[type="search"]:focus-visible, .time-field:focus-within { box-shadow: 0 0 0 2px var(--yellow); }
.filters select { -webkit-appearance: none; appearance: none; height: var(--hit); padding: 0 var(--s7) 0 var(--s3); background-repeat: no-repeat; background-position: right var(--s3) center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* the search: a line from one station to the other, the fields along it */
.planner { padding-top: var(--s2); padding-bottom: var(--s2); }
.planner-route { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; }
.rail { position: relative; align-self: stretch; display: grid; grid-template-rows: 1fr 1fr; justify-items: center; align-items: center; }
.rail .ln { position: absolute; top: 25%; bottom: 25%; width: 4px; background: var(--yellow); }
.rail .st, .jline .st { position: relative; z-index: 1; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 4px solid var(--text); background: var(--sign); }
.rail .st.sq, .jline .st.last { border-radius: var(--s1); }
.rail .st.sm { width: 12px; height: 12px; border-width: 3px; }
/* the field that is typed in is underlined in yellow */
.prow { display: flex; align-items: center; gap: var(--s3); min-height: 56px; border-bottom: 1px solid var(--edge); cursor: text; transition: box-shadow var(--ease); }
.prow:last-child { border-bottom: none; }
.prow:focus-within { box-shadow: inset 0 -2px 0 var(--yellow); }
.prow > span { width: 72px; flex: none; }
.prow input { flex: 1; min-width: 0; border: none; background: none; outline: none; padding: var(--s2) 0; font-size: var(--t-lg); font-weight: 600; color: var(--text); }
.prow input::placeholder { color: var(--muted); font-weight: 400; }
.planner-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s3) 0 var(--s4); flex-wrap: wrap; }
.time-field { display: inline-flex; align-items: center; gap: var(--s3); height: 48px; padding: 0 var(--s4); cursor: text; transition: background-color var(--ease), box-shadow var(--ease); }
.time-field:hover { background-color: var(--field-hi); }
.time-field input { width: 136px; border: none; background: none; outline: none; font-size: var(--t-md); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.time-field input::placeholder { color: var(--text-2); }
.time-field input { cursor: pointer; }
/* the departure time on two wheels: the hour and the minute in the lit band in the middle are the time chosen; the
   rows above and below fade out, as on a phone's alarm */
.time-wheel { position: absolute; z-index: 1000; padding: var(--s3); background: var(--field); border: 1px solid var(--edge); border-radius: var(--r-in); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); }
.wheels { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--s1); height: 200px; }
.wheels .band { position: absolute; left: 0; right: 0; top: 80px; height: 40px; border-radius: var(--r-ctl); background: var(--field-hi); pointer-events: none; }
.wheel { position: relative; width: 64px; height: 200px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 80px 0; outline: none; border-radius: var(--r-ctl);
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.wheel::-webkit-scrollbar { display: none; }
.wheel:focus-visible .w-item[aria-selected="true"] { color: var(--yellow); }  /* the wheel the arrow keys turn */
.wheel.days { width: 128px; }
.wheel.days .w-item { font-size: var(--t-md); }
.w-item { height: 40px; display: grid; place-items: center; scroll-snap-align: center; font-size: var(--t-xl); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; cursor: pointer; }
.w-item[aria-selected="true"] { color: var(--text); }
.wheels .colon { position: relative; font-size: var(--t-xl); font-weight: 700; color: var(--text); }
.w-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.w-actions .btn { flex: 1; }
.w-actions .btn.primary { height: var(--hit); padding: 0 var(--s4); font-size: var(--t-sm); }

/* the stations that answer to what is typed: a list under the field, the best first. What is typed is white in each
   name; the one the arrows stand on, or the pointer, is lit like any other thing that can be pressed. */
.suggest { position: absolute; z-index: 1000; padding: var(--s1); background: var(--field); border: 1px solid var(--edge); border-radius: var(--r-in); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); }
.suggest .opt { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--hit); padding: 0 var(--s3); border-radius: var(--r-ctl); cursor: pointer;
  transition: background-color var(--ease); }
.suggest .opt .hit { color: var(--text-2); }
.suggest .opt .hit b { color: var(--text); font-weight: 700; }
.suggest .opt i { font-style: normal; font-size: var(--t-xs); color: var(--muted); }
.suggest .opt:hover, .suggest .opt[aria-selected="true"] { background: var(--field-hi); }
.suggest .opt:active { background: var(--field-down); }
.suggest .none { padding: var(--s3); font-size: var(--t-sm); color: var(--muted); }

/* ---------- layout ---------- */
main { max-width: 1560px; margin: 0 auto; padding: var(--s7) var(--s6) var(--s9); }
section.view { display: none; }
section.view.active { display: block; animation: view-in 0.25s ease-out; }
@keyframes view-in { from { transform: translateY(8px); } }
section.view > * + *, .split > * + *, .split-main > * + *, .split-side > * + *, .statpane > * + *, .subview > * + * { margin-top: var(--s5); }
.statpane { display: none; }
.statpane.active { display: block; }
.subview { display: none; }
.subview.active { display: block; }
/* "Resa" is two views that share a place: the search with its board, and the journey that is picked. */
#resa { display: none; }
body[data-view="search"] #resa, body[data-view="journey"] #resa { display: block; }
body[data-view="search"] #resa-side { display: none; }
/* a board with nothing beside it keeps a board's width and stands in the middle: the room is at the sides of the
   page, not between the columns of the board */
body[data-view="search"] #view-search, .split:has(> .split-side[hidden]) > .split-main { max-width: var(--board-w); margin-left: auto; margin-right: auto; }
.large-title { line-height: 1.1; margin: 0 0 var(--s5); }
.view-head, .section-head { display: flex; align-items: baseline; gap: var(--s2) var(--s4); flex-wrap: wrap; }
.view-head { align-items: center; margin-bottom: var(--s5); }
.view-head .large-title { margin: 0; }
.view-head nav.subtabs { margin-left: auto; }
.section-head { margin-top: var(--s7) !important; }
.section-head + * { margin-top: var(--s3) !important; }
.section-head > .more, .section-head > .rail-nav { margin-left: auto; }
.more { font-size: var(--t-sm); font-weight: 600; }
.more::after { content: " ›"; }
.grid { display: grid; gap: var(--s5); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid.two.tight { gap: var(--s2) var(--s7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.grid.two.tight h3 { margin-bottom: var(--s2); }

/* ---------- a figure: a number and what it counts ---------- */
.widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-grid, .grid.kpis { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); padding: var(--s2) var(--s1); }
.kpi { padding: var(--s4) var(--pad); min-width: 0; }
.widgets .kpi + .kpi { border-left: 1px solid var(--edge); }
.kpi .label { font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.kpi .value { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: var(--s1); color: var(--text); font-variant-numeric: tabular-nums; }
.kpi .value small, .kpi .value .small { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; margin-left: var(--s1); }
.kpi .hint { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s1); line-height: 1.4; }
.kpi.alert .value { color: var(--critical-ink); }
.metric-grid .kpi .value, .grid.kpis .kpi .value { font-size: var(--t-2xl); }

/* ---------- status, in words ---------- */
.st, .chip, .delay { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); }
.st.warn, .chip.medium, .delay.d1 { color: var(--warning-ink); }
.st.bad, .chip.high, .delay.d2 { color: var(--critical-ink); }
/* never colour alone: a dot before what is at risk, a triangle before what is late or serious */
.st.warn::before, .st.bad::before, .chip.medium::before, .chip.high::before, .c-prog.warn .p-main::before, .c-prog.bad .p-main::before, .lvl::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s1); vertical-align: 0.08em; border-radius: 50%; background: currentColor; }
.st.bad::before, .chip.high::before, .c-prog.bad .p-main::before, .lvl.l3::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chip { font-size: var(--t-sm); }
/* a line's number, on the colour of its trains – darkened, so that the figures are easy to read */
.line-badge { display: inline-block; min-width: 40px; padding: var(--s0) var(--s2); border-radius: var(--s1); text-align: center; vertical-align: 1px;
  font: 700 var(--t-xs)/1.4 var(--font); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--line, var(--field-hi)) 78%, #000); color: var(--text); }
/* a share as a bar, with its figure */
.risk { display: flex; align-items: center; gap: var(--s3); min-width: 120px; }
.risk .bar, .stat-row .bar, .seg { height: 4px; border-radius: 2px; background: var(--field-hi); overflow: hidden; }
.risk .bar { flex: 1; }
.risk .bar span, .stat-row .bar span, .seg i { display: block; height: 100%; border-radius: 2px; }
.risk .pct { width: 48px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--t-sm); }

/* ---------- a board ----------
   A heading, the columns in two languages, and a row per train: white on black with a thin line between. */
.board { --cols: 76px minmax(0, 1fr) 56px 96px 84px 132px; }
.board.timetable { container: sign / inline-size; }
.board.compact { --cols: 48px minmax(0, 1fr) 84px 108px; container: list / inline-size; }
.board.lines-board { --cols: 48px minmax(0, 1fr) 200px 72px 88px; container: lines / inline-size; }
.cols, .board .row { display: grid; grid-template-columns: var(--cols); column-gap: var(--s4); align-items: center; }
.cols { padding-bottom: var(--s3); }
.board .row { width: calc(100% + 2 * var(--pad)); margin: 0 calc(-1 * var(--pad)); padding: var(--s4) var(--pad); border: none; border-top: 1px solid var(--edge);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--ease), box-shadow var(--ease); }
.board .row:hover { background: var(--field); }
.board .row:active { background: var(--field-hi); }
.board .row:focus-visible { outline-offset: -2px; }
.board .row.sel, .board .row[aria-expanded="true"] { background: var(--field); box-shadow: inset 4px 0 0 var(--yellow); }
.board .row.static { cursor: default; }
.board .row.static:hover, .board .row.static:active { background: none; }
.board .row > span { display: flex; flex-direction: column; gap: var(--s0); min-width: 0; }
.row .t, .row .ny { font-size: var(--t-xl); font-weight: 700; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.row .ny { color: var(--yellow); }
.row .t.no { color: var(--muted); }
.row .c-tid .narrow { display: none; }  /* a new time has its own column; only a narrow board writes it over the old */
.row .dest { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; color: var(--text); overflow-wrap: break-word; }
.row .via, .row .meta, .p-sub { font-size: var(--t-sm); line-height: 1.4; color: var(--muted); }
.row .via .new { font-weight: 600; color: var(--yellow); }  /* an arrival that is not the timetable's */
.row .meta { display: none; }
.row .c-spar, .row .c-tag, .row .c-now, .row .fig { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.p-main { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; color: var(--tone-ink, var(--text)); font-variant-numeric: tabular-nums; }
.p-sub .warn { color: var(--warning-ink); }
.p-sub .bad { color: var(--critical-ink); }
.board .row.canceled .t, .board .row.canceled .dest { text-decoration: line-through; color: var(--muted); }
.board .row.canceled .t.no { text-decoration: none; }
.board-msg { padding: var(--s4) 0 var(--s1); border-top: 1px solid var(--edge); color: var(--text-2); }
/* where the departures pass midnight: the new day, written as the board writes its place */
.day-break { margin: 0 calc(-1 * var(--pad)); padding: var(--s5) var(--pad) var(--s2); border-top: 1px solid var(--edge); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* what folds out of a journey's row where the journey has no room beside the board */
.detail { padding: 0 0 var(--s5); }
.detail > * + * { margin-top: var(--s4); }
.actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.legs-brief { display: grid; gap: var(--s2); }
.leg-line { display: flex; align-items: baseline; gap: var(--s3); font-size: var(--t-sm); color: var(--text-2); }
.leg-line b { color: var(--text); }
.leg-line.transfer { color: var(--tone-ink, var(--text-2)); }
/* a narrow board: time, the train and its forecast; track and train number move under the destination */
@container sign (max-width: 620px) {
  .board .cols, .board .row > .c-spar, .board .row > .c-tag, .board .row > .c-ber { display: none; }
  .board .row { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: start; }
  /* one column of time: the timetable's – and when the train is expected to leave at another time, that time with
     the timetable's small and struck out under it */
  .row .c-tid .narrow { display: block; }
  .row .c-tid .was { font-size: var(--t-xs); font-weight: 400; color: var(--muted); text-decoration: line-through; }
  .row .meta { display: block; }
  .row .c-prog { text-align: right; align-items: flex-end; }
  .p-sub .arr-word { display: none; }  /* no expected departure beside it to be mistaken for: the room goes to the destination */
}
@container list (max-width: 420px) {
  .board .cols, .board .row > .c-now { display: none; }
  .board .row { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: start; }
  .row .c-prog { text-align: right; align-items: flex-end; }
}
.lines-board .row .c-late { flex-direction: row; align-items: center; gap: var(--s3); }
.lines-board .row .dest, .board.compact .row .dest { font-size: var(--t-md); }
.seg { flex: none; width: 64px; }
.seg i { background: var(--hist); }
@container lines (max-width: 620px) {
  .lines-board .cols, .lines-board .row { grid-template-columns: 44px minmax(0, 1fr) 152px; }
  .lines-board .cols > .wide-only, .lines-board .row > .wide-only { display: none; }
  .lines-board .seg { width: 36px; }
}
@container lines (max-width: 400px) {
  .lines-board .cols { display: none; }
  .lines-board .row { grid-template-columns: 44px minmax(0, 1fr); }
  .lines-board .row .c-late { grid-column: 2; }
}

/* ---------- what the model believes, in a sentence ---------- */
.plabel { font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.fc-main, .hero-value { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-top: var(--s0); color: var(--tone-ink, var(--text)); }
.fc-main.dim { color: var(--muted); }
.fc-more, .hero-sub { margin-top: var(--s1); font-size: var(--t-sm); color: var(--text-2); }
.fc-more .warn { color: var(--warning-ink); }
.fc-more .bad { color: var(--critical-ink); }
.jv-card .fc { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--edge); }
.hero { padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--edge); }
.hero.d1 { --tone-ink: var(--warning-ink); }
.hero.d2 { --tone-ink: var(--critical-ink); }
.hero-label:empty { display: none; }

/* trains to keep an eye on: one row to swipe or step through, so the view stays short */
.warn-rail { --rail-edge: var(--s6); display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--rail-edge); scrollbar-width: none;
  padding: 0 var(--rail-edge); margin-left: calc(-1 * var(--rail-edge)); margin-right: calc(-1 * var(--rail-edge));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--rail-edge), #000 calc(100% - var(--rail-edge)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--rail-edge), #000 calc(100% - var(--rail-edge)), transparent); }
.warn-rail::-webkit-scrollbar { display: none; }
.warn-rail > .empty { flex: 1 0 100%; }
.rail-nav { display: inline-flex; gap: var(--s3); }
@media (hover: none) { .rail-nav { display: none; } }
.warn-card { --tone-ink: var(--critical-ink); flex: 0 0 min(72vw, 220px); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s0);
  text-align: left; cursor: pointer; padding: var(--s4) var(--s5); color: inherit; transition: background-color var(--ease); }
.warn-card.warn { --tone-ink: var(--warning-ink); }
.warn-card:hover { background: var(--field); }
.warn-card:active { background: var(--field-hi); }
.warn-card:focus-visible { outline-offset: -2px; }
.wc-top { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.wc-dest { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-est { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--tone-ink); margin-top: var(--s3); font-variant-numeric: tabular-nums; }
.wc-line { font-size: var(--t-sm); color: var(--muted); }

/* ---------- what the operator says: a heading, and the rest when it is asked for ---------- */
.notice { border-top: 1px solid var(--edge); }
.notice > summary { padding: var(--s3) 0; font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; }
/* the heading, and after it which train it is about */
.n-text { min-width: 0; }
.n-train { font-weight: 400; color: var(--muted); margin-left: var(--s2); }
.notice > p { padding: 0 0 var(--s4) var(--s6); font-size: var(--t-sm); color: var(--text-2); }
.notice > .n-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); padding-bottom: var(--s2); }
.n-links .link { display: inline-flex; align-items: center; min-height: var(--hit); text-align: left; }
.n-links .link::before { content: none; }  /* several links in a row: each its own height instead of zones that overlap */
.notice-line { padding: var(--s3) 0; border-top: 1px solid var(--edge); font-size: var(--t-sm); color: var(--text-2); }
.notices .scroll { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.notices .more { margin-top: var(--s3); }
.notices details.fold { border-top: 1px solid var(--edge); }
/* how serious a message is, with the same marks as a late train: red, yellow, or grey for plain information */
.lvl { flex: none; display: inline-grid; place-items: center; width: 12px; height: 12px; color: var(--muted); }
.lvl::before { margin: 0; }
.lvl.l2 { color: var(--warning-ink); }
.lvl.l3 { color: var(--critical-ink); }
/* weather that has gone with late trains: a heading with the same marks, and under it what it has meant */
#weather-note:empty { display: none; }
.wx-item { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--edge); font-size: var(--t-sm); color: var(--text-2); }
.wx-item b { color: var(--text); }
.wx-item p { margin-top: var(--s1); }
.notices > .footnote { max-width: none; padding: var(--s3) 0 0; border-top: 1px solid var(--edge); }
.canceled-list { display: grid; gap: 0 var(--s7); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.canceled-item { display: flex; flex-direction: column; gap: var(--s0); padding: var(--s2) 0; border-top: 1px solid var(--edge); }

/* ---------- one journey ---------- */
.back { margin-left: calc(-1 * var(--s3)); }
.jv-card { position: relative; padding-right: var(--s9); }
#jv-close { position: absolute; top: var(--s4); right: var(--s4); }
.route-title { font-size: var(--t-2xl); line-height: 1.15; }
.jv-head .times { margin-top: var(--s2); font-variant-numeric: tabular-nums; color: var(--text-2); }
.jv-head .times b { color: var(--text); }
.jv-head .times .ny { color: var(--yellow); }
/* the journey drawn as a line: a coloured stretch per train, a station at every change */
.jline { display: flex; align-items: center; margin: var(--s4) 0 var(--s0); max-width: 520px; }
.jline .seg { flex: 1 1 0; width: auto; min-width: 56px; height: 4px; border-radius: 0; margin: 0 calc(-1 * var(--s1)); background: var(--line); display: flex; align-items: center; justify-content: center; overflow: visible; }
/* the stops of a train, drawn as a line: a coloured track with ringed stations */
.stoplist { list-style: none; margin: 0; padding: 0; --tcol: 52px; }
.stoplist li { position: relative; display: grid; grid-template-columns: var(--tcol) 24px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; }
.stoplist li::before { content: ""; position: absolute; left: calc(var(--tcol) + var(--s3) + 10px); width: 4px; top: 0; bottom: 0; background: var(--line, var(--track)); }
.stoplist li:first-child::before { top: 50%; }
.stoplist li:last-child::before { bottom: 50%; }
.stoplist li:only-child::before { display: none; }
.stoplist li > .small, .stoplist li > .delay { text-align: right; color: var(--muted); }
.stoplist li > .delay.d1 { color: var(--warning-ink); }
.stoplist li > .delay.d2 { color: var(--critical-ink); }
.stoplist .dot { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--text); background: var(--sign); justify-self: center; }
.stoplist li.passed .dot { background: var(--text); }
.stoplist li.passed .name, .stoplist li.passed .t { color: var(--muted); }
.stoplist li.end .dot { width: 20px; height: 20px; border-width: 4px; }
.stoplist li.end .name { font-weight: 700; color: var(--text); }
.stoplist .name .small { font-weight: 400; }
/* the stop the sheet was opened about */
.stoplist li.here .name { font-weight: 700; color: var(--text); }
tr.here td { font-weight: 600; color: var(--text); }
.stoplist .t { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.stoplist .t .s { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--muted); text-decoration: line-through; }
.stoplist .r-high { color: var(--critical-ink); font-weight: 600; }
.stoplist .r-medium { color: var(--warning-ink); font-weight: 600; }
/* a change of trains, between the two */
.transfer-box { padding: 0 var(--pad); font-size: var(--t-sm); color: var(--tone-ink, var(--text-2)); }
.transfer-box b { color: var(--text); }
.cause { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--edge); font-size: var(--t-sm); color: var(--text-2); }
.cause b { color: var(--text); }
.cause:last-child { border-bottom: none; }
/* how the same departure has gone: one bar per day, sharing the whole width however many days there are. Green on
   time, yellow and red late – and the later the taller, so that the days can be told apart without the colours. */
.hist-strip { display: flex; align-items: flex-end; gap: var(--s0); height: 20px; margin: var(--s1) 0 var(--s3); }
.hist-strip span { flex: 1 1 0; min-width: 2px; height: 12px; border-radius: 2px; background: var(--ok); }
.hist-strip span.d1 { height: 16px; background: var(--warning); }
.hist-strip span.d2 { height: 20px; background: var(--critical); }

/* ---------- maps ---------- */
.traffic-top { display: grid; gap: var(--s5); }
.traffic-left { min-width: 0; }
.traffic-grid { display: grid; grid-template-columns: minmax(0, 1fr) 472px; gap: var(--s5); align-items: start; margin-top: var(--s5) !important; }
.map-card { position: sticky; top: calc(var(--bar-h) + var(--s5)); }
.map-wrap { position: relative; }
.map { height: 480px; border-radius: var(--r-in); z-index: 0; overflow: hidden; background: var(--field); }
.map.small { height: 320px; }
.map-card .map { height: clamp(380px, calc(100vh - 200px), 760px); }
.legend { display: flex; gap: var(--s2) var(--s4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--muted); margin-top: var(--s3); align-items: center; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: var(--s2); vertical-align: -1px; }
.legend .ring { background: var(--muted); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--critical) 45%, transparent); margin-left: var(--s1); }
.legend .late { background: transparent; border: 3.5px solid var(--c); width: 13px; height: 13px; vertical-align: -2px; }
.legend .station { background: var(--sign); border: 3px solid var(--yellow); width: 13px; height: 13px; vertical-align: -2px; }
.legend .bar { width: 20px; height: 4px; border-radius: 0; vertical-align: 3px; background: linear-gradient(90deg, var(--warning) 50%, var(--critical) 50%); }
.legend .dash { width: 24px; height: 0; border-radius: 0; vertical-align: 3px; border-top: 3px dashed var(--text-2); }
.leaflet-tooltip, .tooltip-html { padding: var(--s1) var(--s2); background: var(--sign); border: 1px solid var(--edge); border-radius: var(--r-ctl); color: var(--text); font-size: var(--t-xs); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); }
.leaflet-tooltip::before { display: none; }
.tooltip-html { position: absolute; pointer-events: none; z-index: 3000; display: none; }
.map-full-btn { display: grid; place-items: center; width: var(--hit); height: var(--hit); color: var(--text); }
.map-full-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-full-btn .close, .map-full .map-full-btn .open { display: none; }
.map-full .map-full-btn .close { display: inline; }
.leaflet-bar { border: none !important; border-radius: var(--r-ctl) !important; overflow: hidden; box-shadow: none !important; }
.leaflet-bar a { width: var(--hit) !important; height: var(--hit) !important; line-height: var(--hit) !important; background: var(--field) !important; color: var(--text) !important; border-color: var(--edge) !important;
  transition: background-color var(--ease); }
.leaflet-bar a:hover { background: var(--field-hi) !important; }
.leaflet-bar a:active { background: var(--field-down) !important; }
.leaflet-control-attribution { background: rgba(10, 10, 12, 0.7) !important; color: var(--muted) !important; font-size: var(--t-xs) !important; }
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-container { background: var(--field); font-family: var(--font); }
.leaflet-interactive { cursor: pointer; }
/* the base map steps back a little, so the lines and the trains carry the map */
.base-tiles { filter: brightness(0.82) contrast(1.05); }
.card.map-full { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; margin: 0 !important; border: none; border-radius: 0;
  padding: max(var(--s4), env(safe-area-inset-top)) var(--s4) max(var(--s4), env(safe-area-inset-bottom)); }
.card.map-full .map-wrap, .card.map-full > .map { flex: 1; min-height: 0; }
.card.map-full .map { height: 100% !important; }
.card.map-full > .map { height: auto !important; }
/* a train on the map: the middle has the colour of its type (purple Pågatåg, grey Öresundståg); around a late
   train, with a gap between, a ring that says how late (yellow, red); and a red halo when a delay is expected */
.train-dot { --type: var(--line-other); --late: var(--warning); display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 3.5px solid var(--late); padding: 2.5px; background: linear-gradient(var(--type), var(--type)) content-box, var(--sign);
  box-shadow: 0 0 0 1.5px var(--sign), 0 1px 5px rgba(0, 0, 0, 0.6); cursor: pointer; transition: transform var(--ease); }
.train-dot.pagatag { --type: var(--line-pagatag); }
.train-dot.oresund { --type: var(--line-oresund); }
/* on time: no ring at all, just the train in the colour of its type */
.train-dot.d0 { border-color: transparent; padding: 0.5px; box-shadow: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  background: radial-gradient(circle closest-side, var(--type) calc(100% - 1.5px), var(--text) calc(100% - 1.5px) 100%) content-box; }
.train-dot.d2 { --late: var(--critical); }
.train-dot.high { box-shadow: 0 0 0 1.5px var(--sign), 0 0 0 7px color-mix(in srgb, var(--critical) 45%, transparent); }
.train-dot.d0.high { border-color: color-mix(in srgb, var(--critical) 50%, transparent); box-shadow: none; }  /* on time now, a delay expected */
.train-wrap:hover .train-dot { transform: scale(1.25); }
.legend .train-dot { display: inline-block; width: 13px; height: 13px; border: none; padding: 0; background: var(--type); box-shadow: 0 0 0 1.5px var(--text); filter: none; margin-right: var(--s2); vertical-align: -2px; cursor: default; }
/* between two updates a train glides to its new place instead of jumping there, and a tooltip that is always shown follows it */
.glide .train-wrap, .glide .leaflet-tooltip.follow { transition: transform var(--glide, 30s) linear; }

/* ---------- statistics ---------- */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s5); align-items: start; }
.side-list { max-height: 560px; overflow-y: auto; margin: 0 calc(-1 * var(--pad)); scrollbar-width: thin; }
.late-item { display: block; width: 100%; border: none; border-top: 1px solid var(--edge); background: none; text-align: left; cursor: pointer; padding: var(--s3) var(--pad); transition: background-color var(--ease); }
.late-item:hover { background: var(--field); }
.late-item:active { background: var(--field-hi); }
.late-item:focus-visible { outline-offset: -2px; }
.late-item .row1 { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; font-weight: 600; color: var(--text); }
.late-item .route { color: var(--muted); font-size: var(--t-sm); margin-top: var(--s1); }
.late-item .est { font-weight: 700; color: var(--critical-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.side-list > .empty { padding: var(--s1) var(--pad); }
.replay-bar { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s3); flex-wrap: wrap; }
.replay-bar input[type=range] { flex: 1; min-width: 160px; height: var(--hit); margin: 0; cursor: pointer; }
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th, td { padding: var(--s3) var(--s2); text-align: left; border-top: 1px solid var(--edge); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { border-top: none; color: var(--muted); font-weight: 600; font-size: var(--t-xs); white-space: nowrap; }
tbody tr.clickable { cursor: pointer; transition: background-color var(--ease); }
tbody tr.clickable:hover { background: var(--field); }
tbody tr.clickable:active { background: var(--field-hi); }
.only-mobile { display: none; }
.heatmap { display: grid; gap: var(--s0); font-size: var(--t-xs); overflow-x: auto; }
.heatmap .hlabel { color: var(--text-2); white-space: nowrap; padding-right: var(--s2); align-self: center; overflow: hidden; text-overflow: ellipsis; }
.heatmap .col { color: var(--muted); text-align: center; }
.heatmap .cell { height: 28px; border-radius: var(--s1); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; cursor: default; }
.seq-scale { display: flex; align-items: center; gap: var(--s1); font-size: var(--t-xs); color: var(--muted); margin-top: var(--s3); }
.seq-scale span.box { width: 24px; height: 12px; border-radius: 2px; display: inline-block; }
.chart-box { position: relative; height: 280px; }
.chart-box.tall { height: 340px; }
/* chain tree */
.tree-wrap { overflow-x: auto; }
.tree { position: relative; }
.tree svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tree-cols { display: flex; gap: 72px; position: relative; }
.tree-col { display: flex; flex-direction: column; gap: var(--s3); min-width: 232px; justify-content: center; }
.tree-col h3 { color: var(--muted); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; margin-bottom: var(--s0); }
.node { padding: var(--s3); background: var(--field); border-radius: var(--r-ctl); font-size: var(--t-sm); }
.node.root { box-shadow: inset 4px 0 0 var(--critical); }
.node .added { font-weight: 700; color: var(--critical-ink); }
.edge-label { font-size: 12px; fill: var(--text-2); }
/* punctuality: a name, a bar and a number per row */
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 48px; gap: var(--s3); align-items: center; padding: var(--s1) 0; font-size: var(--t-sm); }
.stat-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-row .bar span { background: var(--hist); }
.stat-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.trend-up { color: var(--critical-ink); }
.trend-down { color: var(--muted); }
#stats-period { flex: none; margin-left: auto; }

/* ---------- the sheet: one train ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 2001; top: var(--s3); right: var(--s3); bottom: var(--s3); width: min(560px, calc(100% - 2 * var(--s3)));
  overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pad) var(--s7); background: var(--sign); border: 1px solid var(--edge); border-radius: var(--r-box);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7); transform: translateX(calc(100% + 2 * var(--s3))); visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.35s; }
.drawer.open { transform: none; visibility: visible; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-grab { display: none; }
.sheet-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3);
  margin: 0 calc(-1 * var(--pad)) var(--s2); padding: var(--pad) var(--pad) var(--s4); background: var(--sign); }
.sheet-head p { margin-top: var(--s1); }
.notes { list-style: none; margin: 0 0 var(--s4); padding: 0; font-size: var(--t-sm); color: var(--text-2); display: grid; gap: var(--s1); }
/* a long message from the operator is three lines here; the whole text is under Trafik */
.notes li { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sheet-sec { margin-top: var(--s6); }
.sheet-sec > h3 { margin-bottom: var(--s2); }
details.sheet-sec { border-top: 1px solid var(--edge); padding-top: var(--s1); margin-top: var(--s4); }
.drawer .card { padding: 0; border: none; border-radius: 0; }
.drawer .grid.kpis { border: none; border-radius: 0; padding: 0; margin: 0 calc(-1 * var(--pad)); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.drawer .grid.kpis .kpi { padding-top: var(--s2); padding-bottom: var(--s2); }
.drawer #drawer-history { margin-top: var(--s6); }
.drawer .btn.quiet { margin-top: var(--s2); margin-left: calc(-1 * var(--s3)); }

/* ---------- a wide window: the board and what belongs to it side by side ---------- */
@media (min-width: 720px) {
  /* the search on one line: the stations to the left, the time and the button to the right */
  .planner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s6); align-items: center; }
  .planner-actions { flex-direction: column; align-items: stretch; margin: 0; min-width: 192px; }
}
@media (min-width: 1180px) {
  .split, body[data-view="journey"] #resa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(392px, 34%); gap: var(--s6); align-items: start; }
  .split > * + * { margin-top: 0; }
  .split:has(> .split-side[hidden]) { grid-template-columns: minmax(0, 1fr); }
  body[data-view="journey"] #view-search { display: block; }
  #view-search.active { animation: none; }
  /* the side keeps its place while the board is scrolled, and scrolls on its own */
  .split-side { position: sticky; top: calc(var(--bar-h) + var(--s5)); max-height: calc(100vh - var(--bar-h) - 2 * var(--s5)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: var(--r-box); }
  .split-side::-webkit-scrollbar { display: none; }
  .split-side:has(.map-full) { z-index: 1600; overflow: visible; max-height: none; }
  #jv-back { display: none; }
  .traffic-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .grid.two.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 1179px) {
  #jv-close { display: none; }
  .jv-card { padding-right: var(--pad); }
}
@media (max-width: 1100px) {
  .traffic-grid, .map-layout { grid-template-columns: 1fr; }
  .map-card { position: static; }
  .map, .map-card .map { height: 400px; }
  .side-list { max-height: none; }
}

/* ---------- phones and narrow windows: the tabs lie at the bottom of the screen ---------- */
@media (max-width: 920px) {
  .topbar { position: relative; grid-template-columns: 1fr auto; height: 56px; padding: 0 var(--s4); }
  nav.tabs { position: fixed; bottom: calc(var(--s3) + env(safe-area-inset-bottom)); left: var(--s3); right: var(--s3); z-index: 950; max-width: 480px; margin: 0 auto;
    justify-content: space-around; padding: var(--s1); background: var(--sign); border: 1px solid var(--edge); border-radius: var(--r-box); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); }
  nav.tabs button { flex: 1; flex-direction: column; justify-content: center; gap: var(--s1); height: 52px; padding: 0 var(--s1); background-color: transparent; }
  nav.tabs .both b { font-size: var(--t-xs); }
  nav.tabs svg { width: 24px; height: 24px; }
  main { padding: var(--s4) var(--s4) calc(112px + env(safe-area-inset-bottom)); }
  .warn-rail { --rail-edge: var(--s4); }
}
@media (max-width: 860px) {
  .hide-mobile { display: none; }
  .only-mobile { display: block; }
  .view-head nav.subtabs { margin-left: 0; }
  .card-head > .muted { margin-left: 0; text-align: left; flex-basis: 100%; }
  /* the sheet comes up from the bottom, with a handle to pull it down by */
  .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: var(--r-box) var(--r-box) 0 0; border-bottom: none;
    padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom)); transform: translateY(105%); }
  .sheet-grab { display: block; position: sticky; top: 0; z-index: 4; height: 0; }
  .sheet-grab::before { content: ""; position: absolute; top: var(--s2); left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--field-hi); }
}
@media (max-width: 640px) {
  :root { --pad: var(--s4); }
  h1 { font-size: var(--t-2xl); }
  .feed { max-width: 40vw; }
  .feed:not(.waiting) { display: none; }  /* on a phone the clock says enough; a feed that is waiting still shows */
  .sign-title { font-size: var(--t-xl); }
  .sign-place { font-size: var(--t-sm); margin-left: 0; text-align: left; flex-basis: 100%; }
  .planner-actions .btn.primary { flex: 1; }
  .kpi { padding: var(--s4) var(--s3); }
  .widgets .kpi .value { font-size: var(--t-2xl); }
  .widgets .kpi .hint { display: none; }
  .route-title { font-size: var(--t-xl); }
  .stat-row { grid-template-columns: minmax(0, 1fr) 60px 48px; }
  .map, .map.small, .map-card .map { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* =====================================================================================================================
   design-natur
   – a light ground like snow on stone, spruce-dark ink, stone grey for what matters less; moss green marks what is
     chosen and a new time; ochre and rust what is a little or very late.
   – one typeface, Archivo: condensed capitals for headings and for figures read at a glance, its normal width for the rest.
   – a photograph of the landscape over the journey search, the search lying over its lower edge.
   – sharp corners and thin rules; a shadow only under what floats.
   ===================================================================================================================== */
@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root {
  color-scheme: light;
  --page: #f3f4f1; --sign: #ffffff; --edge: rgba(24, 32, 27, 0.12);
  --field: #eceee9; --field-hi: #e1e4de; --field-down: #d5d9d2;
  --text: #18201b; --text-2: #3d463f; --muted: #5e665f;
  /* the accent, under the name the rest of the file knows it by */
  --yellow: #2e5b43; --yellow-hi: #3b6f53; --yellow-down: #244a36; --yellow-ink: #ffffff;
  --warning: #c98a1f; --critical: #c0472d; --warning-ink: #8f5d0e; --critical-ink: #a93a22; --ok: #3e7d55;
  --surface: #ffffff; --surface-2: #e1e4de; --border: rgba(24, 32, 27, 0.12); --grid: rgba(24, 32, 27, 0.08); --track: #a7ada5;
  --series-1: #2e5b43; --series-2: #a7ada5; --hist: #5e665f; --good: #a7ada5;
  --seq-0: #f3f4f1; --seq-1: #e4e8df; --seq-2: #cfd7c8; --seq-3: #e8d29b; --seq-4: #ddb05a; --seq-5: #cf8a2e; --seq-6: #c0602f; --seq-7: #a93a22;
  --line-pagatag: #7a3fb0; --line-oresund: #6c7280; --line-other: #3b6aa8;
  --r-box: 4px; --r-in: 4px; --r-ctl: 2px;
  --shadow: 0 16px 40px rgba(24, 32, 27, 0.14);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
html { overflow-x: clip; }
/* headings in condensed capitals; the station board's second language is not this design's */
h1, h2, .sign-title, .route-title, .cover-title { font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
h1 em[aria-hidden], .sign-title em, .both i { display: none; }
.cols .both b { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sign-place { font-size: var(--t-sm); letter-spacing: 0.1em; color: var(--muted); }
.board .row .t, .board .row .ny, .board .row .c-ber b { font-size: var(--t-2xl); font-stretch: 75%; font-weight: 700; }
.drawer-backdrop { background: rgba(24, 32, 27, 0.4); }
.drawer, .suggest, .time-wheel { box-shadow: var(--shadow); }
.base-tiles { filter: none; }
/* a line's number: white on the darkened colour of its trains, grey where the type is not known */
.line-badge { color: #fff; background: color-mix(in srgb, var(--line, var(--muted)) 78%, #000); }
.train-dot { box-shadow: 0 0 0 1.5px var(--sign), 0 1px 4px rgba(24, 32, 27, 0.35); }

/* the top bar: solid on the light ground, and clear over the photograph with white letters */
.topbar { background: var(--page); transition: background-color var(--ease), border-color var(--ease), color var(--ease); }
.brand { font-stretch: 75%; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.brand em { color: inherit; }
nav.tabs button { font-stretch: 87.5%; letter-spacing: 0.06em; text-transform: uppercase; }
nav.tabs .both b { font-weight: 700; }
nav.tabs button, nav.tabs button:hover { background-color: transparent; }
nav.tabs button { border-radius: 0; box-shadow: inset 0 -2px 0 transparent; }
nav.tabs button:hover { box-shadow: inset 0 -2px 0 var(--field-down); }
nav.tabs button[aria-selected="true"] { background-color: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
body.on-cover .topbar { background: transparent; border-bottom-color: transparent; color: #fff; }
body.on-cover .topbar :is(.brand, nav.tabs button, nav.tabs .both b, .feed) { color: #fff; }
body.on-cover .topbar nav.tabs button:hover { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.5); }
body.on-cover .topbar nav.tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 #fff; }
body.on-cover .topbar .clock { background: rgba(255, 255, 255, 0.16); color: #fff; }
body.on-cover .topbar .clock .sec { color: #fff; opacity: 0.8; }

/* the photograph: the full width of the window, under the top bar, the question low on it */
.cover { position: relative; isolation: isolate; display: flex; align-items: flex-end; height: clamp(440px, 64vh, 720px); overflow: hidden; color: #fff;
  margin: calc(-1 * (var(--bar-h) + var(--s7))) calc(50% - 50vw) 0; padding: 0 max(var(--s6), calc(50vw - var(--board-w) / 2)) 120px; }
body:not([data-view="search"]):not([data-view="journey"]) #cover { display: none; }
.cover-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* darker at the top under the bar's letters and at the bottom under the question: the photograph itself stays as it is */
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(12, 16, 13, 0.6), rgba(12, 16, 13, 0.3) 14%, rgba(12, 16, 13, 0.08) 32%, rgba(12, 16, 13, 0.28) 55%, rgba(12, 16, 13, 0.68)); }  /* a bright sky under the bar: the photographs change every day */
.cover-text { text-shadow: 0 1px 16px rgba(12, 16, 13, 0.35); }  /* a bright sky or field under the letters */
.kicker { margin-bottom: var(--s3); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.cover-title { font-size: clamp(3rem, 9vw, 7rem); line-height: 0.88; color: #fff; }
/* the place and the photographer, in the photograph's lower right corner – above the panel on its edge where that
   panel reaches the corner: Trafikläget's messages, a station's own panel, and the searches on a narrower window */
.credit { position: absolute; right: var(--s4); bottom: var(--s3); font-size: var(--t-xs); color: rgba(255, 255, 255, 0.8); }
#view-traffic .credit, #view-station:has(.split-side:not([hidden])) .credit { bottom: calc(72px + var(--s3)); }
@media (max-width: 1600px) { :is(#cover, #view-station) .credit { bottom: calc(72px + var(--s3)); } }  /* Statistik's tabs keep to the left */
/* the search lies over the photograph's lower edge */
#journey-form { position: relative; z-index: 2; margin-top: -72px; border: none; box-shadow: var(--shadow); }
/* a notice between the photograph and the search (no connection, demo, the feed down) is read whole: the search
   then starts below it instead of over the photograph's edge */
main:has(> .banner:not([hidden])) #journey-form { margin-top: 0; }
.planner .both b { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.prow input { font-size: var(--t-xl); }
.btn.primary { background-color: var(--text); color: #fff; font-stretch: 87.5%; letter-spacing: 0.06em; text-transform: uppercase; }
.btn.primary:hover { background-color: var(--yellow); color: #fff; }
.btn.primary:active { background-color: var(--yellow-down); }
/* every view opens on its own photograph, lower than the journey search's, and what comes first lies over its edge */
.cover.short { height: clamp(320px, 44vh, 500px); padding-bottom: 112px; }
.cover.short .cover-title { font-size: clamp(2.75rem, 7vw, 5.5rem); }
/* where the page below is as wide as the window allows, the name starts where the page does */
:is(#view-traffic, #view-stats, #view-station:has(.split-side:not([hidden]))) .cover, body[data-view="journey"] #cover { padding-left: max(var(--s6), calc(50vw - 780px + var(--s6))); padding-right: max(var(--s6), calc(50vw - 780px + var(--s6))); }
.view > .cover + * { position: relative; z-index: 2; margin-top: -72px; }
#view-stats > .view-head { width: fit-content; max-width: 100%; padding: 0 var(--pad); background: var(--sign); border-radius: var(--r-box); }  /* as wide as its tabs */
#view-stats > .view-head nav.subtabs { margin-left: 0; }
/* the tabs inside a page: words in capitals, the chosen one underlined, as in the top bar */
nav.subtabs button { border-radius: 0; background-color: transparent; font-stretch: 87.5%; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 -2px 0 transparent; }
nav.subtabs button:hover { background-color: transparent; box-shadow: inset 0 -2px 0 var(--field-down); }
nav.subtabs button[aria-selected="true"] { background-color: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
#view-stats > .view-head nav.subtabs button { height: 56px; }
#station-form, #kpis, #view-traffic .traffic-top > .notices, #view-stats > .view-head { box-shadow: var(--shadow); }
#station-form, #kpis, #view-traffic .traffic-top > .notices { border: none; }
/* figures read at a glance, in the condensed width */
.kpi .value, .wc-est, .hero-value, .fc-main, .clock { font-stretch: 75%; }
.kpi .value { font-weight: 800; }
@media (max-width: 920px) {
  .cover { margin-top: calc(-1 * (56px + var(--s4))); padding-bottom: 104px; height: clamp(380px, 58vh, 560px); }
  .cover.short { height: clamp(280px, 40vh, 400px); padding-bottom: 96px; }
  .cover, :is(#view-traffic, #view-stats, #view-station:has(.split-side:not([hidden]))) .cover { padding-left: var(--s4); padding-right: var(--s4); }
  /* on a phone the tabs are a white bar at the bottom of the screen, not on the photograph */
  body.on-cover .topbar :is(nav.tabs button, nav.tabs .both b) { color: var(--text-2); }
  body.on-cover .topbar nav.tabs button[aria-selected="true"], body.on-cover .topbar nav.tabs button[aria-selected="true"] .both b { color: var(--text); }
  nav.tabs button, nav.tabs button[aria-selected="true"], body.on-cover .topbar nav.tabs button[aria-selected="true"] { box-shadow: none; }
  nav.tabs button[aria-selected="true"] { background-color: var(--field); }
  .credit { bottom: auto; top: calc(56px + var(--s2)); }
}


/* ---------- design-natur: the layout ----------
   No boxes on the page's own ground: a section is its heading under a dark rule, and sections are kept apart by air.
   A white panel is kept for what lies over a photograph or floats over a map – the searches, the figures at the top of
   Trafikläget, a station's own messages, the tabs of Statistik, and the list of trains. */
:root { --gutter: var(--s6); --content-half: 756px; }
.card, .sign, .widgets, .metric-grid, .grid.kpis { --pad: 0px; background: transparent; border: none; border-top: 2px solid var(--text); border-radius: 0; box-shadow: none; }
.card, .sign { padding: var(--s4) 0 0; }
.metric-grid, .grid.kpis { gap: var(--s4); padding: var(--s3) 0 0; }
.widgets .kpi + .kpi { padding-left: var(--s4); }
section.view > * + *, .split > * + *, .split-main > * + *, .split-side > * + *, .statpane > * + *, .subview > * + * { margin-top: var(--s7); }
.grid { gap: var(--s7); }
/* side by side, the board and its panel start at the same height */
@media (min-width: 1180px) { .split > * + * { margin-top: 0; } }
/* the panels */
.card.planner, #kpis, :is(#view-traffic .traffic-top, #station-side) > .notices { --pad: var(--s5); background: var(--sign); border: none; border-radius: var(--r-box); box-shadow: var(--shadow); }
.card.planner { padding: var(--s2) var(--s5); }
#kpis { padding: 0; }
:is(#view-traffic .traffic-top, #station-side) > .notices { padding: var(--s5); }
.card.map-full { background: var(--page); border-top: none; }

/* Trafikläget: the map is the landscape – the whole width of the window, and the list of trains floats on it */
#view-traffic .traffic-grid { display: grid; align-items: start; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: var(--s8) !important;
  grid-template-columns: [full-start] max(var(--gutter), calc(50vw - var(--content-half))) [content-start] minmax(0, 1fr) 448px [content-end] max(var(--gutter), calc(50vw - var(--content-half))) [full-end]; }
#view-traffic .map-card:not(.map-full) { display: contents; }
#view-traffic .map-card > .card-head { grid-column: content-start / content-end; grid-row: 1; padding-top: var(--s4); border-top: 2px solid var(--text); }
#view-traffic .map-card > .map-wrap { grid-column: full-start / full-end; grid-row: 2; }
#view-traffic .map-card:not(.map-full) .map { height: clamp(520px, 80vh, 880px); border-radius: 0; }
#view-traffic .map-card .legend { padding: 0 max(var(--gutter), calc(50vw - var(--content-half))); }
#view-traffic .list-sign { --pad: var(--s5); grid-column: 3; grid-row: 2; z-index: 801; position: relative; margin-top: var(--s5); max-height: calc(clamp(520px, 80vh, 880px) - 2 * var(--s5));
  overflow-y: auto; overscroll-behavior: contain; padding: var(--s5); background: var(--sign); border: none; border-radius: var(--r-box); box-shadow: var(--shadow); }
@media (max-width: 1100px) {
  /* no room for the list beside the map: it comes under it, and the grid loses its column */
  #view-traffic .traffic-grid { grid-template-columns: [full-start] var(--gutter) [content-start] minmax(0, 1fr) [content-end] var(--gutter) [full-end]; }
  #view-traffic .list-sign { grid-column: content-start / content-end; grid-row: 3; max-height: none; overflow: visible; margin-top: var(--s7); padding: var(--s4) 0 0; background: transparent;
    border-top: 2px solid var(--text); border-radius: 0; box-shadow: none; --pad: 0px; }
  #view-traffic .map-card:not(.map-full) .map { height: 64vh; }
}
@media (max-width: 920px) { :root { --gutter: var(--s4); } }
/* a board without a box keeps some room inside its rows, so that a chosen row's mark and ground do not touch the times */
.sign.board .cols, .sign.board .row { padding-left: var(--s3); padding-right: var(--s3); }
/* the list of trains folds up to its heading where it lies over the map; under the map it is always open */
.list-sign .sign-head { align-items: center; }
.list-fold { margin-right: calc(-1 * var(--s1)); }
.list-fold .chev { transform: translateY(2px) rotate(-45deg); transition: transform var(--ease); }
.list-sign.folded .list-fold .chev { transform: translateY(-2px) rotate(135deg); }
.list-sign.folded #train-list-body { display: none; }
.list-sign.folded .sign-head { margin-bottom: 0; }
@media (max-width: 1100px) {
  .list-fold { display: none; }
  .list-sign.folded #train-list-body { display: block; }
  .list-sign.folded .sign-head { margin-bottom: var(--s4); }
}

/* Watching a journey (app.js, "watching a journey"): the button on the journey, a pill in the corner while it is
   watched, and the notices of what has changed. */
.watch-btn { margin-top: var(--s3); border: 1px solid var(--edge); }
.watch-btn.on { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); }
.watch-pill { position: fixed; left: var(--s4); bottom: var(--s4); z-index: 60; display: flex; align-items: center; gap: var(--s2);
  max-width: min(520px, calc(100vw - 2 * var(--s4))); min-height: var(--hit); padding: var(--s2) var(--s4); border: 1px solid var(--edge);
  border-radius: 999px; background: var(--sign); color: var(--text); box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.3));
  font-size: var(--t-sm); text-align: left; cursor: pointer; }
.watch-pill .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); animation: watch-beat 2s ease-in-out infinite; }
.watch-pill.warn .dot { background: var(--warning); }
.watch-pill.bad .dot { background: var(--critical); }
@keyframes watch-beat { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .watch-pill .dot { animation: none; } }
#toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 70; display: flex; flex-direction: column; gap: var(--s2);
  width: min(380px, calc(100vw - 2 * var(--s4))); }
.toast { position: relative; padding: var(--s3) var(--s8) var(--s3) var(--s4); border: 1px solid var(--edge); border-left: 4px solid var(--yellow);
  border-radius: var(--r-box); background: var(--sign); color: var(--text); box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.3)); }
.toast b { display: block; font-size: var(--t-sm); }
.toast p { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--text-2); }
.toast .icon-btn { position: absolute; top: var(--s2); right: var(--s2); }
/* on a narrow screen the tabs stand at the bottom (62 px): the pill and the notices above them */
@media (max-width: 920px) {
  .watch-pill { bottom: calc(var(--s3) + 62px + var(--s3) + env(safe-area-inset-bottom)); }
  #toasts { bottom: calc(var(--s3) + 62px + var(--s3) + 60px + var(--s3) + env(safe-area-inset-bottom)); }
}

/* The routes one travels (app.js): one press each, with the next train. */
.recent-routes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.recent-routes .plabel { width: 100%; }
.route-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--s0); min-height: var(--hit);
  padding: var(--s2) var(--s3); border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--sign); color: var(--text);
  font-size: var(--t-sm); text-align: left; cursor: pointer; }
.route-chip:hover { background: var(--field-hi); }
.route-chip .rc-next { color: var(--muted); font-variant-numeric: tabular-nums; }
.route-chip .rc-next:empty::after { content: "…"; }

/* A disruption Trafikverket reports, on the maps (app.js renderMap) */
.dis-mark { display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%;
  background: var(--critical); color: #fff; font: 800 14px/1 var(--font, sans-serif); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
/* Om Knutpunkt */
#pane-about { display: none; }
#pane-about.active { display: grid; gap: var(--s5); }
.about-steps, .about-list { padding-left: 1.2em; display: grid; gap: var(--s2); }
.about-steps li::marker { font-weight: 700; color: var(--yellow); }
.about-list { list-style: square; }
/* the same train every weekday (app.js, commute) */
.watch-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.watch-row .watch-btn { margin-top: 0; }
.commutes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); }
.commutes .plabel { width: 100%; }
.commute-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--hit); padding: 0 var(--s1) 0 var(--s3);
  background: var(--field); border-left: 3px solid var(--yellow); font-variant-numeric: tabular-nums; }
/* links inside running text are underlined, not told apart by colour alone */
.footnote a, .explain a { text-decoration: underline; text-underline-offset: 2px; }