:root {
  /* BIRD "Race Night" design system — brand tokens, used as published.
     Dark race-night canvas with neon track-light accents. Dark only: it's the brand, not a mode. */
  --surface-ground: #0b0d14;
  --surface-raised: #141826;
  --ink: #f5f7fa;
  --ink-muted: #8d96ac;
  --brand-cyan: #00e5ff;
  --brand-magenta: #ff2e9a;
  --brand-yellow: #ffe94d;
  --accent-violet: #8c5cff;
  --signal-success: #39ff88;
  --signal-danger: #ff4d5e;

  /* Derived from the brand tokens */
  --surface-line: color-mix(in srgb, var(--ink) 10%, var(--surface-raised));
  --surface-line-strong: color-mix(in srgb, var(--ink) 20%, var(--surface-raised));
  --on-accent: var(--surface-ground);
  --accent-hover: color-mix(in srgb, var(--brand-cyan) 75%, white);
  --accent-dim: color-mix(in srgb, var(--brand-cyan) 45%, var(--surface-ground));
  --accent-wash: rgb(0 229 255 / .12);
  --success-dim: color-mix(in srgb, var(--signal-success) 40%, var(--surface-ground));
  --success-wash: rgb(57 255 136 / .12);
  --danger-wash: rgb(255 77 94 / .14);
  --scrim: rgb(11 13 20 / .86);

  /* Legacy aliases: older rules still use the previous token names */
  --ink-raised: var(--surface-raised);
  --ink-line: var(--surface-line);
  --ink-line-strong: var(--surface-line-strong);
  --signal: var(--brand-cyan);
  --signal-hover: var(--accent-hover);
  --signal-dim: var(--accent-dim);
  --signal-wash: var(--accent-wash);
  --trace: var(--signal-success);
  --trace-dim: var(--success-dim);
  --trace-wash: var(--success-wash);
  --text-on-ink: var(--ink);
  --muted-on-ink: var(--ink-muted);
  --warn: var(--brand-yellow);
  --danger: var(--signal-danger);

  --font-display: "Orbitron", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Inter has true tabular figures: lap tables stay aligned without a third face. */
  --font-tabular: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --mono: var(--font-mono); /* referenced inline by app.js */

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* radius-sm: chips and controls · radius-md: cards and buttons · radius-lg: hero panels and dialogs */
  --radius-1: 4px; --radius-2: 10px; --radius-3: 20px; --radius-pill: 999px;

  --dur-fast: 140ms; --dur-base: 220ms;
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --focus-ring-width: 2px; --focus-ring-offset: 2px;

  --shadow-lifted: 0 2px 4px rgb(0 0 0 / .3), 0 18px 40px rgb(0 0 0 / .45);

  --bg: var(--surface-ground);
  --surface: var(--surface-raised);
  --surface-2: color-mix(in srgb, var(--surface-raised) 60%, var(--surface-line) 40%);
  --line: var(--surface-line);
  --line-strong: var(--surface-line-strong);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --accent: var(--brand-cyan);
  --live: var(--brand-yellow);
  --ok: var(--signal-success);
  --bad: var(--signal-danger);
  --card-shadow: none;
  --radius: var(--radius-2);

  color-scheme: dark;
}

[hidden] { display: none !important; }

/* Label style: uppercase tags, not sentences */
.label, th, label, .pill, .state, .settings-category, .menu-items h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--signal);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  min-height: 58px;
  padding: var(--space-3) var(--space-4);
  background: rgb(11 13 20 / .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-line);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-on-ink);
  text-decoration: none;
}
.mark { display: flex; align-items: center; }
.mark svg { display: block; }
.brand .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .04em; }

nav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  font-size: 14px;
  color: var(--muted-on-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
nav a:hover { color: var(--text-on-ink); }
nav a.active { color: var(--text-on-ink); background: var(--ink-line); }

.status { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.top button.link { color: var(--muted-on-ink); }
.top button.link:hover:not(:disabled) { color: var(--text-on-ink); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-1);
  background: var(--ink-line);
  color: var(--muted-on-ink);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.pill.ok {
  color: var(--trace);
  background: var(--trace-wash);
  border-color: var(--trace-dim);
}
.pill.ok::before {
  opacity: 1;
  animation: pulse 2400ms var(--ease-standard) infinite;
}
.pill.bad { color: var(--danger); background: var(--danger-wash); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

button {
  font: inherit;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: var(--radius-2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  padding: var(--space-2) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
button.primary { background: var(--signal); border-color: var(--signal); color: var(--on-accent); font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--signal-hover); border-color: var(--signal-hover); }
button.secondary { background: transparent; }
button.secondary:hover:not(:disabled) { border-color: var(--signal-dim); color: var(--text); }
button.link { border: 0; background: none; color: var(--muted); padding: 4px; }
button.link:hover:not(:disabled) { color: var(--text); }
button:disabled { opacity: .42; cursor: not-allowed; }

main { max-width: 1200px; margin: 0 auto; padding: var(--space-4); }

h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: .02em; margin: 0; }
h2 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
td.num, .clock { font-family: var(--font-tabular); font-variant-numeric: tabular-nums; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  min-width: 0;
  box-shadow: var(--card-shadow);
}

.race-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px var(--space-4);
  margin-bottom: var(--space-3);
}
/* Orbitron digits are not fixed width: reserve the space so the clock doesn't jitter as it ticks. */
.race-head .clock { font-family: var(--font-display); font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 6.2ch; text-align: right; margin-left: auto; color: var(--text); }
.state {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-1);
  background: var(--surface-2);
}
/* Yellow means live / on air — nothing else. */
.state.Running { color: var(--on-accent); background: var(--live); }
.state.Ended { color: var(--muted); }
.state.Upcoming { color: var(--muted); }

.grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 800px) { .grid { grid-template-columns: minmax(0, 1fr); } }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 11px; color: var(--muted); }
td.num, th.num { text-align: right; }
tr:last-child td { border-bottom: 0; }
tr.flash td { animation: flash 1.2s var(--ease-standard); }
@keyframes flash { from { background: color-mix(in srgb, var(--signal) 30%, transparent); } to { background: transparent; } }
td.invalid { text-decoration: line-through; color: var(--muted); }
td.best { color: var(--trace); font-weight: 600; }

