/* Vote Safe overlay map: the section's own styles, shared by the artifact page and the dashboard section.
   Everything is scoped under .vs; colors come from the host page's tokens with the County Maps values as
   fallbacks, so the section reads correctly on either host. */
.vs{display:flex;flex-direction:column;gap:12px;min-width:0}
.vs-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.vs-states{display:flex;flex-wrap:wrap;gap:6px}
.vs-states button{font:500 13.5px var(--f-body,"Helvetica Neue",Helvetica,Arial,sans-serif);padding:7px 14px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line,#d4e4e0);background:var(--card,#fff);color:var(--ink,#1c4c53)}
.vs-states button[aria-pressed="true"]{background:var(--hdr1,#1c4c53);color:#fff;border-color:var(--hdr1,#1c4c53);font-weight:700}
.vs-pick{display:flex;align-items:center;gap:8px;color:var(--mid,#3a7078);font-size:13px}
.vs-pick select{font:inherit;color:var(--ink,#1c4c53);background:var(--card,#fff);border:1px solid var(--line,#d4e4e0);
  border-radius:8px;padding:6px 8px;max-width:min(60vw,280px)}
.vs-status{color:var(--mut,#62908a);font-size:13px}
.vs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.vs-kpi{background:var(--card,#fff);border:1px solid var(--line,#d4e4e0);border-radius:10px;padding:10px 12px;min-width:0}
.vs-kpi .v{font:700 20px var(--f-num,"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif);font-variant-numeric:tabular-nums;color:var(--ink,#1c4c53)}
.vs-kpi .l{font-size:12px;color:var(--mut,#62908a);margin-top:2px}
/* The controls and the state figures sit below the map, side by side, so the map takes the full width. */
.vs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.vs-plate{background:var(--plate,#fff);border:1px solid var(--line,#d4e4e0);border-radius:10px;padding:8px;min-width:0}
#vs-map{height:clamp(360px,62vh,680px);border-radius:6px;background:var(--plate,#fff)}
.vs-legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 4px 2px;font-size:12px;color:var(--plate-mut,#5c7a7a)}
.vs-legend span{display:inline-flex;align-items:center;gap:6px}
.vs-legend i{display:inline-block;flex:none}
.vs-legend .dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,0 0 0 2px #9db8b3}
.vs-legend .box{width:13px;height:10px;border:1px solid}
.vs-legend .dash{width:16px;height:0;border-top:2px dashed}
.vs-hint{padding:2px 4px 4px;font-size:12px;color:var(--plate-mut,#5c7a7a);min-height:1.2em}
.vs-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start;min-width:0}
.vs-side>[hidden]{display:none}
#vs-statefigs-box,.vs-side .vs-downloads{grid-column:1/-1}
.vs-statefigs{columns:280px;column-gap:28px}
.vs-statefigs details{break-inside:avoid}
.vs-statefigs h4,.vs-statefigs .vs-figgroup{break-after:avoid}
.vs-layers,.vs-place,.vs-downloads{background:var(--card,#fff);border:1px solid var(--line,#d4e4e0);border-radius:10px;padding:12px 14px}
.vs-layers fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vs-layers fieldset + fieldset{margin-top:12px}
.vs-layers legend{padding:0;margin-bottom:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--mid,#3a7078)}
.vs-layers label{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.vs-place h3{margin:0 0 8px;font-size:15px;text-wrap:balance}
.vs-place dl{margin:0;display:grid;grid-template-columns:1fr;gap:2px}
.vs-place dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut,#62908a);margin-top:6px}
.vs-place dd{margin:0;overflow-wrap:anywhere}
.vs-downloads{display:flex;flex-direction:column;gap:8px}
.vs-downloads button{font:500 13px var(--f-body,"Helvetica Neue",Helvetica,Arial,sans-serif);text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line,#d4e4e0);background:var(--soft,#eef4f2);color:var(--ink,#1c4c53)}
.vs-note{margin:0;color:var(--mut,#62908a);font-size:12.5px;max-width:95ch}
.vs .leaflet-container{font-family:var(--f-body,"Helvetica Neue",Helvetica,Arial,sans-serif);background:var(--plate,#fff)}
.vs .leaflet-tooltip{font-size:12.5px;color:#1c4c53}
.vs-overlay{background:var(--card,#fff);border:1px solid var(--line,#d4e4e0);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.vs-fillpick{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--mid,#3a7078)}
.vs-overlay select{font:inherit;font-size:13px;color:var(--ink,#1c4c53);background:var(--card,#fff);border:1px solid var(--line,#d4e4e0);border-radius:8px;padding:6px 8px;width:100%;min-width:0}
.vs-filllegend{font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.vs-filllegend small{color:var(--mut,#62908a);overflow-wrap:anywhere}
.vs-ramp{display:flex;flex-direction:column;gap:3px;font-variant-numeric:tabular-nums}
.vs-ramp span{display:flex;align-items:center;gap:8px}
.vs-ramp i{width:18px;height:12px;flex:none;border:1px solid #9db8b3}
.vs-ramp i.none{background:#ffffff}
.vs-pointlayers{display:flex;flex-direction:column;gap:6px}
.vs-pointlayers label{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer}
.vs-pointlayers .dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px #fff,0 0 0 2px #9db8b3}
.vs-statefigs h4{margin:6px 0 2px;font-size:13px}
.vs-statefigs .vs-figgroup{margin:8px 0 2px;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut,#62908a)}
.vs-statefigs details{border-top:1px solid var(--line,#d4e4e0);padding:5px 0;font-size:13px}
.vs-statefigs summary{cursor:pointer;overflow-wrap:anywhere}
.vs-statefigs summary b{font-weight:600;white-space:nowrap}
.vs-statefigs dl{margin:6px 0 4px;display:grid;grid-template-columns:1fr auto;gap:2px 12px}
.vs-statefigs dt{color:var(--mut,#62908a)}
.vs-statefigs dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.vs-statefigs small{display:block;color:var(--mut,#62908a);overflow-wrap:anywhere}
.vs-list{margin:2px 0 0;padding-left:18px}
.vs-list small{color:var(--mut,#62908a)}

/* graph panels under the map */
.vs-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:16px}
.vs-chart{background:var(--card,#fff);border:1px solid var(--line,#d4e4e0);border-radius:10px;padding:12px 14px;min-width:0}
.vs-chart.wide{grid-column:1/-1}
.vs-chart h4{margin:0 0 2px;font-size:14px;color:var(--ink,#1c4c53)}
.vs-chart .sub{margin:0 0 8px;font-size:12px;color:var(--mut,#62908a)}
.vs-chart svg{display:block;width:100%;height:auto;overflow:visible}
.vs-chart svg text{font:11px var(--f-body,"Helvetica Neue",Helvetica,Arial,sans-serif);fill:var(--mid,#3a6b6b)}
.vs-chart svg text.v{font:11px var(--f-num,"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif);fill:var(--ink,#1c4c53)}
.vs-chart svg text.hot{font-weight:700;fill:var(--ink,#1c4c53)}
.vs-chart svg .grid{stroke:var(--line,#d4e4e0);stroke-width:1}
.vs-chart svg .bar{fill:var(--vs-bar,#3f9a82)}
.vs-chart svg .bar.dim{fill:var(--vs-bar-dim,#b5dccf)}
.vs-chart svg .bar.hot{fill:var(--ink,#1c4c53)}
.vs-chart svg .bar.bad{fill:#b3402e}
.vs-chart svg .bar.good{fill:#2b7a99}
.vs-chart svg .ln{fill:none;stroke:var(--vs-bar,#3f9a82);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.vs-chart svg .dot{fill:var(--vs-bar,#3f9a82);stroke:var(--card,#fff);stroke-width:2}
.vs-chart svg .hit{fill:transparent;cursor:default}
.vs-chart .foot{margin:8px 0 0;font-size:11.5px;color:var(--mut,#62908a)}
.vs-chart .foot button{font:inherit;margin-left:6px;padding:2px 8px;border:1px solid var(--line,#d4e4e0);border-radius:6px;background:transparent;color:var(--ink,#1c4c53);cursor:pointer}
.vs-minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 16px}
.vs-mini .t{font-size:12px;color:var(--ink,#1c4c53);line-height:1.25;min-height:2.5em}
.vs-mini .n{font:700 13px var(--f-num,"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif);color:var(--ink,#1c4c53)}
.vs-mini .n small{font:11px var(--f-body,"Helvetica Neue",Helvetica,Arial,sans-serif);font-weight:400;color:var(--mut,#62908a)}
.vs-tip{position:fixed;z-index:2000;pointer-events:none;background:var(--ink,#1c4c53);color:var(--card,#fff);font-size:12px;line-height:1.35;padding:6px 8px;border-radius:6px;max-width:260px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.vs-tip b{display:block}

.vs-place h4.vs-grp{margin:12px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut,#62908a)}
.vs-place details{border-top:1px solid var(--line,#d4e4e0);padding:5px 0}
.vs-place summary{cursor:pointer;font-weight:600}
.vs-place details small{display:block;margin-top:6px;color:var(--mut,#62908a)}
.vs-place{max-height:70vh;overflow:auto}
.vs-zoom{margin:0 0 8px;padding:6px 10px;border:1px solid var(--line,#d4e4e0);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
#vs-map .leaflet-interactive{cursor:pointer}

.vs-areatable{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.vs-areatable th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut,#62908a);text-align:right;font-weight:600;padding:3px 4px;vertical-align:bottom}
.vs-areatable th:first-child,.vs-areatable td:first-child{text-align:left}
.vs-areatable td{text-align:right;padding:3px 4px;border-top:1px solid var(--line,#d4e4e0);font-variant-numeric:tabular-nums}
.vs-areatable i{font-size:11px;color:var(--mut,#62908a)}
.vs-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* Fonts (Angie, 2026-10-13): Archivo for headers, Hanken Grotesk for numbers and subheads, Helvetica for text. */
.vs h3,.vs h4{font-family:var(--f-display,"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif);font-weight:700}
.vs-layers legend,.vs-fillpick,.vs-statefigs .vs-figgroup,.vs h4.vs-grp,.vs-mini .t{font-family:var(--f-sub,"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif)}
.vs-statefigs summary b,.vs-statefigs dd{font-family:var(--f-num,"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif)}
.vs select,.vs button,.vs input{font-family:var(--f-body,"Helvetica Neue",Helvetica,Arial,sans-serif)}
/* The district under the pointer and its candidates, in the map's top right corner. */
.vs-dinfo{background:var(--card,#fff);border:1px solid var(--line,#d4e4e0);border-radius:8px;padding:8px 10px;max-width:270px;font-size:12px;line-height:1.35;color:var(--ink,#1c4c53);box-shadow:0 2px 8px rgba(0,0,0,.12);pointer-events:none}
.vs-dinfo[hidden]{display:none}
.vs-dinfo b{display:block;font:700 14px var(--f-display,"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif)}
.vs-dinfo small{color:var(--mut,#62908a)}
.vs-dinfo ul{list-style:none;margin:4px 0 0;padding:0}
.vs-dinfo li{padding:1px 0}
/* Table headers and the headings of the figure groups: Hanken Grotesk, bold (Angie, 2026-10-13). */
.vs th,.vs-areatable th,.vs-statefigs .vs-figgroup,.vs h4.vs-grp,.vs-layers legend,.vs-fillpick{font-family:var(--f-sub,"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif);font-weight:700}
#vs-fill-col{margin-top:6px}
#vs-fill-col[hidden]{display:none}
/* A place in the figures panel (a focus county, a metro county, a district): its own block of layers. */
.vs-statefigs .vs-placeblock>summary{font-weight:600}
.vs-statefigs .vs-placeblock>summary b{font-weight:400;color:var(--mut,#62908a)}
.vs-statefigs .vs-placeblock details{margin-left:10px}
.vs-statefigs h4.vs-grp{margin:10px 0 2px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut,#62908a)}
.vs-statefigs .vs-placeblock[open]{break-inside:auto}
/* The metro area box carries a wide table: it takes the full row, and the table scrolls sideways on a phone. */
.vs-side .vs-place:has(.vs-areatable){grid-column:1/-1}
.vs-tablewrap{overflow-x:auto}
.vs-place small{display:block;margin-top:4px}
.vs-side .vs-place:has(.vs-areatable){max-height:none}
.vs-place:has(.vs-areatable)>dl{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 18px;margin-bottom:8px}
/* Grouped columns (a column per year) and stacked line graphs on one time axis. */
.vs-chart svg .bar.y0{fill:var(--vs-bar-dim,#b5dccf)}
.vs-chart svg .bar.y1{fill:var(--vs-bar,#3f9a82)}
.vs-chart svg .bar.y2{fill:var(--ink,#1c4c53)}
.vs-chart svg .bar.y3{fill:#c9793a}
.vs-chart svg .ln.s1{stroke:#c9793a}
.vs-chart svg .dot.s1{fill:#c9793a}
.vs-chart svg .key.s0{fill:var(--vs-bar,#3f9a82)}
.vs-chart svg .key.s1{fill:#c9793a}
.vs-chart svg .grid.tick{stroke-dasharray:2 4}
/* City names on the map: text with a light halo, centered on the place, never clickable. */
.vs-city{pointer-events:none}
.vs-city span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:600 11.5px var(--f-sub,"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif);color:var(--ink,#1c4c53);background:rgba(255,255,255,.86);padding:0 4px;border-radius:3px;box-shadow:0 0 0 1px rgba(28,76,83,.18);letter-spacing:.01em}
.vs-city.big span{font-size:14px;font-weight:700}