/* Flagsight: a timing monitor for the pit wall at night.
   Colour is reserved for meaning. Track status tints the interface through --flag; purple is a
   session best, green a personal best, orange a car within a second, blue a driver you follow. */

:root {
  color-scheme: dark;
  --bg: #0b0c0e;
  --surface: #121418;
  --surface-2: #181b20;
  --surface-3: #20242a;
  --line: #23272d;
  --line-2: #30353c;
  --text: #f2f3f5;
  --text-2: #a3a9b2;
  --text-3: #6c737c;
  --purple: #b98bff;
  --green: #3ad47f;
  --yellow: #ffd21f;
  --red: #ff4d4d;
  --hot: #ff8a3d;
  --follow: #5cabff;
  --plate: #f2f3f5;
  --plate-text: #0b0c0e;
  --flag: var(--text-3);
  --flag-ink: var(--bg);
  --shadow: 0 24px 60px -12px rgb(0 0 0 / .6), 0 0 0 1px var(--line-2);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: "DIN Condensed", "Bahnschrift SemiBold Condensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --radius: 10px;
  --gutter: 16px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f2f2ee;
    --surface: #ffffff;
    --surface-2: #f6f6f3;
    --surface-3: #ebebe6;
    --line: #e3e3dd;
    --line-2: #d3d3cc;
    --text: #0e1013;
    --text-2: #4d535b;
    --text-3: #858b93;
    --purple: #7a35e8;
    --green: #0b9a52;
    --yellow: #e9b200;
    --red: #dc2f2f;
    --hot: #e0620e;
    --follow: #1f7ae0;
    --plate: #0e1013;
    --plate-text: #ffffff;
    --shadow: 0 24px 60px -16px rgb(20 20 10 / .28), 0 0 0 1px var(--line-2);
  }
}

body[data-flag="green"] { --flag: var(--green); }
body[data-flag="yellow"], body[data-flag="sc"] { --flag: var(--yellow); --flag-ink: #16130a; }
body[data-flag="red"] { --flag: var(--red); --flag-ink: #fff; }
body[data-flag="finish"] { --flag: var(--text); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); padding-top: 3px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .4; }
a { color: inherit; text-decoration: none; }
svg { flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--follow) 40%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--text-3); }
.subtle { color: var(--text-3); font-size: 12px; }
.purple { color: var(--purple); }
.hot { color: var(--hot); }
.quiet { color: var(--text-3); padding: 16px; font-size: 12.5px; }
table, td, .display, .num { font-variant-numeric: tabular-nums; }

/* Condensed numerals, trimmed to their cap height so they align with neighbouring text. */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-box: trim-both cap alphabetic;
}

.label {
  display: block;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Icons use one stroke language throughout. */
button svg, .search svg, .brand svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Every pressable element confirms the press. */
button { transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease; }
button:not(:disabled):active { transform: scale(.97); }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--text); color: var(--bg); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Flag strip: the marshal's light panel ---------- */

