:root{
  --live:#e60000;
  --rep:#ff3333; --rep-lean:rgb(255,163,163);
  --dem:#3ab3ef; --dem-lean:rgb(166,221,248);
  --noel:#727272;
  --oth:#ff9900; --oth-lean:#ffc266;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  /* Balance-of-power bar colours (same as widget.html): two shades per party plus one for no result, same in light and dark */
  --bar-dem-won:rgb(58,179,239); --bar-rep-won:rgb(255,51,51);
  --bar-dem-lead:rgb(166,221,248); --bar-rep-lead:rgb(255,163,163); --bar-none:rgb(211,212,210);
  /* Independents: swap in house colours here if there are official ones */
  --bar-oth-won:#ff9900; --bar-oth-lead:#ffc266;
}
@supports (color:color(srgb 1 1 1)){ :root{--bar-dem-lead:color(srgb 0.652353 0.865882 0.971765); --bar-rep-lead:color(srgb 1 0.64 0.64); --dem-lean:color(srgb 0.652353 0.865882 0.971765); --rep-lean:color(srgb 1 0.64 0.64)} }
/* Dark (default) */
body{
  color-scheme:dark;
  --bg:#29292b; --panel:#333335; --panel-2:#3d3d40; --tab-off:#2f2f31; --line:#4a4a4e;
  --text:#f2f2f4; --muted:#b3b3b9; --faint:#8b8b92;
  --empty:#4b4b4f; --basemap:rgba(255,255,255,.2); --mapline:#29292b; --stline:#86868c; --notup:#727272; --head:#f2f2f4;
  --dem-ink:#3ab3ef; --rep-ink:#ff4d4d; --oth-ink:#ff9900;
}
body[data-mode="light"]{
  color-scheme:light;
  --bg:#ffffff; --panel:#ffffff; --panel-2:#e8e8eb; --tab-off:#f7f7f9; --line:#d5d5da;
  --text:#1c1c1e; --muted:#55555c; --faint:#77777f;
  --empty:#d3d4d2; --basemap:rgba(255,255,255,.2); --mapline:#ffffff; --stline:#b4b4ba; --notup:#ececee; --head:#333333;
  --dem-ink:#0a6a9e; --rep-ink:#d11a1a; --oth-ink:#9a5c00;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums;padding-inline:16px;padding-block:0 40px;transition:background .25s}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--dem);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Header ---------- */
.head{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-block:22px 0}
.head + .ribbons{margin-top:-10px}
.head-c{display:flex;flex-direction:column;align-items:center;gap:6px}
.hctl{position:absolute;top:31px;right:0;display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--panel)}
.lang a{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;color:var(--muted);text-decoration:none;line-height:1.35}
.lang a[lang="ar"]{font-family:Tahoma,Arial,sans-serif;font-size:12.5px}
.lang a[href]:hover{color:var(--text)}
.lang a[aria-current]{background:var(--text);color:var(--bg)}
.aj-logo{position:absolute;top:16px;left:0;display:block;line-height:0;border-radius:2px}
.aj-logo svg{display:block;height:60px;width:auto}
.aj-logo:focus-visible{outline:2px solid var(--text);outline-offset:3px}
/* Tablet and phone: logo top left, language and light/dark switches top right, title below */
@media (max-width:900px){
  .head{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"logo ctl" "c c";align-items:center;gap:12px 10px}
  .aj-logo{grid-area:logo;position:static}
  .hctl{grid-area:ctl;position:static;justify-self:end;gap:8px}
  .head-c{grid-area:c}
}
@media (max-width:359px){ .aj-logo svg{height:50px} } /* 60px logo + switches don't fit on 320px screens */
@media (max-width:640px){
  .head .mode{padding:3px;gap:0}
  .head .mode #modeTxt{display:none}
  .mode .knob{width:30px;height:18px}
  .mode .knob::after{width:12px;height:12px}
  body[data-mode="light"] .mode .knob::after{transform:translateX(12px)}
  .lang a{padding:2px 8px;font-size:11.5px}
}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.src{margin:-8px 0 0;font-size:11.5px;color:var(--muted);font-weight:500;text-align:right}
.hmeta{margin:0;display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;color:var(--muted);font-weight:500}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--live)}
.live i{width:9px;height:9px;border-radius:50%;background:var(--live);animation:livepulse 1.6s ease-out infinite}
.live.stale{color:var(--muted)} .live.stale i{background:var(--faint);animation:none}
@keyframes livepulse{0%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 60%,transparent)}50%{opacity:.35}70%{box-shadow:0 0 0 6px transparent}100%{opacity:1;box-shadow:0 0 0 0 transparent}}
h1{margin:0 0 4px;font-family:var(--serif);color:var(--head);font-weight:700;font-size:34px;line-height:1.05;letter-spacing:-.01em;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mode{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 4px;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted)}
.mode .knob{width:34px;height:20px;border-radius:999px;background:var(--panel-2);position:relative;border:1px solid var(--line)}
.mode .knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text);transition:transform .2s}
body[data-mode="light"] .mode .knob::after{transform:translateX(14px)}

