:root{--bg:#f6f8fb;--card:#fff;--ink:#0b1220;--mut:#526171;--line:#e3e8ef;--land:#dfe5ec;--edge:#ffffff;--edge2:#9fadbd;--hi:#0ea5e9;--na:#eef1f5}
@media (prefers-color-scheme:dark){:root{--bg:#0b1220;--card:#111a2b;--ink:#e6edf6;--mut:#93a4b8;--line:#22314a;--land:#24324a;--edge:#0b1220;--edge2:#4a5d7a;--na:#1a2538}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:#0284c7}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.top{background:var(--card);border-bottom:1px solid var(--line);padding:18px 0 14px}
.kick{margin:0;color:#0284c7;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
h1{margin:4px 0 6px;font-size:28px;line-height:1.2}
.lead{margin:0;color:var(--mut);max-width:820px}
.controls{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin:16px 0 6px}
.field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--mut)}
select{font:inherit;font-size:14.5px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:40px;max-width:100%}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;color:var(--ink);font:inherit;font-size:14px;padding:8px 13px;cursor:pointer;min-height:40px}
.seg button[aria-pressed=true]{background:var(--hi);color:#fff}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;padding:8px 14px;border-radius:10px;cursor:pointer;min-height:40px}
.note{margin:2px 0 10px;color:var(--mut);font-size:13.5px;min-height:1.4em}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
@media (max-width:960px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px}
.usmap{width:100%;height:auto;display:block}
.usmap path{stroke-linejoin:round}
.state{fill:var(--land);stroke:var(--edge);stroke-width:.8px;vector-effect:non-scaling-stroke;cursor:pointer}
.state:hover,.state:focus{stroke:var(--ink);stroke-width:2px;outline:none}
.state.dim{opacity:.3}.state.dim[data-id="02"],.state.dim[data-id="15"]{display:none}.state.on{fill:none!important;pointer-events:none}
.usmap:not([data-layer=states]) .state{fill:none!important;pointer-events:none}
.county,.district{fill:var(--land);stroke:var(--edge);stroke-width:.35px;vector-effect:non-scaling-stroke;cursor:pointer}
.county.dim,.district.dim{opacity:.25;pointer-events:none}
.county:hover,.county:focus,.district:hover,.district:focus{stroke:var(--ink);stroke-width:1.6px;outline:none}
.mesh{fill:none;stroke:var(--edge);stroke-width:1.2px;vector-effect:non-scaling-stroke;pointer-events:none}
.usmap:not([data-layer=states]) .mesh{stroke:var(--ink);stroke-opacity:.45}
.callouts .lead{stroke:var(--mut);stroke-width:.7px;stroke-opacity:.6}
.callout{cursor:pointer}.callout rect{fill:var(--land);stroke:var(--edge2);stroke-width:1px}.callout text{font-size:12px;font-weight:700;fill:var(--ink);pointer-events:none}
.callout:hover rect,.callout:focus rect{stroke:var(--ink);stroke-width:2px}.callout:focus{outline:none}
.usmap.zoomed .callouts{display:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 4px 2px;font-size:12.5px;color:var(--mut)}
.legend .sw{display:inline-flex;align-items:center;gap:6px}.legend i{display:inline-block;width:16px;height:12px;border-radius:3px;border:1px solid var(--line)}
.legend .ramp{display:inline-flex}.legend .ramp i{border-radius:0;width:22px}
.panel h2{margin:2px 0 4px;font-size:19px}
.panel h3{margin:14px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.mut{color:var(--mut)}.small{font-size:13px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:5px 4px;border-bottom:1px solid var(--line);vertical-align:top}
td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px;white-space:nowrap}
.tag.r{background:#dcfce7;color:#14532d}.tag.c{background:#fef3c7;color:#78350f}.tag.u{background:#fee2e2;color:#7f1d1d}.tag.e,.tag.n,.tag.p{background:var(--na);color:var(--mut)}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:6px 0 4px}
.flag{background:var(--na);border-radius:10px;padding:8px 10px;font-size:13px;margin:8px 0}
.about{margin:16px 0 30px}.about h2{font-size:16px;margin:4px 0}

.nores-bg{fill:var(--card)}.nores-line{stroke:var(--edge2);stroke-width:2}
.legend i.nores{background:repeating-linear-gradient(45deg,var(--card) 0 3px,var(--edge2) 3px 5px)}

.kick a{color:inherit;text-decoration:none}
.cite{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0 0 10px}
.cite p{margin:0}
.doc{max-width:820px;padding-top:18px;padding-bottom:40px}.doc h1{font-size:26px;margin:10px 0 8px}.doc h2{font-size:18px;margin:22px 0 6px}.doc p,.doc li{line-height:1.65}
.doc ul{padding-left:20px}.log{list-style:none;padding:0}.log li{padding:10px 0;border-bottom:1px solid var(--line)}
.tag.p{background:#e0f2fe;color:#075985}
#tiles svg{width:100%;height:auto;display:block}
.tile{stroke:var(--card);stroke-width:2px;cursor:pointer}.tile:hover,.tile:focus{stroke:var(--ink);outline:none}
.tile-label{font-size:11px;font-weight:700;fill:var(--ink);pointer-events:none}
.tile-state{fill:none;stroke:var(--mut);stroke-width:1px;stroke-dasharray:3 2;pointer-events:none}
.cite[hidden]{display:none}

.mapcard{position:relative}
.zoomctl{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:4px;z-index:2}
.zoomctl button{width:34px;height:34px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;font:600 18px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.zoomctl button:hover,.zoomctl button:focus{border-color:var(--hi);outline:none}
.usmap{cursor:grab;touch-action:none}.usmap:active{cursor:grabbing}
/* the area panel scrolls on its own instead of stretching the page; it stays in view beside the map */
.panel{max-height:calc(100vh - 32px);overflow-y:auto;position:sticky;top:16px;overscroll-behavior:contain}
@media (max-width:960px){.panel{position:static;max-height:70vh}}