/* VoteView design system: flat, square, hairline rules, tabular numerals. No native widgets, no rounded corners, no shadows. */
/* Self-hosted variable fonts (latin), so every visitor sees the same type without a third-party request. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/inter-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: "JetBrains Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/fonts/jetbrains-mono-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 {
  --bg: #0c0f14; --panel: #13171e; --panel2: #181d26; --panel3: #1f2531; --line: #2b3140; --line2: #3c4457;
  --text: #eceff4; --muted: #a3acbe; --dim: #7d879a;
  --dem: #2f6df6; --dem2: #1d4ed8; --dem-t: #6b9cff; --gop: #e5323e; --gop2: #b91c1c; --gop-t: #ff6f78; --ind: #9b59f5; --ind-t: #bb95ff; --oth: #9ca3af;
  --gold: #f2c230; --green: #34d399; --amber: #f5a524; --nyt: #f2c230; --k: #34d399; --p: #6ab0ff; --accent: #3b82f6;
  --fs: 14px; --gap: 12px; --pad: 12px;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; border-radius: 0 !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs)/1.45 var(--sans); font-variant-numeric: tabular-nums; overflow: hidden; display: grid; grid-template-rows: 52px auto 1fr auto; height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; } :focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
::selection { background: #2b4a8a; }
.hidden { display: none !important; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .small { font-size: 11px; }
.dem { color: var(--dem-t); } .gop { color: var(--gop-t); } .ind { color: var(--ind-t); } .oth { color: var(--oth); }
.bg-dem { background: var(--dem); } .bg-gop { background: var(--gop); } .bg-ind { background: var(--ind); } .bg-oth { background: var(--oth); }
.mono, .num { font-family: var(--mono); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #2b3140; border: 2px solid var(--panel); } ::-webkit-scrollbar-thumb:hover { background: #3a4254; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: #2b3140 transparent; }

/* ---------- controls ---------- */
.btn { background: var(--panel2); border: 1px solid var(--line2); padding: 0 12px; height: 28px; line-height: 26px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: #4b5568; color: var(--text); } .btn.on { background: #1f2d4d; border-color: var(--accent); color: #fff; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #000; } .btn.primary:hover { background: #ffd54a; }
.btn.danger { background: var(--gop2); border-color: var(--gop2); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.tabs { display: inline-flex; border: 1px solid var(--line2); background: var(--bg); }
.tabs button { position: relative; background: transparent; border: 0; border-right: 1px solid var(--line); padding: 0 14px; height: 28px; cursor: pointer; color: var(--dim); font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: color .12s, background .12s; }
.tabs button:last-child { border-right: 0; } .tabs button:hover { color: var(--text); background: var(--panel2); }
.tabs button.on { background: var(--panel3); color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.tabs.small button { padding: 0 10px; height: 26px; font-size: 11px; }
.filters { display: flex; gap: 6px; align-items: center; }
input[type=search], input[type=text], input[type=number], .m-field input { appearance: none; -webkit-appearance: none; background: var(--bg); border: 1px solid var(--line2); height: 28px; padding: 0 10px; font-size: 13px; color: var(--text); min-width: 0; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; }
input::placeholder { color: var(--dim); }
input:focus { border-color: var(--accent); }
.filters input[type=search] { width: 140px; }
.chk { font-size: 11px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.chk input { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border: 1px solid var(--line2); background: var(--bg); margin: 0; cursor: pointer; position: relative; }
.chk input:checked { background: var(--accent); border-color: var(--accent); } .chk input:checked::after { content: ""; position: absolute; left: 3px; top: 1px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
input[type=range] { appearance: none; -webkit-appearance: none; height: 2px; background: var(--line2); width: 160px; margin: 0 6px; vertical-align: middle; }
input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 10px; height: 14px; background: var(--text); cursor: pointer; border: 0; }
input[type=range]::-moz-range-thumb { width: 10px; height: 14px; background: var(--text); border: 0; }
/* custom select */
.sel { position: relative; display: inline-block; } .sel select { display: none; }
.sel-btn { background: var(--bg); border: 1px solid var(--line2); height: 28px; padding: 0 28px 0 10px; font-size: 13px; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; min-width: 110px; max-width: 260px; position: relative; text-align: left; }
.sel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn:hover { border-color: #4b5568; } .sel.open .sel-btn { border-color: var(--accent); }
.sel-caret { position: absolute; right: 10px; top: 9px; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.sel-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 100%; max-height: 280px; overflow: auto; background: var(--panel); border: 1px solid var(--line2); z-index: 60; }
.sel.open .sel-menu { display: block; }
.sel-opt { padding: 6px 12px; font-size: 13px; white-space: nowrap; cursor: pointer; color: var(--muted); }
.sel-opt:hover { background: var(--panel3); color: var(--text); } .sel-opt.on { color: var(--text); box-shadow: inset 2px 0 0 var(--accent); } .sel-opt.dis { opacity: .4; cursor: default; }
.watch-head .sel { flex: 1; min-width: 0; } .watch-head .sel-btn { width: 100%; max-width: none; }
.predict-bar .sel-btn { min-width: 150px; }
/* tooltip + modal */
.tipbox { position: fixed; z-index: 200; background: #0d1016; border: 1px solid var(--line2); color: var(--text); font-size: 12px; line-height: 1.45; padding: 7px 10px; max-width: 360px; pointer-events: none; opacity: 0; transition: opacity .12s; white-space: pre-line; }
.tipbox.on { opacity: 1; }
#modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.m-back { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.m-box { position: relative; width: 440px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line2); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.m-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.m-body { font-size: 13px; color: var(--muted); line-height: 1.45; }
.m-fields { display: flex; flex-direction: column; gap: 8px; }
.m-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.m-field input { height: 30px; font-size: 13px; }
.m-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }

/* ---------- header ---------- */
#top { display: flex; align-items: stretch; background: #0e1117; border-bottom: 1px solid var(--line); }
#top > * { display: flex; align-items: center; padding: 0 14px; border-right: 1px solid var(--line); }
#top > *:last-child { border-right: 0; }
.brand { gap: 10px; }
.title { font-weight: 900; letter-spacing: .14em; font-size: 15px; text-transform: uppercase; }
.sub { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.badge { padding: 1px 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.badge.sim { background: var(--amber); color: #000; }
.clock { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.2; min-width: 190px; gap: 1px; }
#etClock { font-weight: 700; font-size: 17px; font-family: var(--mono); letter-spacing: .01em; }
#nextClose { font-size: 11px; }
.tallies { flex: 1; gap: 0; padding: 0 !important; justify-content: center; overflow: hidden; min-width: 0; }
.tally { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 18px; height: 100%; border-right: 1px solid var(--line); white-space: nowrap; min-width: 150px; }
.tally:first-child { border-left: 1px solid var(--line); }
.tally .tl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; line-height: 1; }
.tally .tv { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.tally .sm { color: var(--dim); font-size: 11px; }
.tally .lab { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.tally .pl { color: var(--dim); font-size: 11px; font-weight: 700; margin-right: 6px; }
.tally b { font-size: 18px; font-family: var(--mono); font-weight: 700; }
.tally.picks { cursor: pointer; } .tally.picks:hover { background: var(--panel2); }
.controls { gap: 6px; }
.sources { display: inline-flex; gap: 2px; align-items: center; }
.srcwrap { position: relative; }
.srcbtn .src { width: 7px; height: 7px; } .srccount { font-family: var(--mono); color: var(--dim); margin-left: 4px; font-weight: 600; letter-spacing: 0; }
.srcpanel { position: absolute; right: 0; top: calc(100% + 8px); width: 460px; max-height: calc(100vh - 80px); overflow: auto; background: var(--panel); border: 1px solid var(--line2); z-index: 60; }
.srchead { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; background: var(--panel2); }
.srchead b { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.srow { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.srow .sh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.srow .sh a { font-weight: 700; font-size: 13px; text-decoration: none; } .srow .sh a:hover { color: var(--accent); }
.srow .sw2 { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.sst { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; color: var(--dim); }
.sst.ok { color: var(--green); } .sst.warn { color: var(--amber); } .sst.err { color: var(--gop-t); }
.srow .feeds { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.srow .feed { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.srow .feed .src { width: 6px; height: 6px; flex: none; }
.src { width: 8px; height: 8px; background: var(--dim); display: inline-block; } .src.ok { background: var(--green); } .src.warn { background: var(--amber); } .src.err { background: var(--gop); }

/* ---------- balance of power ---------- */
.bop { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr; gap: var(--gap); padding: var(--gap) var(--pad) 0; }
.bop-card { background: var(--panel); border: 1px solid var(--line); padding: 10px 16px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; min-height: 128px; align-items: center; }
.bop-card .head { display: flex; align-items: baseline; justify-content: space-between; grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.bop-card .head h2 { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.bop-card .head .towin { color: var(--muted); font-size: 11px; }
.bop-main { display: flex; flex-direction: column; gap: 6px; }
.seatline { display: flex; justify-content: space-between; align-items: baseline; }
.seatline .big { font-size: 32px; font-weight: 700; line-height: 1; font-family: var(--mono); letter-spacing: -.01em; }
.seatline .big small { font-size: 11px; color: var(--muted); font-weight: 700; margin-left: 8px; letter-spacing: .08em; font-family: var(--sans); text-transform: uppercase; }
.seatline .sub2 { display: block; font-size: 11px; color: var(--dim); font-weight: 500; margin-top: 3px; font-family: var(--sans); }
.bar { position: relative; height: 14px; background: #1e2430; overflow: hidden; display: flex; }
.bar .seg { height: 100%; } .seg.cd { background: var(--dem2); } .seg.ld { background: var(--dem); opacity: .5; } .seg.lr { background: var(--gop); opacity: .5; } .seg.cr { background: var(--gop2); } .seg.co { background: var(--ind); }
.bar .mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; }
.bar.thin { height: 8px; }
.bop-side { display: grid; grid-template-columns: auto auto; gap: 3px 14px; align-content: center; font-size: 11px; color: var(--muted); white-space: nowrap; }
.bop-right { display: flex; gap: 12px; align-items: center; }
.bop-side b { color: var(--text); font-size: 13px; font-family: var(--mono); }
.bop-side .k { color: var(--k); } .bop-side .p { color: var(--p); } .bop-side .n { color: var(--nyt); }
.gauge { width: 124px; height: 80px; flex: none; }
.flips { font-size: 11px; color: var(--muted); }
.flips b { color: var(--text); }

/* ---------- layout ---------- */
#main { display: grid; grid-template-columns: minmax(520px, 36%) 1fr minmax(320px, 23%); gap: var(--gap); padding: var(--gap) var(--pad); min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel2); min-height: 40px; flex-wrap: wrap; }
.ph-title { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); line-height: 1.2; }
.center { display: grid; grid-template-rows: 1fr auto; gap: var(--gap); min-height: 0; }
.legend { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend-inline { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--dim); margin-left: 8px; }
.sw { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; }
.sw.nyt { background: var(--nyt); } .sw.k { background: var(--k); } .sw.p { background: var(--p); }

/* ---------- board ---------- */
.board-body { overflow: auto; flex: 1; }
table.races { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
table.races th { position: sticky; top: 0; background: var(--panel2); color: var(--muted); font-weight: 700; text-align: left; padding: 7px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); z-index: 1; white-space: nowrap; }
table.races td { padding: 5px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
table.races td.name .sub { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
table.races tr.row { cursor: pointer; } table.races tr.row:hover td, table.races tr.row.hl td { background: var(--panel3); box-shadow: inset 3px 0 0 var(--accent); }
table.races tr.called td { opacity: .78; } table.races tr.called td.name { opacity: 1; }
table.races tr.flash td { animation: flash 2.2s ease-out; }
@keyframes flash { 0% { background: #22361f; } 100% { background: transparent; } }
table.races tr.gz-head td { background: var(--panel2); color: var(--text); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 6px 6px 4px; border-top: 1px solid var(--line2); }
table.races tr.gz-head td span { color: var(--dim); font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 8px; }
td.name { font-weight: 700; line-height: 1.2; max-width: 196px; }
td.name > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 184px; }
td.name .seat { color: var(--muted); font-weight: 500; font-size: 11px; margin-left: 4px; }
td.name .off { color: var(--dim); font-weight: 600; font-size: 11px; margin-right: 4px; text-transform: uppercase; }
.pill { display: inline-block; padding: 1px 6px; font-size: 11px; line-height: 1.5; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pill.tossup { background: #3a3415; color: #f5e04f; } .pill.lean-dem, .pill.likely-dem { background: #16244a; color: #8ab4ff; } .pill.lean-rep, .pill.likely-rep { background: #3a1818; color: #ff9b9b; } .pill.solid-dem { background: #121c3b; color: #5b8def; } .pill.solid-rep { background: #2a1212; color: #d16b6b; } .pill.none { background: var(--panel3); color: var(--muted); }
.hold { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 5px; line-height: 1.5; background: var(--panel3); color: var(--muted); margin-left: 4px; white-space: nowrap; letter-spacing: .04em; }
.hold.d { color: #8ab4ff; border: 1px solid #1b2a4a; } .hold.r { color: #ff9b9b; border: 1px solid #3a1d1d; }
.cand { display: flex; align-items: center; gap: 5px; }
.cand .nm { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.cand .pc { font-weight: 700; min-width: 40px; text-align: right; font-family: var(--mono); }
.cand.win .nm::after { content: " ✓"; color: var(--gold); }
.mbar { height: 4px; width: 58px; background: #1e2430; position: relative; overflow: hidden; margin-top: 3px; }
.mbar i { position: absolute; top: 0; bottom: 0; }
.margin { font-weight: 800; font-family: var(--mono); }
.callb { display: inline-flex; gap: 2px; }
.callb span { font-size: 11px; font-weight: 800; padding: 1px 5px; line-height: 1.5; background: var(--panel3); color: var(--dim); letter-spacing: .04em; }
.callb span.on { background: var(--gold); color: #000; }
.callb span.cnn.on { background: #c40000; color: #fff; }
.shift.pos { color: var(--dem-t); } .shift.neg { color: var(--gop-t); }
.prob { display: inline-flex; gap: 5px; align-items: baseline; font-size: 12px; font-weight: 700; font-family: var(--mono); white-space: nowrap; }
.prob .psrc { color: var(--dim); font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: .04em; }

/* ---------- map ---------- */
.map { min-height: 0; }
.map-body { position: relative; flex: 1; min-height: 240px; background: #0b0d11; }
#usMap, #pMap { width: 100%; height: 100%; display: block; }
/* Map strokes: constant screen width at every zoom (vector-effect), round joins, and every outline that has to
   read on top (hover, highlight, selection, correct pick) drawn in an overlay so neighbors never cover half of it. */
.state, .shape, .sv-shape, .outlines path, .ov { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.state, .shape { stroke: #0b0d11; stroke-width: .75px; cursor: pointer; } .shape.dead { cursor: default; }
.outlines path { stroke: #0b0d11 !important; stroke-width: 1.6px !important; }
.shape.grp { filter: brightness(1.18); }
.ov { fill: none; pointer-events: none; }
.ov-hov { stroke: #fff; stroke-width: 2px; }
.ov-hl { stroke: #fff; stroke-width: 2px; }
.ov-grp { stroke: #fff; stroke-width: 2.25px; }
.ov-ok { stroke: #9effb0; stroke-width: 1.5px; }
.ov-sel { stroke: #fff; stroke-width: 2.5px; }
.county { stroke: #0b0d11; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.tip { position: absolute; pointer-events: none; background: #0d1016; border: 1px solid var(--line2); padding: 9px 11px; font-size: 13px; line-height: 1.45; z-index: 5; min-width: 200px; }
.tip .t { font-weight: 800; margin-bottom: 3px; }
.tip .c { display: flex; justify-content: space-between; gap: 12px; }
.needle { max-height: 170px; }
.needle-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 8px; min-height: 108px; }
.needle-chart { position: relative; min-height: 100px; }
.needle-chart .lbl { position: absolute; top: 2px; left: 6px; font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.needle-chart .val { position: absolute; top: 2px; right: 6px; font-size: 12px; font-weight: 800; font-family: var(--mono); }
.needle-chart svg { width: 100%; height: 100%; }
.panel.map.full { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; z-index: 16; }
.panel.map.full .map-body { min-height: 0; }
.mapmodes { margin-right: 6px; }
.map-sub { padding: 5px 12px; border-bottom: 1px solid var(--line); background: var(--panel); min-height: 36px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lg-modes { display: inline-flex; align-items: center; gap: 8px; }
.lg-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.lg-keys { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 14px; border-left: 1px solid var(--line2); }
.lg-hint { margin-left: auto; }
.mapmodes button { padding: 0 12px; }
.mapmodes button.on { background: var(--accent); color: #fff; box-shadow: none; }
.map-sub:empty { display: none; }
.map-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; z-index: 4; }
.map-zoom button { width: 30px; height: 28px; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1; }
.map-zoom button[data-z="reset"] { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; width: auto; padding: 0 8px; display: none; }
.map-zoom.zoomed button[data-z="reset"] { display: block; }
.map-zoom button:hover { border-color: #4b5568; } .map-zoom button:disabled { opacity: .4; cursor: default; }
.map-body.dragging, .p-map.dragging { cursor: grabbing; } .map-body.dragging .shape { cursor: grabbing; }
.p-map { position: relative; }

/* ---------- feed ---------- */
.feed-body { overflow: auto; flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ev { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--line2); padding: 8px 10px; font-size: 13px; line-height: 1.45; cursor: pointer; animation: fadein .3s; }
@keyframes fadein { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ev.dump { border-left-color: #64748b; } .ev.dump.big { border-left-color: var(--gold); }
.ev.call { border-left-color: var(--gold); background: #1a1810; } .ev.call.flip { background: #211f0e; }
.ev.lead { border-left-color: var(--amber); }
.ev.social { border-left-color: var(--p); } .ev.reporter { border-left-color: #e2e8f0; }
.ev .h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ev .h b { font-size: 13px; } .ev .ts { color: var(--dim); font-size: 11px; white-space: nowrap; font-family: var(--mono); }
.ev .b { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ev .batch { display: inline-flex; align-items: center; gap: 5px; }
.ev .bb { width: 70px; height: 6px; background: linear-gradient(90deg, var(--dem) var(--d), var(--gop) var(--d)); }
.ev .chips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px; }
.ev .chip { font-size: 11px; background: var(--bg); border: 1px solid var(--line); padding: 1px 5px; color: var(--muted); }
.ev .chip b { color: var(--text); }
.ev .txt { margin-top: 4px; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.ev .av { width: 20px; height: 20px; vertical-align: middle; margin-right: 5px; background: var(--panel3); }
.ev .imgs { display: flex; gap: 4px; margin-top: 4px; } .ev .imgs img { max-height: 110px; max-width: 48%; border: 1px solid var(--line); }
.ev .quote { margin-top: 4px; border-left: 2px solid var(--line2); padding-left: 6px; color: var(--muted); font-size: 12px; }
.ev .lnk { margin-top: 4px; font-size: 11px; color: var(--p); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--line); padding-top: 4px; }
.ev .tag { font-size: 11px; background: var(--panel3); color: var(--muted); padding: 0 4px; margin-left: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ev .arrow { color: var(--muted); }

/* ---------- bottom: markets + closings ---------- */
#bottom { display: grid; grid-template-columns: 1fr minmax(300px, 24%); gap: var(--gap); padding: 0 var(--pad) var(--gap); height: 212px; }
.markets-body { overflow: auto; flex: 1; padding: 8px; }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.mkt { background: var(--panel2); border: 1px solid var(--line); padding: 9px 12px 8px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; min-width: 0; transition: border-color .12s, background .12s; }
.mkt:hover { border-color: var(--accent); background: var(--panel3); }
.mk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.mk-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-top .delta { font-size: 11px; font-weight: 700; font-family: var(--mono); } .delta.up { color: var(--green); } .delta.down { color: var(--gop-t); }
.mk-mid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.mk-odds { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; } .mk-odds small { font-size: 12px; color: var(--muted); margin-left: 1px; }
.mk-plat { display: flex; flex-direction: column; gap: 1px; font-family: var(--mono); font-size: 11px; font-weight: 600; } .mk-plat .k { color: var(--k); } .mk-plat .p { color: var(--p); }
.mkt svg.spark { width: 72px; height: 26px; }
.mk-bar { height: 3px; background: #1e2430; } .mk-bar i { display: block; height: 100%; }
.mk-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); min-height: 14px; }
.mk-foot .warn { color: var(--amber); font-weight: 700; }
.mkt.ctrl { background: #141c2b; }
.panel.markets.full { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; z-index: 16; }
.panel.markets.full .mkt-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.panel.markets.full .mkt-grid.dist-grid, .panel.markets.full .mkt-grid.wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
#mktTabs button[data-n]:not([data-n=""])::after { content: attr(data-n); color: var(--dim); font-size: 11px; margin-left: 4px; font-weight: 600; }
.mkt-grid.dist-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mkt-grid.wide { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.dist { background: var(--panel2); border: 1px solid var(--line); padding: 7px 10px; cursor: pointer; }
.dist:hover { border-color: var(--line2); }
.dist .l { font-size: 12px; font-weight: 600; margin-bottom: 3px; display: flex; justify-content: space-between; gap: 6px; }
.dist .bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.dist .bar2 { flex: 1; background: var(--k); position: relative; min-width: 8px; }
.dist .bar2.pm { background: var(--p); }
.dist .bar2 span { position: absolute; bottom: -15px; left: -3px; right: -3px; text-align: center; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.dist .bar2 em { position: absolute; top: -14px; left: -3px; right: -3px; text-align: center; font-size: 10px; font-style: normal; color: var(--text); font-family: var(--mono); }
.dist .bars-wrap { padding: 14px 0 16px; }
.dist .hrows { display: flex; flex-direction: column; gap: 2px; }
.hrow { display: grid; grid-template-columns: minmax(80px, 44%) 1fr 36px; gap: 6px; align-items: center; font-size: 11px; }
.hrow .hl { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .hb { height: 6px; background: #1e2430; overflow: hidden; } .hrow .hb i { display: block; height: 100%; background: var(--k); }
.dist.pm .hrow .hb i { background: var(--p); }
.hrow .hv { text-align: right; font-weight: 700; font-family: var(--mono); }
.closings-body { overflow: auto; flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cl { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 8px; background: var(--panel2); border: 1px solid var(--line); }
.cl .t { font-weight: 800; width: 62px; font-family: var(--mono); } .cl .st { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; }
.cl .st span { background: var(--bg); border: 1px solid var(--line); padding: 0 4px; font-size: 11px; font-weight: 700; }
.cl .st span.key { border-color: var(--gold); color: var(--gold); }
.cl .cd { color: var(--muted); font-size: 11px; width: 70px; text-align: right; font-family: var(--mono); }
.cl.past { opacity: .5; } .cl.next { border-color: var(--gold); }

/* ---------- drawer / state view ---------- */
@media (min-width: 901px) {
  .drawer.docked { right: auto; bottom: auto; border: 1px solid var(--line2); z-index: 12; }
  body:has(.drawer.docked:not(.hidden)) #drawerBackdrop { display: none; }
}
.drawer.docked .drawer-inner { padding: 0; gap: 0; overflow: hidden; }
.sv-top { padding: 12px 16px 0; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-title { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; flex-wrap: wrap; }
.sv-title h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.sv-title .muted { font-size: 13px; }
.sv-actions { display: flex; gap: 6px; }
.sv-tabs { display: flex; gap: 0; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.sv-tabs::-webkit-scrollbar { display: none; }
.sv-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 18px 10px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); min-width: 150px; text-align: left; }
.sv-tab:first-child { border-left: 1px solid var(--line); }
.sv-tab:hover { background: var(--panel2); color: var(--text); }
.sv-tab.on { background: var(--bg); color: #fff; }
.sv-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.sv-tl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sv-st { font-size: 12px; font-family: var(--mono); font-weight: 600; }
.sv-st.called { color: var(--gold); }
.sv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(380px, 42%) 1fr; gap: 12px; padding: 12px 16px 16px; overflow: hidden; }
.sv-left { overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-right: 2px; }
.sv-right { display: grid; grid-template-rows: minmax(260px, 1.25fr) minmax(180px, 1fr); gap: 10px; min-height: 0; }
.sv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sv-stats .stat .v { font-size: 18px; }
.sv-pad { padding: 8px 10px; }
.sv-mkts { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px; }
.sv-feed { max-height: 260px; }
.sv-mappanel { min-height: 0; }
.sv-map { position: relative; flex: 1; min-height: 0; background: var(--bg); cursor: grab; }
.sv-map:active { cursor: grabbing; }
.sv-map svg { width: 100%; height: 100%; display: block; }
.sv-map .sv-reset { display: none; }
.sv-shape { stroke: #0b0d11; stroke-width: .75px; cursor: pointer; }
.sv-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sv-legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); min-height: 32px; }
.sv-legend .lg-keys { padding-left: 0; border-left: 0; }
.sv-tablepanel { min-height: 0; }
.sv-table { overflow: auto; flex: 1; min-height: 0; }
table.counties tr.hl td, table.counties tbody tr:hover td { background: var(--panel3); }
table.counties tr.me td { background: #16233d; } table.counties tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.counties th.sorted { color: var(--text); }
table.sv-dist tbody tr { cursor: pointer; }
table.sv-dist td { font-family: var(--sans); }
@media (max-width: 900px) { .bop { grid-template-columns: minmax(0, 1fr) !important; } .bop-card { grid-template-columns: minmax(0, 1fr) !important; } .bop-card .head { flex-wrap: wrap; gap: 4px 10px; } .seatline .big small { margin-left: 4px; } .bop-card, .bop-main, .bop-right, .bop-side { min-width: 0; } .bop-side { grid-template-columns: auto 1fr !important; white-space: normal; } .seatline { flex-wrap: wrap; gap: 6px; } .sv-head { flex-wrap: wrap; } .sv-title h1 { font-size: 20px; } .sv-left, .sv-right, .sv-body > * { min-width: 0; } .sv-table { overflow-x: auto; } .sv-body { grid-template-columns: 1fr; overflow: visible; } .sv-right { grid-template-rows: auto auto; } .sv-map { height: 70vw; flex: none; } .sv-table { max-height: 60vh; } .sv-stats { grid-template-columns: repeat(2, 1fr); } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1120px, 72vw); background: var(--bg); border-left: 1px solid var(--line2); z-index: 20; overflow: hidden; }
#drawerBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 19; }
.drawer-inner { height: 100%; overflow: auto; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.dr-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.dr-head h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; } .dr-head .x { margin-left: auto; }
.dr-cands { display: grid; gap: 5px; }
.dr-cand { display: grid; grid-template-columns: 44px 1fr 110px 90px; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); padding: 6px 10px; }
.dr-cand img { width: 44px; height: 44px; object-fit: cover; background: var(--panel3); }
.dr-cand .nm { font-weight: 800; font-size: 16px; } .dr-cand .nm small { color: var(--muted); font-weight: 600; margin-left: 6px; }
.dr-cand .pct { font-size: 24px; font-weight: 800; text-align: right; font-family: var(--mono); } .dr-cand .vt { color: var(--muted); text-align: right; font-size: 12px; font-family: var(--mono); }
.dr-cand .pbar { height: 6px; background: #1e2430; margin-top: 4px; overflow: hidden; } .dr-cand .pbar i { display: block; height: 100%; }
.dr-cand.win { border-color: var(--gold); }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.stat { background: var(--panel); border: 1px solid var(--line); padding: 8px 12px; }
.stat .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.stat .v { font-size: 20px; font-weight: 800; margin-top: 2px; font-family: var(--mono); } .stat .v small { font-size: 11px; color: var(--muted); font-weight: 600; font-family: var(--sans); }
.dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; }
.dr-grid .panel { min-height: 260px; }
.county-map { height: 300px; position: relative; }
.county-map svg { width: 100%; height: 100%; }
table.counties { width: 100%; border-collapse: collapse; font-size: 12px; }
table.counties th { position: sticky; top: 0; background: var(--panel2); color: var(--muted); font-weight: 700; text-align: right; padding: 4px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; z-index: 1; white-space: nowrap; }
table.counties th:first-child, table.counties td:first-child { text-align: left; }
table.counties td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-family: var(--mono); }
table.counties td.n { font-weight: 600; font-family: var(--sans); } table.counties td .note { color: var(--dim); font-size: 11px; font-weight: 400; display: block; max-width: 220px; white-space: normal; }
.vt-table { width: 100%; border-collapse: collapse; font-size: 12px; } .vt-table td, .vt-table th { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--line); font-family: var(--mono); } .vt-table th { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .vt-table th:first-child, .vt-table td:first-child { text-align: left; color: var(--muted); font-family: var(--sans); }
.spark-big { width: 100%; height: 120px; }
.sec-title { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--panel2); display: flex; justify-content: space-between; align-items: center; }
.srcline { font-size: 11px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.srcline b { color: var(--text); }

/* ---------- sim panel, toast ---------- */
.simpanel { position: fixed; right: 12px; top: 52px; z-index: 30; background: var(--panel); border: 1px solid var(--line2); padding: 10px 12px; width: 340px; display: flex; flex-direction: column; gap: 6px; }
.simpanel .row { display: flex; gap: 6px; flex-wrap: wrap; } .simpanel .row button { background: var(--panel2); border: 1px solid var(--line2); padding: 3px 8px; cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .simpanel .row button:hover { color: var(--text); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #11151c; border: 1px solid var(--line2); border-left: 3px solid var(--gold); color: var(--text); padding: 9px 14px; z-index: 40; font-size: 14px; font-weight: 600; animation: fadein .25s; max-width: 720px; }

/* ---------- stream mode ---------- */
body.stream { --fs: 16px; }
body.stream #top .sub, body.stream #top .sources { display: none; }
body.stream .seatline .big { font-size: 40px; }
body.stream table.races { font-size: 15px; }
body.stream .ev { font-size: 15px; } body.stream .ev .h b { font-size: 16px; }
body.stream .board-body, body.stream .feed-body { scrollbar-width: none; }
body.stream .board-body::-webkit-scrollbar, body.stream .feed-body::-webkit-scrollbar { display: none; }
body.stream #main { grid-template-columns: minmax(540px, 36%) 1fr minmax(360px, 27%); }
body.stream .filters input[type=search] { display: none; }
body.stream .ptable { font-size: 14px; }
@media (max-width: 1400px) { .stats { grid-template-columns: repeat(3, 1fr); } #main { grid-template-columns: minmax(340px, 32%) 1fr minmax(300px, 28%); } }

/* ---------- deck ---------- */
.deck { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 15; padding: var(--gap) var(--pad); }
.deck-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); gap: var(--gap); height: 100%; overflow-x: auto; }
.deck-col { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 300px; }
.deck-col .panel-head { min-height: 30px; }
.deck-col .count { color: var(--dim); font-size: 11px; font-family: var(--mono); }
.deck-col .feed-body { padding: 4px 6px; }
body.stream .deck-cols { grid-auto-columns: minmax(360px, 1fr); }

/* ---------- watch player ---------- */
.watch { position: fixed; right: 14px; bottom: 14px; width: 480px; height: 310px; z-index: 25; background: var(--panel); border: 1px solid var(--line2); display: flex; flex-direction: column; resize: both; overflow: hidden; min-width: 320px; min-height: 200px; }
.watch-head { display: flex; gap: 6px; align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--panel2); cursor: move; user-select: none; }
.watch-head input { flex: 1; }
.watch-head .btn { padding: 0 8px; height: 24px; font-size: 11px; }
.watch-body { flex: 1; background: #000; min-height: 0; position: relative; }
.watch-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.watch-body .hint { padding: 12px 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.watch-body .hint b { color: var(--text); }

/* ---------- predictions ---------- */
.predict { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 15; display: flex; flex-direction: column; }
.predict-bar { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel2); flex-wrap: wrap; }
.predict-bar #predictStatus { margin-left: auto; }
.pfill { display: flex; gap: 4px; align-items: center; }
.pfill .lab { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: 0 4px 0 8px; }
.p-main { display: grid; grid-template-columns: 1fr minmax(460px, 34%); gap: var(--gap); padding: var(--gap) var(--pad); min-height: 0; flex: 1; }
.p-mapwrap { display: flex; flex-direction: column; min-height: 0; }
.seatbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.seatbar .n { font-size: 28px; font-weight: 800; font-family: var(--mono); line-height: 1; } .seatbar .n small { display: block; font-size: 11px; color: var(--muted); font-family: var(--sans); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.seatbar .n.dem { color: var(--dem-t); } .seatbar .n.gop { color: var(--gop-t); } .seatbar .n.r { text-align: right; }
.seatbar .track { position: relative; height: 20px; background: #1e2430; display: flex; overflow: hidden; }
.seatbar .track .seg { height: 100%; } .seatbar .seg.d { background: var(--dem); } .seatbar .seg.i { background: var(--ind); } .seatbar .seg.r { background: var(--gop); margin-left: auto; }
.seatbar .track .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; }
.seatbar .track .lbl { position: absolute; top: 2px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85); font-family: var(--mono); }
.seatbar .meta { grid-column: 1 / -1; font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }
.p-maphead { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel2); min-height: 40px; }
.p-maphead .muted { margin-left: auto; }
.p-map { position: relative; flex: 1; min-height: 240px; }
.p-legend { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); padding: 7px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.p-legend .hatch { display: inline-block; width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px; background: repeating-linear-gradient(45deg, var(--gop) 0 2px, #111 2px 4px); }
.p-legend .okk { display: inline-block; width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px; background: var(--dem); box-shadow: inset 0 0 0 2px #9effb0; }
.p-list { min-height: 0; }
.p-list .panel-head input { flex: 1; }
.p-rows { overflow: auto; flex: 1; }
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptable td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable tr.prow.hl td, .ptable tr.prow:hover td { background: var(--panel3); }
.ptable td.nm { cursor: pointer; width: 38%; } .ptable td.nm .sub { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.ptable td.odds { width: 16%; }
.ptable td.picks { white-space: nowrap; }
.ptable td.st { width: 20%; text-align: right; }
.ptable tr.ok td { background: rgba(34,197,94,.06); } .ptable tr.bad td { background: rgba(229,50,62,.08); }
.ptable tr.pbh td { background: var(--panel2); color: var(--text); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 6px 8px; cursor: pointer; border-top: 1px solid var(--line2); }
.ptable tr.pbh td span { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 8px; }
.ptable tr.pbh td .tog { float: right; color: var(--dim); font-weight: 600; letter-spacing: 0; text-transform: none; }
.bold { font-size: 11px; color: var(--gold); font-weight: 800; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
.pk { background: var(--bg); border: 1px solid var(--line2); padding: 0 10px; height: 28px; cursor: pointer; font-weight: 800; font-size: 12px; margin-right: 3px; min-width: 56px; text-align: left; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; font-family: var(--mono); }
.pk small { font-weight: 600; font-size: 11px; color: var(--dim); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); }
.pk.d.on { background: var(--dem2); border-color: var(--dem); color: #fff; } .pk.r.on { background: var(--gop2); border-color: var(--gop); color: #fff; } .pk.i.on { background: #6b21a8; border-color: var(--ind); color: #fff; }
.pk.on small { color: rgba(255,255,255,.8); }
.pk:disabled { cursor: default; opacity: .8; } .pk:not(.on):hover:not(:disabled) { border-color: #4b5568; color: var(--text); }
.res { font-weight: 700; font-size: 12px; } .res small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.res.ok { color: var(--green); } .res.bad { color: var(--gop-t); } .res.wait { color: var(--dim); font-weight: 500; } .res.lead { color: var(--text); font-weight: 600; }
.p-review { overflow: auto; flex: 1; padding: var(--gap) var(--pad); }
.psum { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.pcard { background: var(--panel); border: 1px solid var(--line); padding: 10px 14px; }
.pcard .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.pcard .v { font-size: 20px; font-weight: 800; margin-top: 2px; font-family: var(--mono); } .pcard .v small { font-size: 11px; font-weight: 600; font-family: var(--sans); }
.rtable { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; }
.rtable th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rtable td { padding: 6px 8px; border-bottom: 1px solid var(--line); font-family: var(--mono); } .rtable td:first-child, .rtable td:nth-child(2) { font-family: var(--sans); } .rtable tr.me td { background: var(--panel3); }
.rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guesses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.guess { display: flex; flex-direction: column; gap: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--muted); } .guess input { height: 28px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.guess small { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------- phones and small tablets (below 900 px): one scrolling column ---------- */
@media (max-width: 900px) {
  :root { --gap: 8px; --pad: 8px; --fs: 14px; }
  html, body { height: auto; }
  body { display: block; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
  #top { position: sticky; top: 0; z-index: 14; flex-wrap: wrap; }
  #top > * { padding: 0 10px; min-height: 44px; }
  #top .clock { flex: 1; min-width: 0; border-right: 0; }
  #top .clock #nextClose { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
  #top .tallies { order: 3; flex: 1 1 100%; border-top: 1px solid var(--line); border-right: 0; overflow-x: auto; scrollbar-width: none; }
  #top .controls { order: 4; flex: 1 1 100%; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; padding: 6px 10px; }
  #top .tallies::-webkit-scrollbar, #top .controls::-webkit-scrollbar { display: none; }
  #top .sources, #btnStream { display: none !important; }
  .btn { height: 34px; line-height: 32px; flex-shrink: 0; }
  .bop { grid-template-columns: 1fr; padding: var(--gap) var(--pad) 0; }
  .bop-card { grid-template-columns: 1fr; min-height: 0; }
  .bop-right { flex-wrap: wrap; justify-content: space-between; }
  #main { display: flex; flex-direction: column; padding: var(--gap) var(--pad); }
  #main > .center { order: -1; display: flex; flex-direction: column; }
  .map-body { height: max(260px, 68vw); flex: none; }
  .needle { max-height: none; }
  .board-body { max-height: 72vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  .board-body table.races { min-width: 660px; }
  .feed-body { max-height: 72vh; }
  #bottom { display: flex; flex-direction: column; height: auto; padding: 0 var(--pad) var(--gap); }
  .markets-body { max-height: 70vh; }
  .closings-body { max-height: 46vh; }
  .mkt-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .panel.markets.full .mkt-grid, .panel.markets.full .mkt-grid.dist-grid, .panel.markets.full .mkt-grid.wide { grid-template-columns: 1fr; }
  .drawer { width: 100vw; border-left: 0; }
  .drawer-inner { padding: 10px; }
  .dr-head { flex-wrap: wrap; gap: 6px; }
  .dr-head h1 { font-size: 20px; flex: 1 1 100%; }
  .dr-cand { grid-template-columns: 36px 1fr 68px; } .dr-cand .vt { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dr-grid, .psum, .rgrid { grid-template-columns: 1fr; }
  .predict, .deck { top: var(--top-h, 96px); overflow-y: auto; }
  .predict-bar { gap: 6px; }
  .predict-bar #predictStatus { margin-left: 0; flex: 1 1 100%; }
  .p-main { display: flex; flex-direction: column; flex: none; }
  .p-map { height: max(260px, 66vw); flex: none; }
  .p-rows { max-height: none; }
  .deck-cols { grid-auto-columns: 88vw; scroll-snap-type: x mandatory; }
  .deck-col { scroll-snap-align: start; min-width: 0; }
  .watch { left: 8px; right: 8px; bottom: 8px; width: auto; height: 58vw; min-width: 0; resize: none; }
  .simpanel { width: calc(100vw - 24px); }
  .toast { left: 8px; right: 8px; transform: none; max-width: none; }
  #modal .m-box { width: calc(100vw - 24px); }
  .brand .sub { display: none; }
  #etClock { font-size: 15px; }
  .panel-head { flex-wrap: wrap; }
  .panel-head .tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .panel-head .tabs::-webkit-scrollbar { display: none; }
  .panel-head .tabs button { flex-shrink: 0; }
  .bop-right .gauge { display: none; }
  .bop-side { grid-template-columns: auto auto auto auto; gap: 4px 12px; width: 100%; }
}
@media (max-width: 900px) and (pointer: coarse) { .tabs button { min-height: 34px; } }

/* ---------- market detail ---------- */
.mktdetail { position: fixed; inset: 0; z-index: 70; background: rgba(5,7,11,.72); display: flex; align-items: flex-start; justify-content: center; padding: 64px 16px 24px; }
.mv-box { width: min(820px, 100%); max-height: calc(100vh - 90px); overflow: auto; background: var(--panel); border: 1px solid var(--line2); }
.mv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.mv-head h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.01em; }
.mv-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.mv-hero { display: flex; gap: 20px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.mv-big { font-family: var(--mono); font-size: 48px; font-weight: 700; line-height: 1; } .mv-big small { font-size: 20px; color: var(--muted); }
.mv-herotext { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.mv-probbar { height: 6px; background: #1e2430; } .mv-probbar i { display: block; height: 100%; }
.mv-moves { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; } .mv-moves span { font-family: var(--sans); } .mv-moves .up { color: var(--green); font-family: var(--mono); font-weight: 700; } .mv-moves .down { color: var(--gop-t); font-family: var(--mono); font-weight: 700; } .mv-moves .warn { color: var(--amber); }
.mv-sec { border-bottom: 1px solid var(--line); }
.mv-sech { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 18px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mv-legend { display: flex; gap: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); flex-wrap: wrap; } .mv-legend i { display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; }
.mv-chart { display: block; width: 100%; height: auto; padding: 0 10px 8px; }
.mv-empty { padding: 18px; color: var(--muted); font-size: 13px; }
table.mv-books { width: calc(100% - 36px); margin: 0 18px 12px; border-collapse: collapse; font-size: 13px; }
table.mv-books th { text-align: left; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.mv-books td { padding: 8px; border-bottom: 1px solid var(--line); } table.mv-books td:last-child { text-align: right; }
.mv-plat { font-weight: 800; } .mv-plat.k { color: var(--k); } .mv-plat.p { color: var(--p); }
a.mv-out { text-decoration: none; } a.mv-out.k:hover { border-color: var(--k); color: var(--k); } a.mv-out.p:hover { border-color: var(--p); color: var(--p); }
.mv-race { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mv-rname { font-weight: 700; font-size: 15px; margin: 3px 0; }
.mv-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; padding: 0 18px 14px; }
.mv-outs { display: flex; flex-direction: column; padding: 0 18px 12px; }
.mv-out-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 52px 52px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mv-out-row:last-child { border-bottom: 0; }
.mv-out-row.fav .t { color: #fff; font-weight: 700; }
.mv-out-row .t { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-out-row .b { height: 8px; background: #1e2430; } .mv-out-row .b i { display: block; height: 100%; } .mv-out-row .b i.k { background: var(--k); } .mv-out-row .b i.p { background: var(--p); }
.mv-out-row .v { text-align: right; font-weight: 700; } .mv-out-row .c { text-align: right; font-size: 12px; } .mv-out-row .c .up { color: var(--green); } .mv-out-row .c .down { color: var(--gop-t); }
.mv-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; }
.dist[data-dist]:hover { border-color: var(--accent); background: var(--panel3); }
@media (max-width: 900px) { .mktdetail { padding: 0; } .mv-box { max-height: 100vh; height: 100vh; border: 0; } .mv-big { font-size: 38px; } table.mv-books th:nth-child(5), table.mv-books td:nth-child(5), table.mv-books th:nth-child(6), table.mv-books td:nth-child(6) { display: none; } .mv-out-row { grid-template-columns: minmax(90px, 38%) 1fr 44px 44px; } }

/* ---------- map usability: touch, expand, phone legends ---------- */
.map-body, .p-map { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.panel.map.full .map-body, .predict .p-map { touch-action: none; }
.sv-mapctl { display: inline-flex; align-items: center; gap: 8px; }
.sv-mapctl .btn { height: 26px; }
#drawer.sv-mapfull .sv-left { display: none; }
#drawer.sv-mapfull .sv-body { grid-template-columns: 1fr; }
#drawer.sv-mapfull .sv-right { grid-template-rows: minmax(0, 1fr) minmax(150px, 30%); }
@media (min-width: 901px) { #drawer.docked.sv-mapfull { left: 0 !important; top: var(--top-h, 52px) !important; width: 100vw !important; height: calc(100vh - var(--top-h, 52px)) !important; z-index: 17; } #drawer.sv-mapfull .sv-right { grid-template-columns: minmax(0, 1fr) minmax(420px, 30%); grid-template-rows: minmax(0, 1fr); } }
.panel.map.full, .panel.markets.full { top: var(--top-h, 52px); }
@media (max-width: 900px) {
  .map-sub { gap: 6px 10px; padding: 6px 10px; }
  .map-sub .lg-keys { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-left: 0; border-left: 0; width: 100%; gap: 8px; white-space: nowrap; }
  .map-sub .lg-keys::-webkit-scrollbar { display: none; }
  .map-sub .lg-keys > .dim { display: none; }
  .map-sub .lg-keys .sw, .sv-legend .sw { flex: none; }
  .map-sub .lg-hint { margin-left: 0; font-size: 11px; }
  .map-zoom { top: auto; bottom: 8px; right: 8px; flex-direction: row; }
  .map-zoom button { width: 36px; height: 34px; }
  .panel.map.full { bottom: 0; }
  .panel.map.full .map-body { flex: 1; height: auto; }
  #drawer.sv-mapfull .sv-mappanel { position: fixed; left: 0; right: 0; bottom: 0; top: var(--top-h, 52px); z-index: 30; }
  #drawer.sv-mapfull .sv-mappanel .sv-map { height: auto; flex: 1; }
  .sv-body { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .sv-left { overflow: visible; }
  .sv-right { display: flex; flex-direction: column; gap: 10px; }
  .sv-mappanel, .sv-tablepanel { flex: none; }
  .sv-map { height: min(82vw, 440px); flex: none; }
  .sv-table { max-height: 62vh; }
  .sv-mappanel .sec-title { flex-wrap: wrap; gap: 6px; }
  .sv-mapctl { flex-wrap: wrap; }
  .sv-legend { font-size: 11px; gap: 8px; }
}

/* ---------- viewport priorities ----------
   1 headline seat counts, 2 map, 3 race board and live feed, 4 markets and poll closings.
   Nothing may push the page wider than the screen; secondary panels give up space before the map does. */
body { grid-template-columns: minmax(0, 1fr); }
#top { overflow: hidden; min-width: 0; }
.tallies { min-width: 0; }
/* balance of power: same facts, less padding */
@media (min-width: 901px) {
  .bop-card { min-height: 0; padding: 8px 14px 10px; gap: 4px 14px; }
  .bop-card .head { padding-bottom: 4px; }
  .bop-main { gap: 5px; }
  .seatline .big { font-size: 28px; }
  .gauge { width: 108px; height: 70px; }
  .bop-side { gap: 2px 12px; }
  .needle { max-height: 150px; } .needle-body { min-height: 96px; } .needle-chart { min-height: 90px; }
  #bottom { height: 172px; }
  .closings-body { position: relative; }
  /* markets strip: one row of whole cards, scroll sideways for more; Expand shows the full grid */
  .panel.markets:not(.full) .markets-body { overflow: hidden; padding: 8px 8px 0; }
  .mkt-grid.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 236px); grid-template-columns: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: 6px; height: 100%; align-items: stretch; }
  .mkt-grid.strip > * { scroll-snap-align: start; min-height: 0; }
  .mkt-grid.strip::-webkit-scrollbar { height: 6px; }
  .dist.mini { display: flex; flex-direction: column; gap: 4px; }
  .dist.mini .l { margin-bottom: 0; } .dist.mini .l > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dist.mini .hrows { gap: 3px; }
}
/* short screens: the control chart repeats numbers already in the seat cards, so the map takes its space */
@media (min-width: 901px) and (max-height: 900px) { .panel.needle { display: none; } .center { grid-template-rows: 1fr; } }
/* narrower desktops: the header sheds secondary text instead of widening the page */
@media (min-width: 901px) and (max-width: 1600px) {
  .brand .sub { display: none; }
  .clock { min-width: 150px; } #nextClose { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tally { min-width: 0; padding: 0 12px; } .tally .sm { display: none; }
  .controls { gap: 4px; } .controls .btn { padding: 0 9px; }
  #main { grid-template-columns: minmax(440px, 36%) 1fr minmax(300px, 25%); }
  .bop-right .gauge { display: none; }
}
@media (min-width: 901px) and (max-width: 1280px) { #btnStream, #btnAbout { display: none; } .srcbtn > span:last-child { display: none; } }

.flips { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; }
.tabs button { white-space: nowrap; }
#mktTabs button[data-n]:not([data-n=""])::after { display: inline; }
@media (min-width: 901px) and (max-width: 1600px) {
  #main { grid-template-columns: minmax(460px, 40%) 1fr minmax(290px, 24%); }
  table.races col:nth-child(6) { width: 0 !important; } table.races .c-shift { padding: 0 !important; border: 0; }
  table.races col:nth-child(1) { width: 31% !important; } table.races col:nth-child(2), table.races col:nth-child(3) { width: 18% !important; }
}
@media (min-width: 901px) and (max-height: 900px) {
  #feedBody .ev .txt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  #feedBody .ev .imgs img { max-height: 80px; }
}

@media (min-width: 901px) and (max-width: 1600px) {
  .map-sub { gap: 4px 10px; padding: 4px 10px; }
  .map-sub .lg-keys { gap: 3px 8px; font-size: 11px; }
  .map-sub .lg-keys .sw { flex: none; }
  .map-sub .lg-keys > .dim, .map-sub .lg-hint, .map-sub .lg-label { display: none; }
}

.mk-plat span { white-space: nowrap; }
@media (max-width: 900px) { .mk-mid { gap: 6px; } .mkt svg.spark { width: 54px; } .mk-odds { font-size: 20px; } }

.sv-dpick { display: flex; gap: 6px; align-items: center; padding: 8px 0 10px; }
.sv-dpick .sel { flex: 1; min-width: 0; } .sv-dpick .sel-btn { width: 100%; max-width: none; }
.sv-dpick .btn { flex: none; font-family: var(--mono); }
@media (max-width: 900px) { .sv-dpick .btn, .sv-dpick .sel-btn { height: 38px; } .sv-dpick .sel-menu { max-height: 60vh; } }

#top .brand { cursor: pointer; } #top .brand:hover .title { color: #fff; } #top .brand:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.btn.home { border-color: var(--accent); color: #fff; background: #172544; } .btn.home:hover { background: #1f3260; }