:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #1a1f26;
  --muted: #5c6773;
  --line: #e3e7ec;
  --accent: #34506b;
  --rep: #d62f2f;
  --dem: #2b6cb0;
  --npa: #6b7280;
  --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116; --card: #161b22; --ink: #e6edf3; --muted: #9aa7b4;
    --line: #262d36; --accent: #7aa2c4; --shadow: 0 1px 3px rgba(0,0,0,.4);
  }
}
/* chart series (validated: scripts/validate_palette.js, light vs #fff, dark vs #161b22) */
:root { --series-1: #2a78d6; --series-ref: #898781; }
@media (prefers-color-scheme: dark) { :root { --series-1: #3987e5; } }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); }

/* Header */
.site-head { background: linear-gradient(180deg, var(--card), var(--card)); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; flex-wrap: wrap; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titles h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.state-select { font-size: 14px; font-weight: 600; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.status { text-align: right; font-size: 12px; color: var(--muted); }
.updated { font-weight: 600; color: var(--ink); }
.updated .flash { color: #1a9850; }
.refresh-note { margin-top: 2px; }

/* Controls */
.controls { margin: 18px 0 8px; }
.method-picker { display: flex; flex-wrap: wrap; gap: 6px; background: var(--card); padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.method-picker button {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600;
}
.method-picker button:hover { color: var(--ink); background: rgba(127,127,127,.08); }
.method-picker button[aria-selected="true"] { background: var(--accent); color: #fff; }
.method-hint { color: var(--muted); font-size: 12.5px; margin: 8px 2px 0; min-height: 1em; }
.controls-row { display: flex; align-items: center; gap: 12px; margin: 10px 2px 0; flex-wrap: wrap; }
.cmp-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.cmp-toggle input { width: 15px; height: 15px; cursor: pointer; }
.sh-r { color: var(--rep); font-weight: 700; }
.sh-d { color: var(--dem); font-weight: 700; }

/* Summary cards */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.stat .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat.rep .v { color: var(--rep); } .stat.dem .v { color: var(--dem); }
.stat .bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; margin-top: 8px; background: var(--line); }
.stat .bar i { display: block; height: 100%; }

/* Grid: map + table */
.grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-head h2 { font-size: 15px; margin: 0; }
.fineprint { color: var(--muted); font-size: 11.5px; margin: 10px 2px 0; }

/* Map */
.map-head-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.map-mode { display: inline-flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.map-mode button { border: none; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 6px; cursor: pointer; }
.map-mode button[aria-selected="true"] { background: var(--accent); color: #fff; }
.map-holder { position: relative; }
#map { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; }
#map.grabbing { cursor: grabbing; }
.zoom-ctrl { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 15; }
.zoom-ctrl button { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 7px; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); font-weight: 700; }
.zoom-ctrl button:hover { background: rgba(127,127,127,.12); }
.zoom-ctrl button:active { transform: translateY(1px); }
#map path { stroke: var(--card); stroke-width: .6; cursor: pointer; transition: opacity .1s; }
#map path:hover { stroke: var(--ink); stroke-width: 1.2; }
#map path.sel { stroke: var(--ink); stroke-width: 1.6; }
#map path.base { stroke: var(--line); stroke-width: .5; cursor: default; }
#map path.base:hover { stroke: var(--line); stroke-width: .5; }
#map path.prec { stroke: rgba(120,120,120,.25); stroke-width: .25; }
#map path.prec:hover { stroke: var(--ink); stroke-width: 1; }
#map path.dist-outline { fill: none; stroke: var(--ink); stroke-width: 1.3; pointer-events: none; vector-effect: non-scaling-stroke; }
#map path.dist-outline.sel { stroke-width: 3; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legend .grad { width: 140px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #2166ac, #67a9cf, #f7f7f7, #ef8a62, #b2182b); }
.legend .grad-turnout { background: linear-gradient(90deg, #eef2f4, #c7e9c0, #74c476, #31a354, #005a28); }
.legend .grad-change { background: linear-gradient(90deg, #a6611a, #ececec, #018571); }
.tooltip {
  position: absolute; pointer-events: none; z-index: 30; background: var(--ink); color: var(--bg);
  padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35; max-width: 220px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); transform: translate(-50%, calc(-100% - 10px));
}
.tooltip b { font-size: 12.5px; }
.tooltip .tt-margin { font-weight: 700; }

/* Table */
.filter { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 7px 10px; font-size: 13px; width: 160px; }
.table-scroll { max-height: 560px; overflow: auto; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
thead th { position: sticky; top: 0; background: var(--card); border-bottom: 2px solid var(--line); padding: 8px 8px; font-size: 11.5px; color: var(--muted); text-align: right; cursor: pointer; white-space: nowrap; user-select: none; }
thead th.county { text-align: left; }
thead th[aria-sort] { color: var(--ink); }
thead th .arrow { opacity: .5; font-size: 10px; }
tbody td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
tbody td.county { text-align: left; font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: rgba(127,127,127,.07); }
tbody tr.sel { background: rgba(52,80,107,.12); }
.pill { display: inline-block; min-width: 54px; text-align: center; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; color: #fff; }
#locality-links { max-height: 460px; overflow: auto; border-radius: 8px; margin-top: 6px; }
.loc-table { font-size: 13px; }
.loc-table tbody tr { cursor: default; }
.loc-table a { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.loc-table a:hover { text-decoration: underline; }
#locality-lookup .card-head { gap: 10px; flex-wrap: wrap; }
#locality-lookup-note a { color: var(--accent); }

/* TQV links */
.tqv-mini { text-decoration: none; color: var(--accent); font-weight: 700; margin-left: 4px; opacity: .7; }
.tqv-mini:hover { opacity: 1; }
.tqv-link { font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--accent); }
.tqv-link:hover { text-decoration: underline; }

/* Precinct panel */
.precinct-card { margin-bottom: 20px; }
.precinct-actions { display: flex; align-items: center; gap: 12px; }
.close-btn { border: 1px solid var(--line); background: var(--bg); color: var(--muted); width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; }
.close-btn:hover { color: var(--ink); }
.p-summary { font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.src-note { color: var(--muted); font-size: 12px; }
.p-scroll { max-height: 460px; }
.p-table th, .p-table td { font-size: 12.5px; }

/* Mail panel */
.mail-card { margin-bottom: 16px; }
.mail-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 12px; }
.mail-stats .m { min-width: 110px; }
.mail-stats .m .k { font-size: 12px; color: var(--muted); }
.mail-stats .m .v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.mail-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; }
.mail-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.mail-row .lbl { width: 68px; font-weight: 600; }
.mail-row .track { flex: 1; height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.mail-row .fill { height: 100%; border-radius: 5px; }
.mail-row .pct { width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Trends */
.trends-card { margin-bottom: 20px; }
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .trend-grid { grid-template-columns: 1fr; } }
.trend-title { font-size: 13px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.chart { width: 100%; height: 180px; display: block; overflow: visible; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .gridline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.chart .lbl { fill: var(--muted); font-size: 10px; }
.chart .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.chart { touch-action: pan-y; }
.chart .hit { cursor: crosshair; }
.chart .hover-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.chart .hover-dot { stroke: var(--card); stroke-width: 1.5; pointer-events: none; }
.chart .tip { pointer-events: none; }
.chart .tip rect { fill: var(--card); stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(16,24,40,.15)); }
.chart .tip-v { fill: var(--ink); font-size: 11px; font-weight: 600; }
.chart .tip-d { fill: var(--muted); font-size: 10px; }
.chart-empty { color: var(--muted); font-size: 12.5px; padding: 20px 4px; }

/* Table actions / mini buttons */
.table-actions { display: flex; align-items: center; gap: 6px; }
.mini-btn { border: 1px solid var(--line); background: var(--bg); color: var(--accent); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1; }
.mini-btn:hover { background: rgba(127,127,127,.12); }

/* Footer */
.site-foot { margin: 8px 0 40px; color: var(--muted); font-size: 12.5px; }
.site-foot p { margin: 6px 0; }
.dim { opacity: .8; font-size: 11.5px; }
.loading { text-align: center; padding: 40px; color: var(--muted); }
.error { background: #fdecea; color: #8a1c15; border: 1px solid #f5c6c0; padding: 14px; border-radius: var(--radius); }
@media (prefers-color-scheme: dark) { .error { background: #3a1512; color: #ffb4ab; border-color: #5c211c; } }
.ctytable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ctytable th, .ctytable td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.ctytable th { color: var(--muted); font-weight: 600; }
.frozen-banner { background: #fff8e6; border: 1px solid #e6d38a; color: #5a4a1a; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { .frozen-banner { background: #2a2410; border-color: #5c4f22; color: #e8d9a6; } }
.past-pick { font-size: 12.5px; color: var(--muted); margin-left: auto; margin-right: 8px; white-space: nowrap; }
.past-pick select, #past-label select { font-size: 12.5px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }

/* "if every county voted like <past race>" card (states without party data) */
.map-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.look-card { padding: 14px 16px; margin: 0; }
.look-pick select { font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); max-width: 100%; }
.look-main { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; flex-wrap: wrap; }
.look-margin { font-size: 30px; font-weight: 800; line-height: 1; min-width: 92px; }
.look-bar { position: relative; display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.look-bar i { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .5; }

/* share of ballots over time (race) */
.rt-picks { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; justify-content: flex-end; }
.rt-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.rt-pick select { font-size: 13px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
.rt-hero { margin: 6px 2px 4px; font-size: 14px; color: var(--ink); }
.rt-hero b { font-size: 22px; font-weight: 700; margin-right: 2px; }
.rt-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin: 4px 2px 2px; }
.rt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rt-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--series-1); }
.rt-key.rt-cmp { border-top: 2px dashed var(--series-ref); }
.rt-wrap { position: relative; }
.rt-chart { width: 100%; height: auto; display: block; overflow: visible; }
.rt-chart .rt-grid { stroke: var(--line); stroke-width: 1; }
.rt-chart .rt-base { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.rt-chart .rt-lbl { fill: var(--muted); font-size: 11px; }
.rt-chart .rt-mark { stroke: var(--muted); stroke-width: 1; opacity: .45; }
.rt-chart .rt-cur { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rt-chart .rt-cmp { fill: none; stroke: var(--series-ref); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.rt-chart .rt-cur-dot { fill: var(--series-1); stroke: var(--card); stroke-width: 2; pointer-events: none; }
.rt-chart .rt-cmp-dot { fill: var(--series-ref); stroke: var(--card); stroke-width: 2; pointer-events: none; }
.rt-chart .rt-end { fill: var(--muted); font-size: 12px; }
.rt-chart .rt-end-v { fill: var(--ink); font-weight: 700; }
.rt-chart .rt-guide { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.rt-chart .rt-hit { cursor: crosshair; outline: none; }
.rt-tip { position: absolute; z-index: 5; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px; font-size: 12px; box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; }
.rt-tip-h { color: var(--muted); margin-bottom: 3px; }
.rt-tip-r { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.rt-tip-r b { font-size: 13px; }
.rt-tip-r span { color: var(--muted); }
.rt-details { margin: 8px 2px 0; font-size: 13px; }
.rt-details summary { cursor: pointer; color: var(--accent); }
.rt-table-wrap { max-height: 320px; overflow: auto; margin-top: 6px; }
.rt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rt-table th, .rt-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.rt-table th:first-child, .rt-table td:first-child { text-align: left; }
.rt-table th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--card); }

/* who hasn't voted yet */
.rem-card { margin-bottom: 16px; }
.rem-top { margin: 6px 2px 10px; font-size: 14px; }
.rem-top b:first-child { font-size: 20px; }
.rem-bar { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; background: var(--line); }
.rem-bar span { display: block; height: 100%; }
.rem-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 2px 4px; font-size: 13px; }
.rem-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.rem-compare { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }
.rem-compare b { margin-left: 4px; }