/* elections.mclaughlinfamily.org — light + dark, default light (see ~/theme-kit).
   Diverging ramp is purple<->orange on purpose: blue<->red would read as party,
   and this map is about how many people voted, not who they voted for. */
:root{
  --plane:#f9f9f7; --surface:#fcfcfb; --line:#e3e2dd; --line-2:#cfceC8;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#77766f;
  --accent:#2a78d6; --tile:#ffffff;
  --d-3:#8c4408; --d-2:#cf7420; --d-1:#f0b27a;
  --d1:#d8cfe8;  --d2:#9f86c6;  --d3:#6f4a9e;  --d4:#452470;
  --nodata:#e8e7e2; --stroke:#fcfcfb;
}
:root[data-theme="dark"]{
  --plane:#0d0d0d; --surface:#1a1a19; --line:#2e2e2b; --line-2:#413f3b;
  --ink:#f0efec; --ink-2:#c3c2b7; --ink-3:#95948b;
  --accent:#3987e5; --tile:#211f1f;
  --d-3:#f7b26b; --d-2:#cf7a1c; --d-1:#8a5214;
  --d1:#574a7a;  --d2:#7d68b5;  --d3:#a78fd8;  --d4:#cbb6ee;
  --nodata:#2a2a27; --stroke:#1a1a19;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--plane);color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.top{padding:26px 0 6px}
h1{font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.15;margin:0 0 .3em;letter-spacing:-.02em}
.sub{margin:0;color:var(--ink-2);max-width:60ch}
h2{font-size:1.05rem;margin:0;letter-spacing:-.01em}
main{padding-bottom:56px}

.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:22px 0}
.tile{background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tile .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.tile .v{font-size:1.5rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .n{font-size:.82rem;color:var(--ink-2)}
.tile.chg .v{font-size:1.35rem}
.up{color:var(--ink)} .dn{color:var(--ink)}

.controls{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin:0 0 16px}
.ctl{display:flex;flex-direction:column;gap:5px}
.ctl.grow{flex:1 1 180px;min-width:170px;position:relative}
.ctl-lab{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.seg{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  padding:7px 11px;font:inherit;font-size:.88rem;white-space:nowrap}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:#fff}
.seg button:not(.on):hover{background:var(--line)}
input[type=search]{width:100%;padding:7px 10px;font:inherit;font-size:.9rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:8px}
.qres{position:absolute;top:100%;left:0;right:0;z-index:40;background:var(--surface);
  border:1px solid var(--line-2);border-radius:8px;margin-top:4px;max-height:260px;overflow:auto;
  box-shadow:0 6px 20px rgba(0,0,0,.14)}
.qres button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:.88rem;padding:6px 10px;cursor:pointer}
.qres button:hover,.qres button:focus{background:var(--line)}
.qres .st{color:var(--ink-3);font-size:.8rem}

.mapcard,.tablecard,.panel,.notes{background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin:0 0 18px}
.maphead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.maphead h2{flex:1 1 auto}
.hint{color:var(--ink-3);font-size:.82rem;font-weight:400}
.back{appearance:none;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:8px;padding:5px 10px;font:inherit;font-size:.85rem;cursor:pointer}
.back:hover{background:var(--line)}
.mapbox{position:relative}
#map svg{display:block;width:100%;height:auto}
#map path,#map polygon{stroke:var(--stroke);vector-effect:non-scaling-stroke}
#map .geo path{stroke-width:.4}
#map polygon{stroke-width:1.2}
#map .hit{cursor:pointer}
#map .hit:hover{stroke:var(--ink);stroke-width:1.6}
#map .sel{stroke:var(--ink);stroke-width:2}
#map text{font-size:11px;text-anchor:middle;dominant-baseline:central;
  pointer-events:none;font-weight:600}
#map text.sm{font-size:9px;font-weight:500}

.tip{position:absolute;pointer-events:none;z-index:30;background:var(--tile);color:var(--ink);
  border:1px solid var(--line-2);border-radius:8px;padding:7px 9px;font-size:.82rem;line-height:1.4;
  box-shadow:0 4px 14px rgba(0,0,0,.18);max-width:240px}
.tip b{display:block;font-size:.88rem}
.tip .row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.tip .big{font-weight:650}

.legend{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:10px 0 2px}
.legend .lk{display:flex;flex-direction:column;align-items:center;min-width:58px}
.legend .sw{width:100%;height:12px;border-radius:2px}
.legend .lb{font-size:.7rem;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:3px}
.legend .cap{font-size:.74rem;color:var(--ink-3);margin-right:8px;align-self:flex-start}
.caveat{color:var(--ink-3);font-size:.78rem;margin:8px 0 0}

.panel h3{margin:0 0 2px;font-size:1.15rem}
.panel .psub{color:var(--ink-3);font-size:.85rem;margin:0 0 10px}
.pgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.pbox{border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.pbox .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.pbox .v{font-size:1.2rem;font-weight:650;font-variant-numeric:tabular-nums}
.pbox .n{font-size:.78rem;color:var(--ink-2)}

.tscroll{max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:9px}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{padding:5px 9px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.l,td.l{text-align:left;font-variant-numeric:normal}
thead th{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line-2);
  cursor:pointer;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);z-index:2}
thead th:hover{color:var(--ink)}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--line) 42%,transparent)}
tbody tr:hover{background:var(--line)}
tbody td.pc{font-weight:600}
.more{display:block;margin:10px auto 0;appearance:none;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);border-radius:8px;padding:6px 14px;font:inherit;
  font-size:.86rem;cursor:pointer}
.more:hover{background:var(--line)}

.notes p{color:var(--ink-2);font-size:.9rem}
.notes h2{margin-bottom:8px}
.notes details{border-top:1px solid var(--line);padding:10px 0 2px;margin-top:6px}
.notes summary{cursor:pointer;font-size:.9rem;font-weight:600}
.notes ul{color:var(--ink-2);font-size:.88rem;padding-left:20px}
.notes li{margin:5px 0}
.qtbl{max-height:320px;overflow:auto;margin-top:10px;border:1px solid var(--line);border-radius:8px}
.ver{color:var(--ink-3);font-size:.76rem;margin:14px 0 0}
abbr{text-decoration:underline dotted;cursor:help}
code{font-size:.9em;background:var(--line);padding:1px 4px;border-radius:4px}
@media (max-width:560px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .legend .lk{min-width:42px}
  .legend .lb{font-size:.62rem}
}
@media print{.controls,.more,.back{display:none}}
.dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;
  vertical-align:baseline;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
td.pc{color:var(--ink)}

/* pan + zoom */
#map svg.pannable{cursor:grab;touch-action:none}
#map svg.grabbing{cursor:grabbing}
.zoomctl{position:absolute;top:6px;right:6px;z-index:20;display:flex;flex-direction:column;gap:4px}
.zoomctl button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;font:16px/1 system-ui,sans-serif;border-radius:7px;
  background:var(--tile);color:var(--ink-2);border:1px solid var(--line-2);
  box-shadow:0 1px 3px rgba(0,0,0,.14)}
.zoomctl button:hover:not(:disabled){background:var(--line);color:var(--ink)}
.zoomctl button:disabled{opacity:.38;cursor:default}
@media print{.zoomctl{display:none}}