.pos { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; width: 2.5em; }
.pilot { display: flex; align-items: center; gap: var(--space-2); }
.swatch { width: 10px; height: 10px; border-radius: var(--radius-1); flex: none; }

.list { display: grid; gap: var(--space-2); }
.row-link {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  background: var(--surface-2);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--text);
  flex-wrap: wrap;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.row-link:hover { border-color: var(--line-strong); }
.row-link .pilots { color: var(--muted); font-size: 13px; }
.row-link .state { margin-left: auto; }
.spacer { flex: 1; }

.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--muted); font-size: 14px; }

.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.tabs button.active { background: var(--signal); color: var(--on-accent); border-color: var(--signal); }

form.inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
label {
  display: grid; gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
input, select {
  font: inherit;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3);
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
input:focus-visible, select:focus-visible { border-color: var(--signal-dim); }
label input, label select, label textarea { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; }

dialog {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-3);
  background: var(--ink-raised);
  color: var(--text-on-ink);
  padding: var(--space-5);
  width: min(380px, calc(100vw - 32px));
  box-shadow: var(--shadow-lifted);
}
dialog::backdrop { background: rgb(11 13 20 / .72); backdrop-filter: blur(2px); }
dialog form { display: grid; gap: var(--space-3); }
dialog label { color: var(--muted-on-ink); }
dialog input { background: var(--ink-line); border-color: var(--ink-line-strong); color: var(--text-on-ink); }
.actions { display: flex; justify-content: end; gap: var(--space-2); }
.error { color: var(--danger); margin: 0; font-size: 13px; }
.notice { padding: var(--space-3); border-radius: var(--radius-2); background: var(--surface-2); margin-bottom: var(--space-4); font-size: 13px; }
code.key { word-break: break-all; font-family: var(--font-mono); }

@media (max-width: 520px) {
  main { padding: var(--space-3); }
  .card { padding: var(--space-3); }
  th, td { padding: 6px 5px; }
  .wide { display: none; }
  .race-head .clock { font-size: 28px; }
}

/* Commands — always dark, ephemeral system chrome */
.toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); z-index: 20; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius-2); background: var(--ink-raised); border: 1px solid var(--ink-line); color: var(--text-on-ink); box-shadow: var(--shadow-lifted); font-size: 14px; }
.toast.error { border-color: var(--danger); }
.toast.ok { border-color: var(--trace-dim); }

.controls { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 4px; }
.controls button { min-height: 52px; min-width: 120px; font-size: 16px; font-weight: 600; }
button.go { background: var(--signal); border-color: var(--signal); color: var(--on-accent); position: relative; overflow: hidden; }
button.go:hover:not(:disabled) { background: var(--signal-hover); border-color: var(--signal-hover); }
button.stop { background: var(--danger); border-color: var(--danger); color: var(--on-accent); font-weight: 700; }
button.go .fill { position: absolute; inset: 0; background: rgb(11 13 20 / .28); transform-origin: left; transform: scaleX(0); }
button.go.holding .fill { transform: scaleX(1); transition: transform 800ms linear; }

td.actions-cell { text-align: right; }
td.actions-cell button { padding: 4px 8px; font-size: 13px; margin-left: 4px; }
tr.invalid-row td:not(.actions-cell) { color: var(--muted); }
input.time { width: 7em; font-family: var(--font-tabular); font-variant-numeric: tabular-nums; }

