/* us-midterms.css - /us-midterms-2026 section (prefix us-).
   Built on css/pc-tokens.css + css/pc-components.css; no raw hexes. */

body.us-mid {
    --us-dem: var(--pc-party-dem);
    --us-rep: var(--pc-party-rep);
    --us-ind: var(--pc-party-usind);
    --us-safe-d: var(--us-dem);
    --us-likely-d: color-mix(in srgb, var(--us-dem) 62%, var(--pc-surface));
    --us-lean-d: color-mix(in srgb, var(--us-dem) 32%, var(--pc-surface));
    --us-safe-r: var(--us-rep);
    --us-likely-r: color-mix(in srgb, var(--us-rep) 62%, var(--pc-surface));
    --us-lean-r: color-mix(in srgb, var(--us-rep) 32%, var(--pc-surface));
    --us-safe-i: var(--us-ind);
    --us-likely-i: color-mix(in srgb, var(--us-ind) 62%, var(--pc-surface));
    --us-lean-i: color-mix(in srgb, var(--us-ind) 32%, var(--pc-surface));
    --us-tossup: color-mix(in srgb, var(--pc-text-meta) 70%, var(--pc-surface));
    --us-noelection: var(--pc-border-light);
    background: var(--pc-bg);
}

.us-masthead { margin-bottom: 24px; max-width: 720px; }
.us-crumb { font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-meta); margin: 0 0 8px; }
.us-crumb a { color: var(--pc-text-meta); }

/* Lean fills (map, chips, seatbar) */
.us-l-safe-d { --us-fill: var(--us-safe-d); }
.us-l-likely-d { --us-fill: var(--us-likely-d); }
.us-l-lean-d { --us-fill: var(--us-lean-d); }
.us-l-tossup { --us-fill: var(--us-tossup); }
.us-l-lean-r { --us-fill: var(--us-lean-r); }
.us-l-likely-r { --us-fill: var(--us-likely-r); }
.us-l-safe-r { --us-fill: var(--us-safe-r); }
.us-l-safe-i { --us-fill: var(--us-safe-i); }
.us-l-likely-i { --us-fill: var(--us-likely-i); }
.us-l-lean-i { --us-fill: var(--us-lean-i); }
.us-l-none { --us-fill: var(--us-noelection); }
.us-l-held-d { --us-fill: var(--us-dem); }
.us-l-held-r { --us-fill: var(--us-rep); }
.us-l-vacant { --us-fill: var(--pc-border); }

/* Seat tally bar: reuse pc-seatbar, fills from lean classes */
.us-seatbar .pc-seat-seg { background: var(--us-fill); color: var(--pc-text); }
.us-seatbar .pc-seat-seg.us-l-safe-d, .us-seatbar .pc-seat-seg.us-l-safe-r,
.us-seatbar .pc-seat-seg.us-l-held-d, .us-seatbar .pc-seat-seg.us-l-held-r,
.us-seatbar .pc-seat-seg.us-l-safe-i { color: var(--pc-on-party-dark); }
.us-seatbar .pc-seat-seg.us-l-held-d, .us-seatbar .pc-seat-seg.us-l-held-r {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--pc-surface) 18%, transparent) 6px 8px);
}
.us-seat-legend .pc-swatch { background: var(--us-fill); }
.us-seatbar .pc-seat-seg { min-width: 0; overflow: hidden; }

/* Map */
.us-map-wrap { position: relative; margin: 8px 0 4px; }
.us-map { width: 100%; height: auto; display: block; }
.us-map path.us-state { fill: var(--us-fill); stroke: var(--pc-surface); stroke-width: 0.8; }
.us-map path.us-state.is-link { cursor: pointer; }
.us-map path.us-state.is-link:hover, .us-map path.us-state.is-focus { stroke: var(--pc-text); stroke-width: 1.6; }
.us-map .us-map-label { font-family: var(--pc-sans); font-size: 11px; font-weight: 700; fill: var(--pc-text); pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.us-map .us-map-label.on-dark { fill: var(--pc-on-party-dark); }
.us-map-tip {
    position: absolute; pointer-events: none; z-index: 5; min-width: 180px; max-width: 260px;
    background: var(--pc-tooltip-bg); color: var(--pc-tooltip-text);
    font-family: var(--pc-sans); font-size: 12px; line-height: 1.45; padding: 8px 10px;
}
.us-map-tip b { font-size: 13px; }
.us-map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-secondary); margin: 8px 0 0; }
.us-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.us-map-legend i { width: 12px; height: 12px; background: var(--us-fill); display: inline-block; border: 1px solid var(--pc-border); }

