@charset "UTF-8";
/* Midterms 26 Desk: shared tokens and components for every page. */
/* Layout: one dense hairline grid, black ground. Summary (chamber balance) on top,
   map + live wire next, then battlegrounds, closings, explorer. Detail opens in a side drawer. */
:root{
  --bg:#000; --fg:#fff; --dim:#8b919b; --faint:#4b5059; --line:#1b1e23; --hover:#0e1013; --raise:#0a0b0d;
  --D:#3d7bff; --R:#ff3d47; --I:#b28cff; --O:#8f959e; --flip:#ffb000; --ok:#38d97a; --bad:#ff6b4a;
  /* Söhne is used when installed on the viewer's machine (never served: desktop license). Others get the Google fallbacks. */
  --display:"Söhne Schmal","Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Söhne","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Söhne Mono","IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font:13px/1.4 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:1px solid var(--fg);outline-offset:1px}
a{color:inherit}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font:400 12px/1.2 var(--body);color:var(--dim)}
.D{color:var(--D)}.R{color:var(--R)}.I{color:var(--I)}.O{color:var(--O)}
[hidden]{display:none!important}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.hrow{display:flex;align-items:center;gap:20px;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));flex-wrap:wrap}
/* Wordmark: Söhne Breit when installed (Schmal draws a squared 6 that clashes with the 2). */
.mark{font:700 17px/1 "Söhne Breit",var(--display);letter-spacing:.01em;white-space:nowrap}
/* The 26 is set in Futura (ships with macOS/iOS); others fall back to Century Gothic or the display face. */
.mark b,.mark i{font-family:Futura,"Futura PT","Century Gothic",var(--display);font-weight:700}
.mark b{color:var(--R)}.mark i{font-style:normal;color:var(--D)}
.hstat{display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.hstat .v{font:500 13px/1 var(--mono)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--faint);margin-right:6px;transform:translateY(-1px)}
.dot.live{background:var(--ok)}.dot.stale{background:var(--flip)}.dot.err{background:var(--bad)}
.hspace{flex:1}
.tbtn{font:600 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:6px 8px;border:1px solid var(--line)}
.tbtn[aria-pressed="true"]{color:var(--fg);border-color:var(--faint)}
.tbtn:hover{color:var(--fg)}
#simbar{background:var(--flip);color:#000;font:600 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;text-align:center}