/* Setup */
.form-grid { display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: var(--space-3); }
.form-grid label input, .form-grid label select { width: 100%; }
.channel-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin: var(--space-2) 0; }
.channel-grid label { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; }
.check { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; }
.round-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.round-card h2 .spacer { flex: 1; }
.lineup { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.lineup-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.lineup-row select { min-width: 10em; }
.race-box { background: var(--surface-2); border-radius: var(--radius-2); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.race-box header { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.race-box header .spacer { flex: 1; }
textarea { font: inherit; font-family: var(--font-sans); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--space-2); }
td input.inline { width: 100%; min-width: 8em; }
.round-card h2 button, .round-card h2 select { font-size: 14px; font-weight: 400; }

/* Settings */
.settings-layout { display: grid; gap: var(--space-4); grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .settings-layout { grid-template-columns: minmax(0, 1fr); } }
.item-list { display: grid; gap: 4px; margin-bottom: var(--space-4); }
.item-row { display: flex; gap: 4px; align-items: center; }
.item-btn { flex: 1; text-align: left; background: transparent; border-color: transparent; color: var(--muted); }
.item-btn:hover:not(:disabled) { color: var(--text); }
.item-btn.active { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.reorder-btn { flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; font-size: 11px; line-height: 1; border-radius: var(--radius-1); background: transparent; color: var(--muted); }
.reorder-btn:hover:not(:disabled) { color: var(--text); }
.settings-category { grid-column: 1 / -1; margin: var(--space-3) 0 0; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.restart { color: var(--warn); font-size: 12px; }
.suffix { display: flex; align-items: center; gap: 4px; }

/* Rows of buttons that are actions, not navigation */
.button-row, .round-actions, .settings-tools, .settings-form-actions, .stage-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.round-actions { margin-bottom: var(--space-4); }
.settings-tools { margin-top: var(--space-2); }
.settings-form-actions, .stage-actions { margin-top: var(--space-3); }
.settings-savebar { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* Video inputs */
.video-preview { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-2); overflow: hidden; }
.video-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: .85; }
.video-area { position: absolute; border: 2px solid var(--signal); background: var(--signal-wash); color: #fff; font-family: var(--font-mono); font-size: 11px; padding: 2px 4px; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.bounds-table input[type=number] { width: 5em; }
.bounds-table select { max-width: 12em; }
.form-grid label input[type=checkbox] { width: auto; }
.form-grid label.check { align-self: end; padding-bottom: 6px; }

/* Drop-down action menus */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: " \25BE"; }
.button { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-2); color: var(--text); text-decoration: none; font-size: 14px; background: transparent; transition: border-color var(--dur-fast) var(--ease-standard); }
.button:hover { border-color: var(--line-strong); }
.menu-items { position: absolute; right: 0; z-index: 20; min-width: 230px; max-height: 60vh; overflow: auto; margin-top: 4px; padding: 4px; background: var(--ink-raised); border: 1px solid var(--ink-line); border-radius: var(--radius-2); box-shadow: var(--shadow-lifted); color: var(--text-on-ink); font-size: 14px; font-weight: 400; }
.menu-items h4 { margin: var(--space-2) var(--space-2) 2px; font-size: 10px; color: var(--muted-on-ink); }
.menu-items button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: var(--radius-1); color: var(--text-on-ink); }
.menu-items button:hover:not(:disabled) { background: var(--ink-line); }

.pilot-chip { display: inline-flex; align-items: center; gap: 6px; margin: 2px 8px 2px 0; padding: 2px 8px; border: 1px solid transparent; background: transparent; border-radius: var(--radius-2); }
.pilot-chip:hover { border-color: var(--line); }

.stage-panel { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-2); }
.stage-panel header { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: 6px; }
.stage-panel header .spacer, .card h2 .spacer { flex: 1; }
.card h2 .button { font-size: 13px; font-weight: 400; }
.card.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.card h2:has(> .spacer) { display: flex; align-items: center; gap: var(--space-2); }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; text-transform: none; letter-spacing: normal; }
img.avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-2); margin: var(--space-2) 0; }
.card .list + form.inline, .card form.inline + form.inline, .card form.inline + details { margin-top: var(--space-3); }

/* ---------- VAR: the "Signal" look ----------
   The VAR page is drawn with the Geekhost Signal system: ink surfaces, hairlines, IBM Plex, amber for the one
   primary action and cyan only for genuinely live status. varView() puts .theme-signal on <body> while it is open,
   so the header follows. Every token is restated because the :root aliases are already resolved there. */
body.theme-signal {
  --surface-ground: #0e1116; --surface-raised: #171b22;
  --ink: #dde2e8; --ink-muted: #7c8794;
  --surface-line: #262c36; --surface-line-strong: #3a424f;
  --on-accent: #0e1116;
  --accent-hover: #ffb84d; --accent-dim: #8a5a12; --accent-wash: rgb(255 165 31 / .12);
  --success-dim: #2e6b6a; --success-wash: rgb(95 211 208 / .12);
  --scrim: rgb(14 17 22 / .86);

  --ink-raised: #171b22; --ink-line: #262c36; --ink-line-strong: #3a424f;
  --signal: #ffa51f; --signal-hover: #ffb84d; --signal-dim: #8a5a12; --signal-wash: rgb(255 165 31 / .12);
  --trace: #5fd3d0; --trace-dim: #2e6b6a; --trace-wash: rgb(95 211 208 / .12);
  --text-on-ink: #dde2e8; --muted-on-ink: #7c8794;

  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);
  --font-tabular: var(--font-mono);
  --mono: var(--font-mono);

  --radius-1: 2px; --radius-2: 4px; --radius-3: 6px; --radius: 4px;

  --bg: #0e1116; --surface: #171b22; --surface-2: #171b22;
  --line: #262c36; --line-strong: #3a424f;
  --text: #dde2e8; --muted: #7c8794;
  --accent: #ffa51f; --live: #5fd3d0; --ok: #5fd3d0;

  font-size: 17px;
  line-height: 1.62;
}

