/* fonts: served from this site (/fonts), Barlow and Barlow Condensed under the SIL Open Font License; latin and latin-ext only */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --asphalt: #1c1f22;
  --asphalt-2: #24282c;
  --asphalt-3: #2e3338;
  --seam: #3b4147;
  --guardrail: #98a1a7;
  --text: #e8eaeb;
  --centerline: #f2c230;
  --centerline-ink: #2a2206;
  --slip: #f1efe6;
  --slip-ink: #25231e;
  --slip-faint: #8a867a;
  --faster: #3fbf8a;
  --slower: #e5484d;
  --radius-s: 6px;
  --radius-m: 10px;
  --tabs-h: 64px;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --accent-text: var(--centerline);   /* the accent where it is text on the page background */
  --glass: rgba(28, 31, 34, 0.92);    /* panels floating over maps, and the tab bar */
  --bad-text: #ff8f92;
  --ok-text: #7fdcb3;
  --shadow: rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* Light theme (Settings → Display). The accent colour is set by public/js/theme.js on both themes. */
:root[data-theme="light"] {
  --asphalt: #f3f4f5;
  --asphalt-2: #ffffff;
  --asphalt-3: #e5e8eb;
  --seam: #d2d7dc;
  --guardrail: #5b646c;
  --text: #16191c;
  --faster: #13865b;
  --slower: #c9302c;
  --glass: rgba(255, 255, 255, 0.94);
  --bad-text: #b3261e;
  --ok-text: #12704c;
  --shadow: rgba(20, 30, 40, 0.18);
  color-scheme: light;
}
:root[data-theme="light"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: none; }
:root[data-theme="light"] .slip { box-shadow: 0 1px 0 var(--seam); }
:root[data-theme="light"] .slip { background: #fbfaf5; }
/* Charts are drawn with fixed colours for the dark theme; these swap them on the light one. */
:root[data-theme="light"] :is(.chart, .trace) [stroke="#3b4147"] { stroke: var(--seam); }
:root[data-theme="light"] :is(.chart, .trace) [fill="#98a1a7"] { fill: var(--guardrail); }
:root[data-theme="light"] :is(.chart, .trace) [stroke="#98a1a7"] { stroke: var(--guardrail); }
:root[data-theme="light"] :is(.chart, .trace) [stroke="#e8eaeb"] { stroke: var(--text); }
:root[data-theme="light"] :is(.chart, .trace) [fill="#e8eaeb"] { fill: var(--text); }
:root[data-theme="light"] :is(.chart, .trace) [stroke="#f2c230"], :root[data-theme="light"] .spark path { stroke: var(--accent-text); }
:root[data-theme="light"] .split-label { color: #16191c; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
:root[data-theme="light"] .fsn { background: #0f1113; color: #e8eaeb; } /* full-screen notes stay dark for the road */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--asphalt);
  color: var(--text);
  font: 16px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent-text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--centerline); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
#app { min-height: 100%; }
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) 16px calc(var(--tabs-h) + env(safe-area-inset-bottom) + 28px);
}
.page.bare { padding-bottom: 40px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--guardrail); text-decoration: none; font-size: 15px; margin-bottom: 10px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; }
h1 { font-size: 34px; margin: 0 0 6px; }
h2 { font-size: 23px; margin: 30px 0 10px; }
h3 { font-size: 19px; margin: 0 0 4px; }
p { margin: 0 0 12px; }
.muted { color: var(--guardrail); }
.small { font-size: 14px; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
hr { border: 0; border-top: 1px solid var(--seam); margin: 24px 0; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-s);
  border: 1px solid var(--seam); background: var(--asphalt-2); color: var(--text);
  font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--asphalt-3); }
.btn.primary { background: var(--centerline); color: var(--centerline-ink); border-color: var(--centerline); }
.btn.primary:hover { filter: brightness(1.06); }
.set-tab > .btn { max-width: 100%; white-space: normal; text-align: center; }
.btn.danger { color: var(--bad-text); border-color: #5a2e30; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--guardrail); padding: 0 10px; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 14px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

label.field { display: block; }
label.field > span { display: block; font-size: 14px; color: var(--guardrail); margin-bottom: 5px; }
.input, select.input, textarea.input {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--asphalt-2); border: 1px solid var(--seam); outline: none;
}
textarea.input { min-height: 80px; resize: vertical; }
.input:focus { border-color: var(--centerline); }
.input.time { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--centerline); }
.check small { display: block; color: var(--guardrail); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--seam); background: transparent; border-radius: 999px;
  min-height: 34px; padding: 0 14px; font-size: 14px; cursor: pointer; color: var(--text);
}
.chip[aria-pressed="true"] { background: var(--text); color: var(--asphalt); border-color: var(--text); }
.tag { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 4px; background: var(--asphalt-3); color: var(--guardrail); margin: 0 4px 4px 0; }

.seg { display: inline-flex; border: 1px solid var(--seam); border-radius: var(--radius-s); overflow: hidden; }
.seg button { border: 0; background: transparent; min-height: 38px; padding: 0 14px; cursor: pointer; color: var(--guardrail); }
.seg button[aria-pressed="true"] { background: var(--asphalt-3); color: var(--text); }

.notice { border-left: 3px solid var(--centerline); background: var(--asphalt-2); padding: 12px 14px; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.notice.bad { border-left-color: var(--slower); }
.notice.ok { border-left-color: var(--faster); }
.error-text { color: var(--bad-text); font-size: 14px; }
.empty { padding: 28px 0; color: var(--guardrail); }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--seam); }
.item { display: flex; gap: 14px; align-items: center; padding: 14px 0; color: inherit; text-decoration: none; }
.item .meta { color: var(--guardrail); font-size: 14px; }
.item .time { font-family: var(--display); font-weight: 600; font-size: 24px; font-variant-numeric: tabular-nums; }
.road-thumb { flex: none; width: 64px; height: 64px; border-radius: var(--radius-s); background: var(--asphalt-2); }
.status { font-size: 13px; color: var(--accent-text); }

