/* County choropleth maps (templates/_maps.html, web/maps.py). Light-only, like the site. */
.county-map {
    --seq-0: #e8f0f9; --seq-1: #bcd4ee; --seq-2: #84b0de; --seq-3: #3f80c4; --seq-4: #1c4f8a;
    --div-0: #b8531f; --div-1: #eda77c; --div-2: #efece4; --div-3: #7cc3b8; --div-4: #1d7f72;
    --green-0: #e3f1df; --green-1: #addaa2; --green-2: #6fb663; --green-3: #2f8a34; --green-4: #14561c;
    --gold-0: #fbf0d9; --gold-1: #f5d48f; --gold-2: #e9ad48; --gold-3: #c27f17; --gold-4: #7f510a;
    --party-0: #b8232a; --party-1: #f19a95; --party-2: #efece4; --party-3: #93b9ea; --party-4: #1d5aa8;
    margin: 0 0 1.25rem;
    max-width: 760px;
}
.map-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.county-map figcaption { font-size: 0.95rem; margin-bottom: 0.4rem; }
.county-map .map-caption { color: #52514e; font-size: 0.85rem; }
.county-map svg { display: block; width: 100%; height: auto; }
.map-county { stroke: #ffffff; stroke-width: 0.9; stroke-linejoin: round; }
.county-map a:hover .map-county, .county-map a:focus .map-county { stroke: #0b0b0b; stroke-width: 2; }
.county-map a:focus { outline: none; }
.map-seq-0 { fill: var(--seq-0); } .map-seq-1 { fill: var(--seq-1); } .map-seq-2 { fill: var(--seq-2); }
.map-seq-3 { fill: var(--seq-3); } .map-seq-4 { fill: var(--seq-4); }
.map-green-0 { fill: var(--green-0); } .map-green-1 { fill: var(--green-1); } .map-green-2 { fill: var(--green-2); }
.map-green-3 { fill: var(--green-3); } .map-green-4 { fill: var(--green-4); }
.map-gold-0 { fill: var(--gold-0); } .map-gold-1 { fill: var(--gold-1); } .map-gold-2 { fill: var(--gold-2); }
.map-gold-3 { fill: var(--gold-3); } .map-gold-4 { fill: var(--gold-4); }
.map-div-0 { fill: var(--div-0); } .map-div-1 { fill: var(--div-1); } .map-div-2 { fill: var(--div-2); }
.map-div-3 { fill: var(--div-3); } .map-div-4 { fill: var(--div-4); }
.map-party-0 { fill: var(--party-0); } .map-party-1 { fill: var(--party-1); } .map-party-2 { fill: var(--party-2); }
.map-party-3 { fill: var(--party-3); } .map-party-4 { fill: var(--party-4); }
.map-none { fill: url(#map-hatch); }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0;
              margin: 0.4rem 0 0; font-size: 0.8rem; color: #52514e; }
.map-legend li { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.map-key { width: 14px; height: 14px; border-radius: 2px; display: inline-block; }
.map-key.map-seq-0 { background: var(--seq-0); } .map-key.map-seq-1 { background: var(--seq-1); }
.map-key.map-seq-2 { background: var(--seq-2); } .map-key.map-seq-3 { background: var(--seq-3); }
.map-key.map-seq-4 { background: var(--seq-4); }
.map-key.map-green-0 { background: var(--green-0); } .map-key.map-green-1 { background: var(--green-1); }
.map-key.map-green-2 { background: var(--green-2); } .map-key.map-green-3 { background: var(--green-3); }
.map-key.map-green-4 { background: var(--green-4); }
.map-key.map-gold-0 { background: var(--gold-0); } .map-key.map-gold-1 { background: var(--gold-1); }
.map-key.map-gold-2 { background: var(--gold-2); } .map-key.map-gold-3 { background: var(--gold-3); }
.map-key.map-gold-4 { background: var(--gold-4); }
.map-key.map-div-0 { background: var(--div-0); } .map-key.map-div-1 { background: var(--div-1); }
.map-key.map-div-2 { background: var(--div-2); } .map-key.map-div-3 { background: var(--div-3); }
.map-key.map-div-4 { background: var(--div-4); }
.map-key.map-party-0 { background: var(--party-0); } .map-key.map-party-1 { background: var(--party-1); }
.map-key.map-party-2 { background: var(--party-2); } .map-key.map-party-3 { background: var(--party-3); }
.map-key.map-party-4 { background: var(--party-4); }
.map-key.map-none { background: repeating-linear-gradient(45deg, #f3f1ea 0 3px, #c3c2b7 3px 5px); }
.map-readout { min-height: 1.3em; margin: 0.25rem 0 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.map-switch { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.map-switch button { font-size: 0.8rem; padding: 0.25rem 0.7rem; margin: 0; width: auto;
                     background: #ffffff; color: #0b0b0b; border: 1px solid #c3c2b7; border-radius: 999px; }
.map-switch button[aria-pressed="true"] { background: #0b0b0b; color: #ffffff; border-color: #0b0b0b; }
.map-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem 1.25rem; }
.map-multiples .county-map { margin-bottom: 0.5rem; }
.map-multiples .map-legend { font-size: 0.72rem; }