.theme-signal .top { min-height: 64px; padding: var(--space-3) 28px; background: rgb(14 17 22 / .92); }
.theme-signal .brand { gap: 10px; }
.theme-signal .brand .wordmark { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; text-transform: lowercase; }
.theme-signal .mark rect:last-child { fill: var(--muted); }
.theme-signal nav { gap: 2px; }
.theme-signal nav a { padding: 10px 14px; font-size: 15px; }
.theme-signal .status { gap: var(--space-3); }
.theme-signal .pill, .theme-signal th, .theme-signal label, .theme-signal .state {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .14em;
}
.theme-signal .pill { padding: 4px 10px; background: var(--ink-raised); border-color: var(--ink-line); }
.theme-signal .pill.ok { background: var(--trace-wash); border-color: var(--trace-dim); }
.theme-signal .state { padding: 4px 10px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.theme-signal .state.Running { color: var(--trace); background: var(--trace-wash); border-color: var(--trace-dim); }

.theme-signal main { max-width: 1760px; padding: 28px 28px 72px; }
.theme-signal h1 { font-size: 32px; font-weight: 500; letter-spacing: -.01em; }
.theme-signal .card { padding: var(--space-5); margin-bottom: var(--space-5); }
.theme-signal .card h2 { font-size: 19px; font-weight: 500; margin: 0 0 14px; }
.theme-signal .card.empty { font-size: 15px; }
.theme-signal select, .theme-signal input { font-size: 15px; border-radius: var(--radius-2); }
.theme-signal select { background: var(--ink-raised); padding: 9px 12px; min-height: 40px; }
.theme-signal input { background: var(--bg); padding: 8px 10px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.toolbar select { min-width: 12em; }

.btn { font-size: 15px; background: var(--ink-raised); padding: 9px var(--space-4); min-height: 40px; }
.btn:hover:not(:disabled) { border-color: var(--signal-dim); }
.btn.primary { background: var(--signal); border-color: var(--signal); color: var(--on-accent); font-weight: 500; }
.btn.primary:hover:not(:disabled) { background: var(--signal-hover); border-color: var(--signal-hover); }
.btn.ghost { display: inline-flex; align-items: center; gap: 6px; background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { border-color: transparent; color: var(--text); }
.text-btn { background: none; border-radius: var(--radius-1); padding: 5px 10px; font-size: 13px; margin-left: 6px; }
.text-btn:hover { border-color: var(--signal-dim); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-left: 2px;
  border-radius: var(--radius-1); border-color: transparent; background: none; color: var(--muted); vertical-align: middle; flex: none; }
.icon-btn:hover:not(:disabled) { background: var(--line); color: var(--text); }
.icon-btn svg, .toggle-pill svg, .transport-btn svg { display: block; }

.var-layout { display: grid; grid-template-columns: minmax(460px, 560px) minmax(0, 1fr); gap: 28px; align-items: start; }
.var-layout > * { min-width: 0; }
@media (max-width: 1100px) {
  .var-layout { grid-template-columns: minmax(0, 1fr); }
  .video-column { order: -1; }
}
@media (max-width: 520px) {
  .theme-signal .top { padding: var(--space-3) var(--space-4); }
  .theme-signal main { padding: var(--space-4) var(--space-3) var(--space-7); }
  .theme-signal .card { padding: var(--space-4); }
}

.theme-signal .race-head { gap: 6px var(--space-4); margin-bottom: 18px; }
.theme-signal .race-head h2 { font-size: 24px; margin: 0; }
.race-meta { font-family: var(--font-mono); color: var(--muted); font-size: 13px; margin-left: auto; }

.options-group { display: flex; flex-wrap: wrap; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-2); padding: 5px; }
.toggle-pill { display: inline-flex; align-items: center; gap: 7px; border-color: transparent; background: none; color: var(--muted); font-size: 13.5px; font-weight: 500; padding: 9px 14px; }
.toggle-pill:hover { color: var(--text); }
.toggle-pill--on { background: var(--signal-wash); border-color: var(--signal-dim); color: var(--text); }
.pilot-filter { margin-bottom: 20px; }

.pilot-card { margin-bottom: var(--space-5); }
.pilot-card:last-child { margin-bottom: 0; }
.pilot-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.pilot-name { font-weight: 500; font-size: 16px; }
.pilot-standing { font-family: var(--font-mono); margin-left: auto; color: var(--muted); font-size: 13px; }

.lap-table td { padding: 9px 8px; font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.lap-table th { padding: 9px 8px; }
.lap-table tr:last-child td { border-bottom: 1px solid var(--line); }
.lap-table tr.invalid-row td:not(.actions-cell) { text-decoration: line-through; }
.lap-table td.source { font-family: var(--font-sans); color: var(--muted); }
.lap-table td.lap-cell .icon-btn { margin: 0 2px 0 0; }
.lap-table td.actions-cell .icon-btn { padding: 0; margin-left: 2px; }
.lap-table input.time { width: 6.5em; padding: 4px 6px; font-size: 14px; }

.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: var(--space-4); }
.inline-form input { width: 9em; font-family: var(--font-sans); }
.tool-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 14px; }
.sector-details { margin-top: 14px; }
.sector-details summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 4px 0; }

/* Replay */
.theme-signal .replay-card { padding: 26px; }
@media (min-width: 1101px) and (min-height: 1000px) { .replay-card { position: sticky; top: 96px; } }
.replay-title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 14px; }
.theme-signal .replay-title h2 { margin: 0; }
.replay-title .field { margin-left: auto; }

.replay-frame { position: relative; overflow: hidden; background: #000; border: 1px solid var(--line); border-radius: var(--radius-2); aspect-ratio: 16 / 9; }
.replay-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.replay-frame.zoomed video { object-fit: fill; }
.replay-clock, .replay-pilot, .replay-callout { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-2); color: var(--text); pointer-events: none; }
.replay-clock { position: absolute; top: 14px; left: 14px; padding: 9px 14px; line-height: 1.3; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.replay-clock-race { font-size: 22px; font-weight: 500; }
.replay-clock-wall { font-size: 12px; color: var(--muted); }
.replay-clock-speed { font-size: 11px; color: var(--trace); text-transform: uppercase; letter-spacing: .14em; margin-top: 2px; }
.replay-pilot { position: absolute; left: 14px; bottom: 14px; display: flex; overflow: hidden; font-size: 14px; }
.replay-pilot-swatch { width: 4px; align-self: stretch; background: var(--tick, var(--muted)); }
.replay-pilot-name { padding: 9px 14px; font-weight: 500; }
.replay-pilot-lap { padding: 9px 14px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; border-left: 1px solid var(--line); }
.replay-pilot-lap:empty { display: none; }
.replay-pilot-lap.invalid { color: var(--muted); text-decoration: line-through; }
.replay-callouts { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.replay-callout { display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; font-size: 14px; animation: callout-in var(--dur-base) var(--ease-standard); }
.replay-callout strong { font-weight: 500; }
.replay-callout span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.replay-callout span:empty { display: none; }
.replay-callout.invalid span { color: var(--muted); text-decoration: line-through; }
@keyframes callout-in { from { opacity: 0; } to { opacity: 1; } }
/* Small frames (phones): tighter overlays so they don't cover the picture. */
.replay-frame { container-type: inline-size; }
@container (max-width: 560px) {
  .replay-clock { top: 6px; left: 6px; padding: 4px 8px; }
  .replay-clock-race { font-size: 13px; }
  .replay-clock-wall, .replay-clock-speed { font-size: 10px; }
  .replay-pilot { left: 6px; bottom: 6px; font-size: 11px; }
  .replay-pilot-name, .replay-pilot-lap { padding: 4px 8px; }
  .replay-callouts { right: 6px; top: 6px; gap: 3px; }
  .replay-callout { padding: 4px 8px; font-size: 11px; gap: 6px; }
}

.replay-bar { position: relative; height: 36px; margin: var(--space-4) 0 var(--space-2); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-2); cursor: pointer; }
.replay-ticks { position: absolute; inset: 0; }
.replay-tick { position: absolute; top: 6px; bottom: 6px; width: 4px; margin-left: -2px; padding: 0; min-height: 0; border: 0; border-radius: 1px; background: var(--tick); cursor: pointer; }
.replay-tick.holeshot { width: 3px; opacity: .5; }
.replay-tick.invalid { background: repeating-linear-gradient(180deg, var(--tick) 0 4px, transparent 4px 7px); }
.replay-tick.dim { opacity: .2; }
.replay-tick:hover { width: 6px; margin-left: -3px; }
.replay-head { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; }
.replay-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-1); padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; white-space: nowrap; z-index: 1; }
.replay-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--line); }