/* Small-state chips (map is hard to tap in the north-east) */
.us-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.us-chip {
    font-family: var(--pc-sans); font-size: 12px; font-weight: 600; line-height: 1;
    padding: 6px 8px; border: 1px solid var(--pc-border); background: var(--pc-surface);
    color: var(--pc-text); text-decoration: none; display: inline-flex; gap: 6px; align-items: center;
}
.us-chip i { width: 10px; height: 10px; background: var(--us-fill); display: inline-block; }

/* Race table */
.us-race-table td, .us-race-table th { white-space: nowrap; }
.us-race-table td.us-cands { white-space: normal; min-width: 180px; }
.us-race-table a { color: var(--pc-text); }
.us-lean-chip {
    display: inline-block; font-family: var(--pc-sans); font-size: 12px; font-weight: 700;
    padding: 3px 7px; background: var(--us-fill); color: var(--pc-text); white-space: nowrap;
}
.us-lean-chip.us-l-safe-d, .us-lean-chip.us-l-safe-r, .us-lean-chip.us-l-safe-i { color: var(--pc-on-party-dark); }
.us-basis { font-family: var(--pc-sans); font-size: 11px; color: var(--pc-text-meta); display: block; margin-top: 2px; }
.us-party-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--party-color); margin-right: 5px; vertical-align: 1px; }

.us-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; font-family: var(--pc-sans); font-size: 14px; color: var(--pc-text-body); margin: 0 0 8px; }
.us-facts dt { font-size: 12px; color: var(--pc-text-meta); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.us-facts dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }

/* Poll table */
.us-poll-table td.us-excl { color: var(--pc-text-meta); }
.us-poll-table tr.is-excluded td { color: var(--pc-text-meta); }
.us-poll-table .us-src { font-size: 12px; }
.us-poll-table .us-src a { color: var(--pc-text-secondary); }
.us-tag { font-family: var(--pc-sans); font-size: 11px; font-weight: 600; color: var(--pc-text-secondary); border: 1px solid var(--pc-border); padding: 1px 4px; margin-left: 4px; white-space: nowrap; }

.us-chart { height: 360px; }
@media (max-width: 768px) { .us-chart { height: 300px; } }

.us-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .us-grid-2 { grid-template-columns: 1fr; } }

.us-method p, .us-method li { font-family: var(--pc-serif); font-size: 17px; line-height: 1.7; color: var(--pc-text-body); max-width: 680px; }
.us-method h2 { font-family: var(--pc-serif); }
.us-sources { font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-meta); line-height: 1.6; }
.us-sources a { color: var(--pc-text-meta); }

@media (max-width: 600px) {
    .us-method p, .us-method li { font-size: 16px; }
}
.us-race-table td:last-child { white-space: normal; min-width: 150px; }

/* Contrast: the shared meta grey (--pc-text-meta) is under 4.5:1 on the page
   ground. In this section small meta text uses the secondary ramp instead. */
body.us-mid .pc-section-label, body.us-mid .pc-kicker, body.us-mid .pc-footnote,
body.us-mid .pc-help, body.us-mid .pc-table th, body.us-mid .pc-seatbar-note,
body.us-mid .us-crumb, body.us-mid .us-crumb a, body.us-mid .us-sources, body.us-mid .us-sources a,
body.us-mid .us-facts dt, body.us-mid .us-basis,
body.us-mid .us-poll-table tr.is-excluded td { color: var(--pc-text-secondary); }
body.us-mid .us-poll-table tr.is-excluded td { font-style: italic; }

/* ---- Toss-up hatch ---- */
.us-map path.us-l-tossup, .us-seatbar .pc-seat-seg.us-l-tossup, .us-lean-chip.us-l-tossup,
.us-chip i.us-l-tossup, .us-map-legend i.us-l-tossup, .us-seat-legend .pc-swatch.us-l-tossup {
    --us-fill: var(--pc-border);
    background-image: repeating-linear-gradient(135deg, var(--pc-text-meta) 0 2px, transparent 2px 6px);
}
.us-map path.us-l-tossup { fill: var(--pc-border); }

body.us-mid .us-chip { text-decoration: none; }
body.us-mid .pc-mode-btn:not(.is-active) { color: var(--pc-text-secondary); }
/* Chips keep a plain grey for toss-up so the label stays legible; the hatch is for map and bars only */
.us-lean-chip.us-l-tossup { background-image: none; background: var(--pc-border); color: var(--pc-text); }

/* link rows wrap on phones instead of running off the edge */
body.us-mid .pc-cta-row { flex-wrap: wrap; row-gap: 2px; }
body.us-mid .pc-cta-link { white-space: nowrap; }