/* Layout: a command bar, a control strip of number tiles, then a two-column board:
   the Ohio race table (left, wide) and county + national watch (right). Square panels, hairline rules. */
:root {
  --bg: #F3F1EC;
  --panel: #FBFAF7;
  --ink: #1B2420;
  --muted: #4E5A54;
  --rule: #D9D5CB;
  --forest: #1A3C34;
  --gold: #B8A46E;
  --gold-soft: #EDE5CC;
  --dem: #2F5E9E;
  --dem-soft: #DCE6F3;
  --rep: #B23A31;
  --rep-soft: #F3DCD8;
  --ok: #2E7D4F;
  --warn: #B7791F;
  --bad: #B23A31;
  --sample: #8A5A00;
  --sample-bg: #FFF3D6;
  --map-dem: #1F4E9A;
  --map-rep: #B4232A;
  --map-tie: #ECE9E2;
  --map-yes: #1A3C34;
  --map-no: #A8862F;
  --map-none: #F7F5F0;
  --map-line: #FFFFFF;
  --display: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
  --body: "Libre Franklin", "Franklin Gothic Book", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111915; --panel: #17211C; --ink: #E9ECE7; --muted: #BCC8C1; --rule: #3A4A42;
    --forest: #0E2620; --gold: #D4C5A0; --gold-soft: #3A3626;
    --dem: #7FA6E0; --dem-soft: #1E2C40; --rep: #E58A80; --rep-soft: #402220;
    --ok: #6CC08F; --warn: #E2B45A; --bad: #E58A80; --sample: #F1C76B; --sample-bg: #3A2F14; --map-dem: #7FA8F0; --map-rep: #F2766A; --map-tie: #56625B; --map-yes: #6FB89B; --map-no: #D9B45A; --map-none: #26322C; --map-line: #111915;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111915; --panel: #17211C; --ink: #E9ECE7; --muted: #BCC8C1; --rule: #3A4A42;
  --forest: #0E2620; --gold: #D4C5A0; --gold-soft: #3A3626;
  --dem: #7FA6E0; --dem-soft: #1E2C40; --rep: #E58A80; --rep-soft: #402220;
  --ok: #6CC08F; --warn: #E2B45A; --bad: #E58A80; --sample: #F1C76B; --sample-bg: #3A2F14; --map-dem: #7FA8F0; --map-rep: #F2766A; --map-tie: #56625B; --map-yes: #6FB89B; --map-no: #D9B45A; --map-none: #26322C; --map-line: #111915;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; font-weight: 500; font-variant-numeric: lining-nums; line-height: 1.35; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.wrap { padding-inline: 16px; padding-block: 0 32px; max-width: 1480px; margin: 0 auto; }

/* sample banner */
.sample { background: var(--sample-bg); color: var(--sample); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 6px 16px; text-align: center; }

/* command bar */
.bar { background: var(--forest); color: #F5F3F0; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.bar h1 { font-family: var(--display); font-weight: 800; font-size: 22px; margin: 0; letter-spacing: .01em; }
.bar h1 b { color: #D4C5A0; font-weight: 800; }
.clock { font-size: 13px; color: #C9D3CD; }
.clock strong { color: #F5F3F0; font-size: 18px; margin-right: 6px; }
.feeds { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: auto; font-size: 12.5px; }
.feed { display: inline-flex; align-items: center; gap: 6px; color: #C9D3CD; white-space: nowrap; }
.feed i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #6CC08F; }
.feed.stale i { background: #E2B45A; }
.feed.down i { background: #E58A80; }
.feed b { color: #F5F3F0; font-weight: 700; }

/* control strip */
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); background: var(--panel); }
.tile { padding: 12px 16px; border-right: 1px solid var(--rule); min-width: 0; }
.tile:last-child { border-right: 0; }
.tile .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tile .v { font-family: var(--display); font-size: 24px; font-weight: 800; margin-top: 2px; }
.tile .s { font-size: 13px; color: var(--muted); }
.d { color: var(--dem); } .r { color: var(--rep); }
.meter { position: relative; height: 8px; background: var(--rule); margin-top: 8px; display: flex; }
.meter span { display: block; height: 100%; }
.meter .line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }

/* board */
.board { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.panel { background: var(--panel); border: 1px solid var(--rule); min-width: 0; }
.panel > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 12px 16px 10px; border-bottom: 1px solid var(--rule); }
.panel h2 { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0; }
.panel .sub { font-size: 12.5px; color: var(--muted); }
.side { display: grid; gap: 20px; align-content: start; min-width: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.tabs button { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--forest); color: #F5F3F0; border-color: var(--forest); }
.tabs button:focus-visible, .callbtn:focus-visible, tr.race:focus-visible, .links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; white-space: nowrap; }
td.n, th.n { text-align: right; }
tr.tierrow td { background: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; }
tr.race { cursor: pointer; }
tr.race:hover td { background: var(--gold-soft); }
tr.race.sel td { background: var(--gold-soft); }
.rname { font-weight: 700; white-space: nowrap; }
.cands { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pct { font-weight: 700; }
.marg { white-space: nowrap; font-weight: 700; }
.mbar { position: relative; width: 90px; height: 10px; background: var(--rule); }
.mbar .c { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink); }
.mbar span { position: absolute; top: 0; bottom: 0; }
.rep { width: 64px; }
.rep .t { height: 4px; background: var(--rule); margin-top: 3px; }
.rep .t span { display: block; height: 100%; background: var(--muted); }
.rating { font-size: 12.5px; white-space: nowrap; }
.callbtn { font: inherit; font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--rule); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.callbtn.cd { background: var(--dem); color: #fff; border-color: var(--dem); }
.callbtn.cr { background: var(--rep); color: #fff; border-color: var(--rep); }
.callsrc { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* detail */
tr.detailrow > td { padding: 0; background: var(--bg); border-bottom: 2px solid var(--gold); }
tr.detailrow table th, tr.detailrow table td { padding: 5px 10px; }
.detail { padding: 14px 16px 16px; }
.detail h3 { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 0 0 4px; }
.detail p { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; }
.delta-pos { color: var(--dem); font-weight: 700; } .delta-neg { color: var(--rep); font-weight: 700; }
.ctype { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* national */
.sen td { padding: 6px 10px; }
.status { font-size: 12px; font-weight: 700; white-space: nowrap; }
.status.cd { color: var(--dem); } .status.cr { color: var(--rep); } .status.open { color: var(--muted); font-weight: 500; }

/* log + links */
.log { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow-y: auto; }
.log li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 6px 16px; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.log time { color: var(--muted); }
.links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.links a { padding: 9px 16px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 14px; }
.links a:nth-child(odd) { border-right: 1px solid var(--rule); }
.links a:hover { background: var(--gold-soft); }
.links a small { display: block; color: var(--muted); font-size: 11.5px; }

@media (max-width: 1100px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile:nth-child(3) { border-right: 0; }
  .tile:nth-child(n+4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { border-right: 1px solid var(--rule) !important; }
  .tile:nth-child(even) { border-right: 0 !important; }
  .tile:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .feeds { margin-left: 0; }
  .links { grid-template-columns: minmax(0, 1fr); }
  .links a:nth-child(odd) { border-right: 0; }
  .mbar { width: 80px; }
}
@media (prefers-reduced-motion: no-preference) { tr.race td { transition: background .12s; } }

/* county map */
.mapsec { margin-top: 20px; }
.mapgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } /* side panel widened a little for the county breakouts (Terry, Oct. 17) */
.mapwrap { position: relative; padding: 12px 16px 16px; border-right: 1px solid var(--rule); min-width: 0; }
#ohmap { width: 100%; height: auto; display: block; max-height: 74vh; }
#ohmap path.cty { stroke: var(--map-line); stroke-width: .8; cursor: pointer; }
#ohmap path.cty:hover, #ohmap path.cty:focus { stroke: var(--ink); stroke-width: 1.8; outline: none; }
#ohmap path.cty.pick { stroke: var(--ink); stroke-width: 2.4; }
.mapctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-left: auto; }
.mapctl label { font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.mapctl select { font: inherit; font-size: 15px; padding: 4px 8px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); min-width: 170px; }
.mapctl #contest { min-width: 230px; }
.mapctl button { font: inherit; font-size: 14px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--forest); background: var(--forest); color: #F5F3F0; cursor: pointer; }
.mapctl button[aria-pressed="true"] { background: transparent; color: var(--ink); }
.mapctl button:disabled { opacity: .6; cursor: default; }
.mapctl select:focus-visible, .mapctl button:focus-visible, .mapctl input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-top: 8px; }
.legend .ramp, .legend .ticks { display: grid; grid-template-columns: repeat(7, 34px); }
.legend .ramp { height: 12px; }
.legend .ramp span { display: block; }
.legend .ticks { font-size: 12.5px; text-align: center; }
.legend .nodata { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.legend .nodata i { width: 14px; height: 12px; display: inline-block; border: 1px solid var(--rule); background: repeating-linear-gradient(45deg, var(--map-none) 0 3px, var(--rule) 3px 4px); }
.tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--ink); padding: 8px 10px; font-size: 14px; min-width: 200px; z-index: 5; }
.tip b { font-family: var(--display); font-size: 16px; font-weight: 700; }
.tip table td { padding: 2px 8px 2px 0; border: 0; }
.mapside { padding: 12px 16px 16px; min-width: 0; display: grid; gap: 18px; align-content: start; }
.mapside h3 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 2px 0 4px; }
.mapside .k { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.totals td, .cdet td { padding: 6px 8px 6px 0; }
.bar2 { display: flex; height: 10px; margin-top: 4px; background: var(--rule); }
.bar2 span { display: block; height: 100%; }
.flips { font-size: 14px; color: var(--muted); margin-top: 6px; }
@media (max-width: 1100px) { .mapgrid { grid-template-columns: minmax(0, 1fr); } .mapwrap { border-right: 0; border-bottom: 1px solid var(--rule); } }
@media (max-width: 640px) { .mapctl select, .mapctl #contest { min-width: 0; width: 100%; } .mapctl, .mapctl label { margin-left: 0; width: 100%; } }

/* race calls */
.callcell { display: grid; gap: 4px; justify-items: start; }
.callbtn.csplit { background: var(--warn); color: #1B2420; border-color: var(--warn); }
.ctags { display: flex; flex-wrap: wrap; gap: 3px; max-width: 150px; }
.ctag { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 5px; border: 1px solid currentColor; white-space: nowrap; }
.ctag.td { color: var(--dem); } .ctag.tr { color: var(--rep); }
.callpop { position: absolute; z-index: 20; width: 300px; background: var(--panel); border: 1px solid var(--ink); padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.callpop .ph { font-weight: 800; font-size: 15px; }
.callpop .psub { font-size: 12.5px; color: var(--muted); margin: 2px 0 8px; }
.callpop .psub:last-child { margin: 8px 0 0; }
.pgrid { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.psrc { font-size: 13px; font-weight: 700; }
.pbtn { font: inherit; font-size: 13px; padding: 5px 6px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbtn:hover { border-color: var(--ink); }
.pbtn.on-d { background: var(--dem); border-color: var(--dem); color: #fff; }
.pbtn.on-r { background: var(--rep); border-color: var(--rep); color: #fff; }
.pbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mapcall { font-size: 14px; font-weight: 700; margin: 2px 0 6px; }

/* live additions */
.notice { background: var(--sample-bg); color: var(--sample); font-weight: 700; font-size: 13px; padding: 6px 16px; text-align: center; }
.dryrun { background: var(--warn); color: #1B2420; font-weight: 800; font-size: 13px; letter-spacing: .04em; padding: 6px 16px; text-align: center; }
.muted { color: var(--muted); font-weight: 600; font-size: .8em; }
td.empty, .emptyli { color: var(--muted); padding: 14px 16px; font-size: 14px; }
.emptyli { display: block !important; }
.callchip { font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--rule); white-space: nowrap; font-weight: 700; }
.callchip.none { color: var(--muted); font-weight: 500; border-color: transparent; padding-left: 0; }
.callchip.cd { background: var(--dem); color: #fff; border-color: var(--dem); }
.callchip.cr { background: var(--rep); color: #fff; border-color: var(--rep); }
.callchip.csplit { background: var(--warn); color: #1B2420; border-color: var(--warn); }
.feed.idle i { background: #9AA8A0; }
.meter span { flex: none; }
/* district maps */
#ohmap path.dst { stroke: var(--map-line); stroke-width: .6; cursor: pointer; vector-effect: non-scaling-stroke; }
#ohmap path.dst.tracked { stroke: var(--ink); stroke-width: 1.4; }
#ohmap path.dst:hover, #ohmap path.dst:focus { stroke: var(--ink); stroke-width: 2; outline: none; }
#ohmap path.dst.pick { stroke: var(--ink); stroke-width: 2.6; }
#ohmap path.cty { vector-effect: non-scaling-stroke; }
#outlines path { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: .5; pointer-events: none; vector-effect: non-scaling-stroke; }
.zooms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.zooms button { font: inherit; font-size: 13px; padding: 3px 9px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }
.zooms button[aria-pressed="true"] { background: var(--forest); color: #F5F3F0; border-color: var(--forest); }
.zooms button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.legend .nodata i.hold { background: color-mix(in oklab, var(--map-rep) 26%, var(--map-tie)); }
.bar2.seats { position: relative; }
.bar2 .line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }

/* county breakouts */
.breakout { margin-top: 10px; }
.breakout .bk-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; font-weight: 700; }
table.bk th, table.bk td { padding: 5px 8px 5px 0; font-size: 13.5px; }
table.bk tr.nov td { color: var(--muted); }
.mapside table.bk td.d, .mapside table.bk td.r { font-weight: 700; }

/* private early-vote panel */
.evsec { margin-top: 20px; }
.privchip { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--ink); }
.evgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.evcol { padding: 12px 16px 14px; min-width: 0; }
.evcol + .evcol { border-left: 1px solid var(--rule); }
.evcol .k { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.evbig { font-size: 22px; font-weight: 800; }
.evline { font-size: 14px; color: var(--muted); margin-top: 4px; }
.evparty { display: flex; height: 10px; margin-top: 8px; background: var(--rule); }
.evparty span { display: block; height: 100%; }
.evkey { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.evkey i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.stat { font-size: 11.5px; font-weight: 700; padding: 1px 6px; border: 1px solid currentColor; white-space: nowrap; }
.stat.ver { color: var(--ok); } .stat.unv { color: var(--warn); } .stat.off { color: var(--ink); } .stat.none { color: var(--muted); border-color: transparent; font-weight: 500; padding-left: 0; }
.evnote { font-size: 13px; color: var(--muted); padding: 10px 16px 14px; margin: 0; max-width: 90ch; }
#evTable td.cap { font-size: 12px; color: var(--muted); }
@media (max-width: 800px) { .evgrid { grid-template-columns: minmax(0, 1fr); } .evcol + .evcol { border-left: 0; border-top: 1px solid var(--rule); } }

.evsec .scroll { max-height: 460px; overflow-y: auto; }
.evsec thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }

/* Clarion brand header: the official reversed lockup sits on its own brand green */
.bar { background: #17392C; padding: 15px 24px; }
.brand { display: flex; align-items: center; gap: 24px; min-width: 0; flex-wrap: wrap; }
.lockup { height: 119px; width: auto; max-width: 100%; display: block; flex: none; }
.bar h1 { font-size: 28px; line-height: 1.15; font-weight: 800; color: #F5F3F0; margin: 0; white-space: nowrap; padding-left: 24px; border-left: 1px solid rgba(210, 200, 165, .55); }
.bar .clock { text-align: right; color: #D2C8A5; }
.bar .clock strong { display: block; font-size: 20px; margin: 0; color: #F5F3F0; }
/* feed health now lives in the Sources panel */
.feedhealth { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.fh-k { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.feedhealth .feeds { margin-left: 0; }
.feedhealth .feed { color: var(--muted); }
.feedhealth .feed b { color: var(--ink); }
@media (max-width: 760px) { .lockup { height: 82px; } .bar h1 { font-size: 21px; padding-left: 0; border-left: 0; } .bar .clock { text-align: left; } }

/* votes still out */
.vosec { margin-top: 20px; }
.vogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.vocol { padding: 12px 16px 14px; min-width: 0; }
.vocol + .vocol { border-left: 1px solid var(--rule); }
.vocol .k { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.vobig { font-size: 24px; font-weight: 800; }
.voline { font-size: 14px; color: var(--muted); margin-top: 4px; }
.vosec .scroll { max-height: 360px; overflow-y: auto; }
.vosec thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
@media (max-width: 800px) { .vogrid { grid-template-columns: minmax(0, 1fr); } .vocol + .vocol { border-left: 0; border-top: 1px solid var(--rule); } }

.cands2 { font-size: 13.5px; line-height: 1.35; }
.cands2 .ind { color: var(--ink); font-weight: 600; }
.cands2 .inc { color: var(--muted); font-size: 12px; }

/* Full-screen readability: larger type and wider layout on big displays */
@media (min-width: 1500px) {
  body { font-size: 17px; }
  .wrap { max-width: 1880px; padding-inline: 24px; }
  .tile { padding: 14px 20px; }
  .tile .k { font-size: 13.5px; }
  .tile .v { font-size: 30px; }
  .tile .s { font-size: 15px; }
  .panel h2 { font-size: 21px; }
  .panel .sub { font-size: 15px; }
  th { font-size: 13.5px; }
  th, td { padding: 9px 12px; }
  tr.tierrow td { font-size: 13.5px; }
  .cands, .cands2 { font-size: 15px; }
  .rating, .callbtn, .status { font-size: 14.5px; }
  .callsrc, .ctype { font-size: 13px; }
  .detail h3 { font-size: 20px; }
  .detail p { font-size: 15.5px; }
  .log li { font-size: 15.5px; grid-template-columns: 76px minmax(0, 1fr); }
  .links a { font-size: 16px; }
  .links a small { font-size: 13px; }
  .mapctl label { font-size: 16px; }
  .mapctl select { font-size: 17px; }
  .legend, .zooms button, .tip, .flips, .mapcall, .mapctl button { font-size: 16px; }
  .legend .ticks { font-size: 14px; }
  .tip b { font-size: 18px; }
  .mapside h3 { font-size: 23px; }
  .mapside .k, .vocol .k { font-size: 14px; }
  .vobig { font-size: 30px; }
  .voline { font-size: 16px; }
  .ctag { font-size: 12.5px; }
  .callpop .ph { font-size: 17px; } .callpop .psub, .psrc, .pbtn { font-size: 14.5px; }
  .cands2 .inc { font-size: 13.5px; }
  .notice, .dryrun { font-size: 15px; }
  td.empty, .emptyli { font-size: 16px; }
  .callchip { font-size: 14.5px; }
  .breakout .bk-h, .evcol .k, .fh-k { font-size: 14px; }
  table.bk th, table.bk td { font-size: 15.5px; }
  .privchip { font-size: 13px; }
  .evbig { font-size: 28px; }
  .evline { font-size: 16px; }
  .evkey { font-size: 15px; }
  .stat { font-size: 13.5px; }
  #evTable td.cap { font-size: 14px; }
  .bar h1 { font-size: 31px; }
  .feeds { font-size: 15px; }
  .mbar { width: 110px; height: 12px; }
  .evnote { font-size: 15px; }
  .bar .clock { font-size: 14px; } .bar .clock strong { font-size: 21px; }
  .sample { font-size: 15px; }
}
@media (min-width: 2200px) {
  body { font-size: 19px; }
  .wrap { max-width: 2300px; }
  .tile .v { font-size: 34px; }
  .tile .s, .panel .sub, .cands, .cands2 { font-size: 16.5px; }
  th { font-size: 14.5px; }
  .evnote, .voline, .evline, .legend, .tip, td.empty { font-size: 17px; }
  .stat, .callsrc, .ctype, .legend .ticks, .links a small { font-size: 15px; }
  .evnote { max-width: 110ch; }
}

/* Mid-size windows (pop-outs, scaled laptops): give the Ohio board the full width */
@media (max-width: 1499px) and (min-width: 1101px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Anything still too wide scrolls sideways: visible scrollbar, drag to pan, edge fade as a hint */
.scroll { position: relative; scrollbar-width: auto; scrollbar-color: var(--muted) transparent; }
.scroll::-webkit-scrollbar { height: 12px; }
.scroll::-webkit-scrollbar-thumb { background: var(--muted); border: 3px solid var(--panel); }
.scroll.can-drag { cursor: grab; }
.scroll.dragging { cursor: grabbing; user-select: none; }
.scroll.more-right { box-shadow: inset -18px 0 14px -14px rgba(0,0,0,.35); }
.scrollhint { display: none; font-size: 13px; color: var(--muted); padding: 6px 16px 0; }
.scrollhint.on { display: block; }

.bar .clock { font-size: 12.5px; }
@media (max-width: 420px) { .bar h1 { white-space: normal; } }

/* Chyron: a rotating ticker of the night's major updates, under the header */
.chyron { display: flex; align-items: stretch; background: #0F2A20; color: #F5F3F0; border-bottom: 2px solid #A89868; min-height: 40px; overflow: hidden; }
.chyron.dry { border-bottom-color: var(--warn); }
.chy-tag { flex: none; display: flex; align-items: center; padding: 0 16px; background: #A89868; color: #0F2A20; font-weight: 800; font-size: 13px; letter-spacing: .12em; }
.chyron.dry .chy-tag { background: var(--warn); color: #1B2420; }
.chy-win { position: relative; flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.chy-track { display: inline-flex; white-space: nowrap; will-change: transform; }
.chy-track.run { animation: chyscroll var(--chy-dur, 40s) linear infinite; }
.chyron:hover .chy-track { animation-play-state: paused; }
@keyframes chyscroll { from { transform: translateX(0); } to { transform: translateX(var(--chy-dist, -50%)); } }
.chy-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 28px; font-size: 15px; font-weight: 600; border-right: 1px solid rgba(210, 200, 165, .35); }
.chy-t { color: #D2C8A5; font-weight: 700; font-variant-numeric: tabular-nums; }
.chy-k { font-size: 11.5px; letter-spacing: .1em; padding: 1px 6px; border: 1px solid currentColor; color: #D2C8A5; }
.k-split .chy-k { color: var(--warn); }
.chy-src { color: #C9D3CD; font-weight: 500; font-size: 13.5px; }
.k-score .chy-x { color: #E4E9E5; font-weight: 500; }
.chy-add { flex: none; font: inherit; font-size: 13px; font-weight: 700; padding: 0 14px; border: 0; border-left: 1px solid rgba(210, 200, 165, .35); background: transparent; color: #D2C8A5; cursor: pointer; }
.chy-add:hover { color: #F5F3F0; }
.chy-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--rule); }
.chy-form input { font: inherit; flex: 1 1 360px; padding: 6px 10px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
.chy-form button { font: inherit; font-size: 14px; padding: 6px 12px; border: 1px solid var(--forest); background: var(--forest); color: #F5F3F0; cursor: pointer; }
.chy-form button[type=button] { background: transparent; color: var(--ink); border-color: var(--rule); }
.chy-own { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.chy-own .chy-del { font-size: 12.5px; padding: 3px 8px; background: transparent; color: var(--muted); border: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .chy-track.run { animation-duration: calc(var(--chy-dur, 40s) * 2.5); } }
@media (min-width: 1500px) { .chyron { min-height: 46px; } .chy-item { font-size: 17px; } .chy-tag { font-size: 14.5px; } .chy-src { font-size: 15px; } .chy-k { font-size: 12.5px; } }
@media (max-width: 640px) { .chy-item { font-size: 14px; padding: 0 18px; } .chy-add { display: none; } }
.chy-form[hidden], .chy-add[hidden] { display: none; }

/* Calls are colored by the winner's party: Democratic wins blue, Republican wins red */
.chy-win { align-items: stretch; }
.chy-track { align-items: stretch; }
.chy-item { align-items: center; }
.chy-item.win-d { background: #24527E; border-right-color: transparent; }
.chy-item.win-r { background: #B22234; border-right-color: transparent; }
.chy-item.win-d + .chy-item.win-d, .chy-item.win-r + .chy-item.win-r { box-shadow: inset 2px 0 0 #0F2A20; }
.win-d .chy-t, .win-r .chy-t, .win-d .chy-k, .win-r .chy-k { color: #FFFFFF; }
.win-d .chy-src, .win-r .chy-src { color: rgba(255, 255, 255, .85); }

/* Dry run tag in yellow; no fade at the ticker edges (items clip cleanly at the tag) */
.chyron.dry .chy-tag { background: #F2C230; color: #1B2420; }
.chyron.dry { border-bottom-color: #F2C230; }
.chy-win { -webkit-mask-image: none; mask-image: none; }

.chy-pin { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); }
.chy-pin input { flex: none; }
.chy-own { flex-direction: column; gap: 4px; }
.chy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.chy-rt { margin-right: 4px; }

/* Header balance: logo left, title centered, clock right */
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 24px; }
.brand { display: contents; }
.lockup { height: 101px; justify-self: start; }
.bar h1 { justify-self: center; text-align: center; padding-left: 0; border-left: 0; }
.bar .clock { justify-self: end; }
@media (max-width: 900px) {
  .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .bar h1 { grid-column: 1 / -1; grid-row: 2; justify-self: start; text-align: left; }
}
@media (max-width: 760px) { .lockup { height: 70px; } }

/* Race calls: source and time tags sit to the right of the winner's name */
.callcell { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.ctags { flex-wrap: nowrap; max-width: none; gap: 4px; }
.sen .callcell, .sen .ctags { flex-wrap: wrap; }

/* One bold family throughout: text at 600, headings, numbers and labels at 800. No light or regular weights. */
body { font-weight: 600; }
.status.open, .callchip.none, .chy-src, .k-score .chy-x, .muted { font-weight: 600; }
.chy-item, .chy-x { font-weight: 700; }
.chy-src { font-weight: 600; }
.k-score .chy-x { font-weight: 700; }
th, .tile .k, .panel h2, .bar h1, .tile .v, .vobig, .evbig, .detail h3, .mapside h3 { font-weight: 800; }
input, select, button, textarea { font-weight: 600; }

/* Header (Oct. 3, late): title left, logo centered, clock right */
.bar h1 { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; }
.lockup { grid-column: 2; grid-row: 1; justify-self: center; }
.bar .clock { grid-column: 3; grid-row: 1; }
@media (max-width: 900px) {
  .lockup { grid-column: 1; grid-row: 1; justify-self: start; }
  .bar .clock { grid-column: 2; grid-row: 1; }
  .bar h1 { grid-column: 1 / -1; grid-row: 2; }
}

/* Clock time matches the title size at every width */
.bar .clock strong { font-size: 28px; font-weight: 800; line-height: 1.15; }
@media (min-width: 1500px) { .bar .clock strong { font-size: 31px; } }
@media (max-width: 760px) { .bar .clock strong { font-size: 21px; } }

/* Title block: title with the firm's website beneath, mirroring the clock's two lines */
.titleblock { grid-column: 1; grid-row: 1; justify-self: start; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.titleblock h1 { grid-column: auto; grid-row: auto; }
.bar .site { color: #D2C8A5; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(210, 200, 165, 0); align-self: flex-start; }
.bar .site:hover { border-bottom-color: rgba(210, 200, 165, .7); }
@media (min-width: 1500px) { .bar .site { font-size: 14px; } }
@media (max-width: 900px) { .titleblock { grid-column: 1 / -1; grid-row: 2; } }
/* Lockup 15% smaller (Oct. 3, late) */
.lockup { height: 86px; }
@media (max-width: 760px) { .lockup { height: 60px; } }
/* More vertical room in the header (Oct. 3, late) */
.bar { padding: 26px 32px; }
.titleblock { gap: 8px; }
@media (min-width: 1500px) { .bar { padding: 30px 36px; } }
@media (max-width: 760px) { .bar { padding: 16px 16px; } }
/* Lockup enlarged to 112px (Oct. 3, late), served from a matching sharp set */
.lockup { height: 112px; }
@media (max-width: 760px) { .lockup { height: 72px; } }
.lockup { width: 301px; }
@media (max-width: 760px) { .lockup { width: auto; } }
#zooms { display: none !important; } /* metro zoom buttons removed at Terry's request (Oct. 4) */

/* Ohio Senate seats not on the ballot: muted party tint under dark diagonal stripes */
:root { --hold-d: color-mix(in oklab, var(--map-dem) 22%, var(--map-tie)); --hold-r: color-mix(in oklab, var(--map-rep) 22%, var(--map-tie)); --hold-stripe: rgba(38, 43, 43, .42); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hold-stripe: rgba(0, 0, 0, .55); } }
:root[data-theme="dark"] { --hold-stripe: rgba(0, 0, 0, .55); }
.legend .nodata i.holdx { background: repeating-linear-gradient(45deg, rgba(38, 43, 43, .42) 0 3px, color-mix(in oklab, var(--map-rep) 22%, var(--map-tie)) 3px 7px); }

/* District maps: one consistent border weight for every district; no county overlay */
#ohmap path.dst, #ohmap path.dst.tracked { stroke: var(--map-line); stroke-width: 1; }
#outlines { display: none; }
/* Unopposed seats in the hover table */
td.win { font-weight: 800; color: var(--ink); }
.tip table.sole td { padding: 4px 8px; }
.tip td.muted, #cdet td.muted { color: var(--muted); font-size: 1em; }

/* Slim brand band pinned to the top of the screen while scrolling */
.topband { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 30px; padding: 0 32px; background: #0F2A20; border-bottom: 1px solid #A89868; }
.topband .tb-name { color: #D2C8A5; font-size: 12px; font-weight: 800; letter-spacing: .24em; white-space: nowrap; }
.topband .tb-site { color: #D2C8A5; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.topband .tb-site:hover { color: #F5F3F0; }
@media (min-width: 1500px) { .topband { height: 34px; padding: 0 36px; } .topband .tb-name, .topband .tb-site { font-size: 13.5px; } }
@media (max-width: 640px) { .topband { padding: 0 16px; } .topband .tb-name { letter-spacing: .16em; font-size: 11px; } .topband .tb-site { font-size: 11px; letter-spacing: .06em; } }
.topband { background: #17392C; }

/* Floating ticker: as slim as the brand band, pinned just under it while scrolling */
.chyfloat { position: fixed; left: 0; right: 0; top: 30px; z-index: 59; display: flex; align-items: stretch; height: 28px; background: #0F2A20; border-bottom: 1px solid #A89868; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.chyfloat[hidden] { display: none; }
.chyfloat.dry { border-bottom-color: #F2C230; }
.chyfloat .chy-tag { font-size: 11px; padding: 0 12px; letter-spacing: .1em; }
.chyfloat.dry .chy-tag { background: #F2C230; color: #1B2420; }
.chyfloat .chy-item { font-size: 12.5px; padding: 0 20px; gap: 6px; }
.chyfloat .chy-k { font-size: 10px; padding: 0 5px; }
.chyfloat .chy-src { font-size: 11.5px; }
.chyfloat:hover .chy-track { animation-play-state: paused; }
.chy-close { flex: none; width: 32px; border: 0; border-left: 1px solid rgba(210, 200, 165, .35); background: #0F2A20; color: #D2C8A5; font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.chy-close:hover { color: #F5F3F0; }
.tb-show { margin-left: auto; margin-right: 18px; border: 1px solid rgba(210, 200, 165, .5); background: transparent; color: #D2C8A5; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; cursor: pointer; }
.tb-show[hidden] { display: none; }
.tb-show:hover { color: #F5F3F0; border-color: #D2C8A5; }
@media (min-width: 1500px) { .chyfloat { top: 34px; height: 30px; } .chyfloat .chy-item { font-size: 13.5px; } }
.chyfloat { color: #F5F3F0; } .chyfloat .k-score .chy-x { color: #E4E9E5; }

/* Ticker greens match the header (#17392C); a hairline gold rule separates the ticker from the header */
.chyron, .chyfloat, .chy-close { background: #17392C; }
.chyron { border-top: 1px solid rgba(168, 152, 104, .6); }

/* Collapsible sections: click a panel header or a board section row to fold it */
.panel > header { cursor: pointer; }
.panel > header select, .panel > header button, .panel > header .tabs { cursor: auto; }
h2.foldable::before { content: "\25BE"; display: inline-block; width: 1em; margin-right: 4px; color: var(--muted); font-size: .8em; transition: transform .15s; }
.panel.folded h2.foldable::before { transform: rotate(-90deg); }
.panel.folded > :not(header) { display: none !important; }
.panel.folded > header { border-bottom: 0; }
h2.foldable:focus-visible, tr.fold:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
tr.tierrow.fold td { cursor: pointer; user-select: none; }
tr.tierrow.fold td::before { content: "\25BE"; display: inline-block; width: 1.1em; transition: transform .15s; }
tr.tierrow.fold.shut td::before { transform: rotate(-90deg); }
tr.tierrow .foldn { font-weight: 600; letter-spacing: .02em; text-transform: none; }
/* Lockup 15% smaller: 95px (Oct. 4) */
.lockup { height: 95px; width: 255px; }
@media (max-width: 760px) { .lockup { height: 61px; width: auto; } }

/* "Updated:" stamp centered in the brand band */
.topband { position: sticky; display: grid; grid-template-columns: 1fr auto 1fr; }
.topband .tb-name { justify-self: start; }
.topband .tb-updated { justify-self: center; color: #F5F3F0; font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.topband .tb-updated.late { color: #F2C230; }
.topband .tb-right { justify-self: end; display: flex; align-items: center; gap: 18px; min-width: 0; }
.topband .tb-show { margin: 0; }
@media (min-width: 1500px) { .topband .tb-updated { font-size: 13.5px; } }
@media (max-width: 640px) { .topband .tb-updated { font-size: 10.5px; letter-spacing: .06em; } .topband .tb-name { display: none; } .topband { grid-template-columns: auto 1fr; } .topband .tb-updated { justify-self: start; grid-column: 1; } .topband .tb-right { grid-column: 2; } .topband .tb-show { display: none; } }
.tile .ind { color: var(--ink); }

/* ---------- statewide ballot tracker (Terry, Oct. 5) ---------- */
.rowtrack { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-variant-numeric: tabular-nums; min-width: 960px; table-layout: fixed; }
.rowtrack col.c-yr { width: 72px; }
.rowtrack .t-blank { background: transparent; }
.rowsec { margin-top: 28px; }
.rowtrack th { font-size: 12.5px; font-weight: 800; color: var(--muted); text-align: center; padding: 6px 8px; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.rowtrack th:first-child, .rowtrack td.yr { text-align: left; }
.rowtrack td { text-align: center; font-weight: 800; font-size: 14px; padding: 8px 8px; white-space: nowrap; }
.rowtrack td.yr { font-weight: 800; color: var(--ink); padding-left: 10px; border-top: 1px solid var(--rule); }
.rowtrack td.m { border-left: 2px solid var(--panel); }
.rowtrack .t-d3 { background: #2C4F7C; color: #fff; } .rowtrack .t-d2 { background: #87A3C4; color: #fff; } .rowtrack .t-d1 { background: #D3DEEA; color: #24527E; }
.rowtrack .t-r3 { background: #A3262F; color: #fff; } .rowtrack .t-r2 { background: #CD7F84; color: #fff; } .rowtrack .t-r1 { background: #EED3D5; color: #A3262F; }
.rowtrack .t-none { background: transparent; color: var(--muted); font-weight: 600; }
.rowtrack .t-wait { background: transparent; color: var(--muted); font-weight: 600; border: 1px dashed var(--rule); }
.rowtrack td.court { padding: 4px; }
.rowtrack td.court .chips { display: flex; gap: 3px; justify-content: center; }
.rowtrack td.court .chip { flex: 1 1 0; padding: 4px 6px; min-width: 52px; }
.rowtrack tr.live td.yr { color: var(--ink); box-shadow: inset 4px 0 0 #A89868; }
.rowtrack tr.live + tr td { border-top: 0; } .rowtrack tbody tr.live td { border-bottom: 6px solid var(--panel); }
.rowtrack tr.live td .sub2 { display: block; font-size: 11px; font-weight: 600; opacity: .85; margin-top: 1px; }
.rowtrack tr.live td.t-wait .sub2, .rowtrack tr.live td .t-wait .sub2 { opacity: 1; }
.rowtrack .call { font-size: 10.5px; letter-spacing: .06em; }
.rowsec .note { margin: 6px 16px 14px; font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.45; }
@media (min-width: 1500px) { .rowtrack th { font-size: 13.5px; } .rowtrack td { font-size: 16px; padding: 10px; } .rowsec .note { font-size: 14px; } .rowtrack tr.live td .sub2 { font-size: 12.5px; } }

/* ---------- explainer drawers (Terry, Oct. 5): live text stays on the tile, explanations go in a drawer ---------- */
.tile { position: relative; }
.tile .meter { margin: 6px 0 4px; }
details.more { margin-top: 4px; }
details.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); user-select: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
details.more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
details.more > summary:hover, details.more > summary:focus-visible { color: var(--ink); }
details.more .drawer { position: absolute; left: -1px; right: -1px; top: 100%; z-index: 40; background: var(--panel); border: 1px solid var(--rule); border-top: 2px solid #A89868; padding: 10px 16px 12px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
@media (min-width: 1500px) { details.more > summary { font-size: 13.5px; } details.more .drawer { font-size: 15px; } }

/* explainer drawers in panel headers (Terry, Oct. 5) */
.panel > header { position: relative; }
.panel > header details.more { margin-top: 0; }
.panel > header details.more { position: relative; }
.panel > header details.more .drawer { left: 0; right: auto; width: min(560px, calc(100vw - 48px)); top: calc(100% + 8px); }
.panel.folded > header details.more { display: none; }
/* "How this works" sits on the same baseline in every top tile (Terry, Oct. 5) */
.strip .tile { display: flex; flex-direction: column; }
.strip .tile > details.more { margin-top: auto; padding-top: 6px; }

/* 2022's three court contests share the two court columns (Terry, Oct. 8) */
.rowtrack td.court3 { padding: 0; background: transparent; position: relative; height: 40px; }
.rowtrack td.court3 .split { position: absolute; inset: 0; display: flex; gap: 2px; }
.rowtrack td.court3 .piece { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 8px 4px; }
@media (min-width: 1500px) { .rowtrack td.court3 .piece { padding: 10px 4px; } }

/* win-pace line in the map tooltip (Oct. 11) */
.tip .pace { font-weight: 800; }
.tip .pace.d { color: var(--dem); } .tip .pace.r { color: var(--rep); }

/* reporting basis: what the page reads each feed's "% in" as (Sources panel) */
.basis { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 8px 16px; border-bottom: 1px solid var(--rule); line-height: 1.4; }
.basis b { color: var(--ink); font-weight: 800; }
.basis.warn { color: var(--sample); background: var(--sample-bg); }
.voline.warn { color: var(--sample); }
@media (min-width: 1500px) { .basis { font-size: 14px; } }

/* County Comparison (private): three rows of small maps, then a sortable county table */
.ccsec { margin-top: 20px; position: relative; }
.ccrows { display: grid; grid-template-columns: minmax(0, 1fr); }
.ccrow { display: grid; grid-template-columns: minmax(200px, 260px) repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 14px 16px 12px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.ccrow.sel { background: color-mix(in oklab, var(--gold) 7%, var(--panel)); }
.cctop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.cclabel h3 { font-family: var(--display); font-size: 18px; font-weight: 800; margin: 0; }
.cclabel .sub { display: block; margin-bottom: 8px; }
.ccstate { font-size: 14px; font-weight: 700; line-height: 1.4; }
.ccstate2 { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.45; margin-top: 6px; }
.ccmap { min-width: 0; cursor: default; }
.cchead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cchead b { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.cctop { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.cctop h3 { line-height: 1.25; }
/* Raw/Relative on top, the party perspective switch stacked under it (Terry, Oct. 17) */
.cctoggles { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cctoggle { display: inline-flex; }
.cctoggle button { font: inherit; font-size: 12px; font-weight: 700; padding: 2px 8px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }
.cctoggle button + button { border-left: 0; }
.cctoggle button[aria-pressed="true"] { background: var(--forest); color: #F5F3F0; border-color: var(--forest); }
.ccsvg { width: 100%; height: auto; display: block; max-height: 300px; margin: 0 auto; }
.ccsvg .cty { stroke: var(--map-line); stroke-width: .8; }
.ccsvg .cty:hover { stroke: var(--ink); stroke-width: 2; }
.cclegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 6px; }
.cclegend .ramp { display: flex; } .cclegend .ramp span { width: 30px; height: 10px; display: inline-block; }
.cclegend .ticks { display: flex; } .cclegend .ticks span { width: 30px; font-size: 10.5px; text-align: center; white-space: nowrap; }
.cclegend .nodata { display: inline-flex; align-items: center; gap: 6px; }
.cclegend .nodata i { width: 14px; height: 12px; display: inline-block; border: 1px solid var(--rule); background: repeating-linear-gradient(45deg, var(--map-none) 0 3px, var(--rule) 3px 4px); } /* same hatch as the Ohio Map (Oct. 17) */
.cccap { margin-top: 6px; line-height: 1.4; }
.cctabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px 8px; }
.cctabs .tabs { margin-left: 0; }
.cctabs .sub { flex: 1 1 320px; }
.ccsec .scroll { max-height: 420px; overflow-y: auto; }
.ccsec thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; padding: 0; }
.ccsec th .sortbtn { font: inherit; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; background: transparent; border: 0; padding: 7px 10px; cursor: pointer; text-align: inherit; width: 100%; white-space: nowrap; }
.ccsec th.n .sortbtn { text-align: right; }
.ccsec th .sortbtn.on { color: var(--ink); }
.ccsec th[aria-sort="descending"] .sortbtn::after { content: " \25BE"; } .ccsec th[aria-sort="ascending"] .sortbtn::after { content: " \25B4"; }
.ccsec tr.thin td { color: var(--muted); }
/* Overall turnout: gold above, gray below (Terry, Oct. 17) */
.ccsec td .up { color: #9A7A2A; font-weight: 700; } .ccsec td .down { color: var(--muted); font-weight: 700; }
.ccsec .tip { min-width: 240px; max-width: 320px; }
@media (max-width: 1100px) { .ccrow { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ccsvg { max-height: 360px; } }
@media (min-width: 1500px) { .cclabel h3 { font-size: 20px; } .ccstate { font-size: 16px; } .ccstate2 { font-size: 14.5px; } .cchead b { font-size: 14px; } .cctoggle button { font-size: 13.5px; } .cclegend { font-size: 13.5px; } .cclegend .ticks span { font-size: 12px; } .ccsvg { max-height: 440px; } .cclegend .ramp span, .cclegend .ticks span { width: 34px; } .ccsec th .sortbtn { font-size: 13.5px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ccsec td .up { color: #D9B45A; } }
:root[data-theme="dark"] .ccsec td .up { color: #D9B45A; }

/* "How this works" drawers are short bullet lists (Terry, Oct. 16: under 250 words, bulleted, plain) */
details.more .drawer ul { margin: 0; padding: 0 0 0 1.1em; list-style: square; }
details.more .drawer li { margin: 0 0 5px; padding-left: 2px; }
details.more .drawer li:last-child { margin-bottom: 0; }
details.more .drawer li::marker { color: var(--gold); }
/* tile drawers get a reading width of their own when tiles are narrow (Terry, Oct. 16 drawer audit) */
.strip .tile details.more .drawer { right: auto; width: max(calc(100% + 2px), min(340px, calc(100vw - 32px))); }
@media (min-width: 1500px) { .strip .tile details.more .drawer { width: max(calc(100% + 2px), 390px); } }

/* Private panels sit together at the bottom, under one rule (Terry, Oct. 16): everything above it is the viewers' page */
.privzone { margin-top: 40px; }
.privrule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-top: 2px solid var(--gold); padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.privpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
@media (max-width: 900px) { .privpair { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1500px) { .privrule { font-size: 15px; } }

/* CALL block (Terry, Oct. 16): leads each call item, left of the time, full ticker height and the width of the DRY RUN tag
   (measured into --chy-callw), always on the DRY RUN yellow. */
.chy-item.k-call { padding-left: 0; }
.chy-call { flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--chy-callw, 7em); margin-right: 6px; background: #F2C230; color: #1B2420; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.chyfloat .chy-call { font-size: 11px; letter-spacing: .1em; margin-right: 4px; }
@media (min-width: 1500px) { .chy-call { font-size: 14.5px; } }
@media (max-width: 640px) { .chy-call { margin-right: 2px; } }
/* dark mode: the forest fill nearly matches the dark panel, so a pressed switch reads in gold (Oct. 17) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.tabs, .zooms, .cctoggle) button[aria-pressed="true"] { background: var(--gold); color: #111915; border-color: var(--gold); } }
:root[data-theme="dark"] :is(.tabs, .zooms, .cctoggle) button[aria-pressed="true"] { background: var(--gold); color: #111915; border-color: var(--gold); }
/* party turnout maps: the party's color above its baseline, gray below (Terry, Oct. 17) */
:root { --map-gray: #5C625F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --map-gray: #C3C9C5; } }
:root[data-theme="dark"] { --map-gray: #C3C9C5; }
.ccsec td .pup { font-weight: 700; } .ccsec td .pup.d { color: var(--dem); } .ccsec td .pup.r { color: var(--rep); }
.ccsec td .gdown { color: var(--muted); font-weight: 700; }
/* Observations (private): readings kept off the public panels (Terry, Oct. 17) */
.obssec { margin-top: 20px; }
.obsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; }
.obsgrp { padding: 14px 16px 12px; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); min-width: 0; }
.obsk { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.obsgrp h3 { font-family: var(--display); font-size: 17px; font-weight: 800; margin: 2px 0 8px; }
.obsline { font-size: 14px; line-height: 1.45; margin: 0 0 8px; }
.obsline.ccstate { font-weight: 700; }
.obsline.ccstate2, .obsline.cccap { color: var(--muted); font-weight: 600; }
.obsline.cccap b { color: var(--ink); }
@media (min-width: 1500px) { .obsk { font-size: 12.5px; } .obsgrp h3 { font-size: 19px; } .obsline { font-size: 15.5px; } }
/* info icon beside Raw/Relative: a short definition on hover, keyboard focus or tap (Terry, Oct. 17) */
.ccvline { display: flex; align-items: center; gap: 6px; position: relative; }
.ccinfo { display: inline-flex; } /* the pop-up anchors to the whole Raw/Relative line, so it never runs off a phone screen */
.ccinfo-b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: help; }
.ccinfo-b:hover, .ccinfo-b:focus-visible, .ccinfo.open .ccinfo-b { color: var(--ink); }
.ccinfo-b:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ccinfo-tip { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(290px, calc(100vw - 48px)); background: var(--panel); border: 1px solid var(--ink); padding: 10px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.18); font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ink); cursor: default; text-align: left; }
.ccinfo:hover .ccinfo-tip, .ccinfo-b:focus-visible + .ccinfo-tip, .ccinfo.open .ccinfo-tip { display: block; }
.ccinfo-p { display: block; } .ccinfo-p + .ccinfo-p { margin-top: 6px; }
@media (min-width: 1500px) { .ccinfo-tip { font-size: 14.5px; width: 330px; } .ccinfo-b svg { width: 18px; height: 18px; } }
.ccinfo-tip::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
/* grouped header: "Turnout rate" centered over its three year columns, with a rule beneath (Terry, Oct. 17) */
.ccsec thead th.grp { text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; padding: 7px 10px 4px; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--rule); }
.ccsec thead th[rowspan="2"] { vertical-align: bottom; }
@media (min-width: 1500px) { .ccsec thead th.grp { font-size: 13.5px; } }
/* map pop-ups: one layout everywhere (Terry, Oct. 17): place and share counted, the headline number, a small grid, a caveat */
.tip { min-width: 230px; max-width: 300px; padding: 10px 12px 9px; line-height: 1.3; }
.tip-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tip .tip-t { font-family: var(--display); font-size: 16px; font-weight: 800; }
.tip-chip { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tip-bigw { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 6px 0 2px; }
.tip-big { font-size: 22px; font-weight: 800; line-height: 1.15; }
.tip-big.d { color: var(--dem); } .tip-big.r { color: var(--rep); } .tip-big.g { color: #9A7A2A; } .tip-big.gray, .tip-big.muted { color: var(--muted); }
.tip-big.muted { font-size: 17px; }
.tip-bl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tip-kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; font-size: 13px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--rule); }
.tip-kv .k { color: var(--muted); font-weight: 600; } .tip-kv .v { text-align: right; font-weight: 700; }
.tip table.vr, .tip table.yr, .tip table.sole { width: 100%; margin-top: 8px; border-top: 1px solid var(--rule); border-collapse: collapse; font-size: 13.5px; }
.tip table.vr td, .tip table.yr td { padding: 4px 0 1px; } .tip table.vr td + td, .tip table.yr td + td { padding-left: 12px; }
.tip table.vr tr.lead td { font-weight: 800; }
.tip table.yr td.yl { color: var(--muted); font-weight: 700; width: 1%; white-space: nowrap; }
.tip table.yr td.num { text-align: right; white-space: nowrap; font-weight: 700; } .tip table.yr td span.d { color: var(--dem); } .tip table.yr td span.r { color: var(--rep); }
.tip-note { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.35; }
@media (min-width: 1500px) { .tip { max-width: 340px; } .tip .tip-t { font-size: 18px; } .tip-chip { font-size: 12.5px; } .tip-big { font-size: 25px; } .tip-big.muted { font-size: 19px; } .tip-bl, .tip-note { font-size: 13.5px; } .tip-kv, .tip table.vr, .tip table.yr, .tip table.sole { font-size: 15px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tip-big.g { color: #D9B45A; } }
:root[data-theme="dark"] .tip-big.g { color: #D9B45A; }
.ccsec .tip { max-width: 340px; }
@media (min-width: 1500px) { .tip, .ccsec .tip { max-width: 400px; } }
/* the turnout panel's label column is only as wide as its switches, so the maps and their scales sit further left,
   and the scale's tick labels get room so "−20%" and "−10%" never run together (Terry, Oct. 17) */
.ccrow { grid-template-columns: 226px repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (min-width: 1500px) { .ccrow { grid-template-columns: 250px repeat(2, minmax(0, 1fr)); } }
.cclegend .ramp span, .cclegend .ticks span { width: 36px; }
@media (min-width: 1500px) { .cclegend .ramp span, .cclegend .ticks span { width: 42px; } }
@media (max-width: 1100px) { .ccrow { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
/* the hatch key rides on each map's title line, right-aligned, so the scale below never wraps (Terry, Oct. 17) */
.cchead .nodata { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cchead .nodata i { width: 14px; height: 12px; display: inline-block; border: 1px solid var(--rule); background: repeating-linear-gradient(45deg, var(--map-none) 0 3px, var(--rule) 3px 4px); }
@media (min-width: 1500px) { .cchead .nodata { font-size: 13.5px; } }
/* county and district borders (Terry, Oct. 17: "make sure that county/district lines render clearly"): a 1px line that
   holds its width however small the map is drawn, in a tone that shows on pale fills and dark fills alike */
:root { --map-edge: rgba(38, 43, 43, .34); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --map-edge: rgba(8, 12, 10, .85); } }
:root[data-theme="dark"] { --map-edge: rgba(8, 12, 10, .85); }
.ccsvg .cty { stroke: var(--map-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ccsvg .cty:hover { stroke: var(--ink); stroke-width: 2; }
#ohmap path.cty, #ohmap path.dst, #ohmap path.dst.tracked { stroke: var(--map-edge); stroke-width: 1; }
#ohmap path.cty:hover, #ohmap path.cty:focus, #ohmap path.dst:hover, #ohmap path.dst:focus { stroke: var(--ink); stroke-width: 2; }
#ohmap path.cty.pick, #ohmap path.dst.pick { stroke: var(--ink); stroke-width: 2.6; }

/* National Governor and Senate: Results column (Terry, Oct. 17). The two shares line up with the two candidate lines. */
.sen tbody td { vertical-align: top; }
.sen .natres .nr { display: flex; align-items: center; gap: 8px; }
.sen .nr-nums { display: grid; font-size: 13.5px; line-height: 1.35; text-align: right; min-width: 3.4em; }
.sen .nr-l { font-weight: 600; white-space: nowrap; }
.sen .nr-l.lead { font-weight: 800; }
.sen .nr-l.ind { color: var(--ink); }
.sen .nr-rep { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.sen .nr-none { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.sen .natres .callcell { margin-top: 5px; }
@media (min-width: 1500px) {
  .sen .nr-nums { font-size: 15px; }
  .sen .nr-rep, .sen .nr-none { font-size: 13.5px; }
}
@media (min-width: 2200px) {
  .sen .nr-nums { font-size: 16.5px; }
  .sen .nr-rep, .sen .nr-none { font-size: 15px; }
}

/* National tables: the winner's name boxed in party color, a yellow check inside the box after the name (Terry, Oct. 17). */
.sen .nc-win { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sen .nc-ck { margin-left: 6px; font-weight: 900; color: #F2C230; }
.sen .nc-win { color: #fff; padding: 1px 6px; font-weight: 700; }
.sen .nc-win.wd { background: var(--dem); }
.sen .nc-win.wr { background: var(--rep); }
.sen .nc-win.wi { background: var(--ink); color: var(--panel); }
.sen .nc-split { font-size: 12px; font-weight: 700; color: var(--warn); margin-top: 3px; }
.sen td.callable { cursor: pointer; }
.sen td.callable:hover .nc-l > span.d, .sen td.callable:hover .nc-l > span.r, .sen td.callable:hover .nc-l > span.ind { text-decoration: underline dotted; text-underline-offset: 3px; }
.sen td.callable:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (min-width: 1500px) { .sen .nc-split { font-size: 13.5px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sen .nc-win.wd { background: #24527E; } :root:not([data-theme="light"]) .sen .nc-win.wr { background: #B22234; } }
:root[data-theme="dark"] .sen .nc-win.wd { background: #24527E; } :root[data-theme="dark"] .sen .nc-win.wr { background: #B22234; }

@media (max-width: 600px) { .sen .natres .nr { flex-wrap: wrap; gap: 2px 8px; } }

/* National tables: the Call column, Cook rating on top and the call tag beneath (Terry, Oct. 17). */
.sen .callcol .cc-row { margin-top: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sen .cc-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 5px; border: 1px solid currentColor; white-space: nowrap; }
.sen .cc-tag.td { color: var(--dem); } .sen .cc-tag.tr { color: var(--rep); } .sen .cc-tag.ti { color: var(--ink); }
.sen .cc-btn.has { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sen .cc-btn.has:hover .cc-tag, .sen .cc-btn.has:focus-visible .cc-tag { background: var(--gold-soft); }
.sen .cc-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 1500px) { .sen .cc-tag { font-size: 13px; } }
@media (min-width: 2200px) { .sen .cc-tag { font-size: 14px; } }
@media (min-width: 601px) { .sen .nc .nc-l { white-space: nowrap; } }

/* Map shading from the Statewide Office Tracker's tints (Terry, Oct. 17): the same fixed colors in light and dark, like the tracker. */
:root { --ramp-tie: #ECE9E2; --ramp-d1: #D3DEEA; --ramp-d2: #87A3C4; --ramp-d3: #2C4F7C; --ramp-r1: #EED3D5; --ramp-r2: #CD7F84; --ramp-r3: #A3262F; --ramp-gold: #A8862F; --ramp-gray: #5C625F; --hold-d: #D3DEEA; --hold-r: #EED3D5; }
.legend .nodata i.hold { background: var(--ramp-r1); }
.legend .nodata i.holdx { background: repeating-linear-gradient(45deg, rgba(38, 43, 43, .42) 0 3px, var(--ramp-r1) 3px 7px); }

/* public view */
.clock .unoff { display: block; color: #D2C8A5; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; }
@media (min-width: 1500px) { .clock .unoff { font-size: 14px; } }