/* ---------- course hero (the drawn road) ---------- */
.road-hero { width: 100%; height: 220px; display: block; background: var(--asphalt-2); border-radius: var(--radius-m); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--seam); border-radius: var(--radius-s); overflow: hidden; margin: 14px 0; }
.stats > div { background: var(--asphalt); padding: 10px 12px; }
.stats b { display: block; font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stats span { font-size: 13px; color: var(--guardrail); }

/* ---------- timing slip ---------- */
.slip {
  --edge: 9px;
  position: relative;
  background: var(--slip);
  color: var(--slip-ink);
  padding: 22px 20px 26px;
  margin: 8px 0 18px;
  -webkit-mask:
    radial-gradient(circle at 50% 0, transparent 4.5px, #000 5px) top / 14px var(--edge) repeat-x,
    radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) bottom / 14px var(--edge) repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--edge) + 1px) no-repeat;
  mask:
    radial-gradient(circle at 50% 0, transparent 4.5px, #000 5px) top / 14px var(--edge) repeat-x,
    radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) bottom / 14px var(--edge) repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--edge) + 1px) no-repeat;
}
.slip-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--slip-faint); }
.slip-course { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--slip-ink); line-height: 1.1; }
.slip-total { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; margin: 14px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.slip-sub { font-size: 14px; color: var(--slip-faint); }
.slip table { width: 100%; border-collapse: collapse; margin-top: 16px; font-variant-numeric: tabular-nums; }
.slip th { white-space: nowrap; text-align: left; font-weight: 500; font-size: 13px; color: var(--slip-faint); padding: 0 0 6px; }
.slip th.r, .slip td.r { text-align: right; padding-left: 12px; }
.slip td { padding: 7px 0; border-top: 1px dashed #c9c5b8; font-size: 15px; }
.slip td.t { font-family: var(--display); font-weight: 600; font-size: 19px; white-space: nowrap; }
.slip .faster { color: #17845a; }
.slip .slower { color: #c23034; }
.slip-foot { margin-top: 14px; font-size: 12.5px; color: var(--slip-faint); }
.est { font-size: 11px; vertical-align: super; color: var(--slip-faint); margin-left: 1px; }

/* ---------- charts ---------- */
.trace { width: 100%; height: 170px; display: block; }
.chart { width: 100%; height: auto; display: block; font-family: var(--body); }
.legend { color: var(--guardrail); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0 0; }
.legend > span { margin-right: -8px; }
.dot-pb, .dot-run, .dot-wet { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
.dot-pb { background: var(--centerline); }
.dot-run { border: 2px solid var(--guardrail); }
.dot-wet { border: 2px solid #4fb3ff; }
.dash-mod { display: inline-block; width: 14px; border-top: 2px dashed #4fb3ff; vertical-align: 3px; }
.stats.four { grid-template-columns: repeat(4, 1fr); }
.stats.four b { font-size: 21px; }
.faster { color: var(--faster); }
.slower { color: var(--bad-text); }

/* section colours: purple = best anyone, green = driver's best, yellow = slower */
.sc { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; }
.sc-purple { background: #a461d8; }
.sc-green { background: var(--faster); }
.sc-yellow { background: var(--centerline); }
.slip .sc-yellow { background: #c99a00; }
.slip .sc-green { background: #17845a; }
.slip .sc-purple { background: #7b3fc4; }
.slip-legend { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--slip-faint); margin: 8px 0 0; }
.slip-legend .sc { margin-right: -8px; }

.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-weight: 500; font-size: 13px; color: var(--guardrail); padding: 0 0 6px; white-space: nowrap; }
.tbl td { padding: 8px 0; border-top: 1px solid var(--seam); font-size: 15px; }
.tbl th.r, .tbl td.r { text-align: right; padding-left: 12px; }
.tbl td.t { font-family: var(--display); font-weight: 600; font-size: 18px; white-space: nowrap; }
.tbl tr.gain td { background: rgba(242, 194, 48, 0.08); }
.tbl tr.gain td:first-child { box-shadow: inset 3px 0 var(--centerline); padding-left: 8px; }
.list.compact .item { padding: 10px 0; }

/* ---------- pace notes ---------- */
.notes { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--seam); }
.notes li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--seam); }
.notes .nd { color: var(--guardrail); font-size: 13px; padding-top: 3px; }
.notes .nt { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0.02em; }
details.more { margin: 8px 0 10px; }
details.more > summary { list-style: none; }
details.more[open] > summary { display: none; }
.note-edit { list-style: none; padding: 0; margin: 12px 0 16px; }
.note-edit li { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 6px; align-items: center; padding: 5px 0; border-radius: var(--radius-s); }
.note-edit li.focus { background: var(--asphalt-2); box-shadow: 0 0 0 6px var(--asphalt-2); }
.note-edit .nd { display: flex; align-items: center; gap: 4px; color: var(--guardrail); font-size: 13px; }
.note-edit .nd .input { padding: 8px; min-height: 40px; }
.note-edit [data-f=text] { min-height: 40px; font-family: var(--display); font-weight: 600; font-size: 18px; }
.note-pin {
  font: 700 13px var(--display); letter-spacing: 0.03em; color: var(--centerline-ink); background: var(--centerline);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.split-label { font: 600 12px var(--body); color: #e8eaeb; text-shadow: 0 0 3px #1c1f22, 0 0 3px #1c1f22; white-space: nowrap; pointer-events: none; }
.callout { display: flex; gap: 14px; align-items: baseline; margin: 6px 0 2px; min-height: 28px; overflow: hidden; white-space: nowrap; }
.callout b { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; }
.callout .now b { font-size: 24px; color: var(--accent-text); }
.callout .now small { color: var(--guardrail); font-size: 13px; margin-left: 2px; }
.callout .later b { font-size: 17px; color: var(--guardrail); }

/* ---------- hazards ---------- */
.hazard-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--seam); }
.hazard-card:first-child { border-top: 0; }
.hazard-card.focus { background: var(--asphalt-2); box-shadow: 0 0 0 8px var(--asphalt-2); border-radius: 2px; }
.hazard-card .meta { color: var(--guardrail); font-size: 13px; }
.hz-swatch { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; }
.hz-photo { display: block; margin-top: 8px; max-width: 100%; max-height: 180px; border-radius: var(--radius-s); }
.hazard-pin {
  --hz: #e8eaeb; display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 5px; border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 2px solid var(--hz); color: var(--text); font: 600 12px var(--body); white-space: nowrap;
}
.hazard-pin .hz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hz); }
.hazard-pin.pending { --hz: var(--centerline); cursor: grab; }

/* ---------- video, cards, dialogs ---------- */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-s); overflow: hidden; }
.video > *, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-pane { position: relative; flex: none; height: 34vh; background: #000; border-top: 2px solid var(--centerline); }
.video-pane iframe, .video-pane > div { position: absolute; inset: 0 0 26px; width: 100%; height: calc(100% - 26px); border: 0; }
/* Watch runs: the video and its telemetry (over it, or in a strip beside it). */
.video-pane .wv-row { display: flex; gap: 0; }
.wv-video { position: relative; flex: 1; min-width: 0; height: 100%; }
.video-pane .wv-video iframe, .video-pane .wv-video > #w-yt { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-pane .tele-side { min-height: 0; height: 100%; flex: none; width: 34%; max-width: 260px; border-radius: 0; }
.video-pane[data-pos="side"] .tele-side { display: block; }
.vid-label { position: absolute; left: 10px; right: 10px; bottom: 4px; margin: 0; font-size: 13px; color: var(--guardrail); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.class-badge { display: inline-block; vertical-align: 3px; margin-left: 6px; font: 700 13px var(--display); letter-spacing: 0.04em; padding: 1px 7px; border-radius: 4px; background: var(--text); color: var(--asphalt); }
.sheet-dialog { border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--asphalt); color: var(--text); padding: 16px; max-width: min(92vw, 460px); width: 100%; }
.sheet-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.sheet-dialog.moved .mv-host { white-space: nowrap; }
.sheet-dialog.moved .mv-btns { display: grid; gap: 8px; margin-top: 16px; }
.sheet-dialog.moved .mv-steps { padding-left: 18px; margin: 10px 0 0; display: grid; gap: 6px; }
.card-preview { display: block; width: 100%; height: auto; border-radius: var(--radius-s); }

/* ---------- tabs ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--glass); border-top: 1px solid var(--seam);
  backdrop-filter: blur(8px);
}
.tabs[hidden] { display: none; }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--guardrail); text-decoration: none; font-size: 12px; }
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs a[aria-current="page"] { color: var(--text); }
.tabs .tab-log svg { background: var(--centerline); color: var(--centerline-ink); border-radius: 50%; padding: 4px; width: 32px; height: 32px; }
.tabs .tab-log { color: var(--text); }

.tabs .nav-brand { display: none; }
.split-layout > * + * { margin-top: 0; }
.sec-grid { display: grid; gap: 12px; }

/* ---------- settings ---------- */
.settings { border-bottom: 1px solid var(--seam); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--seam); }
.settings > :first-child, .settings > details:first-child > .setting { border-top: 0; }
.setting-text { min-width: 0; }
.setting-text p { margin: 2px 0 0; font-size: 14px; color: var(--guardrail); }
.setting .seg { flex: none; }
.setting-danger form { padding-top: 4px; }
details > summary::-webkit-details-marker { display: none; }
.switch {
  flex: none; appearance: none; -webkit-appearance: none; width: 48px; height: 28px; margin: 0; border-radius: 999px; cursor: pointer;
  background: radial-gradient(circle at 14px 50%, var(--text) 9px, transparent 10px), var(--seam);
}
.switch:checked { background: radial-gradient(circle at calc(100% - 14px) 50%, var(--centerline-ink) 9px, transparent 10px), var(--centerline); }
@media (max-width: 640px) {
  .setting:not(.switch-row) { flex-direction: column; align-items: stretch; gap: 10px; }
  .setting .seg { display: flex; }
  .setting .seg button { flex: 1; padding: 0 6px; }
  .setting .input { max-width: none !important; }
}

/* ---------- announcement banner ---------- */
.banner {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 8px 8px 8px 14px;
  background: var(--centerline); color: var(--centerline-ink); border-radius: var(--radius-s); font-weight: 600;
}
.banner .btn.ghost { color: var(--centerline-ink); min-height: 32px; }

/* ---------- admin notes (yellow boxes near a page's own notes) ---------- */
.an-wrap:empty { display: none; }
.an-wrap { margin: 12px 0; }
.admin-note {
  background: rgba(242, 194, 48, 0.11); border: 1px solid rgba(242, 194, 48, 0.38); border-left: 4px solid var(--centerline);
  border-radius: var(--radius-s); padding: 10px 12px; margin: 0 0 10px; color: var(--text);
}
.admin-note.private {
  border-style: dashed; border-left-style: solid;
  background: repeating-linear-gradient(135deg, rgba(242, 194, 48, 0.06) 0 10px, rgba(242, 194, 48, 0.11) 10px 20px);
}
.an-head { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 13px; min-height: 24px; }
.an-label { font-weight: 700; color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.an-vis { font-size: 12px; padding: 0 7px; border-radius: 4px; border: 1px dashed rgba(242, 194, 48, 0.6); color: var(--accent-text); }
.an-meta { color: var(--guardrail); }
.an-actions { margin-left: auto; display: inline-flex; gap: 2px; }
.an-actions .btn.ghost { min-height: 26px; padding: 0 8px; font-size: 13px; }
.an-body { margin: 6px 0 0; white-space: normal; overflow-wrap: anywhere; }
.an-form textarea { margin-top: 8px; background: var(--asphalt); }
.an-form .seg button { min-height: 32px; font-size: 14px; }
.an-add { margin: 0 0 6px; color: var(--accent-text); padding: 0 6px; }
.an-list { margin: 6px 0 0; padding-left: 18px; }
.an-list li { margin: 2px 0; }

/* ---------- admin ---------- */
.subnav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--seam); margin: 8px 0 22px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; padding: 10px 12px; color: var(--guardrail); text-decoration: none; font-weight: 600; font-size: 15px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--centerline); }
/* Mouse / wide screens can't swipe the strip, so let the tabs wrap onto a second row instead of cutting off. */
@media (pointer: fine), (min-width: 900px) {
  .subnav, .tools { flex-wrap: wrap; overflow-x: visible; }
}
.tag.ok { background: rgba(63, 191, 138, 0.16); color: var(--ok-text); }
.tag.warn { background: rgba(242, 194, 48, 0.16); color: var(--accent-text); }
.tag.bad { background: rgba(229, 72, 77, 0.16); color: var(--bad-text); }
/* Role tags next to names: Owner, Admin, Mod. */
.tag.role-owner { background: rgba(242, 194, 48, 0.18); color: var(--accent-text); border: 1px solid rgba(242, 194, 48, 0.45); }
.tag.role-admin { background: rgba(63, 191, 138, 0.16); color: var(--ok-text); }
.tag.role-moderator { background: rgba(88, 101, 242, 0.18); color: #b4bcff; }
:root[data-theme="light"] .tag.role-moderator { color: #3b46b8; }
h1 .tag, h2 .tag, h3 .tag { font-family: var(--body); font-weight: 500; vertical-align: 3px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; border: 1px solid var(--seam); border-radius: var(--radius-s); overflow: hidden; margin: 0 0 26px; }
.kpi { display: block; background: var(--asphalt); padding: 12px 14px; color: inherit; text-decoration: none; box-shadow: 0 0 0 1px var(--seam); }
a.kpi[href]:hover { background: var(--asphalt-2); }
.kpi b { display: block; font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { display: block; font-size: 14px; }
.kpi small { display: block; font-size: 13px; color: var(--guardrail); margin-top: 2px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; }
.toolbar .input { min-width: 200px; }
.toolbar .seg { flex-wrap: wrap; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
a.plain { color: inherit; text-decoration: none; }
a.plain:hover h3, a.plain:hover strong { text-decoration: underline; text-decoration-color: var(--seam); text-underline-offset: 3px; }
.tbl-wrap { overflow-x: auto; }
.note-line { font-style: italic; }
.hz-thumb { display: block; margin-top: 8px; max-width: 160px; max-height: 110px; border-radius: var(--radius-s); }
.driver-head { margin: 0 0 6px; }
.page.admin .item .time { font-size: 21px; }
.page.admin code { font-size: 13px; background: var(--asphalt-2); padding: 1px 5px; border-radius: 4px; }
.page.admin code.block { display: block; padding: 8px 10px; margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .split-layout.side-first { display: flex; flex-direction: column; }
  .split-layout.side-first .col-side { order: -1; margin-bottom: 8px; }
  .split-layout.side-first .col-main > h2.first { margin-top: 30px; }
}
@media (max-width: 640px) {
  .page.admin .item { flex-wrap: wrap; }
  .page.admin .item > .grow { flex-basis: calc(100% - 90px); }
  .page.admin .row-actions { width: 100%; justify-content: flex-start; }
  .toolbar .seg { width: 100%; }
  .toolbar .seg button { flex: 1 1 auto; padding: 0 8px; }
}

.grant-form { border-top: 1px solid var(--seam); padding-top: 14px; margin-top: 10px; }
.grant-form .seg { display: flex; flex-wrap: wrap; }
.grant-form .seg button { flex: 1 1 auto; white-space: nowrap; padding: 0 10px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 14px); z-index: 50;
  background: var(--text); color: var(--asphalt); padding: 10px 16px; border-radius: var(--radius-s);
  font-weight: 500; max-width: calc(100% - 32px); box-shadow: 0 6px 24px var(--shadow);
}
.toast.bad { background: var(--slower); color: #fff; }

/* ---------- auth ---------- */
.auth { max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 48px) 16px 40px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; margin: 0 0 8px; }
.brand-road { display: block; width: 100%; height: 70px; margin: 8px 0 26px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--guardrail); font-size: 14px; margin: 18px 0; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--seam); }

/* ---------- full-screen map views ---------- */
.mapview { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--asphalt); z-index: 40; }
.mapview .main-col { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mapview .map { flex: 1; min-height: 0; position: relative; }
.mapview .topbar {
  position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 10px); left: 10px; right: 10px;
  display: flex; gap: 8px; align-items: center; pointer-events: none;
}
.mapview .topbar > * { pointer-events: auto; }
.fab { min-height: 40px; padding: 0 12px; border-radius: var(--radius-s); border: 1px solid var(--seam); background: var(--glass); color: var(--text); cursor: pointer; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.fab[aria-pressed="true"] { background: var(--text); color: var(--asphalt); }
.sheet {
  flex: none; background: var(--asphalt); border-top: 1px solid var(--seam);
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 12px); max-height: 52vh; overflow-y: auto;
}
.sheet h2 { margin: 0 0 6px; font-size: 21px; }
.tools { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tools .chip { flex: none; }
.hint { font-size: 14px; color: var(--guardrail); margin: 8px 0; min-height: 20px; }
.splitlist { list-style: none; padding: 0; margin: 8px 0; }
.splitlist li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--seam); }
.splitlist input { flex: 1; min-height: 38px; padding: 6px 10px; border-radius: var(--radius-s); background: var(--asphalt-2); border: 1px solid var(--seam); }
.sv-pane { position: relative; height: 42vh; flex: none; border-top: 2px solid var(--centerline); background: #000; }
.sv-pane .pano { position: absolute; inset: 0; }
.sv-pane .sv-actions { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.sv-pane .sv-close { position: absolute; z-index: 3; right: 8px; top: 8px; }

/* overview / race */
.race-panel { flex: none; background: var(--asphalt); border-top: 1px solid var(--seam); padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px); }
.clock { font-family: var(--display); font-weight: 700; font-size: 30px; font-variant-numeric: tabular-nums; min-width: 76px; }
.race-panel .seg button { padding: 0 9px; }
.scrub { width: 100%; accent-color: var(--centerline); }
.toggles { gap: 6px; margin: 4px 0 2px; }
.btn.toggle { min-height: 32px; padding: 0 11px; font-weight: 500; color: var(--guardrail); }
.btn.toggle[aria-pressed="true"] { background: var(--text); color: var(--asphalt); border-color: var(--text); }
.cars { list-style: none; padding: 0; margin: 6px 0 0; max-height: 26vh; overflow-y: auto; }
.cars li { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 15px; }
.cars .dot { width: 12px; height: 12px; border-radius: 50%; }
.cars .v { font-variant-numeric: tabular-nums; color: var(--guardrail); font-size: 14px; }
.cars .g { font-family: var(--display); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.est-note { font-size: 12.5px; color: var(--guardrail); margin-top: 6px; }

.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-group { background: var(--glass) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }

@media (min-width: 900px) {
  /* Desktop: navigation becomes a left sidebar, pages get two columns. */
  .tabs {
    top: 0; bottom: 0; right: auto; width: 232px; height: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding: 26px 14px; border-top: 0; border-right: 1px solid var(--seam);
    background: var(--asphalt);
  }
  .tabs .nav-brand {
    order: -2; display: block; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1;
    color: var(--text); padding: 0 12px 10px; margin-bottom: 18px; text-decoration: none;
    background: linear-gradient(90deg, var(--centerline) 0 10px, transparent 10px 16px) bottom left / 16px 2px repeat-x;
  }
  .tabs a:not(.nav-brand) { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; min-height: 44px; font-size: 16px; border-radius: var(--radius-s); }
  .tabs a:not(.nav-brand):hover { background: var(--asphalt-2); color: var(--text); }
  .tabs a[aria-current="page"] { background: var(--asphalt-2); }
  .tabs svg { width: 20px; height: 20px; }
  .tabs .tab-log { order: -1; background: var(--centerline); color: var(--centerline-ink) !important; font-weight: 600; margin-bottom: 14px; }
  .tabs .tab-log:hover { background: var(--centerline) !important; filter: brightness(1.06); }
  .tabs .tab-log svg { background: none; color: inherit; padding: 0; width: 20px; height: 20px; }
  .tabs .tab-log[aria-current="page"] { background: var(--centerline); }
  .tabs .tab-log[aria-current="page"] { box-shadow: 0 0 0 2px var(--asphalt), 0 0 0 4px var(--centerline); }

  body:has(.tabs:not([hidden])) .page { margin: 0 0 0 232px; max-width: 1120px; padding: 36px 48px 56px; }
  body:has(.tabs:not([hidden])) .toast { left: calc(50% + 116px); bottom: 28px; }
  .page:has(h1[data-narrow]) { max-width: 860px !important; }
  h1 { font-size: 42px; }

  .split-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 36px; align-items: start; }
  .slip-layout { grid-template-columns: minmax(380px, 500px) minmax(0, 1fr); }
}
/* Between the sidebar breakpoint and ~1100px the side column was too thin for its buttons and pushed the page sideways: stack it. */
@media (min-width: 900px) and (max-width: 1099px) {
  .slip-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .split-layout h2.first { margin-top: 8px; }
  .road-hero { height: 360px; }
  .split-layout .stats { margin-top: 0; }
  .course-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .course-list > li { border-top: 1px solid var(--seam); }
  .course-list > li:nth-child(-n+2) { border-top: 0; }
  .course-list .road-thumb { width: 84px; height: 84px; }
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .trace { height: 220px; }

  .mapview { flex-direction: row; }
  .mapview .sheet, .mapview .race-panel { width: 380px; max-height: none; border-top: 0; border-left: 1px solid var(--seam); order: 2; }
  .sv-pane { height: 45%; }
  .video-pane { height: 42%; }
  .cars { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---------- tickets ---------- */
.thread { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msg { background: var(--asphalt-2); border-radius: var(--radius-m); padding: 10px 14px; max-width: 600px; margin-right: 40px; }
.msg.mine { align-self: flex-end; background: var(--asphalt-3); margin: 0 0 0 40px; }
.msg.admin { border-left: 3px solid var(--centerline); }
.msg-meta { font-size: 13px; color: var(--guardrail); }
.msg-meta .tag { margin: 0 0 0 4px; font-size: 11px; }
.msg-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.decide { border: 1px solid var(--seam); border-radius: var(--radius-m); padding: 14px; margin: 16px 0; max-width: 640px; }
.decide h2 { margin-top: 0; }
.seg.wrap { flex-wrap: wrap; }
.unread-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--slower); margin-right: 7px; vertical-align: 1px; }
.count-pill { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--slower); color: #fff; font-size: 13px; font-weight: 700; }
.tabs a { position: relative; }
.tab-badge {
  position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--slower); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* "Beta" on the Live tab: sits over the icon's corner in the bottom bar, at the end of the row in the side bar. */
.tab-beta {
  position: absolute; top: 5px; left: calc(50% + 6px); padding: 0 4px; border-radius: 6px; font-style: normal;
  background: rgba(242, 194, 48, 0.14); color: var(--accent-text); border: 1px solid rgba(242, 194, 48, 0.4);
  font-size: 9px; font-weight: 700; line-height: 13px; letter-spacing: 0.02em; text-transform: uppercase;
}

/* ---------- admin acting as a driver ---------- */
.acting-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: calc(env(safe-area-inset-top) + 6px) 12px 6px 16px;
  background: var(--centerline); color: var(--centerline-ink); font-size: 15px;
}
.acting-bar[hidden] { display: none; }
.acting-bar .btn { background: var(--asphalt); color: var(--text); border-color: var(--asphalt); flex: none; }
body.acting #app { padding-top: 48px; }
body.acting .mapview { top: 48px; }
@media (max-width: 640px) {
  .acting-bar { font-size: 13px; }
  body.acting #app { padding-top: 60px; }
  body.acting .mapview { top: 60px; }
}
@media (min-width: 900px) {
  .tab-badge, .tab-beta { position: static; margin-left: auto; }
  body.acting .tabs { top: 48px; }
}

/* ---------- GPS recorder (beta) ---------- */
.tag.beta { background: rgba(242, 194, 48, 0.14); color: var(--accent-text); border: 1px solid rgba(242, 194, 48, 0.4); vertical-align: middle; }
.btn .tag.beta { margin-left: 6px; font-size: 11px; padding: 1px 6px; }
.tips { margin: 18px 0 4px; border: 1px solid var(--seam); border-radius: var(--radius-m); padding: 10px 14px; background: var(--asphalt-2); }
.tips summary { cursor: pointer; font-weight: 600; }
.tips ul { margin: 10px 0 2px; padding-left: 18px; font-size: 14px; color: var(--guardrail); }
.tips li + li { margin-top: 6px; }
.tips .list { margin-top: 8px; }
.rec.live { padding-top: calc(env(safe-area-inset-top) + 12px); padding-bottom: calc(env(safe-area-inset-bottom) + 28px); }
.rec-status {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-m); font-weight: 600; font-size: 17px; line-height: 1.3;
  background: var(--asphalt-3); border-left: 4px solid var(--guardrail);
}
.rec-status[data-tone="ready"] { border-left-color: var(--centerline); }
.rec-status[data-tone="go"] { border-left-color: var(--faster); }
.rec-status[data-tone="ok"] { border-left-color: var(--faster); background: rgba(63, 191, 138, 0.12); }
.rec-status[data-tone="bad"] { border-left-color: var(--slower); background: rgba(229, 72, 77, 0.12); }
.rec-clock {
  font-family: var(--display); font-weight: 700; font-size: clamp(64px, 22vw, 120px); line-height: 1; text-align: center;
  margin: 18px 0 10px; letter-spacing: 0.01em;
}
.rec-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.rec-meters div { background: var(--asphalt-2); border-radius: var(--radius-s); padding: 8px 4px; }
.rec-meters b { display: block; font-family: var(--display); font-size: 26px; line-height: 1.1; }
.rec-meters span { font-size: 12px; color: var(--guardrail); }
.rec-map { display: block; width: 100%; height: auto; margin: 14px 0 6px; background: var(--asphalt-2); border-radius: var(--radius-m); }
.rec-map .line { fill: none; stroke: var(--seam); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rec-map .gate { fill: var(--guardrail); }
.rec-map .start { fill: var(--faster); }
.rec-map .finish { fill: var(--text); }
.rec-map .trail { fill: none; stroke: var(--centerline); stroke-width: 2; stroke-opacity: 0.5; stroke-linejoin: round; }
.rec-map .car { fill: var(--centerline); stroke: var(--asphalt); stroke-width: 2; }
.rec-splits { list-style: none; margin: 8px 0 0; padding: 0; }
.rec-splits li { display: flex; gap: 10px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid var(--seam); font-size: 15px; }
.rec-splits li.todo { color: var(--guardrail); }
.rec-splits b { font-family: var(--display); font-size: 20px; }
.rec-splits .faster { color: var(--faster); }
.rec-splits .slower { color: var(--slower); }
.slip-ok { color: #2f8f62; }
.legend .key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--k); vertical-align: middle; margin: 0 4px 0 10px; }
.legend .key:first-child { margin-left: 0; }
.chart.gg { width: 100%; max-width: 280px; display: block; margin: 8px auto; }
.g-stats { margin-top: 6px; }
.offline-notes { padding-left: 0; list-style: none; margin: 0; }
.offline-notes li { padding: 8px 0; border-bottom: 1px solid var(--seam); font-size: 17px; }
.offline-notes .num { display: inline-block; min-width: 70px; font-size: 13px; }
.cl-entry { border-top: 1px solid var(--seam); padding-top: 6px; margin-top: 14px; scroll-margin-top: 70px; }
.cl-entry.cl-hi { border-top: 2px solid var(--centerline); }
.cl-entry.cl-hi h2 { color: var(--accent-text); }
.cl-head { display: flex; align-items: baseline; gap: 10px; }
.cl-head h2 { margin: 8px 0 0; }
.wn-more { margin: 10px 0 0; }
.gps-line { margin: 12px 0; padding: 12px; border: 1px solid rgba(95, 227, 255, 0.4); border-radius: var(--radius-s); background: rgba(95, 227, 255, 0.05); }
.gps-line h3 { margin: 0 0 6px; }
.gps-line .gps-or { margin: 14px 0 4px; font-size: 14px; color: var(--guardrail); }
.drive-cta { margin: 6px 0 14px; }
.drive-cta p { margin: 6px 0 0; }
.rd-status { margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--asphalt-3); font-weight: 600; }
.rd-status[data-tone="ok"] { color: var(--ok-text); }
.rd-status[data-tone="go"] { color: #5fe3ff; }
.rd-status[data-tone="bad"] { color: var(--bad-text); }
.rd-btns { display: grid; gap: 10px; margin-top: 10px; }
.rd-btns .btn { min-height: 64px; font-size: 20px; }
.rd-btns .rd-split { background: var(--centerline); color: var(--centerline-ink); border-color: var(--centerline); }
.rd-car { width: 18px; height: 18px; border-radius: 50%; background: #5fe3ff; border: 3px solid #1c1f22; box-shadow: 0 0 0 3px rgba(95, 227, 255, 0.35); }
.gps-line input[type=range] { width: 100%; accent-color: #5fe3ff; }
.avatar { --av: #555b61; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; object-fit: cover; background: var(--av); color: var(--av-ink, #fff); font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; }
.avatar.initials { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.av-link { display: inline-flex; border-radius: 50%; }
/* Online / offline dot on a picture (avatarHtml in public/js/ui.js). The ring is the colour of the surface behind it,
   so the dot looks cut out of the picture; offline is a grey ring with a hole, like Discord's. */
.av-wrap { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.presence { position: absolute; right: -2px; bottom: -2px; box-sizing: border-box; border-radius: 50%; pointer-events: auto;
  border: 2px solid var(--presence-ring, var(--asphalt)); background: #23a55a; }
.presence.off { background: #80848e; }
.presence.off::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; background: var(--presence-ring, var(--asphalt)); }
:root[data-theme="light"] .presence { background: #1f9d55; }
.profile-head .presence { --presence-ring: color-mix(in srgb, var(--accent) 26%, var(--asphalt)); right: 2px; bottom: 2px; }
.online-now { color: var(--ok-text); font-weight: 500; }
.profile-head { --accent: #3a3f44; display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: 12px; margin-bottom: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--asphalt)) 0%, var(--asphalt) 85%); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--seam)); }
.profile-head .avatar { --av: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
.profile-head h1 { margin: 0 0 2px; overflow-wrap: anywhere; }
.profile-head p { margin: 2px 0; }
.profile-head .bio { margin-top: 6px; }
@media (max-width: 480px) { .profile-head { flex-direction: column; align-items: flex-start; } }
.spark { flex: none; margin: 0 10px; }
.spark path { fill: none; stroke: var(--centerline); stroke-width: 2; }
.car-card { align-items: flex-start; }
.swatches { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 260px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--seam); background: var(--sw); cursor: pointer; padding: 0; position: relative; }
.swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--asphalt) inset; }
.swatch.custom { background: conic-gradient(#e5484d, #f2c230, #3fbf8a, #4fb3ff, #a461d8, #e5484d); }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.status.closed { color: var(--bad-text); }
.course-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.course-tools .input { flex: 1 1 220px; min-width: 0; }
.courses-map { height: min(60vh, 520px); border-radius: var(--radius-s, 8px); overflow: hidden; border: 1px solid var(--seam); }
.map-pop { color: #1c1f22; display: grid; gap: 4px; }
.map-pop .meta { color: #555; font-size: 13px; }
.map-pop .status.closed { color: #b3261e; font-size: 13px; }
.map-pop .btn { justify-self: start; margin-top: 4px; }
details.closure summary { cursor: pointer; color: var(--bad-text); margin-top: 10px; }
.tag.method { font-size: 12px; }
.tag.m-gps { background: rgba(80, 160, 255, 0.15); color: #9cc8ff; }
.tag.m-ocr { background: rgba(164, 97, 216, 0.16); color: #cfa6f0; }
.seg a { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px; color: var(--guardrail); text-decoration: none; }
.seg a[aria-pressed="true"] { background: var(--asphalt-3); color: var(--text); }
.method-filter { max-width: 100%; }
.shot-img { display: block; max-width: 100%; max-height: 65vh; margin: 8px auto; border-radius: 8px; }
.slip-gps { display: inline-block; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.whatsnew h3 { margin: 14px 0 6px; }
.whatsnew ul { margin: 0; padding-left: 18px; color: var(--text); }
.whatsnew li + li { margin-top: 6px; }
.whatsnew h2 { margin-top: 0; }
.subnav .tag.beta { font-size: 11px; padding: 0 5px; margin: 0 0 0 4px; }

/* live drive view */
.rec-notes { margin: 14px 0 0; padding: 10px 12px; background: var(--asphalt-2); border-radius: var(--radius-m); }
.rec-call { min-height: 40px; margin: 0 0 8px; flex-wrap: wrap; row-gap: 2px; white-space: normal; }
.rec-call .now b { font-size: 32px; }
.rec-call .later b { font-size: 20px; }
.rec-livemap { height: 42vh; min-height: 240px; margin: 14px 0 6px; border-radius: var(--radius-m); overflow: hidden; background: var(--asphalt-2); }
.rec-mapbar { margin-bottom: 6px; }

/* full-screen pace notes */
body.fsn-open { overflow: hidden; }
.fsn {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; gap: 3vh;
  padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 18px);
  background: #0f1113; color: var(--text);
}
.fsn-top { display: flex; gap: 14px; align-items: center; font-size: 17px; color: var(--guardrail); }
.fsn-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsn-top .num { font-family: var(--display); font-size: 24px; color: var(--text); }
.fsn-main { flex: 1; display: flex; align-items: center; gap: 4vw; min-height: 0; }
.fsn-arrow { font-size: clamp(90px, 26vmin, 260px); line-height: 1; color: var(--accent-text); }
.fsn-arrow:empty { display: none; }
.fsn-now { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 15vmin, 180px); line-height: 0.95; color: var(--accent-text); overflow-wrap: anywhere; }
.fsn-dist { font-family: var(--display); font-size: clamp(30px, 8vmin, 80px); color: var(--text); margin-top: 1vh; }
.fsn-next { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 7vmin, 72px); color: var(--guardrail); line-height: 1.05; }
.fsn-bar { height: 8px; background: var(--asphalt-3); border-radius: 4px; overflow: hidden; }
.fsn-bar i { display: block; height: 100%; width: 0; background: var(--centerline); transition: width 0.8s linear; }

/* ---------- settings tabs and the updates card ---------- */
.update-card {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 12px 14px; border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--centerline) 14%, var(--asphalt-2)); border: 1px solid color-mix(in srgb, var(--centerline) 45%, var(--seam));
  color: var(--text); text-decoration: none;
}
.update-card .grow { display: flex; flex-direction: column; min-width: 0; }
.update-card strong { overflow: hidden; text-overflow: ellipsis; }
.update-card > span:last-child { font-size: 26px; color: var(--accent-text); line-height: 1; }
.update-card:hover { border-color: var(--centerline); }
.set-nav { margin: 14px 0 8px; position: sticky; top: 0; z-index: 5; background: var(--asphalt); }
body.acting .set-nav { top: 48px; }
.set-tab > h2:first-child { margin-top: 18px; }

/* ---------- usage, errors ---------- */
.banner.limit { background: var(--slower); color: #fff; }
.meter { margin: 12px 0; }
.meter-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.meter-bar { position: relative; height: 12px; border-radius: 6px; background: var(--asphalt-3); overflow: hidden; margin-top: 6px; }
.meter-bar i { display: block; height: 100%; background: var(--faster); border-radius: 6px; }
.meter-bar.warn i { background: var(--centerline); }
.meter-bar.bad i { background: var(--slower); }
.meter-bar b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--asphalt); opacity: 0.8; }
.usage-days { display: flex; align-items: flex-end; gap: 4px; height: 120px; border-bottom: 1px solid var(--seam); padding-top: 6px; }
.ud { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; position: relative; }
.ud span { flex: 1; border-radius: 2px 2px 0 0; min-height: 1px; }
.ud-r { background: var(--centerline); }
.ud-w { background: #4fb3ff; }
.ud small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--guardrail); }
.usage-days + .legend { margin-top: 24px; }
.usage-steps { padding-left: 18px; }
.usage-steps li + li { margin-top: 4px; }
.err-item { padding: 12px 0; }
.err-msg { overflow-wrap: anywhere; }
.err-stack { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--asphalt-2); padding: 8px; border-radius: var(--radius-s); max-height: 240px; overflow: auto; }

/* ---------- live gap to your best ---------- */
.rec-delta { text-align: center; font-family: var(--display); margin: -4px 0 10px; min-height: 40px; }
.rec-delta b { font-size: clamp(34px, 11vw, 60px); line-height: 1; font-weight: 700; }
.rec-delta .muted { font-family: var(--body); font-size: 14px; }
.rec-delta .faster, .fsn-delta.faster { color: var(--faster); }
.rec-delta .slower, .fsn-delta.slower { color: var(--slower); }
.fsn-delta { font-family: var(--display); font-size: 28px; font-weight: 700; }

/* ---------- hazard warnings, focus corner and coaching hints ---------- */
.rec-hazard { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--centerline); color: var(--centerline-ink); font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; }
.rec-hazard[hidden], .fsn-hz[hidden] { display: none; }
.rec.live .rec-hazard { font-size: calc(22px * var(--rs)); }
.fsn-hz { align-self: flex-start; padding: 4px 18px; border-radius: var(--radius-s); background: var(--centerline); color: var(--centerline-ink); font-family: var(--display); font-weight: 700; font-size: clamp(28px, 7vmin, 72px); line-height: 1.1; }
.rec-focus { margin: 0 0 8px; color: var(--guardrail); }
.rec-focus b { color: var(--text); }
.coach { margin: 16px 0 0; }
.coach h3 { margin: 0 0 6px; }
.coach-list { padding-left: 20px; margin: 0 0 10px; }
.coach-list li + li { margin-top: 10px; }
.coach .faster { color: var(--faster); }
.coach .slower { color: var(--slower); }

/* ---------- check before a session ---------- */
.pc-list { list-style: none; margin: 14px 0 18px; padding: 0; }
.pc-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--seam); }
.pc-row:first-child { border-top: 0; }
.pc-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--asphalt-3); color: var(--guardrail); }
.pc-row[data-state="ok"] .pc-icon { background: color-mix(in srgb, var(--faster) 22%, transparent); color: var(--faster); }
.pc-row[data-state="warn"] .pc-icon { background: color-mix(in srgb, var(--centerline) 24%, transparent); color: var(--accent-text); }
.pc-row[data-state="bad"] .pc-icon { background: color-mix(in srgb, var(--slower) 22%, transparent); color: var(--bad-text); }
.pc-row .small { color: var(--guardrail); margin-top: 2px; }
.pc-fix { color: var(--text) !important; }
.pc-fix .btn { margin-top: 6px; }

/* ---------- night mode while recording: dim red on black ---------- */
body.night {
  --asphalt: #000; --asphalt-2: #0d0202; --asphalt-3: #1a0505; --seam: #2a0a0a; --guardrail: #8a2a22; --text: #d9372b;
  --centerline: #b3261e; --centerline-ink: #000; --accent-text: #d9372b; --faster: #d9372b; --slower: #ff5a4a; --glass: rgba(0, 0, 0, 0.9);
  --bad-text: #ff5a4a; --ok-text: #d9372b; background: #000; color: #d9372b; color-scheme: dark;
}
/* Maps go dark grey, then a red layer multiplied over them turns every shade red. */
body.night .rec-livemap { position: relative; }
body.night .rec-livemap canvas, body.night .rec-livemap svg, body.night .rec-map { filter: grayscale(1) invert(1) brightness(0.55) contrast(1.3); }
body.night .rec-livemap::after { content: ''; position: absolute; inset: 0; background: #ff1a0a; mix-blend-mode: multiply; pointer-events: none; z-index: 2; }
body.night .btn.toggle[aria-pressed="true"], body.night .fab[aria-pressed="true"] { background: #4a0b07; color: #ff5a4a; border-color: #7a140c; }
body.night .fsn { background: #000; filter: none; }
body.night .rec-delta .faster { text-decoration: none; }
body.night .rec-delta .slower::after { content: ' ▲'; font-size: 0.5em; vertical-align: middle; }
body.night .rec-delta .faster::after { content: ' ▼'; font-size: 0.5em; vertical-align: middle; }

/* ---------- corners ---------- */
.tbl.corners td small { font-size: 12px; }
.tbl.corners tr.lost td { background: color-mix(in srgb, var(--slower) 9%, transparent); }
.tbl.corners tr.lost td:first-child { box-shadow: inset 3px 0 var(--slower); padding-left: 8px; }
#cn-ref { margin: 4px 0 10px; flex-wrap: wrap; }

/* ---------- telemetry overlay ---------- */
.vid-wrap { display: grid; gap: 10px; grid-template-columns: 1fr; }
.vid-wrap[data-pos="side"] { grid-template-columns: minmax(0, 1fr) minmax(120px, 30%); align-items: stretch; }
.tele-over { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.video > .tele-over { width: 100%; height: 100%; }
.tele-over canvas { width: 100%; height: 100%; display: block; }
.tele-side { display: none; position: relative; background: #0f1113; border-radius: var(--radius-s); overflow: hidden; min-height: 200px; }
.vid-wrap[data-pos="side"] .tele-side { display: block; }
.tele-side canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.tele-bar { margin-top: 8px; }
.tele-bar .seg button { min-height: 32px; font-size: 14px; }
@media (max-width: 520px) { .vid-wrap[data-pos="side"] { grid-template-columns: 1fr; } .vid-wrap[data-pos="side"] .tele-side { min-height: 0; aspect-ratio: 16 / 7; } }

/* ---------- side-by-side compare ---------- */
.cmp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .cmp-grid { grid-template-columns: 1fr 1fr; } }
.cmp-cell { margin: 0; }
.cmp-cell figcaption { margin-top: 6px; font-size: 15px; }
.cmp-gap { font-family: var(--display); font-size: 26px; min-height: 34px; margin: 6px 0 10px; }
.cmp-gap .faster { color: var(--faster); } .cmp-gap .slower { color: var(--slower); }
.cmp-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 8px; }
.cmp-controls .scrub { flex: 1 1 200px; }

/* ---------- badges ---------- */
.badges { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--asphalt-2); border: 1px solid var(--seam); }
.badge-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--centerline); color: var(--centerline-ink); font-size: 15px; }
.badge.challenge .badge-icon { background: #4fb3ff; color: #0b1a24; }
.badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.badge-text small { color: var(--guardrail); font-size: 12px; }
.badge-run { color: var(--guardrail); text-decoration: none; font-size: 20px; padding: 0 2px; }
.challenge { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-m); margin: 12px 0; background: color-mix(in srgb, #4fb3ff 10%, var(--asphalt-2)); border: 1px solid color-mix(in srgb, #4fb3ff 40%, var(--seam)); }
.challenge .badge-icon { background: #4fb3ff; color: #0b1a24; }
details.ach > summary { cursor: pointer; list-style: none; }

/* ---------- inbox ---------- */
.inbox .item.unread strong { color: var(--text); }
.inbox .item:not(.unread) { opacity: 0.8; }
.inbox-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--asphalt-3); color: var(--accent-text); font-size: 16px; }

/* ---------- Tonight ---------- */
.tonight { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--asphalt-2); border: 1px solid var(--seam); }
.tonight-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tonight-head h2 { margin: 0; }
.tonight-by { margin: 2px 0 0; }
.tonight.closed .tonight-grid, .tonight.closed > p { display: none; }
.tonight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0 6px; }
.tonight-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--asphalt); border: 1px solid var(--seam); color: inherit; text-decoration: none; }
.tonight-card:hover { border-color: var(--guardrail); }
.tn-line { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.tn-warn { font-size: 13px; font-weight: 600; color: #4fb3ff; }
.tn-hz { margin-top: 2px; }
.tn-hz .tag { font-size: 12px; }
.bad-text { color: var(--bad-text); }

/* ---------- share page, sim ---------- */
.share-page .brand.share-brand { font-size: 30px; margin-bottom: 14px; }
.share-replay { background: #16191c; border-radius: var(--radius-s); overflow: hidden; }
.share-replay canvas { width: 100%; height: auto; display: block; }
.sim-board { counter-reset: none; }
.sim-board .pos { font-family: var(--display); font-size: 22px; width: 28px; color: var(--guardrail); }

/* ---------- admin sign-in codes ---------- */
.mfa-code { font-family: var(--display); font-size: 28px; letter-spacing: 0.2em; text-align: center; }
.backup-codes { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.7; background: var(--asphalt); padding: 8px 12px; border-radius: var(--radius-s); margin: 8px 0; columns: 2; }

/* ---------- v1.6: recorder ---------- */
.tag.low { background: rgba(229, 72, 77, 0.14); color: var(--bad-text); }
.rec-near { margin: -4px 0 0; min-height: 0; }
.rec-near:empty { display: none; }
/* Big targets on the start and stop screens: gloves, a phone in a mount. */
.rec .btn.rec-big, #pc-go { min-height: 64px; font-size: 20px; font-weight: 700; border-radius: var(--radius-m); }
.rec form .check { padding: 6px 0; }
.rec form .check input[type="checkbox"] { width: 26px; height: 26px; }
.rec.live .btn.small, .rec.live .btn.toggle, .rec.live .seg button { min-height: 44px; }
.rec.live #r-stop { margin-top: 18px; }
.rec-top { gap: 6px; align-items: center; }
.rec-top .tag { margin: 0; }
.rec-top .btn.toggle { padding: 0 12px; }
.rec-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-saver-note { margin: 14px 0 6px; }
.rec-count {
  font-family: var(--display); font-weight: 700; text-align: center; font-size: clamp(56px, 20vw, 110px); line-height: 1;
  color: var(--accent-text); margin: 10px 0 0;
}
/* Portrait: one column, in this order. Landscape (below): the clock on the left, notes and map on the right. */
.rec-cols { display: flex; flex-direction: column; }
.rec-left, .rec-right { display: contents; }
.rec-left > #r-stop { order: 9; }
/* Text size (Settings → Driving, or Aa on the recorder). */
.rec.live { --rs: 1; }
.rec.live[data-size="large"] { --rs: 1.25; }
.rec.live[data-size="huge"] { --rs: 1.55; }
.rec.live .rec-status { font-size: calc(17px * var(--rs)); }
.rec.live .rec-meters b { font-size: calc(26px * var(--rs)); }
.rec.live .rec-meters span { font-size: calc(12px * var(--rs)); }
.rec.live .rec-call .now b { font-size: calc(32px * var(--rs)); }
.rec.live .rec-call .later b { font-size: calc(20px * var(--rs)); }
.rec.live .rec-splits li { font-size: calc(15px * var(--rs)); }
.rec.live .rec-splits b { font-size: calc(20px * var(--rs)); }
.rec.live .rec-delta .muted { font-size: calc(14px * var(--rs)); }
.rec.live[data-size="huge"] .rec-meters { grid-template-columns: 1fr 1fr; }
.rec.live[data-size="huge"] .rec-meters > div:nth-child(2) { display: none; }
/* Glance: only the clock, the gap and Stop. */
.rec.live.glance .rec-right, .rec.live.glance .rec-meters, .rec.live.glance .rec-name, .rec.live.glance #r-size, .rec.live.glance .rec-top .tag { display: none; }
.rec.live.glance .rec-status { font-size: calc(15px * var(--rs)); padding: 8px 12px; }
.rec.live.glance .rec-clock { font-size: clamp(90px, 30vw, 220px); margin: 6vh 0 2vh; }
.rec.live.glance .rec-delta b { font-size: clamp(56px, 18vw, 140px); }
.rec.live.glance #r-stop { margin-top: 8vh; }
@media (orientation: landscape) and (max-height: 560px) {
  .rec.live { max-width: none; padding-left: calc(env(safe-area-inset-left) + 14px); padding-right: calc(env(safe-area-inset-right) + 14px); }
  .rec-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 18px; align-items: start; }
  .rec-left, .rec-right { display: block; }
  .rec-left { position: sticky; top: 8px; }
  .rec.live .rec-clock { font-size: clamp(56px, 22vh, 120px); margin: 8px 0 4px; }
  .rec.live .rec-status { font-size: calc(15px * min(var(--rs), 1.25)); padding: 8px 12px; margin-top: 8px; }
  .rec.live .rec-meters b { font-size: calc(22px * min(var(--rs), 1.3)); }
  .rec.live .rec-meters div { padding: 6px 4px; }
  .rec.live #r-stop { margin-top: 10px; min-height: 52px; }
  .rec.live .rec-livemap { height: 58vh; min-height: 180px; }
  .rec.live .rec-notes { margin-top: 0; }
  .rec.live.glance .rec-cols { grid-template-columns: 1fr; }
  .rec.live.glance .rec-clock { font-size: clamp(80px, 42vh, 260px); margin: 2vh 0 0; }
  .rec.live.glance .rec-delta b { font-size: clamp(44px, 20vh, 140px); }
  .rec.live.glance #r-stop { margin-top: 3vh; }
  /* Watch: the map beside the controls, as on a wide screen. */
  .mapview { flex-direction: row; }
  .mapview .race-panel { width: min(340px, 44vw); max-height: none; overflow-y: auto; border-top: 0; border-left: 1px solid var(--seam); order: 2; padding-left: 12px; padding-right: calc(env(safe-area-inset-right) + 12px); }
  .mapview .race-panel .cars { max-height: none; }
  .video-pane { height: 46%; }
}
kbd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; padding: 0 5px; border: 1px solid var(--seam); border-bottom-width: 2px; border-radius: 4px; background: var(--asphalt-2); color: var(--text); }
.keys-hint { margin: 6px 0 0; line-height: 1.9; }
@media (hover: none) { .keys-hint { display: none; } }

/* ---------- v1.6: lists, boards, search ---------- */
.title-row { display: flex; align-items: center; gap: 12px; }
.title-row h1 { margin-bottom: 0; flex: 1; min-width: 0; }
.pin-btn[aria-pressed="true"] { background: var(--text); color: var(--asphalt); border-color: var(--text); }
.pin-mark { font-size: 0.8em; }
.course-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--seam); border-radius: var(--radius-m); overflow: hidden; margin: 14px 0 6px; }
.course-summary > div { background: var(--asphalt-2); padding: 10px 12px; min-width: 0; }
.course-summary b { display: block; font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-summary b time { font-family: var(--display); }
.course-summary span { font-size: 12.5px; color: var(--guardrail); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .course-summary { grid-template-columns: 1fr 1fr; } }
.sort-row { gap: 8px; margin: -6px 0 12px; align-items: center; }
.seg.small-seg button { min-height: 32px; padding: 0 10px; font-size: 13.5px; }
.course-list > li.pinned .item h3 { color: var(--accent-text); }
.search-link { margin-left: auto; }
.page-head .search-link + .btn { margin-left: 0; }
.me-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 10px 0; border-radius: var(--radius-m); background: var(--asphalt-2); border-left: 3px solid var(--centerline); }
#ents .item.me { background: color-mix(in srgb, var(--centerline) 10%, transparent); border-radius: var(--radius-s); padding-left: 8px; padding-right: 8px; }
#ents .rival-btn { background: transparent; border-color: transparent; min-width: 30px; padding: 0 4px; margin-left: -6px; }
#ents .item { gap: 10px; }
#ents .item.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--centerline); } 100% { box-shadow: 0 0 0 0 transparent; } }
.rival-btn { min-width: 34px; padding: 0 8px; }
.rival-btn .star { font-size: 17px; line-height: 1; color: var(--guardrail); }
.rival-btn[aria-pressed="true"] .star { color: var(--centerline); }
.rival-btn span + span { margin-left: 2px; }
a.plain { color: inherit; text-decoration: none; }
.search-form { margin: 0 0 8px; }
.search-form .input { font-size: 17px; }
.class-tag { margin: 0; }