.transport { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0; }
.transport-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: var(--bg); }
.transport-btn:hover { border-color: var(--signal-dim); }
.transport-btn--play { width: 60px; height: 60px; background: var(--signal); border-color: var(--signal); color: var(--on-accent); }
.transport-btn--play:hover { background: var(--signal-hover); border-color: var(--signal-hover); }
.options-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: 18px; }
.hint { font-family: var(--font-mono); color: var(--muted); font-size: 12px; letter-spacing: .02em; margin: 0 0 var(--space-4); }

@media (max-width: 700px) { .replay-tooltip { display: none; } }
.broadcast-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.broadcast-panel .pill { white-space: normal; max-width: 100%; }
.switch { display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: none; padding: 0; min-height: 40px; font-size: 14px; color: var(--text); }
.switch-track { position: relative; flex: none; width: 34px; height: 18px; border-radius: var(--radius-pill); background: var(--line-strong); transition: background var(--dur-fast) var(--ease-standard); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.switch.is-on .switch-track { background: var(--text); }
.switch.is-on .switch-thumb { transform: translateX(16px); background: var(--bg); }

.camera-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.camera-tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; background: var(--bg); border: 1px dashed var(--line-strong); }
.camera-tile[aria-pressed="true"] { border-style: solid; border-color: var(--line); }
.camera-tile:hover { border-color: var(--signal-dim); }
.camera-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.camera-tile__label { position: relative; width: 100%; text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  background: var(--surface); color: var(--muted); padding: 6px 8px; border-top: 1px solid var(--line); }

/* ---------- Post-race insights ---------- */
.insights p.small { font-size: 12px; margin: -6px 0 var(--space-2); }
.consistency { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.meter { display: inline-block; width: 48px; height: 4px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); }
.trend { font-weight: 700; }
.trend.up { color: var(--ok); }
.trend.down { color: var(--bad); }
.trend.same { color: var(--muted); }
.trend.new { color: var(--accent); font-size: 11px; letter-spacing: .06em; }
td.tier { white-space: nowrap; }
td.tier .tag.danger { margin-left: 8px; }
.bump-target { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.insights-explain { margin-top: var(--space-3); font-size: 13px; color: var(--muted); }
.insights-explain summary { cursor: pointer; padding: 4px 0; }
.insights-explain dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--space-3); margin: var(--space-2) 0; }
.insights-explain dt { font-weight: 600; color: var(--text); }
.insights-explain dd { margin: 0; }
@media (max-width: 560px) { .insights-explain dl { grid-template-columns: 1fr; } .insights-explain dd { margin-bottom: 6px; } }
.tag.danger { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: var(--radius-1); color: var(--bad); background: var(--danger-wash); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); }

/* ---------- Setup, Settings and Admin: the Signal look ----------
   The three director / admin pages are drawn with the same Geekhost Signal system as VAR (.theme-signal) plus
   .theme-forms, which carries the rules that only make sense on a page of forms: one button shape in three
   weights (plain, .solid, .ghost), amber kept for the single primary action of a form, hairline cards, and
   tabs as a neutral segmented row — the accent is not a navigation colour. */

/* One button shape (.link stays the bare text button of the header). */
.theme-forms button:not(.link), .theme-forms .button {
  font-size: 14px;
  min-height: 38px;
  padding: 9px 14px;
  background: var(--ink-raised);
  border-radius: var(--radius-2);
}
.theme-forms button:not(.link):hover:not(:disabled), .theme-forms .button:hover { border-color: var(--signal-dim); }
.theme-forms button.primary { background: var(--signal); border-color: var(--signal); color: var(--on-accent); font-weight: 500; }
.theme-forms button.primary:hover:not(:disabled) { background: var(--signal-hover); border-color: var(--signal-hover); }
.theme-forms button.solid { background: var(--ink-line); border-color: var(--ink-line); }
.theme-forms button.solid:hover:not(:disabled) { background: var(--ink-line-strong); border-color: var(--ink-line-strong); }
.theme-forms button.ghost, .theme-forms .button.ghost { background: none; border-color: transparent; color: var(--muted); }
.theme-forms button.ghost:hover:not(:disabled), .theme-forms .button.ghost:hover { color: var(--text); border-color: var(--ink-line); }
.theme-forms button.reorder-btn { min-height: 0; padding: 0; font-size: 11px; background: none; }
.theme-forms button.item-btn { font-size: 14.5px; background: none; }
.theme-forms button.item-btn.active { background: var(--bg); border-color: var(--line); }

