/* MST-TRACKDAY - light, bright, compact race-day look (docs/DESIGN.md) */
:root {
  --card: #fff; --page: #F5F8FF; --panel: #EEF3FF; --line: #DCE4F5;
  --ink: #14213D; --muted: #5A6785;
  --blue: #0066FF; --blue-d: #0052CC; --blue-t: #E6F0FF;
  --pink: #FF2D87; --sun: #FFD60A; --cyan: #00C2FF; --kerb: #E10600;
  --fast: #7B2FF7; --fast-t: #F1E9FF; --pb: #006E33; --pb-t: #DFF7E8; --slow: #A35200; --slow-t: #FFF3D6;
  --r: 10px; --display: "Barlow Condensed", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.35 Inter, system-ui, "Segoe UI", sans-serif; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; margin: 0; line-height: 1.05; }
h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.num, td.t, .t { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms { color: var(--muted); font-weight: 400; }

/* header: white bar, speed stripes, chequered bottom edge */
.top { background: var(--card); position: sticky; top: 0; z-index: 10; }
.top .in { max-width: 1180px; margin: auto; display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; text-transform: uppercase; }
.brand:hover { text-decoration: none; }
.brand b { color: var(--blue); }
.stripes { display: inline-flex; gap: 3px; } .stripes i { width: 7px; height: 20px; transform: skewX(-14deg); border-radius: 2px; }
.stripes i:nth-child(1) { background: var(--blue); } .stripes i:nth-child(2) { background: var(--pink); } .stripes i:nth-child(3) { background: var(--cyan); }
.top nav { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.top nav a { padding: 6px 10px; border-radius: 999px; color: var(--ink); font-weight: 500; font-size: 14px; }
.top nav a:hover, .top nav a.on { background: var(--blue-t); color: var(--blue); text-decoration: none; }
.chequer { height: 8px; background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 8px 8px; opacity: .18; }

main { max-width: 1180px; margin: auto; padding: 12px; }
@media (min-width: 400px) { main { padding: 16px; } }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row.end { justify-content: flex-end; } .grow { flex: 1; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cols { display: grid; gap: 12px; } @media (min-width: 900px) { .cols { grid-template-columns: 340px 1fr; } }

/* hero: bright gradient, slanted bottom, speed stripes */
.hero { position: relative; overflow: hidden; border-radius: var(--r); padding: 22px 16px 34px; color: #fff;
  background: linear-gradient(115deg, #0066FF 0%, #2B7BFF 45%, #00C2FF 100%); clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.hero h1 { font-size: 34px; } @media (min-width: 700px) { .hero h1 { font-size: 46px; } .hero { padding: 30px 28px 44px; } }
.hero p { margin: 6px 0 0; font-size: 16px; opacity: .95; max-width: 560px; }
.hero .bigstripes { position: absolute; right: -10px; top: 0; bottom: 0; display: flex; gap: 10px; opacity: .9; }
.hero .bigstripes i { width: 26px; transform: skewX(-14deg); } .hero .bigstripes i:nth-child(1) { background: var(--sun); } .hero .bigstripes i:nth-child(2) { background: var(--pink); } .hero .bigstripes i:nth-child(3) { background: #fff; opacity: .5; }
.hero .flag { position: absolute; right: 110px; top: 14px; width: 64px; height: 40px; opacity: .25; background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 16px 16px; transform: skewX(-14deg); }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.card.tight { padding: 0; overflow: hidden; } .card > h2:first-child, .card > h3:first-child { margin-bottom: 8px; }
.card.kerb { border-top: 0; position: relative; padding-top: 16px; }
.card.kerb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--r) var(--r) 0 0; background: repeating-linear-gradient(90deg, var(--kerb) 0 12px, #fff 12px 24px); }
.card.link { display: block; color: var(--ink); transition: transform .08s, box-shadow .08s; } .card.link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,102,255,.12); border-color: #B9CCF2; }
.tile { display: flex; flex-direction: column; gap: 2px; } .tile .big { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; line-height: 1; }

/* forms + buttons: 40px, no oversizing */
label { display: block; font-size: 13px; font-weight: 600; margin: 8px 0 3px; }
input, select, textarea { width: 100%; height: 40px; padding: 6px 10px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
textarea { height: auto; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: transparent; }
input[type=checkbox], input[type=radio] { width: auto; height: auto; accent-color: var(--blue); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 14px; margin: 8px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: 0; border-radius: 8px; font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; background: var(--blue); color: #fff; position: relative; overflow: hidden; white-space: nowrap; }
.btn:hover { background: var(--blue-d); text-decoration: none; }
.btn.go::after { content: ""; position: absolute; right: -6px; top: 0; bottom: 0; width: 14px; background: var(--sun); transform: skewX(-14deg); }
.btn.go { padding-right: 24px; }
.btn.alt { background: var(--blue-t); color: var(--blue); } .btn.alt:hover { background: #D6E6FF; }
.btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--line); }
.btn.warn { background: #FFE8E8; color: var(--kerb); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.chip.on, .chip:hover { background: var(--blue); border-color: var(--blue); color: #fff; text-decoration: none; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--muted); }
.pill.ok { background: var(--pb-t); color: var(--pb); } .pill.bad { background: #FFE8E8; color: var(--kerb); } .pill.warn { background: var(--slow-t); color: var(--slow); } .pill.blue { background: var(--blue-t); color: var(--blue); }
.alert { padding: 8px 12px; border-radius: 8px; background: var(--blue-t); color: var(--blue-d); font-size: 14px; } .alert.bad { background: #FFE8E8; color: var(--kerb); } .alert.ok { background: var(--pb-t); color: var(--pb); }

/* tables: dense, light */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; }
.tbl td { padding: 6px 8px; border-bottom: 1px solid #EEF2FA; height: 36px; }
.tbl tr:nth-child(even) td { background: #FAFCFF; } .tbl td.r, .tbl th.r { text-align: right; }
.tbl tr.me td { background: var(--blue-t) !important; } .tbl tr.me td:first-child { box-shadow: inset 3px 0 var(--blue); }
.tbl tr.dim td { color: var(--muted); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tc { display: inline-block; padding: 1px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.tc.fast { background: var(--fast-t); color: var(--fast); font-weight: 700; } .tc.fast::before { content: "◆ "; font-size: 9px; }
.tc.pb { background: var(--pb-t); color: var(--pb); font-weight: 600; } .tc.pb::before { content: "▲ "; font-size: 9px; }
.tc.slow { background: var(--slow-t); color: var(--slow); }
.lapbar { height: 3px; background: var(--blue); border-radius: 2px; opacity: .55; margin-top: 2px; }

/* roundel */
.rd { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 15px; }
.rd.p1 { background: #FFD60A; border-color: #C9A400; } .rd.p2 { background: #E3E8F2; border-color: #9AA6BD; } .rd.p3 { background: #F4C9A0; border-color: #B97A43; }

/* heat map */
.heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.heat th { font-size: 10px; font-weight: 600; color: var(--muted); padding: 2px 4px; text-transform: uppercase; white-space: nowrap; }
.heat td { padding: 3px 5px; border-radius: 4px; text-align: right; font-variant-numeric: tabular-nums; min-width: 46px; white-space: nowrap; }
.heat td.lap { background: transparent; text-align: left; font-weight: 700; min-width: 24px; }
.heat td.tot { font-weight: 700; } .heat td.na { background: #F1F4FA; color: #B3BDD1; }
.heat td.fastest { outline: 2px solid var(--fast); outline-offset: -2px; font-weight: 700; }
.heat tr.pit td { opacity: .45; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend .ramp { width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #00C853, #9BE15D, #FFE45C, #FFA43B, #FF5A4E); }

/* start lights (waiting / loading) */
.lights { display: inline-flex; gap: 6px; } .lights i { width: 14px; height: 14px; border-radius: 50%; background: #E3E8F2; animation: light 3s infinite; }
.lights i:nth-child(2) { animation-delay: .4s; } .lights i:nth-child(3) { animation-delay: .8s; } .lights i:nth-child(4) { animation-delay: 1.2s; } .lights i:nth-child(5) { animation-delay: 1.6s; }
@keyframes light { 0%, 10% { background: #E3E8F2; } 15%, 70% { background: var(--kerb); } 75%, 100% { background: #00C853; } }

/* dot plot: whole field on one line */
.dots { position: relative; height: 34px; margin: 6px 4px 0; } .dots::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--line); }
.dots i { position: absolute; top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #B9C6E0; border: 2px solid #fff; }
.dots i.me { background: var(--blue); width: 16px; height: 16px; top: 9px; margin-left: -8px; z-index: 2; } .dots i.fast { background: #A855F7; }
.dots span { position: absolute; top: -2px; font-size: 10px; color: var(--muted); transform: translateX(-50%); }

/* track outline */
.trackmap { width: 100%; max-height: 220px; } .trackmap path { fill: none; stroke: var(--blue); stroke-width: 3; opacity: .35; stroke-linejoin: round; }

.qr { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: var(--r); border: 1px solid var(--line); }
.ref { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 40px; letter-spacing: .08em; color: var(--blue); }
.foot { max-width: 1180px; margin: 24px auto 0; padding: 12px; color: var(--muted); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.hide-sm { } @media (max-width: 599px) { .hide-sm { display: none; } }
.only-sm { } @media (min-width: 600px) { .only-sm { display: none; } }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 10px; overflow-x: auto; }
.tabs a { padding: 8px 12px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--blue); border-bottom-color: var(--blue); } .tabs a:hover { text-decoration: none; color: var(--blue); }

/* fixes after first screenshots */
.heat td.best { background: var(--pb-t); color: var(--pb); font-weight: 600; }
.heat td.lap { position: sticky; left: 0; background: #fff; z-index: 1; }
.heat th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
@media (max-width: 599px) {
  .top .in { padding: 6px 10px; gap: 6px; }
  .brand { font-size: 18px; } .stripes i { width: 5px; height: 16px; }
  .top nav { flex-wrap: nowrap; gap: 0; } .top nav a { padding: 5px 7px; font-size: 13px; }
  .hero .bigstripes { right: -30px; gap: 6px; } .hero .bigstripes i { width: 14px; } .hero .flag { display: none; }
  .hero p { max-width: 82%; }
  .tbl { font-size: 13px; } .tbl td { padding: 5px 6px; } .tbl th { padding: 5px 6px; }
}

.tiles { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 599px) { .tiles .card { padding: 10px; } .tile .big { font-size: 26px; } .tiles .small { font-size: 12px; } }

.tbl input, .tbl select { font-size: 14px; padding: 2px 6px; }

/* RaceDay phase 1: group colours, race pill, compact organiser tables */
.gdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); vertical-align: -1px; margin-right: 5px; flex: none; }
.pill.race { background: #FFE8E8; color: var(--kerb); }
.tbl select.inline, .tbl input.inline { height: 30px; padding: 0 6px; font-size: 13px; width: auto; }
.gcard { border-left: 5px solid var(--line); }

/* admin latency meter (bottom-right) */
#lat { position: fixed; right: 8px; bottom: 8px; z-index: 50; display: flex; align-items: center; gap: 6px; font-size: 12px; }
#lat button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
#lat span:empty { display: none; }
#lat span { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--muted); border-radius: 8px; padding: 4px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); font-variant-numeric: tabular-nums; max-width: 260px; }
#lat span small { display: block; color: var(--muted); font-size: 11px; }
#lat[data-s=ok] span { border-left-color: #16A34A; } #lat[data-s=warn] span { border-left-color: #F59E0B; } #lat[data-s=bad] span { border-left-color: var(--kerb); }
#lat.on button { background: var(--blue); color: #fff; border-color: var(--blue); }

/* live stream: the LIVE pill greys out when the stream drops (it reconnects + catches up by itself) */
.livepill.stale { background: var(--panel); color: var(--muted); }
td.eta { color: var(--muted); font-size: 12px; } td.eta.due { color: var(--pb); font-weight: 700; }

/* track map */
.mapcard { padding: 6px; }
#tmap { width: 100%; height: auto; display: block; max-height: 60vh; }
#tmap .trk { fill: none; stroke: #14213D; stroke-width: 22; stroke-linejoin: round; stroke-linecap: round; }
#tmap .trk-c { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 8 10; opacity: .6; }
#tmap .tl circle { fill: #fff; stroke: var(--blue); stroke-width: 2; } #tmap .tl.main circle { fill: var(--kerb); stroke: #fff; }
#tmap .tl text { font: 600 10px Inter, sans-serif; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: #F5F8FF; stroke-width: 3px; }
#tmap .car circle { fill: #fff; stroke: var(--blue); stroke-width: 3; }
#tmap .car text { font: 800 italic 10px "Barlow Condensed", sans-serif; fill: #14213D; text-anchor: middle; dominant-baseline: central; }
#tmap .car.me circle { fill: var(--blue); stroke: #fff; } #tmap .car.me text { fill: #fff; }
body.rally #tmap .trk { stroke: #0B0B0F; } body.rally #tmap .car circle { stroke: #E10600; }