/* TrainArchive.eu: white pages, the logo's navy and blue, the EU yellow used sparingly */

@font-face { font-family: "Outfit"; font-weight: 400 800; font-display: swap; src: url(fonts/outfit.woff2?v=6c18d579fd) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-weight: 400 800; font-display: swap; src: url(fonts/outfit-ext.woff2?v=0f53d1c03b) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Source Sans 3 is variable: one file per subset covers every weight used */
@font-face { font-family: "Source Sans 3"; font-weight: 400 700; font-display: swap; src: url(fonts/source-sans-3.woff2?v=7a19a7027e) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 400 700; font-display: swap; src: url(fonts/source-sans-3-ext.woff2?v=a85a7459bd) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* From the logo */
  --navy: #012763;
  --blue: #0058d0;
  --rail: #1a72e8;
  --yellow: #f8c80a;

  --paper: #fdfdfd;
  --plate: #f0f5fc;       /* bands */
  --sheet: #f6f9fd;       /* cards, forms */
  --ink: #14213b;
  --muted: #51607a;
  --rule: #d5deec;
  --link: var(--blue);
  --signal: var(--blue);  /* primary actions */
  --signal-ink: #ffffff;
  --ok: #17693f;
  --error: #b3261e;
  --focus: var(--navy);
  --field: #ffffff;
  --field-edge: #7d8ba3;

  /* Map: one hue from navy to pale blue, so the levels differ in lightness (colour-blind safe) */
  --sea: #eef3fb;
  --land: #ffffff;
  --land-edge: #cfd9ea;
  --level-positions: #012763;
  --level-live: #1a72e8;
  --level-timetables: #8290a8;  /* grey-blue: told apart from live blue by hue, 3.2:1 on white land */
  --hatch: #ffffff;
  --stop: #0058d0;

  --code-bg: #f3f6fb;
  --code-ink: #14213b;

  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --slab: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;  /* headings, like the wordmark */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;

  --radius: 6px;          /* every button, header included */
  --measure: 68ch;
  --page: 78rem;
  --gutter: clamp(1rem, 4vw, 2.75rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--yellow); border-radius: 1px; }

code { font-family: var(--mono); font-size: 0.86em; }
p code, dd code, li code, td code { background: var(--sheet); padding: 0.05em 0.35em; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
var { font-style: italic; color: var(--signal); }
strong { font-weight: 650; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--signal); color: var(--signal-ink); padding: 0.5rem 0.75rem; z-index: 10; }
.skip:focus { left: 0.5rem; }

/* ── Type ── */

h1, h2, h3 { font-family: var(--slab); font-weight: 700; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.015em; color: var(--navy); }
h1 { font-weight: 800; }
h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 3.9rem); margin-bottom: 0.9rem; }
h2 { font-size: clamp(1.65rem, 1.35rem + 1.2vw, 2.3rem); margin-bottom: 0.7rem; }
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.45rem; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
.lead { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem); line-height: 1.5; max-width: 50ch; color: var(--ink); overflow-wrap: break-word; }
.muted { color: var(--muted); }
.prose { max-width: var(--measure); }

/* ── Frame ── */

.top, main, .bottom { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem;
  padding-block: 1.1rem; border-bottom: 1px solid var(--rule);
}
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--ink); }
.logo { display: block; height: 3.1rem; width: auto; }
@media (max-width: 44rem) { .logo { height: 2.5rem; } }
.bottom .logo-mark { display: block; height: 2rem; width: auto; }
.mark { width: 2.1rem; height: 2.1rem; flex: none; }
.mark .mark-face { fill: var(--sheet); stroke: var(--ink); }
.mark .mark-hour { stroke: var(--ink); }
.mark .mark-minute { stroke: var(--signal); }
.mark .mark-hub { fill: var(--ink); }
.wordmark-name { font: 700 1.2rem/1 var(--slab); letter-spacing: -0.005em; }
.wordmark-name span { display: block; font: 600 0.78rem/1.2 var(--sans); color: var(--muted); letter-spacing: 0.01em; margin-top: 0.15rem; }

.top nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; margin-left: auto; }
.top nav a { color: var(--navy); text-decoration: none; font-weight: 600; padding-block: 0.3rem; border-bottom: 2px solid transparent; }
.top nav a:hover { border-bottom-color: var(--rule); color: var(--ink); }
.top nav a[aria-current="page"] { border-bottom-color: var(--yellow); border-bottom-width: 3px; }