/* explain-this taps */
.info-tap {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 2px; padding: 0; vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--seam); background: var(--asphalt-3); color: var(--guardrail);
  font: italic 600 11px/1 Georgia, 'Times New Roman', serif; cursor: pointer;
}
.info-tap::before { content: ''; position: absolute; inset: -10px; } /* a bigger target than it looks */
.info-tap { position: relative; }
.info-tap:hover, .info-tap:focus-visible { color: var(--text); border-color: var(--guardrail); }
.explain-pop {
  position: absolute; z-index: 300; padding: 10px 12px; border-radius: var(--radius-m); background: var(--asphalt-3); color: var(--text);
  border: 1px solid var(--seam); box-shadow: 0 8px 24px var(--shadow); font-size: 14px; line-height: 1.4; text-transform: none; font-weight: 400; letter-spacing: 0;
}
time.rel { cursor: help; text-decoration: underline dotted color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a time.rel { cursor: inherit; text-decoration: none; }

/* empty states */
.empty-state { padding: 18px 16px; margin: 8px 0; border: 1px dashed var(--seam); border-radius: var(--radius-m); color: var(--guardrail); }
.empty-state p { margin: 0 0 10px; }
.empty-state p:last-child { margin: 0; }

/* loading placeholders */
.sk-wrap { padding-top: 6px; }
.sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--asphalt-2) 0%, var(--asphalt-3) 50%, var(--asphalt-2) 100%); background-size: 200% 100%; animation: sk 1.2s linear infinite; margin: 8px 0; }
.sk-row { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--seam); }
.sk-thumb { width: 64px; height: 64px; flex: none; margin: 0; }
.sk-avatar { width: 84px; height: 84px; border-radius: 50%; flex: none; margin: 0; }
.sk-slip { height: 260px; border-radius: var(--radius-m); }
.sk-hero { height: 220px; border-radius: var(--radius-m); }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* pull to refresh (home-screen app) */
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) - 44px); z-index: 250; margin-left: -80px; width: 160px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 18px; background: var(--asphalt-3); color: var(--text); font-size: 13px; box-shadow: 0 4px 14px var(--shadow); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.ptr.on { opacity: 1; }
.ptr-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--guardrail); }
.ptr.ready .ptr-dot { border-color: var(--centerline); background: var(--centerline); }
.ptr.busy { transform: translateY(70px) !important; }
.ptr.busy .ptr-dot { border-color: var(--centerline); border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.shot-drop { border-radius: var(--radius-m); }
.shot-drop.over { outline: 2px dashed var(--centerline); outline-offset: 4px; }
.shot-btns { gap: 8px; }
.draft-note { margin: 0 0 12px; }

/* ---------- v1.6: share link privacy ---------- */
.sheet-dialog.share-dialog { max-width: min(94vw, 560px); max-height: 90dvh; overflow-y: auto; }
.pv-presets { margin: 2px 0 4px; }
.pv-presets button[disabled] { opacity: 0.55; cursor: default; }
.pv-rows { display: grid; gap: 8px; }
.pv-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; }
.pv-label { font-size: 14px; color: var(--guardrail); }
.pv-seg button { min-height: 34px; padding: 0 10px; font-size: 13.5px; }
.pv-over { gap: 4px 14px; }
.check.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.check.inline input[disabled] + span { opacity: 0.5; }
.pv-notes { margin: 0; padding-left: 18px; }
.pv-notes li + li { margin-top: 4px; }
@media (max-width: 420px) { .pv-row { grid-template-columns: 1fr; gap: 4px; } }
dialog.share-preview { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--asphalt); color: var(--text); }
dialog.share-preview::backdrop { background: rgba(0, 0, 0, 0.6); }
.share-preview-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: var(--asphalt-3); border-bottom: 1px solid var(--seam); }
.share-preview .page { padding-bottom: 40px; }