.flag-strip {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 40;
  background: var(--flag);
  transition: background-color 400ms ease;
}
body[data-flag="finish"] .flag-strip { background: repeating-conic-gradient(var(--text) 0 25%, var(--bg) 0 50%) 0 0 / 6px 6px; }
body[data-flag="none"] .flag-strip { background: var(--line); }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky; top: 3px; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  height: 52px; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
/* The blur lives on a pseudo-element: backdrop-filter on the bar would trap the fixed mobile tabs. */
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 17px; letter-spacing: -.03em; }
.brand svg { width: 22px; height: 22px; fill: var(--flag); stroke: none; transition: fill 400ms ease; }
body[data-flag="none"] .brand svg { fill: var(--text); }
.event { color: var(--text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 16px; border-left: 1px solid var(--line-2); min-width: 0; }
.event:empty { display: none; }
.tabs { display: flex; gap: 2px; margin: 0 auto; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.tab {
  position: relative; display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px; border-radius: 7px;
  color: var(--text-2); font-weight: 550; font-size: 12.5px;
}
.tab svg { width: 15px; height: 15px; }
.tab[aria-current="page"] { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset; }
.tab[aria-current="page"] svg { color: var(--flag); }
body[data-flag="none"] .tab[aria-current="page"] svg, body[data-flag="finish"] .tab[aria-current="page"] svg { color: var(--text); }
.tab-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--hot); color: #1a0d04; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.controls { display: flex; align-items: center; gap: 6px; }
.icon-button {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  color: var(--text-2); border: 1px solid var(--line);
}
.icon-button .icon-play, #pause[aria-pressed="true"] .icon-pause { display: none; }
#pause[aria-pressed="true"] .icon-play { display: block; }
#pause[aria-pressed="true"] { background: var(--yellow); color: #16130a; border-color: transparent; }
.source-button {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px;
  border-radius: 8px; border: 1px solid var(--line); color: var(--text); font-weight: 550; font-size: 12.5px;
}
.source-button svg { width: 14px; height: 14px; color: var(--text-3); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
body[data-status="live"] .status-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
body[data-status="reconnecting"] .status-dot, body[data-status="paused"] .status-dot { background: var(--yellow); }
body[data-status="offline"] .status-dot { background: var(--red); }
body[data-status="captured"] .status-dot, body[data-status="recorded"] .status-dot { background: var(--follow); }

@media (hover: hover) and (pointer: fine) {
  .tab:hover:not([aria-current]) { color: var(--text); background: var(--surface-2); }
  .icon-button:hover, .source-button:hover, .ghost-button:hover:not(:disabled), .chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
  #pause[aria-pressed="true"]:hover { background: var(--yellow); color: #16130a; }
  .text-button:hover { color: var(--text); }
}

/* ---------- Scoreboard ---------- */

.scoreboard {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) auto repeat(3, minmax(150px, 1fr));
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.scoreboard > * { padding: 12px var(--gutter); min-width: 0; }
.scoreboard > * + * { border-left: 1px solid var(--line); }
.sb-session { display: flex; align-items: center; gap: 12px; }
.session-kind {
  flex: none; padding: 5px 8px 4px; border-radius: 5px;
  background: var(--text); color: var(--bg);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
}
.sb-titles { display: grid; min-width: 0; }
.sb-titles strong { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-titles span { color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scoreboard > .flag-chip {
  position: relative; isolation: isolate;
  justify-self: center; margin: 0 var(--gutter); padding: 9px 14px 8px;
  border-radius: 7px; border: 1px solid var(--line-2);
  color: var(--text-2); background: var(--surface-2);
  font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease;
}
body:not([data-flag="none"]) .flag-chip { background: var(--flag); color: var(--flag-ink); border-color: transparent; }
/* Chequered border: the pattern fills the chip and an inset panel keeps the label legible. */
body[data-flag="finish"] .flag-chip { background: repeating-conic-gradient(var(--text) 0 25%, var(--bg) 0 50%) 0 0 / 10px 10px; color: var(--text); }
body[data-flag="finish"] .flag-chip::before { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 4px; background: var(--bg); }
.scoreboard .flag-chip + * { border-left: 0; }
.sb-progress, .sb-stat { display: grid; gap: 7px; align-content: center; }
.sb-progress .display, .sb-stat .display { font-size: 27px; }
.display small { font-size: .62em; color: var(--text-3); margin: 0 .35em 0 .12em; letter-spacing: .04em; text-transform: uppercase; }
.caption { color: var(--text-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-progress { grid-template-columns: auto 1fr; column-gap: 12px; }
.sb-progress .label, .sb-progress .caption { grid-column: 1 / -1; }
.sb-progress .display { grid-row: 2; }
.progress { grid-row: 2; align-self: center; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--flag); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out), background-color 400ms ease; }
body[data-flag="none"] .progress span { background: var(--text-2); }

/* ---------- Race-control ticker ---------- */

.ticker { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--bg); }
.ticker-message { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border-radius: 6px; }
.rc-badge { flex: none; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ticker time { color: var(--text-3); font-size: 11.5px; }
.ticker-text { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-text.muted { font-weight: 400; letter-spacing: 0; }
.ticker-message.urgent .rc-badge { background: var(--red); color: #fff; border-color: transparent; }
.ticker-message.fresh { animation: ticker-flash 2.4s var(--ease-out); }
@keyframes ticker-flash { from { background: color-mix(in srgb, var(--yellow) 26%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--yellow) 26%, transparent); } }
.car-ref { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.car-ref:hover { text-decoration-color: currentColor; }
.catch-up-button { flex: none; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 12px; font-weight: 600; }
.catch-up-button svg { width: 14px; height: 14px; }
.catch-up-button { anchor-name: --catch-up; }

.catch-up-summary {
  inset: auto; top: 150px; right: var(--gutter); margin: 0;
  position-anchor: --catch-up; top: calc(anchor(bottom) + 8px); right: anchor(right);
  width: min(420px, calc(100vw - 2 * var(--gutter))); max-height: min(70dvh, 560px); overflow: auto;
  padding: 16px; border: 0; border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  transform-origin: top right;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), display 180ms allow-discrete, overlay 180ms allow-discrete;
}
.catch-up-summary:popover-open { opacity: 1; transform: none; }
@starting-style { .catch-up-summary:popover-open { opacity: 0; transform: scale(.97) translateY(-4px); } }
.catch-up-summary:not(:popover-open) { opacity: 0; transform: scale(.98); transition-duration: 120ms; }
.catch-up-summary header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.catch-up-summary ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.catch-up-summary li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.catch-up-summary > p { margin-bottom: 12px; }

/* ---------- Notices ---------- */

.notice {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px var(--gutter); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
  background: color-mix(in srgb, var(--follow) 9%, var(--bg));
}
.notice.warn { background: color-mix(in srgb, var(--yellow) 12%, var(--bg)); }
.notice.error { background: color-mix(in srgb, var(--red) 13%, var(--bg)); }
.notice p { flex: 1 1 320px; }
.notice strong { color: var(--text); font-weight: 650; margin-right: 4px; }
.notice p + p { flex-basis: 100%; }
.notice-action { height: 26px; padding: 0 10px; border-radius: 6px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 12px; }

/* ---------- Main and shared panels ---------- */

main { padding: 12px var(--gutter); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.panel-foot { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 11.5px; }
.pill { padding: 3px 8px; border-radius: 20px; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.pill-live { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.text-button { color: var(--text-2); font-size: 12px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.ghost-button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); color: var(--text-2); font-size: 12px; font-weight: 600; }
.ghost-button svg { width: 14px; height: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip svg { width: 14px; height: 14px; }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--follow) 16%, transparent); border-color: color-mix(in srgb, var(--follow) 45%, transparent); color: var(--follow); }
.chip[aria-pressed="true"] svg { fill: currentColor; }
.chip-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); font-size: 11px; text-align: center; }
select {
  height: 30px; max-width: 100%; padding: 0 28px 0 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 12.5px; font-weight: 550;
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 13px, calc(100% - 10px) 13px;
  background-size: 4px 4px; background-repeat: no-repeat;
}
.field { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tag { display: inline-block; padding: 2px 5px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.tag-pit { background: var(--yellow); color: #16130a; }
.tag-urgent { background: var(--red); color: #fff; margin-right: 6px; }
.tag-best { background: color-mix(in srgb, var(--purple) 18%, transparent); color: var(--purple); }
/* Penalties stay neutral: colour already means flags, bests, closeness and following. Solid is applied
   by timing, dashed only announced, dotted uncertain or not counted. The flag is the black and white
   warning flag. Tags are positioned so their hidden labels scroll with the tower, not the page. */
.pen-tag { position: relative; display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pen-tag > [aria-hidden] { display: inline-flex; align-items: center; gap: 3px; }
.pen-applied { background: var(--text); border-color: var(--text); color: var(--bg); }
.pen-announced { border-style: dashed; border-color: var(--text-2); color: var(--text); }
.pen-unsure { border-style: dotted; border-color: var(--text-2); color: var(--text); }
.pen-flag { display: inline-block; width: 9px; height: 9px; border-radius: 1px; box-shadow: 0 0 0 1px var(--text-3); background: linear-gradient(135deg, var(--text) 50%, var(--bg) 50%); }
.table-scroll { overflow: auto; }

/* Car numbers read like the number boards on a touring car's window. */
.plate {
  display: inline-grid; place-items: center; flex: none;
  min-width: 28px; height: 20px; padding: 0 4px; border-radius: 4px;
  background: var(--plate); color: var(--plate-text);
  font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .02em;
  padding-top: 2px;
}
.plate-sm { min-width: 22px; height: 16px; font-size: 12px; border-radius: 3px; }
.plate-xl { min-width: 76px; height: 64px; padding: 6px 10px 0; font-size: 50px; border-radius: 10px; }

.empty-state, .insight-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 20px; text-align: center; color: var(--text-2); }
.empty-state h3 { color: var(--text); font-size: 15px; font-weight: 650; }
.empty-state p, .insight-empty p { max-width: 42ch; font-size: 12.5px; }
.insight-empty { justify-items: start; text-align: left; padding: 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.insight-empty strong { color: var(--text); font-size: 13.5px; }
.start-lights { display: flex; gap: 10px; margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.start-lights i { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--red) 22%, var(--surface-3)); }
.start-lights.lit i { background: var(--flag); box-shadow: 0 0 10px color-mix(in srgb, var(--flag) 50%, transparent); }
.map-empty { display: grid; place-items: center; height: 100%; min-height: 160px; color: var(--text-3); font-size: 12px; }

.skeleton-table { display: grid; gap: 8px; padding: 16px; }
.skeleton-table i { height: 26px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Off air: nothing is live, so the session views give way to one calm screen ---------- */

.off-air { display: none; flex: 1; justify-items: center; align-content: center; gap: 12px; padding: 48px 0; text-align: center; }
body[data-status="idle"]:not([data-screen="history"]) .off-air { display: grid; }
body[data-status="idle"] :is(.scoreboard, .ticker, main > .view:not(#history-view)) { display: none; }
/* The screen fills the viewport, keeping the status bar at the bottom. */
body[data-status="idle"], body[data-status="idle"] main { display: flex; flex-direction: column; }
body[data-status="idle"] main { flex: 1; }
.off-air .start-lights { margin-bottom: 10px; }
.off-air h1 { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; text-box: trim-both cap alphabetic; margin: 4px 0; }
.off-air > p { max-width: 46ch; color: var(--text-2); font-size: 13.5px; }
.off-air-latest { display: grid; gap: 8px; width: min(520px, 100%); margin-top: 20px; text-align: left; }
.off-air-latest:empty { display: none; }
.off-air-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* ---------- Intro: on a device's first visit, lights out while the viewer loads behind ---------- */

.intro { display: none; }
/* Five lights cut in the shape of the mark come on one by one. At lights out they close into the mark, which
   lights green as the name slides out; then the curtain lifts on the viewer and the name settles into the
   top bar. Sizes key off the mark, the top bar's 22px mark scaled to --m and drawn in 64 units of --u.
   Times key off lights out: the lights come on at sixths of the way from --first to --out, and intro-hold
   ends when the handover begins. */
:root[data-intro] .intro {
  --m: clamp(52px, 33px + 5.4vw, 112px);
  --u: calc(var(--m) / 64);
  --first: 420ms;
  --out: 1500ms;
  --lift: 650ms;
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  animation: intro-hold calc(var(--out) + 1450ms);
}
.intro > * { grid-area: 1 / 1; }
.intro i { --n: 0; }
.intro i:nth-child(2) { --n: 1; }
.intro i:nth-child(3) { --n: 2; }
.intro i:nth-child(4) { --n: 3; }
.intro i:nth-child(5) { --n: 4; }

/* The panel: a timing grid, brightest at the centre, that rushes past at lights out, under a red glow
   that deepens with each light. */
.intro-panel { position: absolute; inset: 0; background: var(--bg); }
.intro-panel::before, .intro-panel::after { content: ""; position: absolute; inset: 0; }
.intro-panel::before {
  background: linear-gradient(var(--line) 1px, transparent 0), linear-gradient(90deg, var(--line) 1px, transparent 0);
  background-size: 44px 44px; background-position: center;
  mask-image: radial-gradient(closest-side, #000 15%, transparent);
  animation: intro-fade 800ms ease both, intro-surge 1200ms var(--ease-out) var(--out) both;
}
.intro-panel::after {
  opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--red) 22%, transparent), transparent);
  animation: intro-ambient calc(var(--out) - var(--first)) step-end var(--first);
}

/* The lights sit over the mark's outline, scaled up until they close into it. */
.intro-lights {
  position: relative; width: calc(var(--u) * 32); height: calc(var(--u) * 28); translate: var(--u) calc(var(--u) * -1);
  animation: intro-shrink 380ms var(--ease-in-out) calc(var(--out) + 60ms) both;
}
.intro-lights i {
  --on: calc(var(--first) + var(--n) * (var(--out) - var(--first)) / 6);
  position: absolute; inset: 0;
  translate: calc((var(--n) - 2) * var(--u) * 30) 0;
  animation: intro-glow calc(var(--out) - var(--on)) var(--on),
    intro-close 380ms var(--ease-in-out) calc(var(--out) + 60ms) forwards,
    intro-leave 100ms linear calc(var(--out) + 380ms) forwards;
}
.intro-lights i::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(37.5% 0, 100% 0, 62.5% 100%, 0 100%);
  background: color-mix(in srgb, var(--red) 22%, var(--surface-3));
  animation: intro-rise 380ms var(--ease-out) calc(var(--n) * 40ms) both,
    intro-lit calc(var(--out) - var(--on)) var(--on), intro-flash 240ms ease-out var(--on);
}
/* Behind them, the green burst of the start. */
.intro-lights::before {
  content: ""; position: absolute; inset: calc(var(--m) * -1.6) calc(var(--m) * -3); opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--green) 26%, transparent), transparent);
  animation: intro-burst 1100ms var(--ease-out) calc(var(--out) + 380ms);
}

/* The lockup is the top bar's brand at --m, set tighter as it is larger, and first held with the mark at the
   centre. The mark's box has 15 units of margin each side of the mark. */
.intro-brand {
  display: flex; align-items: center;
  font-size: calc(var(--m) * 17 / 22); font-weight: 750; letter-spacing: -.03em;
  animation: intro-open 750ms var(--ease-out) calc(var(--out) + 480ms) both;
}
.intro-brand svg {
  width: var(--m); height: var(--m); margin: 0 calc(var(--u) * -5) 0 calc(var(--u) * -15); fill: var(--green); overflow: visible;
  animation: intro-ignite 700ms var(--ease-out) calc(var(--out) + 380ms) both;
}
.intro-plug, .intro-wave { transform-box: fill-box; transform-origin: center; }
.intro-plug { transform: scale(0); animation: intro-iris 340ms var(--ease-out) calc(var(--out) + 440ms) both; }
.intro-wave {
  fill: none; stroke: var(--green); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0;
  animation: intro-wave 900ms var(--ease-out) calc(var(--out) + 380ms);
}
.intro-wave:last-child { animation-delay: calc(var(--out) + 520ms); animation-duration: 1100ms; }
/* The name slides out from beside the mark. */
.intro-brand span { clip-path: inset(-20% -10% -20% 0); animation: intro-word 750ms var(--ease-out) calc(var(--out) + 480ms) both; }

/* Below, the name of the series tracks in over a lap: green, green, purple. */
.intro-tag {
  position: absolute; inset: calc(50% + var(--m) * .9) 0 auto;
  display: grid; justify-items: center; gap: 14px;
}
.intro-tag > span:first-child {
  color: var(--text-2); font-size: clamp(11px, var(--m) * .115, 13px); font-weight: 600; letter-spacing: .36em; padding-left: .36em; text-transform: uppercase;
  animation: intro-track 900ms var(--ease-out) calc(var(--out) + 700ms) both;
}
.intro-sectors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: calc(var(--m) * 2.2);
  animation: intro-fade 400ms ease calc(var(--out) + 760ms) both;
}
.intro-sectors i { height: 2px; border-radius: 1px; background: var(--line-2); }
.intro-sectors i::before {
  content: ""; display: block; height: 100%; border-radius: inherit; background: var(--green); transform-origin: left;
  animation: intro-wipe 260ms var(--ease-out) calc(var(--out) + 860ms + var(--n) * 130ms) both;
}
.intro-sectors i:last-child::before { background: var(--purple); box-shadow: 0 0 10px var(--purple); }

/* The flag strip counts the lights in red and turns green at lights out. */
.intro-strip { position: absolute; inset: 0 0 auto; height: 3px; background: var(--line); }
.intro-strip::before, .intro-strip::after { content: ""; position: absolute; inset: 0; transform-origin: left; }
.intro-strip::before { background: var(--red); transform: scaleX(0); animation: intro-count calc(var(--out) - var(--first)) step-end var(--first); }
.intro-strip::after {
  background: var(--green); box-shadow: 0 0 12px color-mix(in srgb, var(--green) 60%, transparent);
  animation: intro-wipe 700ms var(--ease-out) var(--out) both;
}

/* The handover: the panel lifts into the flag strip while intro.js settles the mark and name onto the top
   bar. The top bar's own brand stays hidden until they land on it, so the two never show at once. */
:root[data-intro] .topbar .brand { visibility: hidden; }
:root[data-intro="out"] .intro-panel { animation: intro-lift var(--lift) var(--ease-in-out) forwards; }
:root[data-intro="out"] .intro-tag { animation: intro-leave 200ms ease forwards; }
:root[data-intro="out"] .intro-strip { animation: intro-out 150ms ease var(--lift) forwards; }

@keyframes intro-hold { to { opacity: 1; } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-surge { to { background-position: calc(50% - 352px) 50%; } }
@keyframes intro-ambient { 0% { opacity: .2; } 16.667% { opacity: .4; } 33.333% { opacity: .6; } 50% { opacity: .8; } 66.667%, 100% { opacity: 1; } }
@keyframes intro-count { 0% { transform: scaleX(.2); } 16.667% { transform: scaleX(.4); } 33.333% { transform: scaleX(.6); } 50% { transform: scaleX(.8); } 66.667%, 100% { transform: none; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(calc(var(--u) * 10)); filter: blur(4px); } }
@keyframes intro-lit { from, to { background: var(--red); } }
@keyframes intro-flash { from { filter: brightness(1.9); } }
@keyframes intro-glow {
  from, to {
    filter: drop-shadow(0 0 calc(var(--u) * 4) color-mix(in srgb, var(--red) 90%, transparent))
      drop-shadow(0 0 calc(var(--u) * 20) color-mix(in srgb, var(--red) 45%, transparent));
  }
}
@keyframes intro-close { to { translate: 0; } }
@keyframes intro-shrink { from { scale: 1.3; } }
@keyframes intro-leave { to { opacity: 0; } }
@keyframes intro-burst { 15% { opacity: 1; } from { scale: .5; } to { scale: 1.3; } }
@keyframes intro-ignite {
  from {
    opacity: 0; scale: 1.15;
    filter: drop-shadow(0 0 calc(var(--u) * 6) var(--green)) drop-shadow(0 0 calc(var(--u) * 24) color-mix(in srgb, var(--green) 70%, transparent));
  }
  12% { opacity: 1; }
}
@keyframes intro-iris { from { transform: scale(1); } }
@keyframes intro-wave { from { opacity: .9; } to { transform: scale(3.4); } }
@keyframes intro-open { from { translate: calc(50% + var(--u) * 15 - var(--m) / 2) 0; } }
@keyframes intro-word { from { transform: translateX(-100%); clip-path: inset(-20% 0 -20% 100%); filter: blur(calc(var(--u) * 3)); } }
@keyframes intro-track { from { opacity: 0; letter-spacing: 1em; padding-left: 1em; filter: blur(4px); } }
@keyframes intro-wipe { from { transform: scaleX(0); } }
@keyframes intro-lift { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* ---------- Timing layout ---------- */

.timing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.tower-panel { display: flex; flex-direction: column; overflow: hidden; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar-spacer { flex: 1; }
.count { color: var(--text-3); font-size: 12px; }
.search { position: relative; display: flex; align-items: center; flex: 0 1 280px; min-width: 160px; }
.search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.search input { width: 100%; height: 30px; padding: 0 30px 0 32px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); outline: none; }
.search input:focus-visible { border-color: var(--text-3); outline: 2px solid color-mix(in srgb, var(--text) 30%, transparent); outline-offset: 0; }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { position: absolute; right: 8px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--text-3); font: 600 10.5px var(--font); }
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { display: none; }
.tower-scroll { overflow: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 11.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-hint { margin-left: auto; }
.swatch { width: 8px; height: 8px; border-radius: 2px; }
.purple-bg { background: var(--purple); }
.green-bg { background: var(--green); }
.close-bg { background: var(--hot); }
.follow-bg { background: var(--follow); }

/* ---------- Tables ---------- */

table { width: 100%; border-collapse: separate; border-spacing: 0; }
th {
  position: sticky; top: 0; z-index: 3;
  height: 32px; padding: 0 8px; text-align: left; white-space: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--line);
  color: var(--text-3); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
}
td { height: 34px; padding: 0 8px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 12.5px; }
tbody tr:last-child td { border-bottom: 0; }
.c-num { text-align: right; }
th.c-num { text-align: right; }
td.best, .best { color: var(--purple); font-weight: 650; }
td.pb, .pb { color: var(--green); font-weight: 600; }

.tower th:first-child, .tower td:first-child { padding-left: 14px; }
.tower td { background: var(--surface); transition: background-color 200ms ease; }
.tower tbody tr { cursor: pointer; }
.c-pos { width: 44px; text-align: right; }
.c-pos .display { font-size: 17px; }
.tower tr.leader .c-pos .display { color: var(--flag); }
body[data-flag="none"] .tower tr.leader .c-pos .display { color: var(--text); }
.c-delta { width: 38px; font-size: 11px; font-weight: 700; color: var(--text-3); text-align: center; }
.c-delta.up { color: var(--green); }
.c-delta.down { color: var(--red); }
.c-driver { width: 100%; max-width: 0; }
.driver-button { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; text-align: left; height: 30px; border-radius: 5px; }
.driver-button:active { transform: none; }
.driver-name { font-weight: 650; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; }
.driver-car { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.class-tag { flex: none; margin-left: auto; display: inline-flex; gap: 3px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 10.5px; font-weight: 700; }
.class-tag b { color: var(--text-3); font-weight: 600; }
/* The penalty column takes its width from the driver column. Where that leaves too little room, the
   class tag and team give way to the name, as on phones, and long names are shortened rather than
   spilling over the gap. */
.tower .c-pen { padding: 0 4px; }
.tower:has(> thead .c-pen) .driver-button { container-type: inline-size; }
.tower:has(> thead .c-pen) .driver-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 210px) { .tower :is(.class-tag, .driver-car) { display: none; } }
.c-tyre { width: 42px; text-align: center; }
.tyre { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; border: 2.5px solid var(--text-3); font-size: 9.5px; font-weight: 800; color: var(--text); }
.tyre-soft { border-color: #f2f2f2; }
.tyre-medium { border-color: #f4cf1d; }
.tyre-hard { border-color: #ff4d4d; }
.tyre-wet { border-color: #3d8bff; }
.tyre-intermediate { border-color: #3ad47f; }
@media (prefers-color-scheme: light) { .tyre-soft { border-color: #b8b8b4; } .tyre-medium { border-color: #e2b400; } }
.gap { color: var(--text-2); }
.close { display: inline-block; padding: 1px 6px; margin-right: -6px; border-radius: 5px; background: color-mix(in srgb, var(--hot) 16%, transparent); color: var(--hot); font-weight: 650; }
td.c-sector { color: var(--text-2); font-size: 12px; }
.c-sector { text-align: right; }
.c-laps { color: var(--text-2); }
.c-follow { width: 40px; padding: 0 8px 0 0; text-align: center; }
.favourite { display: grid; place-items: center; width: 28px; height: 28px; margin: auto; border-radius: 6px; color: var(--text-3); }
.favourite svg { width: 15px; height: 15px; }
.favourite[aria-pressed="true"] { color: var(--follow); }
.favourite[aria-pressed="true"] svg { fill: currentColor; }

/* Row states. Backgrounds sit on cells so sticky columns stay opaque. */
.tower tr.followed td:first-child { box-shadow: inset 3px 0 0 var(--follow); }
.tower tr.followed .driver-name { color: var(--follow); }
.tower tr.linked td { background: color-mix(in srgb, var(--hot) 10%, var(--surface)); }
.tower tr.selected td { background: var(--surface-3); }
.tower tr.gained .c-pos { animation: gained 2.4s var(--ease-out) both; }
.tower tr.lost .c-pos { animation: lost 2.4s var(--ease-out) both; }
@keyframes gained { from { background: color-mix(in srgb, var(--green) 38%, var(--surface)); } }
@keyframes lost { from { background: color-mix(in srgb, var(--red) 30%, var(--surface)); } }
.tower tr.rising, .tower tr.falling { position: relative; z-index: 1; }
.tower tr.rising { z-index: 2; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .45); }
.lap-last.fresh { animation: fresh-lap 1.8s var(--ease-out) both; }
@keyframes fresh-lap { from { background: color-mix(in srgb, currentColor 22%, var(--surface)); } }
@media (hover: hover) and (pointer: fine) {
  .tower tbody tr.hovered td { background: var(--surface-3); }
  .favourite:hover { color: var(--text); background: var(--surface-3); }
  .favourite[aria-pressed="true"]:hover { color: var(--follow); }
}

/* ---------- Rail ---------- */

.rail { display: grid; gap: 12px; align-content: start; min-width: 0; }
.map-link { display: block; width: 100%; border-radius: 0; }
.map-link:active { transform: none; }
.small-map { height: 230px; }
.map-meta { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 11.5px; }
.map-meta span:first-child { color: var(--text-2); font-weight: 600; }
.rail-battle { display: grid; gap: 4px; width: 100%; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.rail-battle:last-child { border-bottom: 0; }
.rail-battle:active { transform: none; }
.rail-duel { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 12px; letter-spacing: .02em; min-width: 0; white-space: nowrap; overflow: hidden; }
.chase-arrow { color: var(--hot); margin: 0 2px; }
.rail-numbers { display: flex; justify-content: space-between; color: var(--text-2); font-size: 11.5px; }
.rail-numbers strong { color: var(--text); font-weight: 650; }
@media (hover: hover) and (pointer: fine) { .rail-battle:hover { background: var(--surface-2); } }
.messages { max-height: 340px; overflow: auto; }
.message { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.message:last-child { border-bottom: 0; }
.message time { color: var(--text-3); font-size: 11px; padding-top: 1px; }
.message p { font-weight: 550; letter-spacing: .015em; overflow-wrap: anywhere; }
.message:first-child p { color: var(--text); }
.message:not(:first-child) p { color: var(--text-2); }
.message.urgent { background: color-mix(in srgb, var(--red) 8%, transparent); }
.penalty-card > summary { cursor: pointer; list-style: none; flex-wrap: wrap; justify-content: flex-start; row-gap: 2px; }
.penalty-card > summary::-webkit-details-marker { display: none; }
.penalty-card > summary:focus-visible { outline-offset: -2px; }
.penalty-card:not([open]) > summary { border-bottom: 0; }
.penalty-card > summary svg { flex: none; width: 14px; height: 14px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text-3); transition: transform 160ms var(--ease-out); }
.penalty-card[open] > summary svg { transform: rotate(90deg); }
.penalty-overview { flex: 1 1 150px; min-width: 0; color: var(--text-2); font-size: 11.5px; }
/* Positioned, so the hidden labels inside scroll with it rather than widening the page. */
.penalty-watch { position: relative; max-height: 320px; overflow: auto; }
.penalty-watch > * + * { border-top: 1px solid var(--line); }
.penalty-entry { display: grid; gap: 3px; width: 100%; padding: 9px 14px; text-align: left; color: var(--text-2); font-size: 11.5px; }
button.penalty-entry:active { transform: none; }
/* Drawn inside, as the scrolling list would clip a ring drawn outside a full-width entry. */
.penalty-entry:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { button.penalty-entry:hover { background: var(--surface-2); } }
.penalty-head { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.penalty-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.penalty-pos { margin-left: auto; flex: none; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.penalty-line { overflow-wrap: anywhere; }
.penalty-line strong { color: var(--text); font-weight: 650; }
.penalty-line.uncounted, .penalty-line.uncounted strong, .penalty-record.uncounted { color: var(--text-3); }
.penalty-callout { display: block; padding: 5px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text); font-weight: 600; }
.penalty-warned { display: grid; gap: 7px; padding: 10px 14px; }
.penalty-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.penalty-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px 0 3px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .penalty-chip:hover { background: var(--surface-2); color: var(--text); } }
.penalty-provisional { padding: 10px 14px; color: var(--text-2); font-size: 12px; }
.penalty-provisional summary { cursor: pointer; color: var(--text); font-weight: 600; }
.penalty-provisional ol { display: grid; gap: 5px; margin: 10px 0 8px; padding: 0; list-style: none; }
.penalty-provisional li { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-weight: 600; }
.penalty-provisional p { margin-top: 8px; }
.penalty-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 10px 14px; color: var(--text-2); font-size: 11.5px; }
.penalty-key .label { flex-basis: 100%; }
.penalty-limits { padding: 10px 14px; color: var(--text-3); font-size: 11.5px; }
.penalty-key + .penalty-limits { border-top: 0; padding-top: 0; }

/* ---------- Maps ---------- */

.map svg { display: block; width: 100%; height: 100%; }
.track-edge { fill: none; stroke: var(--surface-3); stroke-width: 78; stroke-linejoin: round; stroke-linecap: round; }
.track-surface { fill: none; stroke: var(--line-2); stroke-width: 34; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-color-scheme: light) { .track-edge { stroke: #e2e2dc; } .track-surface { stroke: #c9c9c2; } }
.finish-line { stroke: var(--text); stroke-width: 22; }
.finish-line.chequer { stroke: var(--bg); stroke-dasharray: 11 11; }
.sector-tick { stroke: var(--text-3); stroke-width: 8; stroke-linecap: round; }
.sector-label { fill: var(--text-3); font: 700 54px var(--font-display); letter-spacing: .04em; text-anchor: middle; dominant-baseline: central; }
.car { cursor: default; transition: transform 1s linear; }
.car[data-driver] { cursor: pointer; }
.car circle { fill: var(--surface-3); stroke: var(--surface); stroke-width: 10; transition: fill 200ms ease; }
.car text { fill: var(--text); font: 700 56px var(--font-display); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.small-map .car text { font-size: 84px; }
.car.leader circle { fill: var(--flag); }
.car.leader text { fill: var(--flag-ink); }
body[data-flag="none"] .car.leader circle, body[data-flag="finish"] .car.leader circle { fill: var(--text); }
body[data-flag="none"] .car.leader text, body[data-flag="finish"] .car.leader text { fill: var(--bg); }
.car.followed circle { fill: var(--follow); }
.car.followed text { fill: #fff; }
.car.selected circle { fill: var(--text); stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 26; }
.car.selected text { fill: var(--bg); }
.car.pit { opacity: .45; }
.car.safety circle { fill: var(--yellow); }
.car.safety text { fill: #16130a; }
.car:focus-visible { outline: none; }
.car:focus-visible circle { stroke: var(--text); stroke-width: 14; }
@media (hover: hover) and (pointer: fine) { .car.hovered circle { stroke: var(--text); stroke-width: 18; } }

/* ---------- Track view ---------- */

.track-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.map-stage { display: flex; flex-direction: column; }
.large-map { flex: 1; min-height: 420px; padding: 8px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 11.5px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-leader { background: var(--flag); }
body[data-flag="none"] .dot-leader, body[data-flag="finish"] .dot-leader { background: var(--text); }
.dot-follow { background: var(--follow); }
.dot-selected { background: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 30%, transparent); }
.dot-pit { background: var(--surface-3); border: 1px solid var(--text-3); }
.order-panel { display: flex; flex-direction: column; }
.vehicle-list { overflow: auto; }
.vehicle-item { display: grid; grid-template-columns: 26px auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.vehicle-item:last-child { border-bottom: 0; }
.vehicle-item:active { transform: none; }
.vehicle-pos { font-size: 15px; text-align: right; color: var(--text-2); }
.vehicle-name { display: grid; font-weight: 650; font-size: 12px; letter-spacing: .02em; min-width: 0; }
.vehicle-name small { color: var(--text-3); font-weight: 400; font-size: 11px; letter-spacing: 0; }
.vehicle-speed { color: var(--text-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.vehicle-item.state-2 .vehicle-name small { color: var(--yellow); }
.vehicle-item.followed .vehicle-name { color: var(--follow); }
.vehicle-item.selected { background: var(--surface-3); }
@media (hover: hover) and (pointer: fine) { .vehicle-item.hovered { background: var(--surface-3); } }

/* ---------- Insights ---------- */

.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 8px 0 16px; }
.view-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; text-box: trim-both cap alphabetic; margin-bottom: 10px; }
.view-head p { color: var(--text-2); max-width: 62ch; }
.view-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.coverage { display: grid; grid-template-columns: auto minmax(120px, 360px); justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; margin-bottom: 20px; }
.coverage > div:first-child { display: grid; gap: 2px; }
.coverage strong { font-size: 13px; font-weight: 650; }
.coverage span { color: var(--text-3); font-size: 12px; }
.meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); }
.insight-section { margin-bottom: 20px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-head h2 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.section-head span { color: var(--text-3); font-size: 12px; }
.battle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.battle-card { display: grid; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.battle-card.closing { border-color: color-mix(in srgb, var(--hot) 35%, var(--line)); }
.battle-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.confidence { flex: none; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--text-3); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.confidence.strong { color: var(--text); border-color: var(--text-3); }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.duel .driver-link:last-child { justify-self: end; }
.driver-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; min-width: 0; white-space: nowrap; }
button.driver-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { button.driver-link:hover { text-decoration-color: var(--line-2); } }
.duel-gap { display: grid; justify-items: center; gap: 6px; }
.duel-gap .display { font-size: 30px; }
.duel-gap small { color: var(--text-3); font-size: 10.5px; }
.gauge { width: 100%; height: 30px; overflow: visible; }
.gauge-track { stroke: var(--surface-3); stroke-width: 4; stroke-linecap: round; }
.gauge-zone { fill: color-mix(in srgb, var(--hot) 14%, transparent); }
.gauge-fill { stroke: var(--hot); stroke-width: 4; stroke-linecap: round; }
.gauge-ahead { fill: var(--text); }
.gauge-chaser { fill: var(--hot); stroke: var(--surface); stroke-width: 3; }
.gauge-label { fill: var(--text-3); font: 600 9.5px var(--font); }
.battle-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.battle-stats dt { color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.battle-stats dd { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.battle-stats small { font-size: 11px; color: var(--text-3); margin-left: 3px; font-weight: 500; }
.battle-forecast { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.battle-forecast strong { font-size: 13px; }
.battle-forecast p { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.battle-footer { display: flex; justify-content: space-between; align-items: center; color: var(--text-3); font-size: 11.5px; }
.evidence-button { color: var(--text-2); font-size: 11.5px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .evidence-button:hover { color: var(--text); text-decoration-color: currentColor; } }

.insights-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 16px; }
.pace td { height: 44px; }
.pace th:first-child, .pace td:first-child { padding-left: 14px; }
.pace .display { font-size: 17px; }
.pace-of { color: var(--text-3); font-size: 10.5px; margin-left: 2px; }
.pace .driver-button { height: 36px; flex-wrap: wrap; row-gap: 0; align-content: center; }
.pace .driver-car { flex-basis: 100%; padding-left: 37px; font-size: 11px; }
.pace tr.benchmark td { background: color-mix(in srgb, var(--purple) 6%, transparent); }
.c-bar { min-width: 150px; }
.c-bar svg { width: 110px; height: 8px; vertical-align: middle; }
.c-bar rect { fill: var(--text-3); }
.c-bar .delta { display: inline-block; width: 52px; margin-right: 10px; text-align: right; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.pace .confidence { margin-left: 4px; }

.story-panel .panel-head { flex-wrap: wrap; }
.story-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-chip { height: 24px; padding: 0 8px; border-radius: 6px; color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.filter-chip span { color: var(--text-3); font-weight: 500; margin-left: 2px; }
.filter-chip[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
@media (hover: hover) and (pointer: fine) { .filter-chip:hover { color: var(--text); } }
.story { max-height: 620px; overflow: auto; }
.story-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.story-item:last-child { border-bottom: 0; }
.story-item > time { color: var(--text-3); font-size: 11px; }
.story-body { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; min-width: 0; }
.story-body p { min-width: 0; overflow-wrap: anywhere; }
.story-meta { display: flex; align-items: center; gap: 10px; }
.story-meta .confidence { display: none; }
.kind-control .story-meta .confidence, .kind-best .story-meta .confidence, .kind-closing .story-meta .confidence { display: inline-block; }
.kind-penalty .story-meta .confidence { display: inline-block; }
.story-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--surface-3); color: var(--text-2); font-size: 10px; font-weight: 800; }
.story-icon.up { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.story-icon.down { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.story-icon.best { color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, transparent); }
.story-icon.hot { color: var(--hot); background: color-mix(in srgb, var(--hot) 14%, transparent); font-size: 14px; }
.story-icon.rc { color: var(--text); background: var(--surface-3); font-size: 8.5px; letter-spacing: .04em; }
.story-icon.penalty { color: var(--bg); background: var(--text); font-size: 7.5px; letter-spacing: .02em; }
.rc-text { font-weight: 600; letter-spacing: .02em; }
.method { margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-2); font-size: 12.5px; }
.method summary { cursor: pointer; font-weight: 600; color: var(--text); }
.method p { margin-top: 8px; max-width: 90ch; }

/* ---------- Standings ---------- */

.points td { height: 40px; }
.points th:first-child, .points td:first-child { padding-left: 14px; }
.c-rank .display { font-size: 17px; }
.points tr.p1 .c-rank .display { color: #e6b422; }
.points tr.p2 .c-rank .display { color: #b8bec6; }
.points tr.p3 .c-rank .display { color: #c98a55; }
.c-name { font-weight: 650; }
.c-center { text-align: center; }
.c-total { width: 220px; }
.points-bar { display: inline-flex; align-items: center; gap: 10px; }
.points-bar svg { width: 120px; height: 6px; }
.points-bar rect { fill: var(--text-3); }
.points tr.p1 .points-bar rect { fill: var(--text); }
.points-bar strong { min-width: 34px; font-weight: 700; }

/* As it stands: a provisional projection beside the collected table, and its Insights card. */
.standings-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); }
.standings-switch button { height: 26px; padding: 0 10px; border-radius: 6px; color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.standings-switch button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
@media (hover: hover) and (pointer: fine) { .standings-switch button:hover:not([aria-pressed="true"]) { background: var(--surface-2); color: var(--text); } }
#standings-view[data-shown="projection"] :is(#points-status, #points-content, .points-table-field),
#standings-view:not([data-shown="projection"]) :is(#projection-status, #projection) { display: none; }
.projection { display: grid; gap: 12px; align-content: start; }
.projection-basis { display: grid; gap: 6px; padding: 12px 14px; font-size: 12.5px; }
.projection-basis p { max-width: 110ch; }
.tag-provisional { border: 1px solid var(--line-2); background: transparent; color: var(--text); margin-right: 2px; }
.projection-notes { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 12px; }
.title-maths { display: grid; gap: 10px; padding-bottom: 14px; }
.title-maths > :not(.panel-head) { margin: 0 14px; }
.title-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.title-stats > div { display: grid; gap: 7px; align-content: start; min-width: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.title-stats dt { color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.title-stats dd { display: grid; gap: 7px; }
.title-stats .display { font-size: 26px; }
.title-stats small { color: var(--text-3); font-size: 11.5px; }
.title-line { font-size: 13px; max-width: 90ch; }
.move { display: inline-block; min-width: 24px; color: var(--text-3); font-size: 11px; font-weight: 700; white-space: nowrap; }
.move.up { color: var(--green); }
.move.down { color: var(--red); }
.projection-race small { margin-left: 6px; color: var(--text-3); font-size: 11.5px; }
.projection-list { list-style: none; margin: 0; padding: 0; }
.projection-list li { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.projection-list li:last-child { border-bottom: 0; }
.championship-card { margin-bottom: 20px; }
.championship-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.standings-mini { list-style: none; margin: 0; padding: 4px 0; }
.standings-mini li { display: grid; grid-template-columns: 28px 30px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12.5px; }
.mini-pos { font-size: 17px; text-align: right; }
.mini-name { min-width: 0; overflow: hidden; font-weight: 650; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.mini-points { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.mini-points small { color: var(--text-3); font-size: 11px; }
.mini-line { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.mini-line:first-child { border-top: 0; }
/* Phones keep the projected total in view; the bar only repeats it. */
@media (max-width: 760px) { .projection-table .points-bar svg { display: none; } }

/* ---------- Status bar ---------- */

.statusbar { display: flex; align-items: center; gap: 16px; height: 30px; padding: 0 var(--gutter); border-top: 1px solid var(--line); color: var(--text-3); font-size: 11.5px; background: var(--bg); }
.statusbar a { margin-left: auto; }
.statusbar a:hover { color: var(--text); }
#last-update.stale { color: var(--yellow); }
.recording::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--text-3); vertical-align: 1px; }
.recording[data-state="recording"]::before { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.recording[data-state="error"] { color: var(--red); }

/* ---------- Dialogs ---------- */

dialog { color: var(--text); background: var(--surface); border: 0; padding: 0; box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(4 5 6 / .55); backdrop-filter: blur(2px); transition: opacity 220ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
dialog:not([open])::backdrop { opacity: 0; }

.sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(620px, 100vw); height: 100dvh; max-height: none; max-width: none;
  overflow: auto; overscroll-behavior: contain; border-left: 1px solid var(--line-2); border-radius: 14px 0 0 14px;
  transition: transform 300ms var(--ease-drawer), display 300ms allow-discrete, overlay 300ms allow-discrete;
}
.sheet[open] { transform: none; }
@starting-style { .sheet[open] { transform: translateX(100%); } }
.sheet:not([open]) { transform: translateX(100%); transition-duration: 200ms; }
.sheet-close { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 3; background: var(--surface); }
#driver-content { padding: 22px 22px 32px; }
.driver-hero { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; padding-right: 40px; }
.driver-id { display: grid; gap: 4px; min-width: 0; }
.driver-id h2 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.driver-id p { color: var(--text-2); font-size: 12.5px; }
.driver-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.driver-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; }
.driver-stats > div { display: grid; gap: 8px; padding: 12px; min-width: 0; }
.driver-stats > div + div { border-left: 1px solid var(--line); }
.driver-stats .display { font-size: 26px; }
.driver-stats small { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lap-chart { margin-bottom: 18px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.lap-chart figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; color: var(--text-3); font-size: 11px; }
.lap-chart svg { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.chart-label { fill: var(--text-3); font: 600 10px var(--font); font-variant-numeric: tabular-nums; }
.chart-bar { fill: var(--text-3); }
.chart-bar.pb { fill: var(--green); }
.chart-bar.best { fill: var(--purple); }
.chart-bar.pit { fill: var(--surface-3); }
.chart-bar.clipped { fill-opacity: .45; }
.laps-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.laps-head h3 { font-size: 13px; font-weight: 650; }
.laps-head h3 .subtle { font-weight: 400; margin-left: 6px; }
.laps-actions { display: flex; gap: 8px; }
.history-notice { padding: 10px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.driver-penalties { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); }
.driver-penalties h3 { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 650; }
.penalty-summary { padding: 10px 12px 0; color: var(--text); font-size: 12.5px; font-weight: 600; }
.penalty-summary small { display: block; margin-top: 2px; color: var(--text-3); font-size: 11.5px; font-weight: 400; }
.penalty-records { margin: 0; padding: 0; list-style: none; }
.penalty-record { display: grid; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 12px; }
.penalty-record-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); }
.penalty-evidence { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 11.5px; }
.penalty-evidence li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
.penalty-evidence li > :first-child { color: var(--text-3); }
.penalty-evidence .rc-text, .penalty-evidence li > :last-child { overflow-wrap: anywhere; }
.driver-penalties .penalty-limits { padding: 10px 12px; }
.driver-table { border: 1px solid var(--line); border-radius: var(--radius); }
.laps th:first-child, .laps td:first-child { padding-left: 12px; }
.laps td { height: 32px; }
.driver-table th { background: var(--surface); }

.modal {
  width: min(640px, calc(100vw - 32px)); max-height: min(80dvh, 720px); overflow: auto; border-radius: 14px;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), display 200ms allow-discrete, overlay 200ms allow-discrete;
}
.modal[open] { opacity: 1; transform: none; }
@starting-style { .modal[open] { opacity: 0; transform: scale(.97) translateY(6px); } }
.modal:not([open]) { opacity: 0; transform: scale(.98); transition-duration: 140ms; }
.modal-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 18px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; }
#evidence-content { padding: 14px 18px 18px; }
.evidence-intro { color: var(--text-2); font-size: 12.5px; margin-bottom: 12px; }
.evidence-intro.muted { color: var(--text-3); margin: 12px 0 0; font-size: 11.5px; }
.evidence th, .evidence td { padding: 0 10px; }
.evidence-source { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.evidence-source time { color: var(--text-3); font-size: 11.5px; }

.source-options { display: grid; gap: 8px; padding: 16px 18px 6px; }
.source-option { display: flex; gap: 14px; align-items: flex-start; padding: 14px; text-align: left; border-radius: 10px; border: 1px solid var(--line); }
.source-option strong { display: block; font-size: 14px; margin-bottom: 2px; }
.source-option small { color: var(--text-2); font-size: 12px; }
.source-option[aria-current="true"] { border-color: var(--text-3); background: var(--surface-2); }
.source-option[aria-current="true"] strong::after { content: "Watching"; margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: var(--text); color: var(--bg); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.source-icon { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--surface-3); display: grid; place-items: center; }
.live-icon::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); }
.captured-icon { background: repeating-conic-gradient(var(--text-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 8px 8px; }
.archive-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 14px 18px 8px; }
.archive-head h3 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.archive { padding: 0 18px 18px; display: grid; gap: 6px; }
.archive-head p { flex-basis: 100%; margin-top: 4px; color: var(--text-2); font-size: 12px; }
.archive-event { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.archive-event:first-child { margin-top: 0; }
.archive-row { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); text-align: left; }
.archive-row[aria-current="true"] { border-color: var(--text-3); background: var(--surface-2); }
.archive-date { display: grid; justify-items: center; gap: 4px; padding: 6px 0; border-radius: 7px; background: var(--surface-3); }
.archive-date .display { font-size: 20px; }
.archive-date small { color: var(--text-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.archive-main { display: grid; min-width: 0; }
.archive-main strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-main small { color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive .insight-empty, .archive .empty-state { padding: 20px; }
.archive-all { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-2); font-size: 12px; }
/* The demo is a quiet way to try the viewer offline, not something to choose over live timing. */
.source-demo { padding: 0 18px 16px; color: var(--text-3); font-size: 12px; }
#source-dialog .history-pages { padding: 0 18px 12px; }
@media (hover: hover) and (pointer: fine) { .source-option:hover, .archive-row:hover { background: var(--surface-2); border-color: var(--line-2); } }

/* ---------- Desktop monitor: the whole session on one screen ---------- */

@media (min-width: 1180px) and (min-height: 700px) {
  body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  main { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  body[data-screen="timing"] main, body[data-screen="track"] main { overflow: hidden; }
  body[data-status="idle"] main { overflow: auto; }
  .timing-layout, .track-layout { height: 100%; align-items: stretch; }
  .tower-panel { min-height: 0; }
  .tower-scroll { flex: 1; min-height: 0; }
  .rail { grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; }
  /* Closed, penalty watch is just its summary and race control takes the rest, as it does alone. Open,
     they share what the map and battles leave: the watch shrinks from its own size and scrolls under
     its summary, and race control from a fixed basis so a long history cannot crowd out the watch.
     Either way, on shorter screens race control keeps a usable height and the rail scrolls. */
  .rail:has(> .penalty-card:not([hidden])) { display: flex; flex-direction: column; overflow-y: auto; }
  .rail:has(> .penalty-card:not([hidden])) > * { flex: none; }
  .rail:has(> .penalty-card:not([hidden])) > .control-card { flex: 1 1 0; min-height: 160px; }
  .rail:has(> .penalty-card[open]:not([hidden])) > .penalty-card { flex: 0 1 auto; min-height: 120px; overflow-y: auto; }
  .rail:has(> .penalty-card[open]:not([hidden])) > .control-card { flex: 1 1 340px; }
  .penalty-card > summary { position: sticky; top: 0; z-index: 1; background: var(--surface); }
  .penalty-watch { max-height: none; }
  .control-card { display: flex; flex-direction: column; min-height: 0; }
  .messages { flex: 1; max-height: none; }
  .map-stage, .order-panel { min-height: 0; }
  .vehicle-list { flex: 1; min-height: 0; }
  .large-map { min-height: 0; }
}

@media (min-width: 1500px) {
  :root { --gutter: 20px; }
  .timing-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .small-map { height: 260px; }
}

/* ---------- Mid widths: stack the rail under the tower ---------- */

@media (max-width: 1179px) {
  .scoreboard { grid-template-columns: 1fr auto 1fr 1fr; }
  .sb-weather { display: none; }
  .timing-layout, .track-layout, .insights-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  /* Closed, penalty watch is its summary line rather than a card stretched to its row. */
  .penalty-card:not([open]) { align-self: start; }
  .large-map { min-height: 360px; aspect-ratio: 4 / 3; }
  .event { display: none; }
}

/* ---------- Phones ---------- */

@media (max-width: 760px) {
  :root { --gutter: 12px; font-size: 13.5px; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .topbar { gap: 8px; height: 50px; }
  .brand span { display: none; }
  .brand svg { width: 26px; height: 26px; }
  .controls { margin-left: auto; }
  #fullscreen { display: none; }
  .tabs {
    position: fixed; inset: auto 0 0; z-index: 30; margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 0; border: 0; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px);
  }
  .tab { flex-direction: column; gap: 3px; height: 48px; padding: 0; font-size: 10.5px; }
  .tab svg { width: 20px; height: 20px; }
  .tab-badge { position: absolute; top: 3px; left: calc(50% + 6px); }
  .scoreboard { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .scoreboard > * { padding: 10px var(--gutter); }
  .sb-session { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-block: 8px; }
  .session-kind { font-size: 13px; }
  .sb-titles strong { font-size: 12.5px; }
  .scoreboard > .flag-chip { margin: 0 0 0 var(--gutter); padding: 7px 8px 6px; font-size: 13px; max-width: 96px; white-space: normal; text-align: center; line-height: 1.05; }
  .sb-progress { grid-template-columns: auto minmax(24px, 1fr); column-gap: 8px; padding-right: 8px; }
  .sb-progress, .sb-stat { gap: 5px; }
  .sb-progress .display, .sb-stat .display { font-size: 21px; }
  .notice { flex-wrap: nowrap; gap: 10px; padding-block: 7px; font-size: 12px; }
  .notice p { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .notice p + p { display: none; }
  .notice-action { flex: none; }
  .ticker { height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
  .ticker .rc-badge, .ticker time { display: none; }
  .ticker-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .catch-up-button { font-size: 0; gap: 0; width: 32px; padding: 0; justify-content: center; }
  .catch-up-button svg { width: 16px; height: 16px; }
  .catch-up-summary { top: auto; right: var(--gutter); bottom: calc(70px + env(safe-area-inset-bottom)); transform-origin: bottom center; }
  main { padding: 10px var(--gutter); }
  .toolbar { gap: 6px; }
  .search { flex: 1 1 100%; }
  .search kbd, .legend .legend-hint, .count { display: none; }
  .tower td { height: 42px; }
  .tower .c-pos, .tower .c-driver { position: sticky; z-index: 1; }
  .tower .c-pos { left: 0; }
  .tower .c-driver { left: 44px; min-width: 150px; max-width: 150px; box-shadow: 1px 0 0 var(--line); }
  .tower th.c-pos, .tower th.c-driver { z-index: 4; }
  .tower th:first-child, .tower td:first-child { padding-left: 10px; }
  .driver-car, .class-tag { display: none; }
  .tower-scroll { overscroll-behavior-x: contain; }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .view-head h1 { font-size: 32px; }
  .off-air { padding: 36px 0 28px; }
  .off-air h1 { font-size: 40px; }
  .coverage { grid-template-columns: 1fr; }
  .battle-grid { grid-template-columns: minmax(0, 1fr); }
  .story-item { grid-template-columns: 1fr auto; row-gap: 4px; }
  .story-item > time { grid-column: 1 / -1; }
  .pace .driver-car { display: block; }
  .pace .driver-button { min-width: 150px; }
  .pace .driver-name { overflow: hidden; text-overflow: ellipsis; }
  .statusbar { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; row-gap: 4px; }
  .statusbar a { margin-left: 0; }
  .sheet { inset: auto 0 0; width: 100vw; height: auto; max-height: 92dvh; border-radius: 16px 16px 0 0; border-left: 0; border-top: 1px solid var(--line-2); }
  @starting-style { .sheet[open] { transform: translateY(100%); } }
  .sheet:not([open]) { transform: translateY(100%); }
  #driver-content { padding: 18px 16px 28px; }
  .plate-xl { min-width: 60px; height: 52px; font-size: 40px; }
  .driver-id h2 { font-size: 20px; }
  .driver-stats { grid-template-columns: 1fr 1fr; }
  .driver-stats > div:nth-child(3) { border-left: 0; }
  .driver-stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .modal { width: 100vw; max-height: 88dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .archive-row { grid-template-columns: 40px 1fr; }
  .c-total { width: auto; }
  .points-bar svg { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
  .sheet, .modal, .catch-up-summary, dialog::backdrop { transition: none !important; }
  .car { transition: none; }
  .skeleton-table i { animation: none; }
}

.timeline, .history-filters, .history-pages { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* One timeline for live timing behind live and for replays: race time leads, the time of day beside it. */
.timeline { padding: 12px 24px; border-bottom: 1px solid var(--line); }
.timeline[hidden], .timeline [hidden] { display: none; }
.timeline-readout { display: grid; gap: 5px; min-width: 9ch; font-variant-numeric: tabular-nums; }
.timeline-readout strong { font-size: 22px; }
.timeline-readout span { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.timeline-readout span:empty { display: none; }
.timeline-position { flex: 1; min-width: 160px; accent-color: var(--follow); }
/* The broadcast delay, live only, takes a row of its own. */
.timeshift-delay { order: 2; flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.timeshift-value { min-width: 6ch; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.timeshift-presets { display: flex; flex-wrap: wrap; gap: 4px; }
#timeshift-toggle[aria-expanded="true"] { background: var(--surface-3); color: var(--text); border-color: var(--line-2); }
body[data-status="delayed"] .status-dot { background: var(--follow); }
/* At mid widths the tabs give up the room the delay button takes, so the top bar is no wider. */
@media (min-width: 761px) and (max-width: 1179px) { .tab { padding: 0 9px; } }
/* Below 881 px the bar ran out of room even before, and the delay button, as the last control, would be
   pushed out of view: the wordmark gives way, as on phones, and the tabs close up. */
@media (min-width: 761px) and (max-width: 880px) { .brand span { display: none; } .tab { padding: 0 6px; } }
/* Where even that leaves no room for a long status on one line, such as "Delayed 32 s" or "Captured weekend",
   and on the narrowest phones, a brief one such as "−32 s" or "Captured" stands in and the full label is still
   read out. There the picker's arrow gives way too, unless live, and below 881 px the bar's gaps close up. */
#connection { white-space: nowrap; }
.connection-brief { display: none; }
@media (max-width: 359px), (min-width: 761px) and (max-width: 959px) {
  .connection-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .connection-brief { display: inline; }
}
@media (min-width: 761px) and (max-width: 959px) { body:not([data-status="live"]) .source-button svg { display: none; } }
@media (min-width: 761px) and (max-width: 880px) { .topbar { gap: 10px; } }
/* On phones, a notice with more than one action, as behind live, gives them a row of their own under its text. */
@media (max-width: 760px) {
  .notice:has(.notice-action + .notice-action) { flex-wrap: wrap; row-gap: 6px; }
  .notice:has(.notice-action + .notice-action) p { flex-basis: 100%; }
}
.history-filters, .history-pages { margin: 16px 0; }
.history-filters input { max-width: 100%; padding: 8px; background: var(--bg); color: inherit; border: 1px solid var(--line); border-radius: 4px; }
.history-filters .field { max-width: 100%; }
@media (max-width: 600px) { .timeline { padding: 12px; gap: 8px; } .timeline-position { flex-basis: 100%; order: 1; } }

#history-season { width: 125px; }
#history-series { width: 280px; }