/* Design tokens and components follow the reference board: one page, a tab per
   race, a headline that leads with the margin, and a table where every town
   carries the source its numbers came from. */
:root{
 --ground:#f1f3f5; --surface:#ffffff; --raised:#e8ecef;
 --ink:#13181c; --muted:#5f6b74; --faint:#8b959d;
 --line:rgba(25,40,52,.13); --line2:rgba(25,40,52,.07);
 --ap:#3a6ea8; --ap-bg:rgba(58,110,168,.13);
 --dd:#b0730f; --dd-bg:rgba(176,115,15,.15);
 --both:#177a61; --both-bg:rgba(23,122,97,.14);
 --c1:#177a61; --c2:#6469d0; --c3:#93a71a;
 --flag:#b0730f; --flag-bg:rgba(176,115,15,.09);
 color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --ground:#0d1012; --surface:#161a1e; --raised:#1e242a;
 --ink:#e6ebef; --muted:#94a0a9; --faint:#6c7880;
 --line:rgba(160,190,210,.16); --line2:rgba(160,190,210,.08);
 --ap:#7aa9de; --ap-bg:rgba(122,169,222,.15);
 --dd:#e0a344; --dd-bg:rgba(224,163,68,.15);
 --both:#3fae8c; --both-bg:rgba(63,174,140,.15);
 --c1:#3fae8c; --c2:#8e93e8; --c3:#b8cd35;
 --flag:#e0a344; --flag-bg:rgba(224,163,68,.10);
}}
:root[data-theme="dark"]{
 --ground:#0d1012; --surface:#161a1e; --raised:#1e242a;
 --ink:#e6ebef; --muted:#94a0a9; --faint:#6c7880;
 --line:rgba(160,190,210,.16); --line2:rgba(160,190,210,.08);
 --ap:#7aa9de; --ap-bg:rgba(122,169,222,.15);
 --dd:#e0a344; --dd-bg:rgba(224,163,68,.15);
 --both:#3fae8c; --both-bg:rgba(63,174,140,.15);
 --c1:#3fae8c; --c2:#8e93e8; --c3:#b8cd35;
 --flag:#e0a344; --flag-bg:rgba(224,163,68,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
 font:15px/1.5 "Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.shell{max-width:940px;margin:0 auto;padding:22px 18px 60px}
.masthead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
 padding-bottom:12px;border-bottom:2px solid var(--ink)}
h1{font-family:Archivo,sans-serif;font-weight:700;font-size:23px;letter-spacing:-.015em;margin:0}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.stamp{margin-left:auto;font-size:11.5px;color:var(--muted);text-align:right;line-height:1.4}

.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.tab{font-family:Archivo,sans-serif;font-weight:600;font-size:13px;padding:7px 15px;border-radius:2px;
 border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;letter-spacing:.01em}
.tab[aria-selected="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--c2);outline-offset:2px}
.tab .tnum{opacity:.65;font-weight:400;margin-left:6px;font-size:11.5px}

/* Two levels of selector: state first, then race within it. The state row is
   the heavier of the two so the hierarchy reads at a glance. */
.tabs.states .tab{font-size:14px;padding:8px 17px}
.statehead{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
 color:var(--faint);margin:18px 0 0}
.state-panel > .tabs{margin-top:9px}
.state-panel > .tabs .tab{font-size:12.5px;padding:6px 13px}

.headline{margin:22px 0 4px;font-family:Archivo,sans-serif;font-weight:700;
 font-size:clamp(30px,7vw,44px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.headline .amt{color:var(--c1)}
.subhead{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.called{display:inline-block;font-family:"Public Sans",sans-serif;font-size:11px;font-weight:700;
 letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--ground);
 padding:3px 8px;border-radius:2px;margin-left:10px;vertical-align:middle;letter-spacing:.07em}

.progress{margin:0 0 22px}
.pbar{display:flex;height:9px;border-radius:1px;overflow:hidden;background:var(--raised)}
.pbar i{display:block}
.pkey{display:flex;flex-wrap:wrap;gap:5px 18px;margin-top:7px;font-size:11.5px;color:var(--muted)}
.pkey b{color:var(--ink);font-weight:600}
.sub{font-size:12.5px;color:var(--muted);margin:0 0 14px}

.cands{border-top:1px solid var(--line);margin-bottom:8px}
.crow{display:grid;grid-template-columns:1fr auto auto;gap:4px 14px;align-items:baseline;
 padding:11px 0 9px;border-bottom:1px solid var(--line2)}
.cname{font-family:Archivo,sans-serif;font-weight:600;font-size:16px}
.cvote{font-weight:600;font-size:15px}
.cpct{color:var(--muted);font-size:13px;min-width:52px;text-align:right}
.cbar{grid-column:1/-1;height:5px;background:var(--raised);border-radius:1px;overflow:hidden;margin-top:3px}
.cbar i{display:block;height:100%}
.minor{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted);padding:9px 0 0}

h2{font-family:Archivo,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:var(--muted);margin:32px 0 10px}
.note{background:var(--flag-bg);border-left:3px solid var(--flag);padding:11px 14px;
 font-size:13px;line-height:1.5;margin:0 0 12px;border-radius:0 2px 2px 0}
.note b{font-weight:700}
.empty{border:1px dashed var(--line);border-radius:3px;padding:30px;text-align:center;
 color:var(--muted);font-size:13.5px;margin:22px 0}

.wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
th,td{padding:6px 9px;text-align:right;border-bottom:1px solid var(--line2);white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
thead th{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 color:var(--muted);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ground)}
tbody tr.pending td{color:var(--faint)}
.pill{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.07em;
 padding:2px 6px;border-radius:2px;text-transform:uppercase}
.pill.ap{background:var(--ap-bg);color:var(--ap)}
.pill.ddhq{background:var(--dd-bg);color:var(--dd)}
.pill.both{background:var(--both-bg);color:var(--both)}
.pill.official{background:var(--ink);color:var(--ground)}
.dash{color:var(--faint)}
.sub2{display:block;font-size:10.5px;color:var(--muted);font-weight:400;line-height:1.25}
.meter{display:inline-block;width:30px;height:4px;background:var(--raised);border-radius:1px;
 vertical-align:middle;margin-left:7px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--muted)}
td.partial{color:var(--flag);font-weight:600}
td.partial .meter i{background:var(--flag)}

.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
 font-size:12px;line-height:1.6;color:var(--muted)}
.foot b{color:var(--ink);font-weight:600}
.foot p{margin:0 0 9px}
@media (max-width:560px){
 .stamp{margin-left:0;text-align:left;width:100%}
 /* Ten races stack into ten full-width rows on a phone, pushing every result
    below the fold. Keep the tabs on one swipeable line instead. */
 .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:5px;scrollbar-width:none}
 .tabs::-webkit-scrollbar{display:none}
 .tab{flex:0 0 auto;white-space:nowrap}
}