/* ---------- badge sprites ---------- */
.sprite { display: block; flex: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45)); }
.badge-sprite { flex: none; display: inline-flex; }
.badge { padding: 4px 12px 4px 4px; }
.badge-text small { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge .badge-sprite { margin-top: 2px; }
.ch-item { align-items: flex-start; }
.ch-look { margin-top: 6px; }
.ch-look summary { cursor: pointer; color: var(--guardrail); }
.ch-look form { margin-top: 8px; }
.cb .item { gap: 12px; }
.cb-body { padding: 0 0 16px; display: grid; gap: 14px; }
.cb-body h3 { margin: 0; font-size: 16px; }
.give-list { display: flex; flex-wrap: wrap; gap: 6px 16px; max-height: 220px; overflow-y: auto; padding: 4px 0; }
.sprite-pick { border: 1px solid var(--seam); border-radius: var(--radius-m); padding: 10px 12px; background: var(--asphalt); }
.sp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sp-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sp-tier { position: relative; cursor: pointer; }
.sp-tier input, .sp-icon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-tier span[aria-hidden] { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--sw); border: 2px solid var(--asphalt); box-shadow: 0 0 0 1px var(--seam); }
.sp-tier input:checked + span { box-shadow: 0 0 0 2px var(--text); }
.sp-tier input:focus-visible + span { outline: 2px solid var(--centerline); outline-offset: 2px; }
.sp-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.sp-icon { display: grid; place-items: center; padding: 3px; border-radius: var(--radius-s); cursor: pointer; border: 1px solid transparent; }
.sp-icon:hover { background: var(--asphalt-2); }
.sp-icon:has(input:checked) { border-color: var(--text); background: var(--asphalt-3); }
.sp-icon:has(input:focus-visible) { outline: 2px solid var(--centerline); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- v1.8 ---------- */
/* Uphill/downhill pair on the course page. */
.pair-card { border: 1px solid var(--seam); border-radius: var(--radius-m); padding: 10px 12px; margin: 12px 0; background: var(--asphalt-2); }
.pair-card .row { gap: 10px; align-items: center; }
.pair-arrows { font-size: 22px; line-height: 1; color: var(--accent-text); }
.period-row .seg a { white-space: nowrap; }
.stopwatch { margin-top: 14px; }
/* Settings most drivers leave alone, at the end of a Settings tab. */
details.advanced { margin-top: 28px; border-top: 1px solid var(--seam); padding-top: 4px; }
details.advanced > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary h2 { margin: 0; display: inline; }
details.advanced > summary h2::after { content: ' ▸'; color: var(--guardrail); font-size: 0.8em; }
details.advanced[open] > summary h2::after { content: ' ▾'; }
.checklist { list-style: none; padding: 0; margin: 8px 0; }
.checklist li { padding: 3px 0; color: var(--guardrail); }
.checklist li.ok { color: var(--text); }
.checklist li.ok span { color: var(--ok-text); }
/* Get set up card on the Courses page. */
.setup-card { border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--asphalt-2); padding: 12px 14px; margin: 6px 0 16px; }
.setup-card .row { gap: 10px; align-items: center; }
.setup-bar { height: 4px; border-radius: 2px; background: var(--asphalt-3); margin: 10px 0 4px; overflow: hidden; }
.setup-bar i { display: block; height: 100%; background: var(--centerline); }
.setup-steps { list-style: none; padding: 0; margin: 6px 0 0; }
.setup-steps li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--seam); }
.setup-steps li:first-child { border-top: 0; }
.setup-steps p { margin: 2px 0 0; }
.setup-steps li.done strong { color: var(--guardrail); font-weight: 500; }
.setup-mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--seam); display: grid; place-items: center; font-size: 13px; color: var(--asphalt); }
.setup-steps li.done .setup-mark { background: var(--faster); border-color: var(--faster); }
details.closure-like summary { cursor: pointer; margin-top: 10px; }