.theme-forms .tabs { margin-bottom: var(--space-5); }
.theme-forms .tabs > button { padding: 9px var(--space-4); color: var(--muted); }
.theme-forms .tabs > button:hover:not(:disabled) { color: var(--text); }
.theme-forms .tabs > button.active { background: var(--ink-line); border-color: var(--ink-line); color: var(--text); }

.theme-forms .card h2 { margin-bottom: 6px; }
.theme-forms .card p.muted { font-size: 14px; max-width: 70ch; margin: 0 0 var(--space-4); }
.theme-forms .card .actions { justify-content: flex-start; gap: var(--space-2); }
.theme-forms .notice { background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; }
.theme-forms th, .theme-forms td { padding: 9px 8px; }
.theme-forms td { font-size: 14px; }

/* Form grids read as quiet captions; the inline forms keep the mono tag labels. */
.theme-forms .form-grid { gap: var(--space-4) 20px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.theme-forms .form-grid > label {
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.theme-forms .form-grid > label.check { font-size: 14.5px; color: var(--text); padding-bottom: 8px; }
.theme-forms .settings-category { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; padding-bottom: 8px; margin: var(--space-2) 0 -4px; }
.theme-forms .settings-category:first-child { margin-top: 0; }
/* A restart marker is a note, not a warning: the page has no amber to spare. */
.theme-forms .restart { color: var(--muted); font-size: 13px; }
.theme-forms .settings-layout { gap: 28px; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
@media (max-width: 800px) { .theme-forms .settings-layout { grid-template-columns: minmax(0, 1fr); } }

/* Setup: a round is a card, each heat a hairline box of pilot chips. */
.theme-forms .round-card h2 { margin-bottom: var(--space-4); }
.theme-forms .race-box { background: none; border: 1px solid var(--line); padding: var(--space-4) 18px; margin-top: 12px; }
.theme-forms .race-box header { gap: 10px; margin-bottom: 12px; }
.theme-forms .race-box header strong { font-weight: 500; font-size: 15px; }
.pilot-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.theme-forms button.pilot-chip { margin: 0; gap: 8px; padding: 6px 12px 6px 8px; min-height: 0; font-size: 14px; background: var(--bg); border-color: var(--line); }
.theme-forms button.pilot-chip .muted { font-family: var(--font-mono); font-size: 12px; }
/* The finishing position on a flown heat's chip: a quiet prefix, not a table column. */
.theme-forms button.pilot-chip .pos { width: auto; font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--muted); }
.theme-forms .stage-panel { margin-top: var(--space-5); padding: var(--space-5) 0 0; border: 0; border-top: 1px solid var(--line); }
.theme-forms .stage-panel header { gap: 10px; margin-bottom: 14px; }
.theme-forms .stage-panel header strong { font-weight: 500; font-size: 15px; }

/* The race on deck: teal, like anything else that is live right now. */
.theme-signal .state.current { color: var(--trace); background: var(--trace-wash); border-color: var(--trace-dim); }

/* A row that has its own spacer places its actions; the status tag then stays with the text it describes. */
.theme-signal .row-link:has(.spacer) .state, .theme-signal .row-link:has(.row-actions) .state { margin-left: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }

/* Admin: cards flow in one grid, widest last. */
.admin-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); align-items: start; }
.admin-grid > .card-group { display: contents; }
.admin-grid > .card, .card-group > .card { margin-bottom: 0; }
.vmix-card { grid-column: 1 / -1; }
.vmix-card h3 { font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: normal; text-transform: none; margin: 22px 0 8px; }
.vmix-card h3:first-of-type { margin-top: 0; }
.template-out { display: block; margin: 10px 0 var(--space-3); padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-2); font-family: var(--font-mono); font-size: 13.5px; }
.template-out:empty { display: none; }

/* An action menu with no room for a label: the chevron alone, named for screen readers. */
.menu > summary.icon-only { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 9px; color: var(--muted); }
.menu > summary.icon-only::after { content: none; }
.menu > summary.icon-only:hover { color: var(--text); }
.menu > summary.icon-only svg { display: block; }

/* ---------- Live, Races, Results and Control: the Signal look ----------
   The four race pages are drawn with the same Geekhost Signal system as VAR (.theme-signal) plus .theme-race,
   which carries the rules that only make sense on a page of live race data: a clock and figures in mono, tables
   that read as data rather than as prose, amber for the one thing out in front, and teal kept for what is
   happening right now — running, current, connected. */

/* The event name above the race: a mono tag line, not a heading. */
.eyebrow { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 8px; }

.theme-race .race-head { align-items: flex-end; gap: 12px 20px; margin-bottom: var(--space-5); }
.theme-race .race-head h1, .theme-race .race-head h2 { font-size: 26px; margin: 0; }
.theme-race .race-head .clock { font-family: var(--font-mono); font-size: 48px; font-weight: 600; }
/* Live leads with the race itself: its name and its clock are the largest type on the page. */
.theme-race .race-head.hero { margin-bottom: 28px; }
.theme-race .race-head.hero h1 { font-size: 40px; }
.theme-race .race-head.hero .clock { font-size: 56px; }

.theme-race .grid { gap: var(--space-5); grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
.theme-race .grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .theme-race .grid, .theme-race .grid.even { grid-template-columns: minmax(0, 1fr); } }

