/* /elections/map/: layout, legend, district fills. Fills come from the party
   tokens so the map matches every badge on the site and follows dark mode. */
.map-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-3) 0 var(--sp-4); }
.map-modes { display: flex; gap: var(--sp-2); }
.map-modes .btn.is-active { background: var(--ink-900); color: var(--ink-50); border-color: var(--ink-900); }
.map-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--ink-600); }
.map-legend strong { color: var(--ink-900); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.swatch-D { background: var(--party-D); }
.swatch-R { background: var(--party-R); }
.swatch-I { background: var(--party-I); }
.swatch-vacant { background: var(--ink-300); }
.map-jump { font-size: var(--fs-sm); color: var(--ink-600); display: flex; gap: var(--sp-2); align-items: center; margin-left: auto; }
.map-jump select { max-width: 260px; }

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } .map-jump { margin-left: 0; } }
.map-stage svg { width: 100%; height: auto; display: block; }
.map-stage #districts path { fill: var(--ink-200); stroke: var(--ink-50); stroke-width: 0.4; cursor: pointer; transition: fill 0.15s; }
.map-stage #districts path.party-D { fill: var(--party-D); }
.map-stage #districts path.party-R { fill: var(--party-R); }
.map-stage #districts path.party-I { fill: var(--party-I); }
.map-stage #districts path.party-L, .map-stage #districts path.party-G, .map-stage #districts path.party-X { fill: var(--ink-500); }
.map-stage #districts path.vacant { fill: var(--ink-300); }
.map-stage #districts path.unknown, .map-stage #districts path.nodata { fill: var(--ink-200); }
.map-stage #districts path.leading { fill-opacity: 0.55; }
.map-stage #districts path:hover, .map-stage #districts path.selected { stroke: var(--ink-900); stroke-width: 1.2; }
.map-stage #states path { stroke: var(--ink-700); stroke-width: 0.7; fill: none; }

.map-panel { position: sticky; top: var(--sp-4); }
.map-panel-title { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.map-panel-member { font-size: var(--fs-base); margin: 0 0 var(--sp-2); }
.map-panel-sub { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-600); margin: var(--sp-3) 0 var(--sp-2); }
.cand-row { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); padding: 6px 0; border-top: 1px solid var(--ink-200); }
.cand-row.is-winner { font-weight: 600; }
.cand-votes { white-space: nowrap; color: var(--ink-700); }
.map-sources { margin-top: var(--sp-4); }