/* house-map.css - the US House hex map shared by the midterms hub (/us-midterms-2026, build_pages.house_map)
   and the midterms hero on /us/ (build_home.py, from live.json). AP call = solid party colour, leading while
   counting = hatched light tint, else neutral. Before results: poll average leader = flat tint, latest poll
   leader = dotted tint (paler step: lead under 5 points), no polls = neutral. Tokens only. The section also uses .us-keys, .us-top-office,
   .us-map-legend and .us-ap-tag, which both pages already style. Behaviour: house-map.js. */
.hm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; margin-top: 8px; }
.hm-map-wrap { min-width: 0; }
.hm-map { width: 100%; height: auto; display: block; }
.hm-hex { fill: var(--pc-border-light); stroke: var(--pc-surface); stroke-width: 0.6; cursor: pointer; }
.hm-hex:hover { stroke: var(--pc-text); stroke-width: 1.2; }
.hm-hex.is-active { stroke: var(--pc-text); stroke-width: 2; }
.hm-call-d { fill: var(--pc-party-dem); }
.hm-call-r { fill: var(--pc-party-rep); }
.hm-call-o { fill: var(--pc-party-usind); }
.hm-lead-d { fill: url(#hm-hatch-d); }
.hm-lead-r { fill: url(#hm-hatch-r); }
.hm-lead-o { fill: url(#hm-hatch-o); }
.hm-hatch-d rect { fill: color-mix(in srgb, var(--pc-party-dem) 10%, var(--pc-surface)); }
.hm-hatch-d line { stroke: color-mix(in srgb, var(--pc-party-dem) 45%, var(--pc-surface)); stroke-width: 1.2; }
.hm-hatch-r rect { fill: color-mix(in srgb, var(--pc-party-rep) 10%, var(--pc-surface)); }
.hm-hatch-r line { stroke: color-mix(in srgb, var(--pc-party-rep) 45%, var(--pc-surface)); stroke-width: 1.2; }
.hm-hatch-o rect { fill: var(--pc-border-light); }
.hm-hatch-o line { stroke: var(--pc-text-meta); stroke-width: 1.6; }
.hm-states { fill: none; stroke: var(--pc-text-secondary); stroke-width: 1.1; pointer-events: none; }
.hm-labels text { font-family: var(--pc-sans); font-size: 8px; font-weight: 700; fill: var(--pc-text); text-anchor: middle; pointer-events: none;
    paint-order: stroke; stroke: var(--pc-surface); stroke-width: 2.5px; stroke-linejoin: round; }
.hm-legend .hm-sw { width: 14px; height: 14px; border: 1px solid var(--pc-border); display: inline-block; background: var(--pc-border-light); }
.hm-legend .hm-sw + .hm-sw { margin-left: -4px; }
.hm-legend .hm-call-d { background: var(--pc-party-dem); }
.hm-legend .hm-call-r { background: var(--pc-party-rep); }
.hm-legend .hm-lead-d { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pc-party-dem) 70%, var(--pc-surface)) 0 2px, color-mix(in srgb, var(--pc-party-dem) 18%, var(--pc-surface)) 2px 5px); }
.hm-legend .hm-lead-r { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pc-party-rep) 70%, var(--pc-surface)) 0 2px, color-mix(in srgb, var(--pc-party-rep) 18%, var(--pc-surface)) 2px 5px); }
.hm-panel { border-top: 2px solid var(--pc-text); padding-top: 10px; min-width: 0; font-family: var(--pc-sans); }
.hm-pick-label { display: block; font-size: 12px; font-weight: 700; color: var(--pc-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.hm-pick { width: 100%; max-width: 100%; font: inherit; font-size: 14px; color: var(--pc-text); background: var(--pc-surface); border: 1px solid var(--pc-border); padding: 6px 8px; }
.hm-body { margin-top: 14px; }
.hm-name { font-family: var(--pc-serif); font-size: 20px; font-weight: 700; color: var(--pc-text); line-height: 1.2; margin: 0 0 6px; }
.hm-status { font-size: 15px; font-weight: 700; color: var(--pc-text); margin: 8px 0; font-variant-numeric: tabular-nums; }
.hm-cands { display: grid; gap: 10px; margin: 8px 0; }
.hm-c { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 8px; }
.hm-c-name { font-size: 14px; font-weight: 600; color: var(--pc-text-secondary); min-width: 0; }
.hm-c-party { font-size: 12px; font-weight: 700; }
.hm-c-pct { font-family: var(--pc-serif); font-size: 20px; font-weight: 700; color: var(--pc-text-secondary); font-variant-numeric: tabular-nums; }
.hm-c.is-lead .hm-c-name, .hm-c.is-lead .hm-c-pct { color: var(--pc-text); }
.hm-bar { flex: 1 0 100%; height: 6px; background: var(--pc-border-light); display: block; margin-top: 2px; }
.hm-bar i { display: block; height: 100%; background: var(--party-color); }
.hm-c-votes { flex: 1 0 100%; font-size: 12px; color: var(--pc-text-secondary); font-variant-numeric: tabular-nums; margin-top: 2px; }
.hm-src { font-size: 12px; color: var(--pc-text-secondary); line-height: 1.5; margin: 10px 0 0; }
.hm-src a, .hm-more a { color: var(--pc-text-secondary); }
.hm-more { font-size: 14px; font-weight: 600; margin: 10px 0 0; }
.hm-more a { color: var(--pc-text); }
.hm-credit { margin-top: 8px; }
.hm-seatbar { margin: 4px 0 20px; }
.hm-seatbar .us-top-track { margin-top: 22px; }
/* before results: district polls */
.hm-pa-d1 { fill: color-mix(in srgb, var(--pc-party-dem) 30%, var(--pc-surface)); }
.hm-pa-d2 { fill: color-mix(in srgb, var(--pc-party-dem) 62%, var(--pc-surface)); }
.hm-pa-r1 { fill: color-mix(in srgb, var(--pc-party-rep) 30%, var(--pc-surface)); }
.hm-pa-r2 { fill: color-mix(in srgb, var(--pc-party-rep) 62%, var(--pc-surface)); }
.hm-pa-o1 { fill: color-mix(in srgb, var(--pc-party-usind) 30%, var(--pc-surface)); }
.hm-pa-o2 { fill: color-mix(in srgb, var(--pc-party-usind) 62%, var(--pc-surface)); }
.hm-pa-t { fill: color-mix(in srgb, var(--pc-text-meta) 45%, var(--pc-surface)); }
.hm-pl-d1 { fill: url(#hm-dot-d1); }
.hm-pl-d2 { fill: url(#hm-dot-d2); }
.hm-pl-r1 { fill: url(#hm-dot-r1); }
.hm-pl-r2 { fill: url(#hm-dot-r2); }
.hm-pl-o1 { fill: url(#hm-dot-o1); }
.hm-pl-o2 { fill: url(#hm-dot-o2); }
.hm-dot-d1 rect { fill: color-mix(in srgb, var(--pc-party-dem) 10%, var(--pc-surface)); }
.hm-dot-d1 circle { fill: color-mix(in srgb, var(--pc-party-dem) 65%, var(--pc-surface)); }
.hm-dot-d2 rect { fill: color-mix(in srgb, var(--pc-party-dem) 28%, var(--pc-surface)); }
.hm-dot-d2 circle { fill: var(--pc-party-dem); }
.hm-dot-r1 rect { fill: color-mix(in srgb, var(--pc-party-rep) 10%, var(--pc-surface)); }
.hm-dot-r1 circle { fill: color-mix(in srgb, var(--pc-party-rep) 65%, var(--pc-surface)); }
.hm-dot-r2 rect { fill: color-mix(in srgb, var(--pc-party-rep) 28%, var(--pc-surface)); }
.hm-dot-r2 circle { fill: var(--pc-party-rep); }
.hm-dot-o1 rect { fill: color-mix(in srgb, var(--pc-party-usind) 10%, var(--pc-surface)); }
.hm-dot-o1 circle { fill: color-mix(in srgb, var(--pc-party-usind) 65%, var(--pc-surface)); }
.hm-dot-o2 rect { fill: color-mix(in srgb, var(--pc-party-usind) 28%, var(--pc-surface)); }
.hm-dot-o2 circle { fill: var(--pc-party-usind); }
.hm-legend .hm-pa-d1, .hm-legend .hm-pa-d2, .hm-legend .hm-pa-r1, .hm-legend .hm-pa-r2, .hm-legend .hm-pa-t { background: var(--sw); }
.hm-legend .hm-pa-d1 { --sw: color-mix(in srgb, var(--pc-party-dem) 30%, var(--pc-surface)); }
.hm-legend .hm-pa-d2 { --sw: color-mix(in srgb, var(--pc-party-dem) 62%, var(--pc-surface)); }
.hm-legend .hm-pa-r1 { --sw: color-mix(in srgb, var(--pc-party-rep) 30%, var(--pc-surface)); }
.hm-legend .hm-pa-r2 { --sw: color-mix(in srgb, var(--pc-party-rep) 62%, var(--pc-surface)); }
.hm-legend .hm-pa-t { --sw: color-mix(in srgb, var(--pc-text-meta) 45%, var(--pc-surface)); }
.hm-legend .hm-pl-d1, .hm-legend .hm-pl-d2, .hm-legend .hm-pl-r1, .hm-legend .hm-pl-r2 {
    background: radial-gradient(circle, var(--dot) 1px, transparent 1.4px) 0 0 / 4px 4px, var(--sw); }
.hm-legend .hm-pl-d1 { --sw: color-mix(in srgb, var(--pc-party-dem) 10%, var(--pc-surface)); --dot: color-mix(in srgb, var(--pc-party-dem) 65%, var(--pc-surface)); }
.hm-legend .hm-pl-d2 { --sw: color-mix(in srgb, var(--pc-party-dem) 28%, var(--pc-surface)); --dot: var(--pc-party-dem); }
.hm-legend .hm-pl-r1 { --sw: color-mix(in srgb, var(--pc-party-rep) 10%, var(--pc-surface)); --dot: color-mix(in srgb, var(--pc-party-rep) 65%, var(--pc-surface)); }
.hm-legend .hm-pl-r2 { --sw: color-mix(in srgb, var(--pc-party-rep) 28%, var(--pc-surface)); --dot: var(--pc-party-rep); }
.hm-legend .hm-sw[class*="hm-p"] + .hm-sw[class*="hm-p"] { margin-left: 2px; }
.hm-legend-note { font-size: 12px; color: var(--pc-text-secondary); }
.hm-polls { margin-top: 8px; }
.hm-polls.is-final { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--pc-border); }
.hm-pmeta { font-size: 13px; color: var(--pc-text-secondary); line-height: 1.45; margin: 0 0 8px; overflow-wrap: anywhere; }
.hm-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--pc-text-secondary); border: 1px solid var(--pc-border); padding: 0 4px; margin-left: 4px; line-height: 16px; white-space: nowrap; }
.hm-sub { font-family: var(--pc-sans); font-size: 12px; font-weight: 700; color: var(--pc-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 0 4px; }
.hm-plist { list-style: none; margin: 0; padding: 0; }
.hm-plist li { padding: 7px 0; border-bottom: 1px solid var(--pc-border-light); font-size: 13px; line-height: 1.45; color: var(--pc-text-secondary); overflow-wrap: anywhere; }
.hm-plist li:last-child { border-bottom: 0; }
.hm-pl-who { font-weight: 700; color: var(--pc-text); }
.hm-pl-who a { color: var(--pc-text); }
.hm-pl-f { display: block; color: var(--pc-text); font-variant-numeric: tabular-nums; }
.hm-pl-x { display: block; font-size: 12px; }
/* margin-over-time chart in the panel (house-map.js chart()) */
.hm-ch { margin: 4px 0 6px; }
.hm-ch-svg { width: 100%; height: auto; display: block; overflow: visible; }
.hm-ch-grid { stroke: var(--pc-border-light); stroke-width: 1; }
.hm-ch-grid.is-zero { stroke: var(--pc-text-meta); stroke-width: 1.2; }
.hm-ch-ax { font-family: var(--pc-sans); font-size: 10px; fill: var(--pc-text-secondary); font-variant-numeric: tabular-nums; }
.hm-ch-line { fill: none; stroke: var(--pc-text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.hm-ch-lab { font-family: var(--pc-sans); font-size: 10px; font-weight: 700; fill: var(--pc-text);
    paint-order: stroke; stroke: var(--pc-surface); stroke-width: 3px; stroke-linejoin: round; }
.hm-ch-pt { cursor: pointer; outline: none; }
.hm-ch-hit { fill: transparent; }
.hm-ch-dot { stroke-width: 1.6; }
.hm-ch-dot.is-d { fill: var(--pc-party-dem); stroke: var(--pc-party-dem); }
.hm-ch-dot.is-r { fill: var(--pc-party-rep); stroke: var(--pc-party-rep); }
.hm-ch-dot.is-t { fill: var(--pc-text-meta); stroke: var(--pc-text-meta); }
.hm-ch-dot.is-hollow { fill: var(--pc-surface); }
.hm-ch-pt.is-active .hm-ch-dot, .hm-ch-pt:focus-visible .hm-ch-dot { stroke: var(--pc-text); stroke-width: 2; }
.hm-ch-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--pc-text-secondary); margin: 4px 0 0; }
.hm-ch-key span { display: inline-flex; align-items: center; gap: 4px; }
.hm-ch-k { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--pc-text-secondary); border: 1.5px solid var(--pc-text-secondary); box-sizing: border-box; }
.hm-ch-k.is-hollow { background: transparent; }
.hm-ch-read { font-size: 13px; color: var(--pc-text); line-height: 1.45; margin: 6px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .hm-grid { grid-template-columns: 1fr; gap: 12px; }
}