.account { display: flex; align-items: center; gap: 0.5rem 1.1rem; font-weight: 600; }
.account a { color: var(--ink); text-decoration: none; }
.account a:hover { color: var(--navy); }
.account a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.account .account-primary { background: var(--blue); color: #fff; padding: 0.5rem 0.95rem; border-radius: 3px; }
.account .account-primary:hover { background: var(--navy); color: #fff; }
.account-soon { color: var(--muted); cursor: default; }
.account .account-primary.account-soon { background: transparent; color: var(--muted); border: 1px dashed var(--rule); }
.soon { font-weight: 400; font-style: italic; margin-left: 0.2rem; }
form.inline { display: inline; margin: 0; }
button.link { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
button.link:hover { color: var(--signal); }

main { padding-bottom: 2rem; }
main > section, main > .page-head, main > div, main > form { margin-block: clamp(2.5rem, 6vw, 4.5rem); }
main > :first-child, main > .crumbs + * { margin-top: clamp(1.5rem, 4vw, 2.75rem); }

.crumbs { margin-top: 1.5rem; color: var(--muted); font-size: 0.95rem; }
.crumbs a { color: var(--muted); }
.crumbs + * { margin-top: 1rem !important; }

.page-head { max-width: 60rem; }

.bottom {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.25rem;
  padding-block: 2rem 3rem; color: var(--muted); border-top: 1px solid var(--rule); margin-top: 3rem;
}
.bottom p { margin: 0; }
.bottom .mark { width: 1.75rem; height: 1.75rem; }
.bottom-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.bottom-links a { color: var(--muted); }
@media (max-width: 44rem) { .bottom { grid-template-columns: auto minmax(0, 1fr); } .bottom-links { grid-column: 1 / -1; } }

/* ── Buttons ── */

.button {
  display: inline-flex; align-items: center; min-height: 2.9rem; font: 600 1.05rem/1 var(--sans); text-decoration: none; cursor: pointer;
  padding: 0.8rem 1.2rem; border-radius: var(--radius); border: 1.5px solid var(--navy); color: var(--navy); background: transparent;
}
.button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.button--primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.button--primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.button--small { min-height: 2.75rem; padding: 0.5rem 0.9rem; font-size: 0.97rem; }
.button--danger { border-color: var(--error); color: var(--error); }
.button--danger:hover { background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); }
.button--soon, .button--soon:hover { cursor: default; background: transparent; border: 1.5px dashed var(--rule); color: var(--muted); }
.access { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1.25rem 0; }
.access-note { color: var(--muted); }

/* ── Maps ── */

.map { display: block; width: 100%; height: auto; }
.map .land { fill: var(--land); stroke: var(--land-edge); stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.map .level-positions { fill: var(--level-positions); }
.map .level-live { fill: var(--level-live); }
.map .level-timetables { fill: var(--level-timetables); }
.map .community.level-positions { fill: url(#hatch-positions); }
.map .community.level-live { fill: url(#hatch-live); }
.map .community.level-timetables { fill: url(#hatch-timetables); }
.map .partial.level-positions { fill: url(#dots-positions); }
.map .partial.level-live { fill: url(#dots-live); }
.map .partial.level-timetables { fill: url(#dots-timetables); }
.map .hatch-line { fill: var(--hatch); fill-opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) { .map a .covered { transition: fill 0.15s; } }
.map a:hover .covered { fill: var(--yellow); }
/* The yellow alone is too close to the pale levels: a navy edge too */
.map a:focus-visible .covered { fill: var(--yellow); stroke: var(--navy); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* The Europe map is an atlas plate: sea-toned, framed by a hairline */
.atlas { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(15rem, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 58rem) { .atlas { grid-template-columns: minmax(0, 1fr); } }
.atlas-intro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.atlas-intro .access { margin-bottom: 0; }
@media (max-width: 58rem) { .atlas-intro { grid-template-columns: minmax(0, 1fr); } }
.atlas-intro h1 { margin: 0; max-width: 18ch; }
.atlas-intro .lead { margin: 0; font-size: 1.15rem; }
.plate { position: relative; margin: 0; background: var(--sea); border: 1px solid var(--rule); padding: 0.5rem; }
.plate .map--europe { max-height: 76vh; }
/* The key sits under the map, never over a country */
.key { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; padding: 0.6rem 0.4rem 0.2rem; font-size: 0.93rem; line-height: 1.35; }
.key-item { display: flex; align-items: center; gap: 0.55rem; }
.swatch { width: 1rem; height: 0.8rem; flex: none; display: inline-block; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.swatch.level-positions { background: var(--level-positions); }
.swatch.level-live { background: var(--level-live); }
.swatch.level-timetables { background: var(--level-timetables); }
.swatch.community { background: repeating-linear-gradient(45deg, var(--level-live) 0 2.5px, var(--hatch) 2.5px 4px); }
.swatch.partial { background-image: radial-gradient(circle, var(--hatch) 0 1.1px, transparent 1.4px); background-size: 4.5px 4.5px; }
.swatch.partial:not([class*="level-"]) { background-color: var(--level-live); }
/* "partial" after a country or source name: some of its trains only */
.partial-mark { font-size: 0.78rem; font-weight: 600; color: var(--muted); border: 1px dashed var(--field-edge); border-radius: 3px; padding: 0 0.3rem; margin-left: 0.35rem; white-space: nowrap; }
.tag--partial { background: transparent; border-style: dashed; border-color: var(--field-edge); color: var(--ink); }
.partial-note { border-left: 3px solid var(--yellow); padding: 0.35rem 0 0.35rem 0.75rem; }
.gazetteer .cross-border { margin: -1rem 0 1.75rem; color: var(--muted); }

/* Gazetteer: the countries beside the plate, as an index rather than buttons */
.gazetteer h2 { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule); }
.gazetteer h2 + ul { margin-bottom: 1.75rem; }
.gazetteer ul { list-style: none; margin: 0; padding: 0; columns: 2 9rem; column-gap: 1.5rem; }
.gazetteer li { break-inside: avoid; }
.gazetteer li a { display: flex; align-items: center; gap: 0.55rem; padding: 0.28rem 0; color: var(--ink); text-decoration: none; min-height: 2.1rem; }
.gazetteer li a:hover { color: var(--navy); }
.gazetteer li a:hover span:last-child { text-decoration: underline; }
.gazetteer .totals { color: var(--muted); font-size: 0.97rem; }

/* Second band: how to get the data, a quiet change of surface */
.band { background: var(--plate); border-block: 1px solid var(--rule); padding: clamp(2rem, 5vw, 3.5rem) var(--gutter); margin-inline: calc(var(--gutter) * -1); }
.ways { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); }
@media (max-width: 50rem) { .ways { grid-template-columns: minmax(0, 1fr); } }
.ways h2 { margin: 0; }
.ways dl { margin: 0; display: grid; gap: 1.5rem; }
.ways dt { font: 600 1.3rem/1.2 var(--slab); }
.ways dd { margin: 0.35rem 0 0; max-width: 48ch; }
.ways .access { margin-bottom: 0; }

/* Country pages */
.country-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; }
@media (max-width: 50rem) { .country-head { grid-template-columns: minmax(0, 1fr); } }
.country-map { max-width: 32rem; background: var(--sea); border: 1px solid var(--rule); padding: 0.5rem; }
.map--country .land { stroke-width: 0.8; }

.source-list { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.source-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.source-card h2 { font-size: 1.45rem; margin: 0; }
.source-card h2 a { color: var(--ink); text-decoration: none; }
.source-card h2 a:hover { color: var(--navy); }
.source-card .kinds { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0; }
.source-card .muted, .source-card .country-day { grid-column: 1 / -1; margin: 0; }
@media (max-width: 40rem) { .source-card { grid-template-columns: minmax(0, 1fr); } .source-card .kinds { grid-column: 1; grid-row: auto; justify-content: flex-start; } }

/* Kinds of data: small printed tags, filled when the data is live */
.kinds { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.9rem; }
.tag { display: inline-block; font-size: 0.85rem; font-weight: 600; line-height: 1.3; padding: 0.15rem 0.5rem; border-radius: 3px; border: 1px solid var(--rule); color: var(--ink); background: var(--sheet); white-space: nowrap; }
.tag--live { background: var(--rail); border-color: var(--rail); color: #fff; }
.tag--positions { background: var(--navy); border-color: var(--navy); color: #fff; }
.tag--community { background: transparent; border-style: dashed; color: var(--muted); }

/* ── Sources index: one timetable-like block per country ── */

.index-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; color: var(--muted); font-size: 0.95rem; margin: 0; }
.index-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.source-index { border-top: 2px solid var(--navy); }
.country-block { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0.25rem 2rem; padding: 0.7rem 0 0.8rem; border-bottom: 1px solid var(--rule); }
@media (max-width: 44rem) { .country-block { grid-template-columns: minmax(0, 1fr); } }
.country-block h2 { align-self: start; font-size: 1.35rem; margin: 0; padding-top: 0.45rem; display: flex; align-items: center; gap: 0.55rem; }
.country-block h2 a { color: var(--ink); text-decoration: none; }
.country-block h2 a:hover { color: var(--navy); }
.country-block ul { list-style: none; margin: 0; padding: 0; }
.source-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 10.5rem; align-items: center; gap: 0.25rem 1rem; padding: 0.45rem 0.5rem; margin-inline: -0.5rem; border-radius: 6px; }
.source-row:hover { background: var(--plate); }
.source-row__main { display: flex; flex-direction: column; min-width: 0; }
.source-row__note { color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
/* The whole row opens the source; the latest-day link sits above that */
.source-row__name::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.source-row__next { position: relative; justify-self: end; font-weight: 600; font-size: 0.95rem; white-space: nowrap; text-decoration: none; }
.source-row__next:hover { text-decoration: underline; }
.source-row__next--quiet { color: var(--muted); font-weight: 400; }
.source-row + .source-row { border-top: 1px dotted var(--rule); }
.source-row__name { font-weight: 600; color: var(--ink); text-decoration: none; min-height: 2.1rem; display: inline-flex; align-items: center; }
.source-row:hover .source-row__name { color: var(--signal); text-decoration: underline; }
.source-row .when { color: var(--muted); font-size: 0.92rem; }
.source-row .kinds { margin: 0; justify-content: flex-end; }
@media (max-width: 36rem) {
  .source-row { grid-template-columns: minmax(0, 1fr) auto; }
  .source-row__main { grid-column: 1 / -1; }
  .source-row .kinds { justify-content: flex-start; }
}
.dagger { color: var(--signal); font-weight: 700; margin-left: 0.2rem; }
.footnote { max-width: var(--measure); color: var(--muted); font-size: 0.95rem; }

/* ── Provider pages ── */

.provider-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 56rem) { .provider-head { grid-template-columns: minmax(0, 1fr); } }
.provider-title h1 { margin-bottom: 0.75rem; }
.provider-map { margin: 0; }
.provider-map .map--stops { background: var(--sea); border: 1px solid var(--rule); }
.provider-map figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; max-width: 60ch; }
.map--stops .land { fill: var(--land); }
.map--stops .land.home { fill: color-mix(in srgb, var(--level-timetables) 35%, var(--land)); }
.map--stops .stops { fill: none; stroke: var(--stop); stroke-width: 3.2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-missing { color: var(--muted); border: 1px dashed var(--rule); padding: 3rem 1rem; text-align: center; }

.facts { display: grid; gap: 0; margin: 0 0 1rem; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 40rem) { .facts div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2rem; border-top: 2px solid var(--navy); }
.stat { padding: 1rem 0 0.75rem; border-bottom: 1px solid var(--rule); }
.stat h2, .stat h3, .stat h4 { font-size: 1.25rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.stat h3 code, .stat h4 code { font-size: 0.78rem; color: var(--muted); font-weight: 400; background: none; border: 0; }
.stat-range { font: 700 1.55rem/1.15 var(--slab); margin-bottom: 0.3rem; font-variant-numeric: tabular-nums; }
.stat details summary { cursor: pointer; color: var(--link); padding: 0.4rem 0; min-height: 2.75rem; display: flex; align-items: center; }
.gaps { font-size: 0.93rem; color: var(--muted); padding-left: 1.1rem; font-variant-numeric: tabular-nums; }
.subhead { margin-top: 2rem; font-size: 1.3rem; }
.status-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.status-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.status-error { display: block; color: var(--error); font-size: 0.93rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
.versions { list-style: none; padding: 0; border-top: 1px solid var(--rule); max-width: 48rem; }
.versions li { padding: 0.45rem 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }

/* ── Files ── */

.wall { background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--yellow); padding: 1.5rem 1.6rem; max-width: 44rem; }
.wall h2 { font-size: 1.6rem; }
.tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.25rem; }
.tabs a { text-decoration: none; color: var(--ink); font-weight: 600; padding: 0.6rem 0; border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"] { border-bottom-color: var(--signal); }
.files-layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; }
@media (max-width: 40rem) { .files-layout { grid-template-columns: minmax(0, 1fr); } }
.days h3, .file-list h3 { font-size: 1.15rem; }
.days ul { list-style: none; padding: 0; margin: 0; max-height: 28rem; overflow-y: auto; border-top: 1px solid var(--rule); }
.days a { display: block; padding: 0.45rem 0.5rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.days a:hover { color: var(--navy); }
.days a[aria-current="page"] { background: var(--navy); color: #fff; }
.file-list ul, .table-files { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1.5rem; font-variant-numeric: tabular-nums; }
.file-list li, .table-files li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px dotted var(--rule); }
.version { margin-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.version summary { cursor: pointer; padding: 0.6rem 0; }

/* ── Data page and code ── */

/* One column of code, full width: long addresses scroll inside the block, never off the page */
.snippets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; min-width: 0; max-width: 60rem; }
.snippet { margin: 0; min-width: 0; }
.snippet figcaption { font-weight: 650; margin-bottom: 0.45rem; }
.snippet pre, pre.hl {
  margin: 0; padding: 1rem 1.15rem; overflow-x: auto; border-radius: 2px;
  background: var(--code-bg); color: var(--code-ink); font-size: 0.86rem; line-height: 1.6; tab-size: 4;
}
.snippet pre code, pre.hl code { font-size: inherit; background: none; padding: 0; border: 0; color: inherit; }
/* Long addresses wrap instead of running off the block (copying still gives the original lines); on phones
   wrapping would break the indentation everywhere, so the block scrolls sideways */
@media (min-width: 44rem) { .snippet pre { white-space: pre-wrap; overflow-wrap: anywhere; } }

/* Syntax colours (Pygments, prefix hl-): light ground, the logo's navy and blue */
.snippet pre, pre.hl { border: 1px solid var(--rule); border-left: 3px solid var(--blue); }
.hl .hl-k, .hl .hl-kd, .hl .hl-kn, .hl .hl-kr, .hl .hl-kt, .hl .hl-kc, .hl .hl-ow { color: #0048b0; font-weight: 700; }
.hl .hl-s, .hl .hl-s1, .hl .hl-s2, .hl .hl-sa, .hl .hl-sb, .hl .hl-sd, .hl .hl-se, .hl .hl-sh { color: #0b6b4f; }
.hl .hl-si { color: #8a4b00; }
.hl .hl-mi, .hl .hl-mf, .hl .hl-m, .hl .hl-il { color: #9a4d00; }
.hl .hl-c, .hl .hl-c1, .hl .hl-cm, .hl .hl-ch, .hl .hl-cs { color: #647089; font-style: italic; }
.hl .hl-nb, .hl .hl-bp { color: #6a2fb0; }
.hl .hl-nf, .hl .hl-fm { color: var(--navy); font-weight: 600; }
.hl .hl-o, .hl .hl-p { color: #3c4a64; }
.hl .hl-nv, .hl .hl-nt, .hl .hl-na { color: #a02a6b; }

/* ── Forms ── */

.propose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.grid-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; max-width: 52rem; margin-top: 1.75rem;
  background: var(--sheet); border: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 40rem) { .grid-form { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; border: 0; padding: 0; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
label, legend { font-weight: 650; }
legend { padding: 0; margin-bottom: 0.5rem; float: left; width: 100%; }
legend + * { clear: both; }
.optional { font-weight: 400; color: var(--muted); font-size: 0.92em; margin-left: 0.3rem; font-style: italic; }
.hint { margin: 0; color: var(--muted); font-size: 0.95rem; }
input[type="text"], input[type="email"], input[type="url"], input:not([type]), textarea, select {
  font: inherit; color: var(--ink); background: var(--field); width: 100%; height: 2.9rem;
  border: 1px solid var(--field-edge); border-radius: 2px; padding: 0.5rem 0.75rem;
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
textarea { resize: vertical; height: auto; min-height: 6.5rem; line-height: 1.45; }
.choices { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.choice { font-weight: 400; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; }
.choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--signal); margin: 0; }
.field--error input, .field--error textarea { border-color: var(--error); }
.field-error { margin: 0; color: var(--error); font-weight: 600; font-size: 0.95rem; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); }
.privacy { flex: 1 1 20rem; margin: 0; color: var(--muted); font-size: 0.93rem; }
.notice { max-width: 52rem; padding: 0.85rem 1rem; font-weight: 600; border-left: 4px solid currentColor; background: var(--sheet); }
.notice--ok { color: var(--ok); }
.notice--error { color: var(--error); }

/* ── Accounts ── */

.auth-box { max-width: 32rem; background: var(--sheet); border: 1px solid var(--rule); padding: clamp(1.5rem, 4vw, 2.25rem); }
.auth-box h1 { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem); }
.stack-form { display: grid; gap: 0.5rem; margin: 1.25rem 0; }
.stack-form .button { justify-self: start; margin-top: 0.6rem; }
.code-input { font-size: 1.8rem !important; letter-spacing: 0.3em; font-family: var(--mono) !important; max-width: 12rem; font-variant-numeric: tabular-nums; }
.panel { background: var(--sheet); border: 1px solid var(--rule); padding: 1.25rem 1.5rem; }
.panel h2 { font-size: 1.45rem; }
.panel--danger { border-color: color-mix(in srgb, var(--error) 45%, var(--rule)); }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.inline-form .field { flex: 1 1 14rem; }
.new-token { background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--ok); padding: 1.1rem 1.4rem; }
.new-token h2 { font-size: 1.4rem; }
.token-value { display: block; font-size: 1.05rem; padding: 0.7rem 0.85rem; background: var(--code-bg); color: var(--navy); border: 1px solid var(--rule); overflow-wrap: anywhere; user-select: all; }
.token-list { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.token { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.token .muted { display: block; font-size: 0.93rem; }
.token form { margin: 0; }
.token--off { opacity: 0.6; }
table.plain { border-collapse: collapse; width: 100%; max-width: 50rem; font-variant-numeric: tabular-nums; }
table.plain th, table.plain td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule); }
table.plain thead th { border-bottom: 2px solid var(--navy); font-weight: 650; }
table.plain .num { text-align: right; }
.table-scroll { overflow-x: auto; }
.recent { list-style: none; padding: 0; font-size: 0.93rem; }
.recent li { padding: 0.3rem 0; overflow-wrap: anywhere; border-bottom: 1px dotted var(--rule); }

/* ── About ── */

.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; }
@media (max-width: 50rem) { .about { grid-template-columns: minmax(0, 1fr); } }
.about section { margin: 0 !important; }
.about h2 { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem); padding-top: 0.75rem; border-top: 2px solid var(--navy); }
.about ul { padding-left: 1.2rem; }
.about li { margin-bottom: 0.5rem; }

/* Error pages */
.oops { max-width: 40rem; }
.oops h1 { font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.2rem); }

/* ── Phones: mark + account on one row, site links in one scrollable row below ── */

@media (max-width: 44rem) {
  .top { display: grid; grid-template-columns: auto 1fr; align-items: center; padding-block: 0.8rem 0.3rem; gap: 0.5rem 1rem; }
  .wordmark-name span { display: none; }
  .account { grid-row: 1; grid-column: 2; justify-self: end; gap: 0.9rem; font-size: 0.97rem; }
  .account .account-primary { padding: 0.45rem 0.7rem; }
  .top nav { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; gap: 1.25rem; margin: 0; padding-bottom: 0.2rem; }
  .top nav a { white-space: nowrap; padding-block: 0.6rem; }
}
@media (max-width: 26rem) { .wordmark-name { font-size: 1.05rem; } }

/* The home page ends on its band: no empty strip before the footer */
.page-home main { padding-bottom: 0; }
.page-home main > .band:last-child { margin-bottom: 0; }
.page-home .bottom { margin-top: 0; border-top: 0; }
.ways h2 { margin-bottom: 0.6rem; }

/* Index columns: a two-column reference, names in code type */
.index-columns { display: grid; grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); gap: 0 1.5rem; margin: 1.25rem 0 2rem; border-top: 1px solid var(--rule); max-width: 60rem; }
.index-columns dt, .index-columns dd { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.index-columns dt { font-family: var(--mono); font-size: 0.9rem; }
@media (max-width: 36rem) { .index-columns { grid-template-columns: minmax(0, 1fr); } .index-columns dt { border-bottom: 0; padding-bottom: 0; } }
.index-columns dd ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }

/* Text after a block of code needs air */
.snippets + p, .snippets + .muted { margin-top: 1.5rem; max-width: var(--measure); }

/* Form details: grouped fields, required/optional markers, hints under inputs */
.grid-form { align-items: start; }
.group { grid-column: 1 / -1; margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--rule); display: grid; gap: 1.1rem; min-width: 0; }
.group legend { float: none; width: auto; padding: 0 0.5rem 0 0; margin: 0 0 0.25rem; font-weight: 650; }
.mark-req, .mark-opt { font-weight: 400; font-style: italic; font-size: 0.9em; margin-left: 0.3rem; color: var(--muted); }
.mark-req { color: var(--ink); }
.field .hint { order: 3; }
.field--error input, .field--error textarea, .field--error input:hover { border-color: var(--error); border-width: 1.5px; }
.group.field--error legend { color: var(--error); }

/* ── Sources filters: a compact bar on a sheet, choices as chips ── */

.source-filters {
  display: grid; grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr) auto; gap: 1rem 1.25rem; align-items: end;
  background: var(--sheet); border: 1px solid var(--rule); padding: 1rem 1.25rem 1.1rem; margin-top: 1.5rem !important;
}
.filter-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.filter-field label { font-size: 0.93rem; }
.source-filters input[type="search"] {
  font: inherit; color: var(--ink); background: var(--field); width: 100%; height: 2.9rem;
  border: 1px solid var(--field-edge); border-radius: 2px; padding: 0.5rem 0.75rem;
}
.source-filters input[type="search"]:focus-visible { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
/* Search, country and the button on one row; the other filters fold away under "More filters" */
.filter-actions { display: flex; align-items: center; gap: 1rem; }
.filter-actions .button { min-height: 2.9rem; }
.filter-more { grid-column: 1 / -1; }
.filter-more summary { cursor: pointer; font-weight: 650; color: var(--link); min-height: 2.75rem; display: inline-flex; align-items: center; }
.filter-more[open] summary { margin-bottom: 0.5rem; }
.filter-more > * + * { margin-top: 0.9rem; }
.filter-sort { max-width: 20rem; }
.filter-group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.filter-group legend { float: left; width: 100%; font-size: 0.93rem; margin-bottom: 0.35rem; font-weight: 650; }
.filter-group label {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.35rem 0.75rem;
  font-weight: 400; font-size: 0.95rem; border: 1px solid var(--field-edge); border-radius: 2px; background: var(--field); cursor: pointer;
}
.filter-group label:hover { border-color: var(--ink); }
.filter-group input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--ink); }
.filter-group label:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-group label:has(input:checked) input { accent-color: var(--yellow); }
.filter-group label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.result-count { color: var(--muted); margin: 1rem 0 0.75rem !important; font-variant-numeric: tabular-nums; }
.no-results { background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--signal); padding: 1.25rem 1.5rem; max-width: 44rem; }
.no-results h2 { font-size: 1.4rem; }

@media (max-width: 44rem) {
  .source-filters { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 0.9rem 1rem; }
}
@media (max-width: 30rem) {
  .filter-actions .button { flex: 1; justify-content: center; }
}

/* Filter bar details and per-source freshness */
.filter-group { align-self: start; }
main > form.source-filters { margin-bottom: 0; }
.source-filters + .result-count { margin-top: 1.25rem !important; }
.source-row .fresh { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; color: var(--muted); }
.source-row .fresh::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rail); }
.source-row .fresh--stale { color: #9a4d00; }
.source-row .fresh--stale::before { background: #d97706; }

/* Use with AI: the connector address to copy, the tools as a reference list */
code.connector-url { display: inline-block; font-size: 1.05rem; padding: 0.65rem 0.9rem; background: var(--sheet); border: 1px solid var(--rule); border-left: 3px solid var(--yellow); color: var(--navy); user-select: all; overflow-wrap: anywhere; }
.tool-list { display: grid; grid-template-columns: minmax(12rem, max-content) minmax(0, 1fr); gap: 0 1.5rem; margin: 1.25rem 0 2rem; border-top: 1px solid var(--rule); max-width: 60rem; }
.tool-list dt, .tool-list dd { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.tool-list dt code { background: none; border: 0; padding: 0; color: var(--navy); font-weight: 600; }
@media (max-width: 36rem) { .tool-list { grid-template-columns: minmax(0, 1fr); } .tool-list dt { border-bottom: 0; padding-bottom: 0; } }
/* OAuth consent: allow and deny side by side */
.consent-form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; }

/* Readable line length everywhere, and air after code blocks */
main p, main li, main dd { max-width: 74ch; }
main .source-row { max-width: none; }
main .access, main .index-key { max-width: none; }
pre + p, pre + ul, figure + p { margin-top: 1rem; }

/* ── Get the data: for everyone ── */

.data-fork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 46rem) { .data-fork { grid-template-columns: minmax(0, 1fr); } }
.data-fork__way { background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(1.25rem, 3vw, 1.9rem); margin: 0 !important; display: flex; flex-direction: column; }
.data-fork__way:first-child { background: var(--plate); border-color: color-mix(in srgb, var(--blue) 28%, var(--rule)); }
.data-fork__way h2 { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem); }
.data-fork__way p:last-child { margin: auto 0 0; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

.data-sources > h2 { margin-bottom: 1rem; }
.data-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.75rem; max-width: 44rem; margin-bottom: 1.5rem; }
.data-search label { flex: 1 0 100%; font-weight: 650; }
.data-search input[type="search"] { flex: 1 1 16rem; font: inherit; height: 2.9rem; padding: 0.5rem 0.8rem; border: 1px solid var(--field-edge); border-radius: 3px; background: var(--field); color: var(--ink); }
.data-search input[type="search"]:focus-visible { border-color: var(--navy); outline: 2px solid var(--focus); outline-offset: 1px; }
.data-search__clear { align-self: center; }
.data-search__count, .data-empty { color: var(--muted); }
.data-country { margin: 0 0 1.75rem !important; }
.data-country h3 { font-size: 1.2rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.data-source-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: 2rem; }
.data-source { display: grid; gap: 0.1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.data-source__link { font-weight: 650; font-size: 1.08rem; text-decoration: none; min-height: 1.8rem; }
.data-source__link:hover { text-decoration: underline; }
.data-source__kept { color: var(--ink); font-size: 0.95rem; }
.data-source__latest { color: var(--muted); font-size: 0.92rem; }

/* Kind of data: segmented switch */
.service-switch { display: inline-flex; border: 1px solid var(--navy); border-radius: 4px; overflow: hidden; margin: 0 0 1.5rem !important; }
.service-switch__item { padding: 0.65rem 1.1rem; min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 600; text-decoration: none; color: var(--navy); }
.service-switch__item + .service-switch__item { border-left: 1px solid var(--navy); }
.service-switch__item:hover { background: var(--plate); color: var(--navy); }
.service-switch__item--current { background: var(--navy); color: #fff; }

/* Month calendar: big day cells, states that match the legend */
.calendar { max-width: 46rem; margin-top: 0 !important; }
.calendar__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.calendar__title { margin: 0; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); text-align: center; }
.calendar__nav { font-weight: 600; text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 0.85rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); white-space: nowrap; }
.calendar__nav:hover { border-color: var(--blue); }
.calendar__nav--prev { justify-self: start; }
.calendar__nav--next { justify-self: end; }
.calendar__nav--none { border: 0; background: none; }
.calendar__grid { width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; margin: 0 -5px; width: calc(100% + 10px); }
.calendar__grid th { font: 600 0.85rem/1 var(--sans); color: var(--muted); padding: 0.4rem 0; }
.calendar__grid abbr { text-decoration: none; }
.day { height: 4.2rem; padding: 0; vertical-align: top; border-radius: 6px; font: 700 1.15rem/1 var(--slab); font-variant-numeric: tabular-nums; }
.day > a, .day > span:first-child { display: block; height: 100%; padding: 0.55rem 0.6rem; border-radius: 6px; text-decoration: none; color: inherit; }
.day--ready { background: var(--blue); color: #fff; }
.day--ready > a:hover { background: var(--navy); color: #fff; }
.day--ready > a:focus-visible { outline-offset: 2px; }
.day--pending { background: var(--plate); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--blue); }
.day--pending > a:hover { background: color-mix(in srgb, var(--blue) 12%, var(--plate)); }
.day--low { background: repeating-linear-gradient(135deg, var(--blue) 0 7px, color-mix(in srgb, var(--blue) 62%, #fff) 7px 12px); }
.day--low > a { position: relative; }
.day--low .day__note { color: #fff; background: var(--navy); padding: 0.15rem 0.3rem; border-radius: 3px; left: 0.45rem; }
.day--today { background: #fff7d6; color: var(--navy); box-shadow: inset 0 0 0 2px var(--yellow); position: relative; }
.day__note { position: absolute; left: 0.6rem; bottom: 0.45rem; font: 600 0.72rem/1 var(--sans); color: #6b5300; }
.day--none { background: var(--sheet); color: var(--muted); }
.day--future { color: var(--muted); }
.day--outside { background: none; }
@media (max-width: 30rem) {
  .day { height: 3.1rem; font-size: 1rem; }
  .day > a, .day > span:first-child { padding: 0.4rem 0.4rem; }
  .day__note { display: none; }
  .calendar__grid { border-spacing: 3px; margin: 0 -3px; width: calc(100% + 6px); }
  .calendar__nav { font-size: 0.9rem; padding: 0 0.55rem; }
}
.calendar__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0; margin: 1rem 0 0.5rem; font-size: 0.95rem; }
.legend { display: inline-flex; align-items: center; gap: 0.5rem; }
.legend::before { content: ""; width: 1.15rem; height: 1.15rem; border-radius: 4px; flex: none; }
.legend--ready::before { background: var(--blue); }
.legend--low::before { background: repeating-linear-gradient(135deg, var(--blue) 0 7px, color-mix(in srgb, var(--blue) 62%, #fff) 7px 12px); }
.legend--pending::before { background: var(--plate); box-shadow: inset 0 0 0 1.5px var(--blue); }
.legend--today::before { background: #fff7d6; box-shadow: inset 0 0 0 2px var(--yellow); }
.legend--none::before { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.calendar__range { color: var(--muted); }
.data-more { color: var(--muted); }

/* Day page */
.day-summary { margin-top: 0 !important; }
.day-summary__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0; margin: 0; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule); max-width: 56rem; }
.day-summary__facts div { padding: 0.9rem 1rem 0.9rem 0; }
.day-summary__facts div + div { padding-left: 1rem; border-left: 1px solid var(--rule); }
.day-summary__facts dt { color: var(--muted); font-size: 0.93rem; }
.day-summary__facts dd { margin: 0.1rem 0 0; font: 700 1.7rem/1.15 var(--slab); color: var(--navy); font-variant-numeric: tabular-nums; }
.day-summary__gaps { margin-top: 0.75rem; color: #8a4b00; }
@media (max-width: 30rem) { .day-summary__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .day-summary__facts div:nth-child(odd) { padding-left: 0; border-left: 0; } .day-summary__facts div:nth-child(n+3) { border-top: 1px solid var(--rule); } }

.day-download { background: var(--plate); border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--rule)); border-radius: 6px; padding: clamp(1.25rem, 3vw, 1.75rem); max-width: 56rem; }
.day-download h2 { font-size: 1.5rem; }
.day-download__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.75rem 0 1rem; }
.day-download__buttons .button--primary { font-size: 1.1rem; padding-inline: 1.5rem; }
.day-download__note { color: var(--muted); margin: 0; }
.day-download__signin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0.5rem 0 0; font-size: 1.05rem; }

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; max-width: 100%; }
.table-scroll:focus-visible { outline: 2px solid var(--focus); }
.preview-table { border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; min-width: 100%; }
.preview-table th, .preview-table td { padding: 0.5rem 0.8rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.preview-table thead th { position: sticky; top: 0; background: var(--plate); color: var(--navy); font-weight: 650; border-bottom: 2px solid var(--navy); }
.preview-table tbody tr:nth-child(even) td { background: var(--sheet); }

.glossary { display: grid; grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); gap: 0 1.5rem; margin: 0; border-top: 1px solid var(--rule); max-width: 60rem; }
.glossary dt, .glossary dd { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.glossary dt code { background: none; border: 0; padding: 0; color: var(--navy); font-weight: 600; }
@media (max-width: 36rem) { .glossary { grid-template-columns: minmax(0, 1fr); } .glossary dt { border-bottom: 0; padding-bottom: 0; } }

.day-state { max-width: 44rem; padding: 1rem 1.25rem; border-radius: 6px; border: 1px solid var(--rule); background: var(--sheet); font-size: 1.05rem; }
.day-state--today { background: #fff7d6; border-color: var(--yellow); }
.day-state--pending { background: var(--plate); border-color: color-mix(in srgb, var(--blue) 30%, var(--rule)); }
/* Countries as a grid of small blocks: most have one source */
.data-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); column-gap: 2rem; align-items: start; }
.data-sources > h2, .data-sources > form, .data-sources > p { grid-column: 1 / -1; }
.data-country .data-source-list { grid-template-columns: minmax(0, 1fr); }
/* No data: told apart from future days by a hatch, not by fading the number (it keeps its contrast) */
.day--none, .legend--none::before { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--rule) 5px 6px); box-shadow: inset 0 0 0 1px var(--rule); }
.day--none { color: var(--muted); }
/* Days of the first week before the archive started: plain, no frame */
.day--before { color: var(--muted); }

/* My account: sub-navigation shared by Overview, API tokens and Usage */
.account-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; border-bottom: 1px solid var(--rule); margin: 0 0 2rem; }
.account-nav a { padding: 0.6rem 0; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.account-nav a[aria-current="page"] { border-bottom-color: var(--blue); font-weight: 600; }
.account-links { padding-left: 1.2rem; }
/* ── Header: account buttons ── */
.account { gap: 0.6rem; }
.account-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--radius); font-weight: 650; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.account .account-btn--ghost { color: var(--navy); border: 1.5px solid color-mix(in srgb, var(--navy) 30%, transparent); background: #fff; }
.account-btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.account .account-btn--solid { color: #fff; background: var(--blue); border: 1.5px solid var(--blue); }
.account .account-btn--solid:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.account .account-chip { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.25rem 0.9rem 0.25rem 0.3rem; border-radius: var(--radius); border: 1.5px solid color-mix(in srgb, var(--navy) 22%, transparent); background: #fff; color: var(--navy); text-decoration: none; max-width: 16rem; }
.account-chip:hover, .account-chip[aria-current="page"] { border-color: var(--navy); color: var(--navy); text-decoration: none !important; }
.account-initial { flex: none; width: 2.05rem; height: 2.05rem; border-radius: 4px; display: grid; place-items: center; background: var(--navy); color: var(--yellow); font: 700 0.95rem/1 var(--slab); }
.account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.95rem; }
.account-signout { font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--muted); background: none; border: 0; min-height: 2.75rem; padding: 0 0.3rem; cursor: pointer; }
.account-signout:hover { color: var(--navy); text-decoration: underline; }
.account-soon { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 44rem) {
  .account .account-btn--solid { display: none; }
  .account-email { display: none; }
  .account .account-chip { padding: 0.2rem; }
  .account-btn { padding: 0 0.85rem; }
}

/* ── Header: sticky, floats off the edges once the page scrolls ── */
html { scroll-padding-top: 7rem; }
.site-head { position: sticky; top: 0; z-index: 20; }
.top { position: relative; background: var(--paper); border-bottom: 1px solid var(--rule); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The wrapper keeps its flush height in the flow; only the bar changes */
    .site-head { height: var(--head-h, 5.4rem); }
    .top { animation: head-float linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    .top .logo { animation: logo-compact linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
}
@keyframes head-float {
  from { max-width: min(var(--page), 100vw); }
  to {
    max-width: calc(min(var(--page), 100vw) - 1.5rem);
    transform: translateY(0.6rem);
    border-radius: 16px;
    border-bottom-color: transparent;
    background: rgb(255 255 255 / 0.86);
    box-shadow: 0 10px 30px -8px rgb(1 39 99 / 0.22), 0 1px 3px rgb(1 39 99 / 0.1), 0 0 0 1px rgb(1 39 99 / 0.06);
    padding-block: 0.45rem;
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}
@keyframes logo-compact { to { height: 2.35rem; } }
@media (max-width: 44rem) {
  .site-head { --head-h: 7.7rem; }
  html { scroll-padding-top: 8.5rem; }
  @keyframes logo-compact { to { height: 2.1rem; } }
}

/* Several days at once (provider page and /providers/<source>/days) */
.range-form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.25rem; margin: 0.75rem 0 1rem; }
.range-form .filter-group, .range-form .filter-actions { grid-row: auto; grid-column: auto; }
.range-form .filter-group legend { float: none; width: auto; }
.range-form input[type="date"] {
  height: 2.9rem; padding: 0.45rem 0.7rem; font: inherit; color: var(--ink);
  background: var(--field); border: 1px solid var(--field-edge); border-radius: 2px;
}
.range-form input[type="date"]:focus-visible { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
.range-result__zip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0.75rem 0; }
.range-result__zip[hidden] { display: none; }
.range-result__progress { font-variant-numeric: tabular-nums; }
.range-files { list-style: none; padding: 0; margin: 1rem 0 0; columns: 14rem; column-gap: 2rem; }
.range-files li { break-inside: avoid; padding: 0.2rem 0; }
@media (max-width: 46rem) { .range-form > * { flex: 1 1 100%; } }

/* Source pages: facts hold the live data and feed status; the publisher's way out at the end */
.facts .versions { margin: 0.4rem 0 0; border-top: 0; }
.facts .versions li { padding: 0.2rem 0; border-bottom: 0; }
.gaps-details summary { cursor: pointer; color: var(--link); min-height: 2.75rem; display: inline-flex; align-items: center; }
.publisher-note { color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1rem; }
/* Related pages (similar countries, other sources, other days): a quiet block of links at the end of a page */
.related { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.related__title { font-size: 1.2rem; margin: 0 0 0.6rem; }
.related__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.6rem 2rem; }
.related__list a { font-weight: 600; }
.related__why { display: block; color: var(--muted); font-size: 0.92rem; }
.related p { margin: 0 0 0.5rem; }
.related__lead { color: var(--muted); }
.related__more { margin-top: 1rem !important; }
.related + .publisher-note, .related + .data-more { margin-top: 1.5rem; }
.result-count + .source-index, .result-count + .no-results { margin-top: 0; }
.provider-head--short { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
.provider-head--short .provider-map { max-width: 30rem; }
@media (max-width: 56rem) { .provider-head--short { grid-template-columns: minmax(0, 1fr); } }

/* Day page: the answer first, in words, then the figures */
.day-summary__headline { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.4; max-width: 44ch; color: var(--ink); }
.day-summary__of { font: 400 0.95rem/1 var(--sans); color: var(--muted); }
.day-summary__how { margin-top: 0.75rem; color: var(--muted); font-size: 0.95rem; }
.day-summary .table-scroll { max-width: 56rem; }
.day-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: -0.25rem 0 1rem; font-weight: 600; }
.day-nav a { text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
.day-nav a:hover { text-decoration: underline; }
.preview-table th code { display: block; font-weight: 400; font-size: 0.78rem; color: var(--muted); }
/* Wide tables scroll inside their frame; on phones a line says so */
.scroll-hint { display: none; }
@media (max-width: 44rem) { .scroll-hint { display: block; color: var(--muted); font-size: 0.92rem; margin: 0 0 0.4rem; } }

/* Usage chart (My account → Usage) */
.usage-chart { margin: 0.75rem 0 1.5rem; max-width: 48rem; }
.usage-chart svg { display: block; width: 100%; height: auto; }
.uc-grid { stroke: var(--rule); stroke-width: 1; }
.uc-axis { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.uc-download { fill: var(--blue); }
.uc-datalake { fill: var(--navy); }
.uc-mcp { fill: var(--yellow); }
.uc-hit { fill: transparent; }
.uc-hit:hover { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.usage-chart__key { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; padding: 0; margin: 0.5rem 0 0; font-size: 0.93rem; }
.usage-chart__key li { display: flex; align-items: center; gap: 0.4rem; }
.uc-key { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 2px; }
.uc-key.uc-download { background: var(--blue); }
.uc-key.uc-datalake { background: var(--navy); }
.uc-key.uc-mcp { background: var(--yellow); }
.uc-views { fill: var(--blue); }
.uc-key.uc-views { background: var(--blue); }
.uc-signups { fill: var(--navy); }
.uc-key.uc-signups { background: var(--navy); }
.analytics-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1.25rem; }
.analytics-figures div { background: var(--sheet); padding: 0.75rem 1rem; }
.analytics-figures dt { color: var(--muted); font-size: 0.9rem; }
.analytics-figures dd { margin: 0.15rem 0 0; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.analytics-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 2rem; }
.usage-chart__switch { margin: 0.25rem 0 0; color: var(--muted); }

/* Admin status page */
.admin-verdict { font-size: 1.15rem; padding: 0.75rem 1rem; border-left: 4px solid var(--ok); background: var(--sheet); }
.admin-verdict--bad { border-left-color: var(--error); }
.admin-problems { padding-left: 1.2rem; }
.admin-units td, .admin-feeds td { vertical-align: top; }
.admin-bad td:first-child { box-shadow: inset 4px 0 0 var(--error); }
.admin-warn td:first-child { box-shadow: inset 4px 0 0 var(--yellow); }
.admin-log { margin: 0.5rem 0; }
.admin-log summary { cursor: pointer; }
.admin-log__table td { vertical-align: top; font-size: 0.9rem; }
.admin-log__table code { white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; }


/* ── Source page: two halves, download for everyone and code for developers ── */
.source-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; max-width: 52rem; margin-top: 1.5rem; }
@media (max-width: 40rem) { .source-ways { grid-template-columns: minmax(0, 1fr); } }
.source-ways a { display: grid; gap: 0.15rem; padding: 0.85rem 1.1rem; border: 1px solid var(--rule); border-left: 3px solid var(--blue); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; }
.source-ways a:hover { border-color: var(--blue); background: var(--plate); color: var(--ink); }
.source-ways strong { font: 700 1.15rem/1.2 var(--slab); color: var(--navy); }
.source-ways span { color: var(--muted); font-size: 0.97rem; }
.source-half--code { border-top: 2px solid var(--navy); padding-top: clamp(1.5rem, 4vw, 2.5rem); }
#download { scroll-margin-top: 6rem; }
.code-facts { max-width: 60rem; margin-bottom: 1.5rem; }
.code-facts div { grid-template-columns: 7.5rem minmax(0, 1fr); }
.code-facts dt:empty { visibility: hidden; }
.code-facts code.path { margin: 0; font-size: 0.86rem; }
.code-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1rem; background: var(--sheet); border: 1px solid var(--rule); padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; max-width: 60rem; }
.code-form input[type="date"], .code-form select { height: 2.9rem; padding: 0.45rem 0.7rem; font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); border-radius: 2px; }
.code-form .filter-actions .button { min-height: 2.9rem; }
@media (max-width: 30rem) { .code-form > * { flex: 1 1 100%; } }
.source-half--code > .snippet { max-width: 60rem; margin-top: 1.75rem; }

/* Get the data: two doors above the list of sources */
main > .data-fork { margin-top: 0; margin-bottom: 1rem; max-width: 64rem; }
.data-account { color: var(--muted); max-width: 64rem !important; }
.sources-title { margin-top: clamp(2rem, 5vw, 3.5rem); scroll-margin-top: 6rem; }
.sources-title + .index-key { margin-bottom: 0; }
main > .page-head:has(+ .data-fork) { margin-bottom: 1.75rem; }
.day-code { max-width: 56rem; }
.day-code h2 { font-size: 1.5rem; }
.day-code .access { margin-bottom: 0; }
@media (max-width: 36rem) {
  .code-facts div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .code-facts dt:empty { display: none; }
}


/* ── Developers (/connect): the model in one screen, then lists, examples and the layout ── */
.connect-nocode { max-width: 60ch; padding: 0.7rem 0.95rem; background: var(--sheet); border-left: 4px solid var(--yellow); }
.connect-toc { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; margin-top: 1.5rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-weight: 600; }
.connect-toc a { text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
.connect-toc a:hover { text-decoration: underline; }
main > .connect-head + section { margin-top: 1.5rem; }
.connect-head .connect-toc { margin-bottom: 0; }

.connect-basics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2.5rem; border-top: 2px solid var(--navy); padding-top: 1.1rem; }
@media (max-width: 52rem) { .connect-basics { grid-template-columns: minmax(0, 1fr); } }
.connect-basics h3 { font-size: 1.2rem; }
.connect-basics p { margin: 0; }

.connect-access { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.9rem; padding: 0.75rem 0.9rem; background: var(--plate); border: 1px solid var(--rule); }
.connect-access p { margin: 0; flex: 1 1 100%; font-size: 0.97rem; }

/* The address, its variable parts in bold blue, named underneath */
.connect-address { margin: 2rem 0; max-width: 60rem; }
.connect-address figcaption { font-weight: 650; margin-bottom: 0.45rem; }
.connect-url { max-width: none !important; margin: 0; padding: 0.8rem 1rem; background: var(--code-bg); border: 1px solid var(--rule); border-left: 3px solid var(--blue); overflow-wrap: anywhere; line-height: 1.7; }
.connect-url code { font-size: 0.95rem; background: none; border: 0; padding: 0; color: var(--muted); }
.connect-url b { color: var(--blue); font-weight: 700; }
.connect-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0.9rem 0 0; }
.connect-parts dt { font: 700 0.86rem/1.3 var(--mono); color: var(--blue); overflow-wrap: anywhere; }
.connect-parts dd { margin: 0.15rem 0 0; font-size: 0.97rem; color: var(--ink); }

.connect-first, .connect-sub { margin-top: 2rem; }
.connect-pre { max-width: 60rem; }
@media (min-width: 44rem) { pre.connect-pre { white-space: pre-wrap; overflow-wrap: anywhere; } }

.connect-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
@media (max-width: 60rem) { .connect-two { grid-template-columns: minmax(0, 1fr); } }
.connect-list { min-width: 0; border-top: 2px solid var(--navy); padding-top: 1.1rem; }
.connect-list h3 code { font-size: 0.85em; background: none; border: 0; padding: 0; }
.connect-sample { margin-top: 1rem; }
.connect-sample summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center; }
.connect-sample pre { max-height: 28rem; overflow: auto; }
.connect-columns { margin-bottom: 1rem; }
@media (min-width: 36.01rem) { .connect-columns { grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); } .connect-rows { grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); } }
.connect-rule { padding: 0.7rem 0.95rem; background: var(--sheet); border-left: 4px solid var(--blue); }

/* Examples: pick a source and day (a GET form), then a language (radios + CSS, no script) */
.connect-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin: 1.25rem 0; max-width: 60rem; }
.connect-pick .filter-field:first-child { flex: 1 1 18rem; }
.connect-pick .filter-field:nth-child(2) { flex: 0 1 11rem; }
.connect-pick .button { min-height: 2.9rem; }
.connect-pick input[type="date"] { font: inherit; color: var(--ink); background: var(--field); width: 100%; height: 2.9rem; padding: 0 0.6rem; border: 1px solid var(--field-edge); border-radius: 3px; }
.connect-notice { font-weight: 400; color: var(--ink); border-left-color: var(--yellow); }
.connect-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0; background: var(--paper); border-bottom: 1px solid var(--rule); max-width: 60rem;
}
/* Stays in reach while scrolling the examples, under the site header (not on phones: too little height) */
@media (min-width: 44.01rem) { .connect-tabs { position: sticky; top: 5.4rem; z-index: 2; } }
.connect-tabs-label { color: var(--muted); font-size: 0.95rem; margin-right: 0.4rem; }
.connect-tabs label {
  cursor: pointer; min-height: 2.5rem; display: inline-flex; align-items: center; padding: 0.3rem 0.85rem;
  border: 1.5px solid var(--rule); border-radius: var(--radius); font-weight: 600; color: var(--navy); background: var(--paper);
}
.connect-tabs label:hover { border-color: var(--navy); }
.connect-code { display: none; }
.connect-code-label { display: none; }
#lang-duckdb:checked ~ .connect-tabs label[for="lang-duckdb"],
#lang-polars:checked ~ .connect-tabs label[for="lang-polars"],
#lang-pandas:checked ~ .connect-tabs label[for="lang-pandas"],
#lang-r:checked ~ .connect-tabs label[for="lang-r"],
#lang-curl:checked ~ .connect-tabs label[for="lang-curl"] { background: var(--navy); border-color: var(--navy); color: #fff; }
#lang-duckdb:focus-visible ~ .connect-tabs label[for="lang-duckdb"],
#lang-polars:focus-visible ~ .connect-tabs label[for="lang-polars"],
#lang-pandas:focus-visible ~ .connect-tabs label[for="lang-pandas"],
#lang-r:focus-visible ~ .connect-tabs label[for="lang-r"],
#lang-curl:focus-visible ~ .connect-tabs label[for="lang-curl"] { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--yellow); }
#lang-duckdb:checked ~ .connect-recipes .connect-code--duckdb,
#lang-polars:checked ~ .connect-recipes .connect-code--polars,
#lang-pandas:checked ~ .connect-recipes .connect-code--pandas,
#lang-r:checked ~ .connect-recipes .connect-code--r,
#lang-curl:checked ~ .connect-recipes .connect-code--curl { display: block; }
.connect-recipes { display: grid; gap: 2.25rem; margin-top: 1.5rem; }
.connect-recipe { min-width: 0; max-width: 60rem; }
.connect-recipe h3 { font-size: 1.35rem; }
.connect-note { margin-top: 0.75rem; color: var(--muted); font-size: 0.97rem; }

.connect-layout td:first-child { min-width: 16rem; }
.connect-layout td code { background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
.connect-layout td { vertical-align: top; }
.connect-rows dt { font-family: var(--sans); font-size: 1rem; font-weight: 650; }

.connect-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem 2.5rem; margin: 0; }
.connect-ways dt { font: 600 1.2rem/1.25 var(--slab); }
.connect-ways dd { margin: 0.35rem 0 0; }


/* Playground (/connect/play): choose and ask on the left, SQL on the right, the result under both */
.play { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 2rem clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.play > .play-results, .play > .play-local, .play > .play-how { grid-column: 1 / -1; }
.play h2 { font-size: 1.35rem; margin-bottom: 0.75rem; }
@media (max-width: 56rem) { .play { grid-template-columns: minmax(0, 1fr); } }
.play-setup { display: grid; gap: 1.75rem; }
.play-pick { display: grid; gap: 1rem; background: var(--sheet); border: 1px solid var(--rule); padding: 1.1rem 1.15rem 1.2rem; }
.play-pick input[type="date"] {
  font: inherit; color: var(--ink); background: var(--field); width: 100%; height: 2.9rem;
  border: 1px solid var(--field-edge); border-radius: 2px; padding: 0.5rem 0.75rem;
}
.play-pick input[type="date"]:focus-visible { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
.play-pick input:disabled { background: var(--sheet); color: var(--muted); }
.play-presets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.play-preset {
  display: grid; gap: 0.1rem; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--blue); border-radius: var(--radius);
  padding: 0.6rem 0.85rem; min-height: 2.9rem;
}
.play-preset:hover { border-color: var(--navy); border-left-color: var(--navy); background: var(--plate); }
.play-preset__name { font-weight: 650; color: var(--navy); }
.play-preset__what { font-size: 0.92rem; color: var(--muted); line-height: 1.35; }
.play-preset:disabled { cursor: default; background: transparent; border-left-color: var(--rule); border-style: dashed; }
.play-preset:disabled .play-preset__name { color: var(--muted); }
.play-editor { min-width: 0; }
.play-editor__title label { font: inherit; }
.play-sql {
  font: 0.9rem/1.55 var(--mono); min-height: 20rem; tab-size: 4; white-space: pre; overflow: auto;
  background: var(--code-bg); border-left: 3px solid var(--blue);
}
.play-editor .hint { margin-top: 0.4rem; }
kbd { font: 0.85em var(--mono); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 3px; padding: 0 0.3em; background: var(--paper); }
.play-run { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1rem 0 0; }
.play-run .button { min-width: 7rem; justify-content: center; }
.play-run .button:disabled { opacity: 0.6; cursor: progress; }
.play-status { color: var(--muted); font-variant-numeric: tabular-nums; }
.play-tables-title { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }
.play-tables { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; font-size: 0.97rem; }
.play-tables dt, .play-tables dd { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
.play-tables dt { padding-right: 1.25rem; white-space: nowrap; }
.play-tables__note { grid-column: 1 / -1; padding-top: 0.6rem; }
.play-tables__note .hint { margin: 0 0 0.3rem; }
@media (max-width: 36rem) { .play-tables { grid-template-columns: minmax(0, 1fr); } .play-tables dt { border-bottom: 0; padding-bottom: 0; } }
.play-columns, .play-copy {
  font: 600 0.85rem/1 var(--sans); color: var(--link); background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.35rem 0.55rem; margin-left: 0.4rem; cursor: pointer; vertical-align: 0.1em;
}
.play-columns:hover, .play-copy:hover { border-color: var(--navy); color: var(--navy); }
.play-results__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-bottom: 0.75rem; }
.play-results__head h2 { margin: 0; }
.play-count { margin: 0; color: var(--muted); }
.play-results__head .button { margin-left: auto; }
.play-results__head .button[hidden] { display: none; }
.play-error { border: 1px solid color-mix(in srgb, var(--error) 35%, var(--rule)); border-left: 3px solid var(--error); background: color-mix(in srgb, var(--error) 5%, var(--paper)); padding: 0.85rem 1rem; max-width: 56rem; }
.play-error p { margin: 0; }
.play-error pre { margin: 0.6rem 0 0; font: 0.85rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.play-map { background: var(--sea); border: 1px solid var(--rule); max-height: 70vh; margin-bottom: 1rem; }
.play-map[hidden], .play-table-wrap[hidden] { display: none; }
.play-map .stops { stroke-width: 2.4px; }
.play-map-note { margin: -0.5rem 0 1rem; }
.play-table-wrap { max-height: 34rem; overflow: auto; border: 1px solid var(--rule); }
.play-table td.num, .play-table th.num { text-align: right; }
.play-snippets { max-width: none; }
.play-snippets figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.play-how ul { padding-left: 1.2rem; }
.play-pick input[aria-invalid="true"] { border-color: var(--error); }
.play-pick input[aria-invalid="true"] + .hint { color: var(--error); }
/* On a phone the admin tables become one card per row, each value after its column name */
@media (max-width: 40rem) {
  .admin-units, .admin-feeds, .admin-units tbody, .admin-feeds tbody, .admin-units tr, .admin-feeds tr { display: block; }
  .admin-units thead, .admin-feeds thead { display: none; }
  .admin-units tr, .admin-feeds tr { padding: 0.5rem 0 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); }
  table.plain.admin-units td, table.plain.admin-feeds td { display: block; position: relative; padding: 0.1rem 0 0.1rem 7.5rem; min-height: 1.6rem; border: 0; text-align: left; overflow-wrap: anywhere; }
  .admin-units td::before, .admin-feeds td::before { content: attr(data-label); position: absolute; left: 0; top: 0.2rem; color: var(--muted); font-size: 0.85rem; }
  .admin-units td:empty, .admin-feeds td:empty { display: none; }
  .admin-units tr.admin-bad, .admin-feeds tr.admin-bad { box-shadow: inset 4px 0 0 var(--error); }
  .admin-feeds tr.admin-warn { box-shadow: inset 4px 0 0 var(--yellow); }
  .admin-bad td:first-child, .admin-warn td:first-child { box-shadow: none; }
  .usage-chart svg { overflow: visible; }
  .uc-axis { font-size: 22px; }
}

/* Home: the live map. A side column (search, legend, a station's board, a train's stops) next to the map; on
   phones the search, then the map, then the column under it */
.page-home { overflow-x: clip; }
.live {
  --d0: #2b9a66; --d1: #c9b52a; --d2: #ef8a1f; --d3: #d23a2b; --d4: #7d1535; --dn: #9aa6ba;
  --side: clamp(21rem, 27vw, 26rem);
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top stage" "body stage";
  width: calc(100vw - 2 * var(--gutter)); margin-inline: calc(50% - 50vw + var(--gutter));
  height: calc(100dvh - 8rem); min-height: 34rem; scroll-margin-top: 6.5rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px -24px rgb(1 39 99 / 0.35), 0 2px 6px rgb(1 39 99 / 0.06);
}
main > section.live { margin-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.live-top { grid-area: top; position: relative; z-index: 3; padding: 1.15rem 1.25rem 0.9rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.live-body { grid-area: body; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0.9rem 1.25rem 1.25rem; border-right: 1px solid var(--rule); scrollbar-width: thin; }
.live-stage { grid-area: stage; position: relative; min-width: 0; background: var(--sea); }
/* Over maplibre-gl.css (loaded later), which makes the map position: relative */
.live-stage .live-map { position: absolute; inset: 0; }
.live-map .maplibregl-ctrl-attrib { font-size: 0.72rem; }
.live-map .maplibregl-cooperative-gesture-screen { font: 600 1rem var(--sans); }

.live-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.live-head h2 { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }
.live-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.55rem 0.15rem 0.5rem; border-radius: 999px;
  font: 700 0.72rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok); background: #e3f4ea; }
.live-pulse { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--d0); }
@media (prefers-reduced-motion: no-preference) {
  .live-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--d0); animation: live-pulse 2s ease-out infinite; }
}
@keyframes live-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.8); opacity: 0; } }
.live-count { margin: 0.2rem 0 0.75rem; font-size: 0.92rem; color: var(--muted); }
.live-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Search */
.live-search { display: flex; gap: 0.4rem; }
.live-field { position: relative; flex: 1; min-width: 0; }
.live-field svg { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.live-search input { width: 100%; min-height: 44px; padding: 0 0.7rem 0 2.2rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 10px; transition: border-color 0.15s, background 0.15s; }
.live-search input:hover { border-color: var(--field-edge); }
.live-search input:focus { background: #fff; border-color: var(--navy); }
.live-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.live-near { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.8rem; font: 600 0.92rem var(--sans);
  color: #fff; background: var(--navy); border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.live-near:hover { background: var(--blue); }
.live-near:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.live-results { position: absolute; left: 1.25rem; right: 1.25rem; top: calc(100% - 0.6rem); list-style: none; margin: 0; padding: 0.3rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 14px 36px -10px rgb(1 39 99 / 0.3); max-height: min(24rem, 60vh); overflow: auto; }
.live-option { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: 0.4rem; padding: 0.45rem 0.55rem; border-radius: 6px; cursor: pointer; line-height: 1.3; }
.live-option::before { grid-row: span 2; align-self: center; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px;
  font: 700 0.7rem var(--sans); color: var(--navy); background: var(--plate); }
.live-option--station::before { content: "St"; }
.live-option--train::before { content: "▸"; font-size: 0.9rem; color: #fff; background: var(--rail); }
.live-option strong { font-weight: 600; color: var(--ink); }
.live-option span { font-size: 0.82rem; color: var(--muted); }
.live-option:hover, .live-option[aria-selected="true"] { background: var(--sea); }
.live-option--none { display: block; cursor: default; font-size: 0.88rem; color: var(--muted); }
.live-option--none::before { content: none; }
.live-option--none:hover { background: none; }
.live-status { margin: 0.55rem 0 0; font-size: 0.86rem; color: var(--muted); }
.live-status:empty { display: none; }

/* Overview: legend, countries */
.live-key { padding: 0.15rem 0.85rem 0.75rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.live-key-title { margin: 0.6rem 0 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.live-scale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: 0.86rem; }
.live-scale li { display: flex; align-items: center; gap: 0.35rem; }
.live .dot--0 { --c: var(--d0); } .live .dot--1 { --c: var(--d1); } .live .dot--2 { --c: var(--d2); }
.live .dot--3 { --c: var(--d3); } .live .dot--4 { --c: var(--d4); } .live .dot--n { --c: var(--dn); }
.live .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.2px rgb(20 33 59 / 0.15); }
.live-ramp { height: 0.55rem; border-radius: 3px; background: linear-gradient(90deg, #d9efe3, #f5ecbd 30%, #f9d2a6 60%, #f2b0a6 100%); border: 1px solid var(--rule); }
.live-ramp-labels { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; }
.live-section { margin: 1.1rem 0 0.4rem; font: 700 0.75rem var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.live-countries { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.live-countries li { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 3.6rem; align-items: center; gap: 0.6rem; padding: 0.22rem 0; }
.live-countries li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-countries .bar { height: 0.4rem; border-radius: 3px; background: var(--plate); overflow: hidden; }
.live-countries .bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--c); }
.live-countries .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.live-countries .partial-mark { margin-left: 0.25rem; padding: 0 0.2rem; font-size: 0.7rem; }
.live-note { margin: 1rem 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

/* On the map */
.live-zoom { position: absolute; right: 0.9rem; top: 0.9rem; display: grid; gap: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule); box-shadow: 0 4px 14px rgb(1 39 99 / 0.12); }
.live-zoom button svg { display: block; margin: auto; }
.live-zoom button { width: 2.6rem; height: 2.6rem; font: 600 1.15rem/1 var(--sans); color: var(--ink); background: var(--paper); border: 0; cursor: pointer; }
.live-zoom button + button { border-top: 1px solid var(--rule); }
.live-zoom button:hover { background: var(--sea); }
.live-zoom button:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.live-tip { position: absolute; z-index: 2; pointer-events: none; background: var(--ink); color: #fff; font-size: 0.85rem; line-height: 1.35; padding: 0.4rem 0.6rem; border-radius: 6px; width: max-content; max-width: min(19rem, 80vw); transform: translate(-50%, calc(-100% - 12px)); }
.live-tip span { color: #c9d4e6; }
.live-noscript { position: absolute; inset: auto 0 2rem; text-align: center; }

/* A station's board, a train's stops, stations near you */
.live-detail h3 { margin: 0.5rem 0 0.15rem; font-size: 1.35rem; }
.live-back { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem 0.3rem 0.5rem; font: 600 0.85rem var(--sans); color: var(--navy);
  background: var(--plate); border: 0; border-radius: 999px; cursor: pointer; }
.live-back:hover { background: var(--rule); }
.live-sub { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--muted); }
.live-now { display: inline-block; margin: 0 0 0.8rem; padding: 0.2rem 0.6rem; font-weight: 600; font-size: 0.9rem; border-radius: 6px; background: var(--sheet); border: 1px solid var(--rule); }
.live-link { display: grid; width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; line-height: 1.25; }
.live-link strong { font-weight: 600; color: var(--navy); }
.live-link span { font-size: 0.8rem; color: var(--muted); }
.live-link:hover strong, .live-link:hover { text-decoration: underline; }
.live-list { list-style: none; margin: 0; padding: 0; }
.live-list li { padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.live-board { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.live-board th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); padding: 0.5rem 0.3rem 0.35rem 0; background: var(--paper); box-shadow: inset 0 -1px 0 var(--rule); }
.live-board th:last-child { text-align: right; padding-right: 0; }
.live-board td { padding: 0.45rem 0.3rem 0.45rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
.live-board tr:first-child td { border-top: 0; }
.live-board tbody tr:hover { background: var(--sheet); }
.live-board .t, .live-calls .t { display: grid; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25; }
.live-board .s { text-align: right; white-space: nowrap; padding-right: 0; }
.planned.was { text-decoration: line-through; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.expected { font-weight: 600; color: var(--d3); }
.badge { display: inline-block; min-width: 2.2rem; padding: 0.1rem 0.4rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; text-align: center; color: #fff; background: var(--dn); }
.badge--0 { background: #e3f4ea; color: var(--ok); } .badge--1 { background: var(--d1); color: var(--ink); } .badge--2 { background: var(--d2); }
.badge--3 { background: var(--d3); } .badge--4 { background: var(--d4); } .badge--x { background: var(--ink); }
.is-cancelled .planned, .is-cancelled .live-link strong, .is-cancelled .live-link { text-decoration: line-through; }
.live-calls { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--rule); font-size: 0.9rem; }
.live-calls li { position: relative; display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 0.5rem; align-items: start; padding: 0.35rem 0; }
.live-calls li::before { content: ""; position: absolute; left: calc(-0.9rem - 6px); top: 0.65rem; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--field-edge); }
.live-calls li.is-done { color: var(--muted); }
.live-calls li.is-done::before { background: var(--field-edge); }
.live-calls li.is-next::before { background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 3px rgb(1 39 99 / 0.15); }
.live-calls li.is-next .live-link { font-weight: 700; }
.live-calls li.is-done .live-link { color: var(--muted); }
.live-calls .d { font-size: 0.8rem; font-weight: 600; color: var(--d3); font-variant-numeric: tabular-nums; }

/* Phones and narrow windows: search, map, then the column, one under the other; the page scrolls */
@media (max-width: 48rem) {
  .live { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 56svh auto; grid-template-areas: "top" "stage" "body";
    height: auto; min-height: 0; border-radius: 12px; }
  .live-top, .live-body { border-right: 0; padding-inline: 1rem; }
  .live-results { left: 1rem; right: 1rem; }
  .live-body { overflow: visible; border-top: 1px solid var(--rule); }
  .live-zoom { right: 0.6rem; top: 0.6rem; }
}
@media (max-width: 26rem) { .live-near { padding-inline: 0.65rem; } .live-near svg { display: none; } }

/* Cookie bar: Google Analytics only after "Accept" (static/consent.js); refusing is as easy as accepting */
.consent { position: fixed; z-index: 50; left: 1rem; right: 1rem; bottom: 1rem; max-width: 34rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(1, 39, 99, .12); font-size: .95rem; }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 16rem; }
.consent-actions { display: flex; gap: .5rem; }
.consent-actions button { min-height: 44px; padding: 0 1.1rem; cursor: pointer; font: inherit; font-weight: 600; color: var(--navy); background: #fff; border: 1.5px solid color-mix(in srgb, var(--navy) 30%, transparent); border-radius: var(--radius); }
.consent-actions button:hover { border-color: var(--navy); }