/* On a phone the clock still has to fit beside the race name. */
@media (max-width: 520px) {
  .theme-race .race-head h1, .theme-race .race-head h2, .theme-race .race-head.hero h1 { font-size: 24px; }
  .theme-race .race-head .clock, .theme-race .race-head.hero .clock { font-size: 30px; }
}

/* Tables of race data: roomy rows, positions in mono. */
.theme-race th, .theme-race td { padding: 11px 8px; font-size: 15px; }
.theme-race .pos { font-family: var(--font-mono); font-weight: 400; color: var(--muted); }
/* A fast lap is marked by weight, not by colour: teal on this page means live. */
.theme-race td.best { color: var(--text); font-weight: 500; }
.theme-race td.ok { color: var(--trace); }
/* The leader of the running race, and the top of a results table: the page's one accent. */
.theme-race tr.leader td { background: var(--signal-wash); }
.theme-race tr.leader td.pos { color: var(--signal); font-weight: 500; }
.theme-race tr.best td.num { color: var(--signal); font-weight: 500; }
.theme-race tr.best td.pos { color: var(--text); }
/* The lap grid is the widest table on Live: a size down so the laps stay on one screen. */
.theme-race .laps-card th, .theme-race .laps-card td { padding: 8px 7px; font-size: 13.5px; }

.theme-race .row-link { background: var(--bg); border-color: var(--line); padding: 12px 14px; }
.theme-race .row-link strong { font-weight: 500; }
.theme-race .row-link .pilots { font-size: 13.5px; }
.theme-race .card h2 .muted { font-size: 14px; font-weight: 400; }

/* One button shape, as on the director pages; start and stop keep their own size below. */
.theme-race button:not(.link), .theme-race .button { font-size: 14px; min-height: 38px; padding: 9px 14px; background: var(--ink-raised); border-radius: var(--radius-2); }
.theme-race button:not(.link):hover:not(:disabled), .theme-race .button:hover { border-color: var(--signal-dim); }
.theme-race button.secondary, .theme-race .button.secondary { background: none; }
.theme-race button.primary { background: var(--signal); border-color: var(--signal); color: var(--on-accent); font-weight: 500; }
.theme-race button.primary:hover:not(:disabled) { background: var(--signal-hover); border-color: var(--signal-hover); }
.theme-race .tabs > button { color: var(--muted); }
.theme-race .tabs > button:hover:not(:disabled) { color: var(--text); }
.theme-race .tabs > button.active { background: var(--ink-line); border-color: var(--ink-line); color: var(--text); }
.theme-race .tabs .muted { font-size: 13px; }

/* Races: a round is a card, each heat a tile of pilot chips. */
.race-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.race-tile { display: block; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-2); color: var(--text); transition: border-color var(--dur-fast) var(--ease-standard); }
.race-tile:hover { border-color: var(--line-strong); }
.race-tile__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 12px; }
.race-tile__head strong { font-weight: 500; font-size: 16px; }
.theme-race span.pilot-chip { margin: 0; gap: 7px; padding: 5px 10px 5px 7px; background: var(--surface); border-color: var(--line); font-size: 13px; }
/* The finishing position on a flown heat's chip: a quiet prefix, not a table column. */
.theme-race span.pilot-chip .pos { width: auto; font-size: 11.5px; }