.clock{font-weight:700;font-size:16px}
.clock small{font-size:11px;color:var(--muted);font-weight:600;margin-left:3px}
.btn{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:6px 11px;font-weight:600;font-size:12.5px;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{background:var(--panel-2);border:0;border-right:1px solid var(--line);padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
select{font-size:12.5px;font-weight:600;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:5px 8px}

/* ---------- Ribbons ---------- */
/* ---------- Balance-of-power ribbons: same styling as widget.html, one layout at every width ---------- */
.ribbons{display:flex;flex-direction:column;gap:6px;width:100%;max-width:1240px;margin-inline:auto}
.rb{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 12px 6px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"name name name" "d bar r" "foot foot foot";gap:3px 14px;align-items:center;min-width:0;overflow:hidden}
.rb-name{grid-area:name;display:flex;justify-content:center;min-width:0}
.rb-name h2{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;padding:1px 8px;border-radius:3px;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rb-name h2.D,.rb-name h2.R{letter-spacing:.03em;font-size:12px}
.rb-name h2.D{background:var(--dem);border-color:var(--dem);color:#06202e}
.rb-name h2.R{background:var(--rep);border-color:var(--rep);color:#fff}
.rb-name h2.N{background:var(--muted);border-color:var(--muted);color:var(--panel)}
.rb-n{display:flex;flex-direction:column;line-height:1;gap:3px;min-width:0;white-space:nowrap}
.rb-n b{font-weight:700;font-size:26px;letter-spacing:-.01em}
.rb-n small{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.rb-n.d{grid-area:d} .rb-n.d b{color:var(--dem-ink)}
.rb-n.r{grid-area:r;text-align:right;align-items:flex-end} .rb-n.r b{color:var(--rep-ink)}
.bar{grid-area:bar;position:relative;height:20px;display:flex;background:var(--bar-none);border-radius:3px;margin-top:13px}
.bar i{display:block;height:100%;transition:width .5s ease}
/* Segments stay hidden until the first data arrives, so nothing (e.g. the 3px independents block) flashes on load */
.bar:not(.ready) i{display:none}
/* Gaps either side of the independents block, in the panel colour; independents never shrink below 3px so one seat stays visible */
.bar i.gap{width:2px;flex:0 0 2px;background:var(--panel);transition:none}
.bar i.c-oth,.bar i.c-othl{min-width:3px;flex-shrink:0;position:relative;z-index:1} /* drawn over the majority line so it is never hidden */
.bar i:first-child{border-radius:3px 0 0 3px}
.bar i:last-of-type{border-radius:0 3px 3px 0}
.mk{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);margin-inline-start:-1px}
.mk span{position:absolute;bottom:96%;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;white-space:nowrap;padding-bottom:0px}
.rb-foot{grid-area:foot;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;min-width:0}
.rb-foot>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rb-foot .fd{text-align:left} .rb-foot .fm{text-align:center} .rb-foot .fr{text-align:right}
.rb-foot b{color:var(--text);font-weight:700}
/* Leading counts use the same colour as the leading segment of the bar */
.rb-foot .fd b{color:var(--bar-dem-lead)} .rb-foot .fr b{color:var(--bar-rep-lead)}
.rb-foot b.iw{color:var(--bar-oth-won)} .rb-foot b.il{color:var(--bar-oth-lead)}
.bar .c-dem{background:var(--bar-dem-won)} .bar .c-deml{background:var(--bar-dem-lead)} .bar .c-emp{background:var(--bar-none)}
.bar .c-rep{background:var(--bar-rep-won)} .bar .c-repl{background:var(--bar-rep-lead)} .bar .c-oth{background:var(--bar-oth-won)} .bar .c-othl{background:var(--bar-oth-lead)}

/* ---------- Map module (tabbed) ---------- */
.mod{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px;background:var(--bg);padding-top:0}
.tab{background:var(--tab-off);border:0;padding:18px 10px;margin-bottom:14px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);cursor:pointer;line-height:1.35}
.tab[aria-selected="true"]{background:var(--panel-2);color:var(--text);margin-bottom:0;padding-bottom:32px}
.tab .short{display:none}
.subtabs{display:flex;justify-content:center;align-items:stretch;background:var(--panel-2);padding:14px 12px}
.subtabs[hidden]{display:none}
.stab{background:none;border:0;cursor:pointer;font-size:15px;font-weight:500;letter-spacing:.03em;color:var(--faint);padding:3px 22px}
.stab[aria-selected="true"]{color:var(--text);font-weight:700}
.subtabs .sep{width:4px;background:var(--bg);border-radius:1px}

.stage{display:grid;grid-template-columns:1fr;background:var(--bg)}
.mapbox{position:relative;padding:12px 8px 8px;min-width:0}
.mapbox svg{display:block;width:100%;height:auto}
.mapbox svg[hidden]{display:none}
.hx{stroke:var(--mapline);stroke-width:.8;cursor:pointer;transition:fill .35s}
.hx:hover{stroke:var(--text);stroke-width:1.6}
.hx.sel{stroke:var(--text);stroke-width:2.6}
.st{stroke:var(--stline);stroke-width:.7;stroke-linejoin:round;transition:fill .35s}
.st.clk{cursor:pointer}
.st.clk:hover{stroke:var(--text);stroke-width:1.8}
.st.sel{stroke:var(--text);stroke-width:2.6}
.brd{fill:none;stroke:var(--bg);stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.lab{font:700 13px var(--font);fill:#fff;stroke:rgba(0,0,0,.55);stroke-width:2.6px;paint-order:stroke;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.insetlab{font:500 12px var(--font);fill:var(--muted);text-anchor:middle;pointer-events:none}
.tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.28);min-width:170px;z-index:3}
.tip b{display:block;font-size:12.5px;margin-bottom:2px}
.hint{font-size:12px;color:var(--muted);text-align:center;padding:10px 10px 0;margin:0 auto}

.side{background:var(--panel);padding:6px 18px 22px;min-width:0}
.side .sc-sel{max-width:880px;margin:0 auto;border-top:1px solid var(--line);padding-top:14px}
.sc{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:560px){.side{padding-top:4px;padding-bottom:16px}}
.side h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12px;font-weight:500}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:14px;height:14px;border-radius:3px;flex:none}
.sum{display:flex;gap:10px}
.sum div{flex:1;background:var(--panel-2);border-radius:6px;padding:8px 10px}
.sum b{display:block;font-size:22px;font-weight:700;line-height:1.1}
.sum small{font-size:11px;color:var(--muted);font-weight:600}
.sum .d b{color:var(--dem-ink)} .sum .r b{color:var(--rep-ink)} .sum .o b{color:var(--oth-ink)}

/* race detail card */
.card{background:var(--panel-2);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card-h b{font-size:15px;font-weight:700;line-height:1.2}
.card-h small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px}
.chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:3px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.wD{background:var(--dem);border-color:var(--dem);color:#06202e}
.chip.wR{background:var(--rep);border-color:var(--rep);color:#fff}
.chip.wI{background:var(--oth);border-color:var(--oth);color:#1c1300}
.chip.lD{border-color:var(--dem);color:var(--dem-ink)}
.chip.lR{border-color:var(--rep);color:var(--rep-ink)}
.chip.lI{border-color:var(--oth);color:var(--oth-ink)}
.chip.flip{background:var(--text);border-color:var(--text);color:var(--bg)}
.cand{display:grid;grid-template-columns:40px 1fr auto;gap:4px 10px;align-items:center}
.ava{width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2.5px var(--ring,var(--line));grid-row:span 2;background:var(--panel)}
.ava svg,.ava img{width:100%;height:100%;display:block;object-fit:cover}
.ava .hd{fill:var(--faint)}
.cand .nm{font-size:13px;font-weight:600;line-height:1.2}
.cand .nm small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.cand .pc{font-size:17px;font-weight:700;text-align:right;line-height:1}
.cand .vt{font-size:11.5px;color:var(--muted);text-align:right}
.cand .cb{grid-column:2/4;height:5px;background:var(--bg);border-radius:3px;overflow:hidden}
.cand .cb i{display:block;height:100%}
.cand.win .pc::before{content:"✓ ";font-size:13px}
.inbar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);font-weight:600}
.inbar span.t{flex:1;height:4px;background:var(--bg);border-radius:2px;overflow:hidden}
.inbar span.t i{display:block;height:100%;background:var(--muted)}

/* paths to victory */
.paths{display:flex;flex-direction:column;gap:12px}
.lede{margin:0;font-size:12.5px;color:var(--muted)}
.need{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.need div{background:var(--panel-2);border-radius:6px;padding:8px 10px}
.need b{display:block;font-size:24px;font-weight:700;line-height:1.1}
.need .d b{color:var(--dem-ink)} .need .r b{color:var(--rep-ink)}
.need small{font-size:11px;color:var(--muted);font-weight:600;line-height:1.3;display:block}
.pbar{position:relative;height:18px;display:flex;background:var(--empty);border-radius:3px;margin-top:12px}
.pbar i{display:block;height:100%}
.odds{font-size:12px;color:var(--muted);line-height:1.5}
.odds b{color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:5px;max-height:260px;overflow-y:auto;padding:2px}
.pk{border:1px solid var(--line);background:var(--panel-2);border-radius:4px;padding:4px 7px;font-size:11.5px;font-weight:700;cursor:pointer;min-width:52px}
.pk.D{background:var(--dem);border-color:var(--dem);color:#06202e}
.pk.I{background:var(--oth);border-color:var(--oth);color:#1c1300}
.pk.R{background:var(--rep);border-color:var(--rep);color:#fff}
.pk .l{display:block;font-size:9.5px;font-weight:600;opacity:.8}

/* paths to victory: text under the map */
.pathx{max-width:960px;margin:6px auto 0;padding:8px 8px 0;display:flex;flex-direction:column;gap:8px;text-align:center}
.pathx[hidden]{display:none}
.pathx h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* path to victory: what each side still needs, stacked */
.pv{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:18px;font-weight:600;margin-top:4px}
.pv .d{color:var(--dem-ink)} .pv .r{color:var(--rep-ink)}
.pv b{font-weight:800}
.pv-u{margin:2px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:600;color:var(--muted)}
.pv-u b{color:var(--text);font-weight:800}
@media (max-width:640px){.pv{font-size:15px}.pv-u{font-size:14px}}
.px-row{display:grid;grid-template-columns:1fr auto 1fr;gap:6px 14px;align-items:center;font-size:15px;font-weight:600}
.px-row .m{display:inline-flex;align-items:center;gap:6px}
/* legend: hexagon swatches grouped under each side */
.lg{display:grid;grid-template-columns:1fr auto 1fr;gap:6px 24px;align-items:start;font-size:13px;font-weight:500;margin-top:14px}
.lg>div{display:flex;flex-direction:column;gap:6px}
.lg-d{align-items:flex-start} .lg-r{align-items:flex-end}
.lg-m{align-items:flex-start;justify-self:center}
.lg span{display:inline-flex;align-items:center;gap:8px}
.lg-r span{flex-direction:row-reverse}
.hxi{display:inline-block;flex:none;width:16px;height:18px;background:var(--c);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);position:relative}
.hxi.out::after{content:"";position:absolute;inset:2.5px 2.2px;background:var(--panel);clip-path:inherit}
.hx.flip{stroke:var(--text);stroke-width:2.2}
.st.flip{stroke:var(--text);stroke-width:2.2}
@media (max-width:640px){.lg{gap:6px 10px;font-size:12px}}
.px-row .d{text-align:left;color:var(--dem-ink)} .px-row .r{text-align:right;color:var(--rep-ink)} .px-row .m{color:var(--muted)}
.px-row b{font-weight:800}
@media (max-width:640px){.px-row{grid-template-columns:1fr;text-align:center;font-size:14px}.px-row .d,.px-row .r{text-align:center}.px-row .m{justify-content:center}}

/* past results / explainer replace the map and side panel */
.alt{display:none;background:var(--panel);padding:22px 18px 26px}
.stage.alt-on .mapbox,.stage.alt-on .side{display:none}
.stage.alt-on .alt{display:block}
.past{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.pr-key{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pr-key .d{color:var(--dem-ink)} .pr-key .r{color:var(--rep-ink)}
.pr{display:flex;flex-direction:column;gap:6px}
.pr-n{display:flex;justify-content:space-between;align-items:baseline}
.pr-n b{font-size:30px;font-weight:700;line-height:1}
.pr-n b.d{color:var(--dem-ink)} .pr-n b.r{color:var(--rep-ink)}
.pr-n .yr{font-size:20px;font-weight:800;letter-spacing:.02em}
.pr-bar{position:relative;height:14px;display:flex;justify-content:space-between;background:var(--bar-none);border-radius:3px}
.pr-bar i{display:block;height:100%}
.pr-bar i.d{background:var(--bar-dem-won);border-radius:3px 0 0 3px} .pr-bar i.r{background:var(--bar-rep-won);border-radius:0 3px 3px 0}
.pr-mk{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);transform:translateX(-1px)}
.pr-c{margin:0;text-align:center;font-size:14px;font-weight:600;color:var(--muted)}
.pr-c small{font-weight:500}
.note{margin:0;font-size:11.5px;color:var(--muted);text-align:center}
.what{max-width:960px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.w-t{margin:0;font-size:28px;font-weight:800;line-height:1.15}
.w-t span{display:block;font-size:20px;font-weight:500;margin-top:4px}
.w-big{display:flex;flex-direction:column;align-items:center;gap:4px}
.w-big small{font-size:15px;color:var(--muted);font-weight:500;max-width:340px}
.w-big b{font-size:96px;font-weight:800;line-height:.95;letter-spacing:-.02em}
.w-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 36px;width:100%}
.w-s{display:flex;flex-direction:column;align-items:center;gap:8px}
.w-s small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.w-s b{font-size:40px;font-weight:800;line-height:1}
.w-s p{margin:0;font-size:12.5px;color:var(--muted);max-width:240px}
.w-maj,.w-none{position:relative;width:100%;max-width:260px;height:14px;border-radius:3px;background:var(--bar-none)}
.w-maj i{display:block;height:100%;background:var(--text);border-radius:3px 0 0 3px}
.w-maj span{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--live);transform:translateX(-1px)}
.w-none{background:transparent;border:1.5px solid var(--line)}
.w-term{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;max-width:260px}
.w-term i{height:14px;background:var(--text);border-radius:2px}
.w-term.w-g,.w-yrs.w-g{grid-template-columns:repeat(2,1fr)}
.w-stag i:nth-child(1){opacity:1} .w-stag i:nth-child(2){opacity:.6} .w-stag i:nth-child(3){opacity:.3}
.w-yrs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:260px;font-size:13px;font-weight:700}
.w-req h4{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.w-sub{margin:0 0 6px;font-size:13px;color:var(--muted)}
.w-req ul{margin:0;padding:0;list-style:none;font-size:15px;font-weight:500;display:flex;flex-direction:column;gap:4px}
.pf-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:12px;font-weight:500}
.pf-leg span{display:flex;align-items:center;gap:6px}
@media (max-width:640px){.w-stats{grid-template-columns:1fr;gap:24px}.w-big b{font-size:72px}.w-t{font-size:22px}.w-t span{font-size:16px}.alt{padding:18px 12px 22px}.pr-n b{font-size:24px}.pr-n .yr{font-size:17px}}



/* ---------- Section heads ---------- */
.sech{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.sech h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sech p{margin:0;font-size:12.5px;color:var(--muted)}

/* ---------- Key races ---------- */
/* carousel: three head-to-heads at a time, two on tablets, one on phones */
.keys{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/3);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.keys::-webkit-scrollbar{display:none}
.keys .card{scroll-snap-align:start}
@media (max-width:900px){.keys{grid-auto-columns:calc((100% - 12px)/2)}}
@media (max-width:560px){.keys{grid-auto-columns:100%}}
.kc-ctl{display:flex;align-items:center;gap:8px;margin-left:auto}
.kc-ctl[hidden]{display:none}
.kc-ctl span{font-size:12px;color:var(--muted);font-weight:600;margin-right:4px;font-variant-numeric:tabular-nums}
.kc-ctl button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.kc-ctl button:hover:not(:disabled){border-color:var(--text)}
.kc-ctl button:disabled{opacity:.35;cursor:default}
.keys .card{background:var(--panel);border:1px solid var(--line)}
.keys .card:hover{border-color:var(--muted)}
.keys .card{cursor:pointer}

/* ---------- Table ---------- */
.tpanel{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tctl{display:flex;flex-wrap:wrap;gap:8px 10px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:center}
.tctl input{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:12.5px;font-weight:500;min-width:0;flex:1 1 160px;max-width:260px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel)}
td{padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);white-space:nowrap}
td.n,th.n{text-align:right}
.tscroll{max-height:620px;overflow:auto}
.rid{font-weight:700}
.c-id small{font-weight:500;color:var(--muted);margin-left:6px;font-size:12px}
.pty{font-weight:700;font-size:11.5px}
.pty.D{color:var(--dem-ink)} .pty.R{color:var(--rep-ink)} .pty.I{color:var(--oth-ink)}
.vv small{color:var(--muted);font-size:11px;margin-left:4px}
.mg.D{color:var(--dem-ink);font-weight:700} .mg.R{color:var(--rep-ink);font-weight:700} .mg.I{color:var(--oth-ink);font-weight:700}
.tfoot{padding:9px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line)}

/* ---------- Poll-closing strip ---------- */

.simctl{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.simctl[hidden]{display:none}
.feedmsg{flex-basis:100%;margin:0;font-size:12px;color:var(--oth-ink);font-weight:600}
.more{margin:0;font-size:11.5px;color:var(--muted);font-weight:600}
td.vv b{font-weight:700;margin-left:4px}
td.vv small{color:var(--muted);font-size:11px;margin-left:5px}
.c-id small{display:block;margin-left:0}

/* ---------- Narrow phones: keep the map module inside the screen ----------
   Some phones (notably Safari) size grid columns to their widest unbreakable content, so a long legend line could
   make the map panel wider than the screen and get cut off at the edges. These let every column shrink and wrap,
   and stop the panel from ever scrolling sideways inside itself. */
.mod{overflow:hidden;overflow:clip}
.stage{grid-template-columns:minmax(0,1fr)}
.pathx{min-width:0;max-width:min(960px,100%)}
.lg{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.lg>div,.lg span{min-width:0}
.lg span{white-space:normal;overflow-wrap:anywhere}
.pathx,.side{padding-inline:20px} /* at least 20px either side for the legend and the Selected box, at every width */
@media (max-width:400px){ .lg{gap:6px 8px;font-size:11.5px} .lg .hxi{width:14px;height:16px} }

/* ---------- Phone ---------- */
@media (max-width:900px){
}
@media (max-width:640px){
  h1{font-size:27px}
  h1{font-size:23px}
  .head{padding-top:14px}
  .tabs{gap:0 6px;padding-top:8px}
  .tab{font-size:11.5px;letter-spacing:.1em;padding:13px 4px;margin-bottom:8px}
  .tab[aria-selected="true"]{padding-bottom:21px}
  .tab .long{display:none} .tab .short{display:inline}
  .subtabs{padding:10px 4px}
  .stab{font-size:12px;padding:3px 8px}
  .mapbox{padding:10px 0 6px}
  .mod{margin-inline:-16px;border-radius:0;border-left:0;border-right:0}
  .lab{display:none}
  .legend{grid-template-columns:1fr 1fr;font-size:11.5px}
  .tscroll{max-height:none}
  table{font-size:13px}
  thead{display:none}
  tbody tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"id st" "d d" "r r" "mg in";gap:4px 10px;padding:10px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
  td{padding:0;border:0;white-space:normal}
  td.c-id{grid-area:id} td.c-st{grid-area:st;text-align:right}
  td.c-d{grid-area:d;text-align:left} td.c-r{grid-area:r;text-align:left;color:var(--muted)}
  .c-id small{display:inline;margin-left:6px}
  td.c-mg{grid-area:mg;text-align:left} td.c-in{grid-area:in;text-align:right;color:var(--muted);font-size:12px}
  td.c-in::after{content:" in"}
  td.empty{grid-column:1/-1}
        }
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}