/* grid */
main{display:grid;gap:1px;background:var(--line);grid-template-columns:repeat(12,minmax(0,1fr))}
main>section{background:var(--bg);box-shadow:0 0 0 1px var(--line);padding-block:14px;padding-inline:16px;min-width:0}
.span3{grid-column:span 3}.span6{grid-column:span 6}.span4{grid-column:span 4}.span5{grid-column:span 5}.span7{grid-column:span 7}.span8{grid-column:span 8}.span12{grid-column:span 12}
@media (max-width:1100px){.span3,.span4{grid-column:span 6}.span5,.span6,.span7,.span8{grid-column:span 12}}
@media (max-width:700px){main>section{grid-column:span 12!important}}
main>section:first-child,main>section.edgeL{padding-left:max(16px,env(safe-area-inset-left,0px))}
.shead{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.shead h2{margin:0;font:700 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.shead .sp{flex:1}
.tabs{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line)}
.tabs button{font:600 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:6px 10px}
.tabs button[aria-selected="true"]{background:var(--fg);color:#000}
.tabs button:hover:not([aria-selected="true"]){color:var(--fg)}

/* chamber balance */
.ch .big{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:6px 0 8px}
.ch .seats{font:700 54px/.85 var(--display);font-variant-numeric:tabular-nums}
.ch .mid{text-align:center;font:500 11px/1.35 var(--mono);color:var(--dim)}
.ch .mid b{display:block;font:600 13px/1.2 var(--display);letter-spacing:.1em;color:var(--fg);text-transform:uppercase}
.bar{position:relative;height:22px;display:flex;background:#111}
.bar span{height:100%;transition:width .6s ease}
.bar .hD{background:color-mix(in srgb,var(--D) 45%,#000)}.bar .wD{background:var(--D)}.bar .lD{background:repeating-linear-gradient(135deg,var(--D) 0 3px,color-mix(in srgb,var(--D) 35%,#000) 3px 6px)}
.bar .hR{background:color-mix(in srgb,var(--R) 45%,#000)}.bar .wR{background:var(--R)}.bar .lR{background:repeating-linear-gradient(45deg,var(--R) 0 3px,color-mix(in srgb,var(--R) 35%,#000) 3px 6px)}
.bar .wI{background:var(--I)}.bar .lI{background:color-mix(in srgb,var(--I) 45%,#000)}
.bar .open{flex:1}
.bar .maj{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--fg)}
.ch .rows{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;margin-top:10px;font:12px/1.35 var(--mono);color:var(--dim)}
.ch .rows .r{text-align:right}
.ch .rows b{color:var(--fg);font-weight:500}
.path{margin-top:8px;font:12px/1.4 var(--mono);color:var(--fg)}
.flipchip{color:var(--flip)}

/* map */
.mapwrap{position:relative}
#map svg{display:block;width:100%;height:auto}
#map path.u{stroke:#000;stroke-width:.6;cursor:pointer}
#map path.u:hover{stroke:var(--fg);stroke-width:1.4}
#map path.border{fill:none;stroke:#000;stroke-width:1.2;pointer-events:none}
#map path.dborder{fill:none;stroke:#2c3036;stroke-width:.8;pointer-events:none}
.legend{display:flex;gap:14px;flex-wrap:wrap;font:11px/1 var(--mono);color:var(--dim);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
#tip{position:fixed;z-index:40;pointer-events:none;background:#000;border:1px solid var(--faint);padding:8px 10px;min-width:200px;max-width:300px;font:12px/1.4 var(--mono)}
#tip .t{font:700 15px/1.1 var(--display);letter-spacing:.04em;margin-bottom:4px}
#tip .c{display:flex;justify-content:space-between;gap:10px}

/* feed */
#feed{max-height:560px;overflow:auto;margin:0;padding:0;list-style:none}
section:has(>#feed){display:flex;flex-direction:column}
section>#feed{flex:1 1 0;min-height:320px;max-height:none}
#feed li{display:grid;grid-template-columns:58px 52px 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);align-items:baseline;cursor:pointer}
#feed li:hover{background:var(--hover)}
#feed .tm{font:11px/1 var(--mono);color:var(--dim)}
#feed .k{font:700 11px/1 var(--display);letter-spacing:.12em}
.k-CALL{color:var(--fg)}.k-FLIP{color:var(--flip)}.k-LEAD{color:var(--I)}.k-CLOSE{color:var(--dim)}.k-FIRST{color:var(--ok)}
#feed .tx{font:13px/1.35 var(--body)}
.empty{color:var(--dim);font:12px/1.5 var(--mono);padding:10px 0}

/* tables */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font:12px/1.3 var(--mono);font-variant-numeric:tabular-nums}
th{font:500 12px/1.2 var(--body);color:var(--dim);text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--line);white-space:nowrap;cursor:default}
th.s{cursor:pointer}th.s:hover{color:var(--fg)}
td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
td.rc{text-align:right}th.rc{text-align:right}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--hover)}
td .nm{font:500 13px/1.2 var(--body);white-space:normal}
td .sub{color:var(--dim);font-size:11px}
.chip{font:700 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:3px 5px;display:inline-block;white-space:nowrap}
.chip.wD{background:var(--D);color:#000}.chip.wR{background:var(--R);color:#000}.chip.wI,.chip.wO{background:var(--I);color:#000}
.chip.lD{color:var(--D);box-shadow:inset 0 0 0 1px var(--D)}.chip.lR{color:var(--R);box-shadow:inset 0 0 0 1px var(--R)}.chip.lI,.chip.lO{color:var(--I);box-shadow:inset 0 0 0 1px var(--I)}
.chip.nv{color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
.chip.flip{background:var(--flip);color:#000}
.rating{font:500 11px/1 var(--mono)}
.mini{display:block}
.rbar{display:inline-block;width:46px;height:4px;background:#1a1a1a;vertical-align:middle;margin-right:6px;position:relative}
.rbar i{position:absolute;inset:0 auto 0 0;background:var(--fg)}
tr.flash td{background:color-mix(in srgb,var(--flip) 16%,#000);transition:background 2.5s ease}

/* closings */
.cl{display:grid;grid-template-columns:70px 1fr;gap:4px 10px;align-items:start}
.cl .t{font:600 15px/1.2 var(--display);letter-spacing:.04em}
.cl .t.past{color:var(--faint)}
.cl .t.next{color:var(--flip)}
.cl .sts{display:flex;flex-wrap:wrap;gap:3px}
.cl .st{font:600 11px/1 var(--mono);padding:3px 4px;border:1px solid var(--line);cursor:pointer}
.cl .st.sen{border-color:var(--faint)}
.cl .st.past{color:var(--faint)}
.cl .st:hover{border-color:var(--fg)}

/* early vote */
.ev{display:grid;grid-template-columns:28px 1fr 64px;gap:4px 8px;align-items:center;font:11px/1 var(--mono)}
.ev .b{display:flex;height:9px;background:#111}
.ev .b span{height:100%}
.ev .n{text-align:right;color:var(--dim)}

/* explorer controls */
.ctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
#q{background:#000;border:1px solid var(--line);padding:6px 8px;min-width:0;width:260px;max-width:100%;font:12px var(--mono)}
#q:focus{border-color:var(--faint);outline:none}
.more{margin-top:8px}

/* watch */
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.links a{display:block;background:var(--bg);padding:8px 10px;text-decoration:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.links a:hover{background:var(--hover)}
.links .n{font:600 15px/1.1 var(--display);letter-spacing:.04em}
.links .d{font:11px/1.35 var(--mono);color:var(--dim);margin-top:3px}
.links .pay{color:var(--flip)}

footer{padding-block:16px 28px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font:11px/1.6 var(--mono);color:var(--dim);border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap}
kbd{font:11px var(--mono);border:1px solid var(--line);padding:0 4px}

/* drawer */
#drawer{position:fixed;z-index:30;top:0;right:0;bottom:0;width:min(560px,100%);background:#000;border-left:1px solid var(--faint);overflow:auto;padding-block:max(14px,env(safe-area-inset-top,0px)) 30px;padding-left:18px;padding-right:max(18px,env(safe-area-inset-right,0px))}
#drawer h3{margin:0 0 4px;font:700 28px/1 var(--display);letter-spacing:.02em;text-wrap:balance;padding-right:40px}
#dclose{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));font:600 13px/1 var(--display);letter-spacing:.1em;color:var(--dim);padding:6px}
#dclose:hover{color:var(--fg)}
.dmeta{display:flex;gap:14px;flex-wrap:wrap;font:12px/1.4 var(--mono);color:var(--dim);margin-bottom:14px}
.cand{display:grid;grid-template-columns:1fr auto auto;gap:2px 12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.cand .cn{font:500 15px/1.2 var(--body)}
.cand .cp{font:11px var(--mono);color:var(--dim)}
.cand .cv{font:12px var(--mono);color:var(--dim);text-align:right}
.cand .cpct{font:700 24px/1 var(--display);text-align:right;min-width:62px}
.cand .cb{grid-column:1/-1;height:4px;background:#111}
.cand .cb i{display:block;height:100%}
.dsec{margin-top:18px}
.dsec .lbl{display:block;margin-bottom:8px}
#cmap svg{width:100%;height:auto;display:block}
#cmap path{stroke:#000;stroke-width:.5}
/* markets */
.mk .top{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.mk .pp{font:700 44px/.85 var(--display);font-variant-numeric:tabular-nums}
.mk .pp small{font:600 13px/1 var(--display);letter-spacing:.1em;margin-left:4px;color:var(--dim)}
.mk .meta{font:11px/1.5 var(--mono);color:var(--dim)}
.mk .meta b{font-weight:500;color:var(--fg)}
.up{color:var(--ok)}.dn{color:var(--bad)}
.rng button{padding:4px 7px;font-size:11px}
.chart{position:relative;min-height:60px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .ax{fill:var(--dim);font:10px var(--mono)}
.chart .gl{stroke:#1b1e23}
.chart .gl50{stroke:#3a3e45;stroke-dasharray:3 3}
.chart .hov line{stroke:#fff;stroke-opacity:.35}
.chart .hov text{font:11px var(--mono)}
.seatbars text{font:10px var(--mono);fill:var(--dim)}
.mv{display:grid;grid-template-columns:1fr auto auto;gap:3px 10px;font:12px/1.3 var(--mono);align-items:baseline}
.mv button{text-align:left;font:500 12px/1.3 var(--body)}
.mv button:hover{text-decoration:underline}
.mv .r{text-align:right}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* site nav */
.mark{text-decoration:none;color:var(--fg)}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{font:600 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-decoration:none;padding:6px 8px}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:#000;background:var(--fg)}
.page-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-block:14px 4px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line)}
.page-title h1{margin:0;font:700 30px/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.frame{position:relative;width:100%;background:#050505;border:1px solid var(--line)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame.r169{aspect-ratio:16/9;max-width:100%}
.tabs a{font:600 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:6px 10px;text-decoration:none}
.tabs a[aria-current="page"],.tabs a[aria-selected="true"]{background:var(--fg);color:#000}

/* Separator between inline items (replaces " · " strings). */
.sep{display:inline-block;width:12px}
#nextclose{display:inline-flex;gap:12px;flex-wrap:wrap}

/* phone: two-row header (logo + status, then scrollable nav); not sticky so content gets the screen */
@media (max-width:700px){
  header{position:static}
  .hrow{gap:8px 12px;padding-block:10px}
  .hrow .hstat:has(#clock),#bSound,#bAlerts{display:none}
  .hstat .lbl{display:none}
  .nav{order:9;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav a{padding:7px 10px;white-space:nowrap}
}

/* Projector modes (set by /assets/mode.js on <html data-mode>).
   Projectors can't show black: dim greys, hairlines and dark tinted fills wash out. */
#modeBtn{margin-left:auto}
#modeBtn[aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}
/* Dark room: keep the dark look, lift everything that would sink into the projector's grey. */
:root[data-mode="proj-dark"]{--dim:#c6cbd3;--faint:#8d939c;--line:#3d424a;--hover:#1c1f24}
:root[data-mode="proj-dark"] main,:root[data-mode="proj-dark"] #drawer{filter:brightness(1.3) saturate(1.25)}
/* Lit room: invert the whole page to dark-on-white. Hue rotation keeps red red and blue blue;
   tokens are set brighter first so they land as darker greys after inversion. Media is flipped back. */
:root[data-mode="proj-light"]{--dim:#c2c7cf;--faint:#9aa0a8;--line:#4a4f57;--hover:#16181c;filter:invert(1) hue-rotate(180deg) saturate(1.3)}
:root[data-mode="proj-light"] :is(iframe,img,video){filter:invert(1) hue-rotate(180deg) saturate(.77)}
@media (max-width:700px){#modeBtn{display:none}}

/* Wide screens (or a zoomed-out browser, e.g. 80% zoom or less on a 1080p projector): switch from
   12 to 24 columns so twice as many panels sit side by side, in normal reading order. Each page's spans
   are chosen to add up to 24 per row; .wfull panels always take the whole row. Panel outlines draw the
   dividers so any leftover cell stays black. */
@media (min-width:2400px){
  main:not(.sw){grid-template-columns:repeat(24,minmax(0,1fr));background:var(--bg)}
  main .wfull{grid-column:1/-1}
  /* Long tables scroll inside their panel (about one screen tall) instead of stretching the whole row. */
  main section .tw{max-height:min(calc(100vh - 160px),1100px);overflow:auto}
  main section .tw thead th{position:sticky;top:0;z-index:1;background:var(--bg)}
}