/* Control: the pilots in the running race, then the two buttons that matter. */
.pilots-row { display: flex; flex-wrap: wrap; gap: var(--space-2) 18px; margin-bottom: 22px; }
.theme-race .pilots-row button.link { font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.theme-race .controls { margin: 0; }
.theme-race .controls button { min-height: 56px; min-width: 180px; font-size: 17px; font-weight: 500; }
.theme-race .controls .go { background: var(--signal); border-color: var(--signal); color: var(--on-accent); }
.theme-race .controls .go:hover:not(:disabled) { background: var(--signal-hover); border-color: var(--signal-hover); }
/* Stop is the one control that must never be misread: an outline you aim at, not a colour among colours. */
.theme-race .controls .stop { background: none; border: 2px solid var(--line-strong); color: var(--text); font-weight: 600; }
.theme-race .controls .stop:hover:not(:disabled) { border-color: var(--text); }

/* The race log: what the page has seen on the live stream since it was opened. */
.log-list { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; }
.log-row { display: flex; align-items: baseline; gap: var(--space-3); padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.log-row:last-child { border-bottom: 0; }
.log-time { flex: none; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.log-icon { flex: none; display: flex; color: var(--muted); }
.log-icon.warn, .log-icon.dq { color: var(--text); }
.log-icon.ok { color: var(--trace); }
.log-text { flex: 1; }
.log-text b { font-weight: 500; }

/* Control's race list runs to a whole night of heats: it scrolls, so the race log below it stays in view, and a
   heat keeps to one line — the pilot list is what gives up its width. */
.theme-race .control-races .list { max-height: 460px; overflow-y: auto; }
.theme-race .control-races .row-link { flex-wrap: nowrap; }
.theme-race .control-races .row-link > strong, .theme-race .control-races .row-link > .state { flex: none; }
.theme-race .control-races .pilots { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .theme-race .control-races .row-link { flex-wrap: wrap; }
  .theme-race .control-races .pilots { flex: none; }
}

/* Post-race insights: the arrow carries the direction, so the figures stay in one colour. */
.theme-race .trend, .theme-race .trend.up, .theme-race .trend.down, .theme-race .trend.same { font-family: var(--font-mono); font-weight: 400; font-size: 13px; color: var(--muted); }
.theme-race .trend.new { font-family: var(--font-mono); color: var(--text); letter-spacing: .06em; }
.theme-race .meter > span { background: var(--muted); }
.theme-race .tag.danger { margin-left: 8px; font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .1em; color: var(--text); background: none; border-color: var(--line-strong); }
.theme-race .insights p.small { font-size: 12.5px; margin: -8px 0 14px; }

/* ---------- Help: the user guide ----------
   The Obsidian vault rendered as reading pages, in the Signal look: the guide list beside the page (above it,
   folded, on a phone), prose at a readable measure, and amber only where a link is being pointed at. */
.help-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(220px, 290px) minmax(0, 920px); align-items: start; }
.help-layout .card { margin-bottom: 0; }
.help-nav { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; padding: var(--space-4) !important; }
.help-search { width: 100%; margin-bottom: var(--space-3); }
.help-toc > summary { display: none; }
.help-group + .help-group { margin-top: var(--space-4); }
.help-group-title { margin: 0 0 6px; padding: 0 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.help-tree a { display: block; padding: 6px 10px; border-radius: var(--radius-2); font-size: 14.5px; line-height: 1.35; color: var(--muted); transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.help-tree a:hover { color: var(--text); }
.help-tree a.active { color: var(--text); background: var(--line); }
.help-results { display: grid; gap: 2px; }
.help-result { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-2); }
.help-result:hover, .help-result:focus-visible { background: var(--line); }
.help-result-title { font-size: 14.5px; font-weight: 500; }
.help-result-folder { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.help-result-snippet { font-size: 13px; line-height: 1.45; color: var(--muted); }
.help-none { font-size: 14px; padding: 0 10px; }

.help-crumbs { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.help-crumbs a:hover { color: var(--text); }

.help-doc { padding: 36px 44px !important; }
.help-doc > :first-child { margin-top: 0; }
.help-doc h1, .help-doc h2, .help-doc h3, .help-doc h4 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.help-doc h1 { font-size: 32px; margin: 0 0 18px; }
.help-doc h2 { font-size: 22px; margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.help-doc h3 { font-size: 18px; margin: 28px 0 8px; }
.help-doc h4 { font-size: 16px; margin: 22px 0 6px; }
.help-doc p, .help-doc ul, .help-doc ol, .help-doc blockquote { margin: 0 0 14px; }
.help-doc ul, .help-doc ol { padding-left: 1.4em; }
.help-doc li { margin: 4px 0; }
.help-doc li > ul, .help-doc li > ol { margin: 4px 0 0; }
.help-doc strong { font-weight: 600; }
.help-doc mark { background: var(--signal-wash); color: var(--text); padding: 0 2px; }
.help-doc a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.help-doc a:hover { color: var(--signal); text-decoration-color: var(--signal); }
.help-doc .help-missing { color: var(--muted); }
.help-doc code { font-family: var(--font-mono); font-size: .86em; padding: 0 3px; border-radius: var(--radius-1); background: var(--bg); border: 1px solid var(--line); }
.help-code { position: relative; margin: 0 0 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-2); }
.help-code-lang { position: absolute; top: 9px; left: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.help-doc .help-copy { position: absolute; top: 5px; right: 6px; min-height: 0; padding: 3px 10px; border-color: var(--line); background: var(--surface); color: var(--muted); font-size: 12.5px; }
.help-doc .help-copy:hover { color: var(--text); border-color: var(--line-strong); }
.help-doc pre { margin: 0; padding: 38px 16px 14px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.help-copy-buffer { position: fixed; top: 0; left: -9999px; }
.help-doc pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.help-doc hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.help-doc blockquote { padding: 2px 0 2px 16px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.help-doc .help-image { display: block; max-width: 100%; height: auto; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--radius-2); }
.help-doc .table-wrap { margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--radius-2); }
.help-doc table { font-size: 15px; }
.help-doc th, .help-doc td { white-space: normal; vertical-align: top; padding: 9px 12px; line-height: 1.5; }
.help-doc th { background: var(--bg); }
.help-doc td { min-width: 8em; }
.help-doc ul.help-tasks { list-style: none; padding-left: 0; }
.help-doc .help-tasks label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: var(--text); cursor: pointer; }
.help-doc .help-tasks input { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--signal); transform: translateY(2px); }
.help-doc .help-tasks label:has(input:checked) { color: var(--muted); }

.callout { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-2); background: var(--bg); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin-bottom: 4px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
details.callout > summary { cursor: pointer; }
.callout-tip, .callout-success, .callout-example { border-left-color: var(--trace); }
.callout-tip .callout-title, .callout-success .callout-title, .callout-example .callout-title { color: var(--trace); }
.callout-warning, .callout-caution, .callout-important, .callout-question { border-left-color: var(--signal); }
.callout-warning .callout-title, .callout-caution .callout-title, .callout-important .callout-title, .callout-question .callout-title { color: var(--signal); }
.callout-danger, .callout-failure, .callout-bug { border-left-color: var(--danger); }
.callout-danger .callout-title, .callout-failure .callout-title, .callout-bug .callout-title { color: var(--danger); }

.help-backlinks { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.help-backlinks .help-group-title { padding: 0; margin-bottom: 10px; }
.help-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.help-doc a.help-chip { padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-2); font-size: 14px; text-decoration: none; color: var(--muted); }
.help-doc a.help-chip:hover { color: var(--text); border-color: var(--line-strong); }

@media (max-width: 800px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .help-nav { position: static; max-height: none; }
  .help-toc > summary { display: list-item; cursor: pointer; padding: 4px 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .help-toc[open] > summary { margin-bottom: var(--space-3); }
}
@media (max-width: 520px) {
  .help-doc { padding: 22px 18px !important; }
  .help-doc h1 { font-size: 26px; }
  .help-doc h2 { font-size: 20px; margin-top: 32px; }
  .help-doc td { min-width: 6em; }
}