/* v1.9: braking and turn-in points (public/js/braking.js) */
.brake-map { width: 100%; height: auto; max-height: 300px; display: block; background: var(--asphalt-2); border-radius: var(--radius-m); margin: 10px 0 4px; }
.brake-map .road { fill: none; stroke: var(--seam); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.brake-map .centre { fill: none; stroke: var(--guardrail); stroke-width: 1.2; stroke-dasharray: 5 6; opacity: .6; }
.brake-map .start { fill: var(--faster); }
.brake-map .bp { fill: #ff6b6b; stroke: var(--asphalt); stroke-width: 1.5; }
.brake-map .tp { fill: #f2c230; stroke: var(--asphalt); stroke-width: 1.5; }
.brake-map .ref { fill: none; stroke-width: 2; }
.brake-map .bp.ref { stroke: #ff6b6b; }
.brake-map .tp.ref { stroke: #f2c230; }
.brake-map .lbl text { fill: var(--text); font: 600 13px var(--body); text-anchor: middle; paint-order: stroke; stroke: var(--asphalt-2); stroke-width: 3px; }
.tbl.brakes small { display: block; font-size: 12px; }
.tbl.brakes .later { color: #ff8f92; }
.tbl.brakes .earlier { color: #7fdcb3; }
:root[data-theme="light"] .brake-map .lbl text { stroke: #fff; }
:root[data-theme="light"] .tbl.brakes .later { color: #c23034; }
:root[data-theme="light"] .tbl.brakes .earlier { color: #17845a; }
.ideal .stats { margin-top: 6px; }
/* v1.9: class filters and section leaderboards (public/js/view-boards.js) */
.class-filters { margin: 10px 0; display: grid; gap: 6px; }
.class-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.class-row > .small { flex-basis: 100%; }
@media (min-width: 720px) { .class-row > .small { flex-basis: auto; min-width: 120px; } }
.section-map { width: 100%; height: auto; max-height: 320px; display: block; background: var(--asphalt-2); border-radius: var(--radius-m); margin: 12px 0 6px; }
.section-map .under { fill: none; stroke: var(--seam); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.section-map .sec { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.section-map .split { fill: var(--text); stroke: var(--asphalt); stroke-width: 2; }
.section-map .start { fill: var(--faster); }
.section-map text { fill: var(--text); font: 600 13px var(--body); text-anchor: middle; paint-order: stroke; stroke: var(--asphalt-2); stroke-width: 3px; }
:root[data-theme="light"] .section-map text { stroke: #fff; }
.sec-board { margin-top: 18px; }
.sec-board h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; }
.sec-key { width: 14px; height: 14px; border-radius: 3px; background: var(--k); flex: none; }
.tbl.brakes td:first-child { white-space: nowrap; padding-right: 8px; }
.tbl.brakes td.r { font-size: 14px; }

/* v2.0: pin types and admin notes (public/js/mapkit.js, public/js/pinicons.js) */
.hazard-pin .hz-dot { width: 18px; height: 18px; display: grid; place-items: center; color: var(--asphalt); }
.hazard-pin .hz-dot .pin-ico { width: 12px; height: 12px; }
.hazard-pin.admin { outline: 2px solid #f2c230; outline-offset: 2px; }
.hazard-pin.admin .hz-dot { border-radius: 3px; transform: rotate(45deg); }
.hazard-pin.admin .hz-dot .pin-ico { transform: rotate(-45deg); }
.hazard-pin.live { border-style: dashed; }
.hazard-pin.stale { opacity: .6; }
.hz-swatch { width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; display: grid; place-items: center; background: var(--hz); color: var(--asphalt); }
.hazard-card.admin .hz-swatch { border-radius: 4px; box-shadow: 0 0 0 2px #f2c230; }
.admin-tag { background: #f2c230; color: #2a2206; }
.hz-votes { margin-top: 6px; gap: 6px; }
.bad-text { color: var(--bad-text); }
.pt-row .pt-handle { color: var(--guardrail); font-size: 12px; letter-spacing: -2px; }
.pt-row.off { opacity: .6; }
.pt-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--hz); color: var(--asphalt); flex: none; }
.pt-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pt-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--seam); background: var(--asphalt-2); color: var(--hz); display: grid; place-items: center; cursor: pointer; }
.pt-icon-btn[aria-pressed="true"] { background: var(--hz); color: var(--asphalt); border-color: var(--text); }

/* v2.0: live map (beta) */
.live-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: #123a2a; color: #d6f5e6; font: 600 14px var(--body); }
.live-bar a { color: inherit; text-decoration: none; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #3fbf8a; box-shadow: 0 0 0 3px rgba(63, 191, 138, .3); flex: none; }
.live-dot[data-s="connecting"] { background: #f2c230; box-shadow: 0 0 0 3px rgba(242, 194, 48, .3); }
.live-dot[data-s="offline"] { background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .3); }
:root[data-theme="light"] .live-bar { background: #d9f3e6; color: #0f4a32; }
.uc { text-align: center; padding: 40px 0; }
.uc-sign { color: #ff9f43; margin-bottom: 8px; }
.uc-list { text-align: left; max-width: 460px; margin: 18px auto; display: grid; gap: 8px; }
.lv-intro { max-width: 520px; display: grid; gap: 14px; }
.lv-notes { display: grid; gap: 6px; padding-left: 18px; }
.live-page { max-width: none; padding: 0; }
.lv-wrap { display: grid; grid-template-rows: 52vh auto; min-height: calc(100vh - var(--tabs-h)); }
@media (min-width: 900px) { .lv-wrap { grid-template-rows: none; grid-template-columns: 1fr 380px; height: calc(100vh - 0px); } .lv-panel { overflow: auto; } }
.lv-map { position: relative; min-height: 300px; }
.lv-top { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 5; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.lv-top > * { pointer-events: auto; }
.lv-panel { padding: 14px 16px 90px; }
.lv-panel h2 { font-size: 18px; margin: 18px 0 8px; }
.lv-status { padding-bottom: 6px; }
.lv-bcast { background: #2b2410; border-left: 4px solid #f2c230; padding: 10px 12px; border-radius: var(--radius-s); margin: 8px 0; }
.lv-alert { background: #4a1416; border-left: 4px solid #e5484d; color: #ffd9da; padding: 12px; border-radius: var(--radius-s); margin: 8px 0; font-size: 16px; }
.lv-up { background: #123a2a; border-left: 4px solid #3fbf8a; padding: 12px; border-radius: var(--radius-s); margin: 8px 0; font-size: 18px; }
:root[data-theme="light"] .lv-bcast { background: #fdf3d4; } :root[data-theme="light"] .lv-alert { background: #fde2e2; color: #6b1013; } :root[data-theme="light"] .lv-up { background: #d9f3e6; }
.lv-road { background: var(--asphalt-2); border-radius: var(--radius-m); padding: 12px; margin: 10px 0; }
.lv-road-btns { gap: 8px; margin-top: 8px; }
.lv-clear { background: #1f6f4c; color: #fff; border-color: #1f6f4c; min-width: 90px; }
.lv-hold { background: #a8282d; color: #fff; border-color: #a8282d; min-width: 90px; }
.lv-car { --st: #e8eaeb; position: relative; width: 26px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer; }
.lv-arrow { position: absolute; inset: 3px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 2px #1c1f22; }
.lv-arrow::after { content: ''; position: absolute; left: 50%; top: -7px; margin-left: -5px; border: 5px solid transparent; border-bottom: 8px solid var(--st); }
.lv-car.me .lv-arrow { box-shadow: 0 0 0 3px #fff; }
.lv-car.stale { opacity: .45; }
.lv-name { position: absolute; left: 50%; top: 27px; transform: translateX(-50%); white-space: nowrap; font: 600 11px var(--body); color: #fff; background: rgba(28, 31, 34, .85); padding: 1px 5px; border-radius: 4px; }
.lv-list .item { width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; }
.lv-drv.on { background: var(--asphalt-2); }
.lv-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--st); flex: none; }
.lv-spec { background: var(--asphalt-2); border-radius: var(--radius-m); padding: 12px; margin: 10px 0; }
.lv-clock { font: 700 44px var(--display); }
.lv-prog { height: 6px; background: var(--seam); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.lv-prog i { display: block; height: 100%; background: #ff6b6b; }
.lv-spec-map { width: 100%; height: 140px; display: block; }
.lv-pin { background: var(--asphalt-2); border-radius: var(--radius-m); padding: 12px; margin: 10px 0; }
.pd-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.pd-type { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--radius-s); border: 2px solid var(--seam); background: var(--asphalt-2); color: var(--hz); cursor: pointer; }
.pd-type span { color: var(--text); font-size: 13px; text-align: center; }
.pd-type small { color: var(--guardrail); font-size: 11px; }
.pd-type[aria-pressed="true"] { border-color: var(--hz); background: var(--asphalt-3); }
.marshal { max-width: 640px; }
.ms-road { text-align: center; font: 800 38px var(--display); padding: 14px; border-radius: var(--radius-m); background: var(--asphalt-2); margin: 10px 0 16px; border: 3px solid var(--seam); }
.ms-label { display: block; font: 600 13px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--guardrail); }
.ms-road small { display: block; font: 500 14px var(--body); color: var(--guardrail); }
.ms-road.clear { border-color: #3fbf8a; color: #7fdcb3; } .ms-road.hold { border-color: #e5484d; color: #ff8f92; }
.ms-btns + div { margin-top: 12px; }
.ms-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-btns button { font: 800 34px var(--display); padding: 34px 0; border-radius: var(--radius-m); border: 0; color: #fff; cursor: pointer; }
.ms-clear { background: #1f6f4c; } .ms-hold { background: #a8282d; }
.ms-runner { background: var(--asphalt-2); border-radius: var(--radius-m); padding: 12px; margin: 8px 0; }
.ms-eta { font: 800 40px var(--display); }
.ms-queue { padding-left: 22px; font-size: 18px; display: grid; gap: 4px; }
.rec-live { background: var(--asphalt-2); border-radius: var(--radius-s); padding: 8px 10px; margin: 6px 0; font-size: 15px; }
.rec-live .rec-up { color: #7fdcb3; font-size: 18px; }
.rec-bcast { margin-top: 6px; border-left: 3px solid #f2c230; padding-left: 8px; }
.rec-mark { background: #2e3338; border: 2px dashed var(--guardrail); color: var(--text); }
main.rec.glance .rec-mark { display: none; }

/* ---------- F1 (v2.1): calendar, live timing and replays (public/js/view-f1.js) ---------- */
.f1-live-chip { display: inline-flex; align-items: center; gap: 5px; background: #e10600; color: #fff; font: 700 12px/1 var(--body); letter-spacing: 0.08em; padding: 4px 7px; border-radius: 4px; margin-right: 6px; vertical-align: middle; flex: none; }
.f1-live-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: f1pulse 1.4s infinite; }
.f1-live-chip.off { background: var(--asphalt-3); color: var(--guardrail); }
.f1-live-chip.off::before { animation: none; background: var(--guardrail); }
@keyframes f1pulse { 50% { opacity: 0.25; } }
.f1-badge { font: italic 800 15px/1 var(--display); background: #e10600; color: #fff; padding: 6px 7px; border-radius: 5px; flex: none; }
.f1-card-box { margin: 0 0 6px; }
.f1-card-box:empty { display: none; }
.f1-hero { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--asphalt-2); margin-bottom: 16px; }
.f1-hero.live { border-color: #e10600; }
.f1-hero h2 { margin: 6px 0 4px; }
.f1-hero p { margin: 0; }
.f1-spoil { margin: 0 0 14px; }
.f1-meeting { border-top: 1px solid var(--seam); }
.f1-meeting > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; }
.f1-meeting > summary::-webkit-details-marker { display: none; }
.f1-meeting > summary .grow { display: flex; flex-direction: column; }
.f1-meeting > summary::after { content: '›'; color: var(--guardrail); font-size: 22px; line-height: 1; transition: transform 0.15s; }
.f1-meeting[open] > summary::after { transform: rotate(90deg); }
.f1-meeting.past > summary strong { color: var(--guardrail); }
.f1-meeting .list { padding: 0 0 10px 12px; }

.f1-title h1 { margin-bottom: 2px; }
.f1-title p { margin: 0; }
.f1-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 12px; background: var(--asphalt-2); border: 1px solid var(--seam); border-radius: var(--radius-m); margin: 12px 0 10px; min-height: 50px; }
.f1-head .tag { margin: 0; }
.f1-stat b { font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.f1-stat.small b { font-size: 16px; }
.f1-flag { display: inline-block; padding: 3px 9px; border-radius: 4px; font-weight: 700; font-size: 14px; background: var(--asphalt-3); color: var(--text); }
.f1-flag.f-green { background: #1f7a4d; color: #fff; }
.f1-flag.f-yellow { background: #f2c230; color: #2a2206; }
.f1-flag.f-sc { background: #ff8a3d; color: #2a1400; }
.f1-flag.f-red { background: #e10600; color: #fff; }
.f1-flag.f-blue { background: #2f6fd6; color: #fff; }
.f1-flag.f-chq { background: #e8eaeb; color: #111; display: inline-flex; align-items: center; gap: 6px; }
.f1-flag.f-chq::before { content: ''; width: 14px; height: 14px; border-radius: 2px; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 7px 7px; flex: none; }
.f1-flag.f-bw { background: linear-gradient(135deg, #fff 50%, #1c1f22 50%); color: #e10600; }
.f1-flag.sm { font-size: 11px; padding: 1px 6px; text-transform: capitalize; flex: none; }
.f1-flag.sm.f-chq::before { width: 10px; height: 10px; background-size: 5px 5px; }
.f1-rain { color: #4fb3ff; }
.f1-transport { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.f1-transport input[type="range"] { min-width: 140px; accent-color: var(--centerline); }
.f1-transport .seg button { min-height: 32px; padding: 0 9px; }
.f1-transport #rtime { min-width: 64px; text-align: right; }
.f1-delay { padding: 12px; border: 1px solid var(--seam); border-radius: var(--radius-m); background: var(--asphalt-2); margin: 0 0 10px; }
.f1-delay input[type="range"] { accent-color: var(--centerline); min-width: 120px; }
.f1-delay #ldv { min-width: 48px; text-align: right; }
.f1-tabs { margin: 2px 0 12px; display: flex; width: 100%; }
.f1-tabs button { flex: 1; padding: 0 8px; }
.w-only { display: none; }
.f1-panel { display: none; min-width: 0; }
.f1[data-view="tower"] .p-tower, .f1[data-view="map"] .p-map, .f1[data-view="rc"] .p-rc, .f1[data-view="charts"] .p-charts, .f1[data-view="tele"] .p-tele { display: block; }
.p-tower { overflow-x: auto; }

.f1-tower { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.f1-tower th { text-align: left; font-size: 12px; color: var(--guardrail); font-weight: 600; padding: 4px 5px; border-bottom: 1px solid var(--seam); white-space: nowrap; }
.f1-tower td { padding: 6px 5px; border-bottom: 1px solid var(--seam); white-space: nowrap; }
.f1-tower tr[data-n] { cursor: pointer; }
.f1-tower tr[data-n]:hover td { background: var(--asphalt-2); }
.f1-tower tr.sel td { background: var(--asphalt-3); }
.f1-tower tr.dim td { opacity: 0.5; }
.f1-tower td.pos { font-family: var(--display); font-weight: 700; font-size: 18px; width: 26px; text-align: right; }
.f1-tower td.bar { width: 4px; min-width: 4px; padding: 0; }
.f1-tower td.drv b { font-family: var(--display); font-size: 18px; letter-spacing: 0.03em; }
.f1-tower .team { color: var(--guardrail); font-size: 12px; margin-left: 8px; }
.f1-tower td.fl { color: #b46cff; font-weight: 700; }
.f1-tower td.sec { color: var(--guardrail); font-size: 13px; }
.f1-tower .w { display: none; }
.f1-ty { display: inline-flex; align-items: center; gap: 5px; }
.f1-cmp { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--c); font: 700 10px/1 var(--body); }
.f1-chip { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; margin-left: 6px; vertical-align: 2px; background: var(--asphalt-3); }
.f1-chip.pit { background: #2f6fd6; color: #fff; }
.f1-chip.out { background: var(--slower); color: #fff; }
.linkish { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.f1-towernote { margin-top: 8px; }

.f1-map { background: var(--asphalt-2); border-radius: var(--radius-m); border: 1px solid var(--seam); overflow: hidden; }
.f1-svg { width: 100%; height: auto; display: block; }
.f1-track-edge { fill: none; stroke: var(--asphalt-3); stroke-width: 16; stroke-linejoin: round; }
.f1-track { fill: none; stroke: var(--guardrail); stroke-width: 3.5; stroke-linejoin: round; opacity: 0.8; }
.f1-start { fill: var(--centerline); }
.f1-car circle { stroke: #111; stroke-width: 2; }
.f1-car text { font: 700 11px var(--body); fill: var(--text); paint-order: stroke; stroke: var(--asphalt-2); stroke-width: 3px; stroke-linejoin: round; }
.f1-car.faded { opacity: 0.28; }
.f1-car.sel circle { stroke: var(--text); stroke-width: 3; }
.f1-car.sel text { font-size: 13px; }
.f1-nomap { padding: 40px 16px; text-align: center; margin: 0; }
.f1-mapnote { margin-top: 6px; }

.f1-wx { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.f1-wx div { background: var(--asphalt-2); border-radius: var(--radius-s); padding: 8px 10px; display: flex; flex-direction: column; }
.f1-wx span { color: var(--guardrail); font-size: 12px; }
.f1-wx b { font-family: var(--display); font-size: 20px; }
.f1-rc { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.f1-rc li { padding: 8px 0; border-top: 1px solid var(--seam); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.f1-rc .when { min-width: 96px; }
.f1-rc .f1-msg { flex: 1 1 220px; font-size: 14px; }
.f1-delay .btn { white-space: normal; }

.f1-pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.f1-pick > div { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.f1-pick select { max-width: 220px; }
.f1-key { width: 16px; height: 4px; border-radius: 2px; display: inline-block; background: var(--ka, var(--centerline)); }
.f1-key.b { background: var(--kb, var(--guardrail)); }
.f1-tstats b { font-size: 22px; }
.f1-gate { padding: 22px; border: 1px dashed var(--seam); border-radius: var(--radius-m); text-align: center; }

@media (min-width: 900px) {
  .f1-tabs { max-width: 440px; }
  .f1-tabs .v-map, .f1-tabs .v-rc { display: none; }
  .n-only { display: none; }
  .w-only { display: inline; }
  .f1-tower td.w, .f1-tower th.w { display: table-cell; }
  .f1-tower span.w { display: inline; }
  .f1-tower { font-size: 15px; }
  .f1-tower td { padding: 6px 7px; }
  .f1[data-view="tower"], .f1[data-view="map"], .f1[data-view="rc"] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "tower map" "tower rc"; gap: 0 22px; align-items: start; }
  .f1[data-view="tower"] .f1-panel.p-tower, .f1[data-view="map"] .f1-panel.p-tower, .f1[data-view="rc"] .f1-panel.p-tower { display: block; grid-area: tower; }
  .f1[data-view="tower"] .f1-panel.p-map, .f1[data-view="map"] .f1-panel.p-map, .f1[data-view="rc"] .f1-panel.p-map { display: block; grid-area: map; }
  .f1[data-view="tower"] .f1-panel.p-rc, .f1[data-view="map"] .f1-panel.p-rc, .f1[data-view="rc"] .f1-panel.p-rc { display: block; grid-area: rc; margin-top: 4px; }
  .f1-rc { max-height: 340px; }
}
:root[data-theme="light"] .f1-cmp { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
@media (min-width: 900px) and (max-width: 1199px) { .f1-tower span.team { display: none; } }