:root {
    --primary: #049bce;
    --primary-dark: #027ba3;
    --primary-light: #e6f7fc;
    --navy: #071827;
    --navy-soft: #10263d;
    --navy-map: #0a2135;
    --white: #ffffff;
    --paper: #f5f7fa;
    --gray: #eef2f5;
    --border: #dbe3ea;
    --text: #17212b;
    --muted: #64748b;
    --muted-dark: #9fb1c1;
    --gold: #f5c451;
    --election-red: #d8404e;
    --dem-blue: #3378d7;
    --shadow: 0 24px 60px rgba(7, 24, 39, 0.16);
    --shadow-soft: 0 12px 30px rgba(7, 24, 39, 0.08);
    --radius: 12px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    background: transparent;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.35;
    padding: 26px;
}

button,
select {
    font: inherit;
}

.engine-shell {
    width: min(1520px, 100%);
    margin: 0 auto;
}

.engine-header {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 26px;
    padding: 28px 30px 26px;
    color: var(--white);
    background:
        radial-gradient(circle at right top, rgba(4, 155, 206, 0.24), transparent 30%),
        linear-gradient(135deg, #06131f 0%, #09243a 58%, #071827 100%);
    border-bottom: 5px solid var(--primary);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.engine-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .8;
}

.brand-block,
.header-actions {
    position: relative;
    z-index: 1;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand-logo {
    display: block;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    padding: 3px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.28),
        0 14px 34px rgba(0,0,0,.18);
}

.eyebrow {
    margin: 0 0 8px;
    color: #94dff5;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    color: var(--white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4vw, 4.15rem);
    line-height: .95;
    letter-spacing: -.045em;
}

h1 span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.76);
    text-stroke: 1px rgba(255,255,255,.76);
}

.subtitle {
    margin: 10px 0 0;
    color: #c9d9e5;
    font-size: .92rem;
}

.header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.engine-status,
.btn,
select {
    min-height: 42px;
    border-radius: 10px;
}

.engine-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
    color: var(--white);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.engine-status i {
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(245,196,81,.1);
}

.btn,
select {
    border: 1px solid rgba(255,255,255,.18);
    color: var(--white);
    background: rgba(255,255,255,.07);
    padding: 0 13px;
}

select {
    min-width: 235px;
    outline: none;
}

select option {
    color: var(--text);
    background: var(--white);
}

.btn {
    cursor: pointer;
    font-weight: 800;
}

.btn:hover,
select:hover {
    border-color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.11);
}

.system-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 14px 0;
    background: #0b263f;
    color: var(--white);
    border-left: 5px solid var(--gold);
    box-shadow: var(--shadow-soft);
}

.system-strip > div {
    padding: 13px 16px;
    border-right: 1px solid rgba(255,255,255,.1);
}

.system-strip > div:last-child {
    border-right: 0;
}

.strip-label {
    display: block;
    margin-bottom: 3px;
    color: #90a6b8;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.system-strip strong {
    font-size: .82rem;
}

.system-strip .pending {
    color: var(--gold);
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.stats article {
    position: relative;
    overflow: hidden;
    padding: 19px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.stats article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
}

.stat-kicker {
    display: block;
    color: var(--primary);
    font-size: .65rem !important;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.stats strong {
    display: block;
    margin: 3px 0 1px;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    line-height: 1;
}

.stats span {
    color: var(--muted);
    font-size: .8rem;
}

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 345px;
    gap: 14px;
}

.map-card,
.detail-card {
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.map-card {
    overflow: visible;
}

.map-toolbar {
    position: relative;
    z-index: 12;
    display: grid;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid var(--border);
}

.map-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.map-layer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.map-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 13px;
    flex: 0 0 auto;
    cursor: pointer;
    color: var(--white);
    background: var(--navy);
    border: 1px solid var(--navy);
    border-radius: 10px;
    font-weight: 900;
    font-size: .76rem;
    letter-spacing: .02em;
    transition: transform .18s ease, background .18s ease;
}

.map-back-button:hover,
.map-back-button:focus-visible {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
    outline: none;
}

.map-back-button[hidden] {
    display: none;
}

.toolbar-label,
.map-context {
    display: block;
    margin: 0 0 7px;
    color: var(--primary);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.segmented button {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f7f9fb;
    color: #526273;
    padding: 8px 11px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 800;
    transition: .18s ease;
}

.segmented button:hover {
    color: var(--primary-dark);
    border-color: rgba(4,155,206,.38);
}

.segmented button.active {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(4,155,206,.2);
}

.map-title-wrap {
    text-align: right;
}

.map-title-wrap strong {
    display: block;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}

.map-title-wrap > span:last-child {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .75rem;
}

.map-stage {
    position: relative;
    min-height: 540px;
    height: min(68vh, 760px);
    overflow: hidden;
    background: #f4f7f9;
    border-top: 1px solid rgba(7,24,39,.06);
}



#map-svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}


/* =========================================================
   AFDES CANONICAL MAP INTERACTION
   This is the ONLY .geo-shape color source in the stylesheet.
========================================================= */

.geo-shape,
.geo-shape.state,
.geo-shape.district,
.geo-shape.intersection {
    fill: #d3d3d3 !important;
    stroke: #ffffff !important;
    stroke-width: .75 !important;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    filter: none !important;
    transition: fill .12s ease;
}

/* State-detail boundaries must remain readable even when adjacent units
   share the same party color. National state borders keep the lighter weight. */
.geo-shape:not(.state) {
    stroke: #ffffff !important;
    stroke-width: 1.05 !important;
}


/* Inspection only. Never gold and never party-colored. */
.geo-shape:hover,
.geo-shape.state:hover,
.geo-shape.district:hover,
.geo-shape.intersection:hover,
.geo-shape.is-hovered,
.geo-shape.state.is-hovered,
.geo-shape.district.is-hovered,
.geo-shape.intersection.is-hovered {
    fill: #bcc3c8 !important;
    stroke: #ffffff !important;
    stroke-width: 1.05 !important;
    filter: none !important;
}

/* v5.2.3 visual test:
   Selected geography uses AFDES hero gold as a fill, with no selection stroke. */
.geo-shape.selected,
.geo-shape.state.selected,
.geo-shape.district.selected,
.geo-shape.intersection.selected,
.geo-shape.selected:hover,
.geo-shape.state.selected:hover,
.geo-shape.district.selected:hover,
.geo-shape.intersection.selected:hover,
.geo-shape.selected.is-hovered,
.geo-shape.state.selected.is-hovered,
.geo-shape.district.selected.is-hovered,
.geo-shape.intersection.selected.is-hovered {
    fill: #f5c451 !important;
    stroke: #ffffff !important;
    stroke-width: .75 !important;
    filter: none !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .map-stage svg,
    .geo-shape,
    .city-marker {
        touch-action: none;
    }
}

.loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: rgba(247,250,252,.9);
    color: var(--navy);
    font-weight: 800;
}

.tooltip {
    position: absolute;
    z-index: 5;
    max-width: 270px;
    padding: 9px 11px;
    pointer-events: none;
    color: var(--white);
    background: #02070c;
    border: 1px solid rgba(255,255,255,.18);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    font-size: .76rem;
    line-height: 1.45;
}

.map-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 11px 17px;
    color: #5c6b79;
    background: #f8fafc;
    border-top: 1px solid var(--border);
    font-size: .72rem;
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
}

.legend-dot.selection {
    width: 10px;
    height: 10px;
    background: #f5c451;
    border: 1px solid #d8aa32;
    border-radius: 2px;
}
.legend-dot.navy { background: var(--navy); }
.legend-dot.gold { background: var(--gold); }

.legend-note {
    margin-left: auto;
    color: #83909c;
    font-style: italic;
}

.detail-card {
    min-height: 470px;
    padding: 23px;
}

.detail-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.detail-topline .eyebrow {
    color: var(--primary);
}

.detail-badge {
    padding: 5px 8px;
    border-radius: 999px;
    color: #075a78;
    background: rgba(4,155,206,.1);
    border: 1px solid rgba(4,155,206,.2);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.detail-card h2 {
    margin: 2px 0 9px;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    line-height: 1.08;
}

#detail-description {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

dl {
    margin: 20px 0 0;
}

dl div {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

dt {
    color: var(--muted);
    font-size: .73rem;
}

dd {
    margin: 0;
    color: var(--navy);
    font-size: .86rem;
    font-weight: 800;
    word-break: break-word;
}

.related {
    margin-top: 17px;
    padding: 12px 13px;
    color: #536474;
    background: #f7fafc;
    border-left: 3px solid var(--primary);
    font-size: .8rem;
    line-height: 1.5;
}

.related strong {
    color: var(--navy);
}

.future-module {
    margin-top: 22px;
    padding: 16px;
    color: var(--white);
    background:
        radial-gradient(circle at right top, rgba(4,155,206,.28), transparent 38%),
        linear-gradient(135deg, #071827, #0d2c44);
    border-left: 4px solid var(--gold);
}

.future-module > span {
    display: block;
    margin-bottom: 3px;
    color: #8fdaee;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.future-module strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
}

.future-module p {
    margin: 8px 0 0;
    color: #c9d9e5;
    font-size: .75rem;
    line-height: 1.5;
}

.engine-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 4px 0;
    color: #758493;
    font-size: .71rem;
}

@media (max-width: 1080px) {
    body { padding: 16px; }

    .engine-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions {
        justify-content: flex-start;
    }

    .system-strip {
        grid-template-columns: repeat(2,1fr);
    }

    .workspace {
        grid-template-columns: 1fr;
    }

    .detail-card {
        min-height: 0;
    }

    .map-stage {
        min-height: 470px;
        height: 58vh;
    }
}

@media (max-width: 720px) {
    body { padding: 8px; }

    .engine-header {
        padding: 22px 18px;
    }

    .brand-block {
        align-items: flex-start;
    }

    .brand-mark span {
        font-size: 1.55rem;
    }

    .header-actions {
        width: 100%;
    }

    .header-actions select {
        flex: 1 1 100%;
        min-width: 0;
    }

    .system-strip,
    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .map-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .map-title-wrap {
        text-align: left;
    }

    .segmented button {
        font-size: .72rem;
    }

    .map-stage {
        min-height: 390px;
        height: 54vh;
    }

    .map-legend {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .legend-note {
        margin-left: 0;
    }

    .engine-footer {
        flex-direction: column;
    }
}

@media (max-width: 470px) {
    .system-strip,
    .stats {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2.25rem;
    }

    .map-stage {
        min-height: 350px;
    }

    dl div {
        grid-template-columns: 95px 1fr;
    }
}


/* =========================================================
   NATIONAL RACE BALANCE
   Reuses the interaction language of the existing AFDES
   Elections map. Party colors are data, not brand colors.
========================================================= */
.national-race-bar {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    gap: 14px;
    align-items: center;
    width: min(900px, calc(100% - 32px));
    margin: 14px auto;
    padding: 12px 15px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(18,63,80,.13);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(7,24,39,.06);
}

.party-logo {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(7,24,39,.10));
}
.national-race-main {
    min-width: 0;
}

.national-race-values {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: end;
    margin-bottom: 7px;
    color: var(--navy);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .035em;
}

.national-race-values span:last-child {
    text-align: right;
}

.national-race-values strong {
    color: #71808a;
    font-size: .68rem;
    letter-spacing: .09em;
    text-align: center;
    text-transform: uppercase;
}

.national-race-track {
    display: flex;
    width: 100%;
    height: 16px;
    overflow: hidden;
    background: #e2e8eb;
    border: 1px solid rgba(18,63,80,.13);
    border-radius: 999px;
}

.national-race-fill {
    flex: 0 0 0%;
    width: 0%;
    transition: flex-basis .8s ease, width .8s ease;
}

.national-race-dem {
    background: var(--dem-blue);
}

.national-race-rep {
    order: 3;
    background: var(--election-red);
}

.national-race-unreported {
    flex: 1 1 auto;
    min-width: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,.72) 0 7px,
        rgba(201,211,216,.65) 7px 14px
    );
}

.national-race-caption {
    margin: 7px 0 0;
    color: #71808a;
    font-size: .73rem;
    font-weight: 700;
    text-align: center;
}

/* Touch + responsive hardening */
html {
    -webkit-tap-highlight-color: transparent;
}

button,
select {
    touch-action: manipulation;
}

@media (max-width: 760px) {
    body {
        padding: 0;
        background: var(--paper);
    }

    .engine-shell {
        width: 100%;
    }

    .engine-header {
        border-radius: 0;
        box-shadow: 0 10px 30px rgba(7,24,39,.14);
    }

    .system-strip {
        margin: 10px;
    }

    .stats {
        margin: 0 10px 10px;
    }

    .workspace {
        gap: 10px;
        padding: 0 10px;
    }

    .map-card,
    .detail-card {
        width: 100%;
        min-width: 0;
    }

    .map-toolbar {
        padding: 14px;
    }

    .segmented {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .segmented button {
        min-height: 44px;
        white-space: normal;
        line-height: 1.2;
    }



    .national-race-bar {
        grid-template-columns: 46px minmax(0,1fr) 46px;
        gap: 9px;
        width: calc(100% - 20px);
        margin: 10px auto;
        padding: 10px;
    }

    .party-logo {
        width: 42px;
        height: 42px;
    }

    .national-race-values {
        gap: 6px;
        font-size: .69rem;
    }

    .national-race-values strong {
        font-size: .6rem;
    }

    .national-race-track {
        height: 14px;
    }

    .national-race-caption {
        font-size: .67rem;
    }

    .map-stage {
        height: min(58vh, 520px);
        min-height: 400px;
    }

    .detail-card {
        padding: 19px;
    }
}

@media (max-width: 520px) {
    .engine-header {
        padding: 20px 16px;
    }

    .brand-block {
        gap: 12px;
    }

    .eyebrow {
        font-size: .61rem;
        line-height: 1.45;
    }

    .subtitle {
        font-size: .8rem;
        line-height: 1.45;
    }

    .header-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .engine-status,
    .btn,
    .header-actions select {
        width: 100%;
        min-height: 44px;
    }

    .system-strip {
        grid-template-columns: 1fr 1fr;
    }

    .system-strip > div {
        min-width: 0;
        padding: 11px 12px;
    }

    .system-strip strong {
        display: block;
        overflow-wrap: anywhere;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stats article {
        padding: 15px;
    }

    .stats strong {
        font-size: 1.65rem;
    }

    .map-title-wrap strong {
        font-size: 1.1rem;
    }

    .national-race-bar {
        grid-template-columns: 38px minmax(0,1fr) 38px;
        gap: 7px;
    }

    .party-logo {
        width: 36px;
        height: 36px;
    }

    .national-race-values {
        grid-template-columns: 1fr auto 1fr;
        font-size: .62rem;
    }

    .national-race-values strong {
        max-width: 112px;
        line-height: 1.15;
    }

    .map-stage {
        min-height: 360px;
        height: 52vh;
    }

    .map-legend {
        padding: 10px 12px;
    }
}

@media (max-width: 390px) {
    .system-strip,
    .stats {
        grid-template-columns: 1fr;
    }

    .national-race-bar {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 6px;
        width: calc(100% - 16px);
        padding: 9px 8px;
    }

    .party-logo {
        display: block;
        width: 30px;
        height: 30px;
    }

    .national-race-values {
        font-size: .64rem;
    }

    .national-race-values strong {
        max-width: 100px;
    }

    .map-stage {
        min-height: 330px;
        height: 48vh;
    }



    .detail-card h2 {
        font-size: 1.4rem;
    }
}


/* v0.4 exact AFDES party mark assets */
.national-race-bar .party-logo {
    max-width: 100%;
    flex: 0 0 auto;
}


.layer-label-short {
    display: none;
}

/* v0.6 map navigation + sticky mobile controls */
@media (max-width: 760px) {
    .brand-logo {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        padding: 2px;
    }

    .map-card {
        overflow: visible;
    }

    .map-toolbar {
        position: sticky;
        top: 0;
        z-index: 30;
        gap: 10px;
        padding: 11px 12px 12px;
        box-shadow: 0 8px 22px rgba(7,24,39,.10);
    }

    .map-toolbar-top {
        align-items: center;
    }

    .map-title-wrap {
        min-width: 0;
        flex: 1 1 auto;
        text-align: right;
    }

    .map-title-wrap > span:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .map-back-button {
        min-height: 44px;
        padding: 0 12px;
    }

    .map-layer-row {
        display: block;
    }

    .map-layer-row .toolbar-label {
        margin-bottom: 7px;
    }

    .segmented {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        max-width: 100%;
    }

    .segmented button,
    .segmented button:last-child {
        grid-column: auto;
        min-width: 0;
        width: 100%;
        min-height: 44px;
        padding: 7px 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .layer-label-long {
        display: none;
    }

    .layer-label-short {
        display: inline;
    }
}

@media (max-width: 520px) {
    .brand-logo {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .map-toolbar {
        padding: 9px 10px 10px;
    }

    .map-toolbar-top {
        gap: 10px;
    }

    .map-back-button {
        min-height: 42px;
        padding: 0 10px;
        font-size: .7rem;
    }

    .map-context {
        margin-bottom: 3px;
        font-size: .57rem;
    }

    .map-title-wrap strong {
        font-size: 1rem;
    }

    .map-title-wrap > span:last-child {
        font-size: .67rem;
    }

    .segmented button {
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    .brand-logo {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .map-toolbar-top {
        align-items: stretch;
        flex-direction: column;
    }

    .map-back-button {
        width: 100%;
    }

    .map-title-wrap {
        width: 100%;
        text-align: left;
    }

    .segmented {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .segmented button,
    .segmented button:last-child {
        grid-column: auto;
        padding-inline: 3px;
        font-size: .62rem;
    }
}


/* =========================================================
   v0.7 MAP CONTROL HEADER
   Stronger hierarchy + higher visibility layer controls
========================================================= */

.map-toolbar {
    gap: 16px;
    padding: 17px 18px;
    background: #ffffff;
}

.map-toolbar-top {
    min-height: 64px;
}

.map-title-wrap {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

.map-context {
    margin-bottom: 5px;
    color: var(--primary-dark);
    font-size: .68rem;
}

.map-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.map-title-wrap .map-title-line strong {
    display: block;
    margin: 0;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    line-height: 1.05;
    letter-spacing: -.025em;
}

.map-level-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    flex: 0 0 auto;
    color: #075a78;
    background: rgba(4,155,206,.10);
    border: 1px solid rgba(4,155,206,.25);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.map-title-wrap > #map-subtitle {
    display: block;
    margin-top: 6px;
    max-width: 720px;
    color: #536474;
    font-size: .82rem;
    line-height: 1.45;
}

.map-back-button {
    min-height: 44px;
    padding: 0 15px;
    box-shadow: 0 7px 18px rgba(7,24,39,.12);
}

.back-arrow {
    font-size: 1.05rem;
    line-height: 1;
}

.map-layer-row {
    align-items: stretch;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.layer-heading {
    width: 190px;
    flex: 0 0 190px;
    align-self: center;
}

.layer-heading .toolbar-label {
    margin: 0 0 4px;
    color: var(--navy);
    font-size: .72rem;
}

.layer-hint {
    margin: 0;
    color: var(--muted);
    font-size: .71rem;
    line-height: 1.35;
}

.segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    flex: 1 1 auto;
}

.segmented button,
.segmented button:last-child {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 58px;
    padding: 10px 13px;
    color: var(--navy);
    background: #f4f7f9;
    border: 2px solid #c9d6de;
    border-radius: 11px;
    text-align: left;
    overflow: hidden;
    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.segmented button:not(:disabled):hover,
.segmented button:not(:disabled):focus-visible {
    color: var(--navy);
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(7,24,39,.09);
    transform: translateY(-1px);
    outline: none;
}

.segmented button.active:not(:disabled) {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary-dark);
    box-shadow: 0 9px 22px rgba(4,155,206,.22);
}

.segmented button:disabled {
    cursor: not-allowed;
    color: #80909c;
    background: #f5f7f8;
    border-color: #dde5ea;
    opacity: 1;
}

.segmented button:disabled::after {
    content: "Open a state";
    position: absolute;
    top: 6px;
    right: 7px;
    padding: 2px 5px;
    color: #798894;
    background: #ffffff;
    border: 1px solid #dce4e8;
    border-radius: 999px;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.layer-button-title {
    display: block;
    width: 100%;
    font-size: .79rem;
    font-weight: 900;
    line-height: 1.15;
}

.layer-button-note {
    display: block;
    width: 100%;
    color: #6b7b88;
    font-size: .63rem;
    font-weight: 700;
    line-height: 1.2;
}

.segmented button.active:not(:disabled) .layer-button-note {
    color: rgba(255,255,255,.80);
}

@media (max-width: 900px) {
    .map-layer-row {
        display: block;
    }

    .layer-heading {
        width: auto;
        margin-bottom: 9px;
    }

    .layer-hint {
        max-width: 620px;
    }
}

@media (max-width: 760px) {
    .map-toolbar {
        gap: 12px;
        padding: 12px;
    }

    .map-toolbar-top {
        min-height: 0;
    }

    .map-title-wrap {
        text-align: left;
    }

    .map-title-line {
        flex-wrap: wrap;
        gap: 7px;
    }

    .map-title-wrap .map-title-line strong {
        font-size: 1.35rem;
    }

    .map-title-wrap > #map-subtitle {
        margin-top: 4px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: .75rem;
    }

    .map-level-badge {
        min-height: 23px;
        padding: 0 7px;
        font-size: .55rem;
    }

    .map-layer-row {
        padding-top: 11px;
    }

    .layer-heading {
        margin-bottom: 8px;
    }

    .layer-heading .toolbar-label {
        margin-bottom: 2px;
    }

    .layer-hint {
        font-size: .66rem;
    }

    .segmented {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .segmented button,
    .segmented button:last-child {
        min-height: 52px;
        padding: 8px 7px;
        text-align: center;
        align-items: center;
    }

    .layer-button-title {
        font-size: .7rem;
        text-align: center;
    }

    .layer-button-note {
        display: none;
    }

    .segmented button:disabled::after {
        display: none;
    }
}

@media (max-width: 520px) {
    .map-toolbar-top {
        align-items: flex-start;
    }

    .map-back-button {
        min-height: 42px;
        padding: 0 10px;
        font-size: .68rem;
    }

    .map-title-wrap .map-title-line strong {
        font-size: 1.18rem;
    }

    .map-context {
        font-size: .56rem;
    }

    .map-title-wrap > #map-subtitle {
        font-size: .69rem;
        line-height: 1.35;
    }

    .segmented button,
    .segmented button:last-child {
        min-height: 48px;
        padding: 7px 4px;
        border-width: 1.5px;
    }

    .layer-button-title {
        font-size: .65rem;
    }
}

@media (max-width: 390px) {
    .map-toolbar-top {
        gap: 9px;
    }

    .map-back-button {
        width: auto;
        align-self: flex-start;
    }

    .map-title-wrap {
        width: 100%;
    }

    .map-title-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .segmented {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .segmented button,
    .segmented button:last-child {
        min-height: 46px;
        padding-inline: 2px;
    }

    .layer-button-title {
        font-size: .59rem;
        letter-spacing: -.01em;
    }
}


/* =========================================================
   v0.8 CITY REFERENCE OVERLAY
========================================================= */
.map-control-stack {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

.overlay-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 9px;
    padding: 10px 12px;
    background: #f7fafc;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.overlay-copy { min-width: 0; }

.overlay-kicker {
    display: block;
    margin-bottom: 2px;
    color: var(--primary-dark);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.overlay-copy strong {
    display: inline-block;
    margin-right: 7px;
    color: var(--navy);
    font-size: .8rem;
}

.overlay-copy > span:last-child {
    color: var(--muted);
    font-size: .67rem;
}

.city-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 74px;
    min-height: 38px;
    padding: 0 10px;
    flex: 0 0 auto;
    cursor: pointer;
    color: #526273;
    background: #ffffff;
    border: 1px solid #cbd7df;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 900;
}

.city-toggle:not(:disabled):hover,
.city-toggle:not(:disabled):focus-visible {
    border-color: var(--primary);
    outline: none;
}

.city-toggle[aria-pressed="true"] {
    color: #ffffff;
    background: var(--navy);
    border-color: var(--navy);
}

.city-toggle:disabled {
    cursor: not-allowed;
    opacity: .52;
}

.city-toggle-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: #a6b3bc;
    border-radius: 50%;
}

.city-toggle[aria-pressed="true"] .city-toggle-dot {
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(4,155,206,.16);
}

.city-marker {
    cursor: pointer;
    fill: var(--primary);
    stroke: #ffffff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 2px 3px rgba(7,24,39,.25));
}

.city-marker.capital {
    fill: var(--gold);
    stroke: var(--navy);
}

.city-label {
    pointer-events: none;
    fill: var(--navy);
    stroke: rgba(255,255,255,.96);
    stroke-width: 3px;
    paint-order: stroke fill;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.legend-city-marker {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    background: var(--primary);
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(7,24,39,.18);
    vertical-align: -1px;
}

@media (max-width: 760px) {
    .segmented { grid-template-columns: repeat(2, minmax(0,1fr)); }

    .overlay-controls {
        min-height: 48px;
        margin-top: 6px;
        padding: 8px 9px;
    }

    .overlay-copy > span:last-child {
        display: block;
        margin-top: 2px;
        font-size: .62rem;
    }

    .city-toggle { min-height: 42px; }
}

@media (max-width: 520px) {
    .overlay-copy > span:last-child { max-width: 190px; }
    .city-label { display: none; }
    .city-marker { stroke-width: 2.5; }
}

@media (max-width: 390px) {
    .segmented { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .overlay-controls { gap: 8px; }

    .overlay-copy > span:last-child {
        max-width: 150px;
        font-size: .58rem;
    }

    .city-toggle {
        min-width: 67px;
        padding-inline: 8px;
    }
}


/* =========================================================
   v0.9 COMPACT DESKTOP MAP CONTROLS
   Desktop keeps the map as the visual priority.
========================================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.map-toolbar {
    position: relative;
    z-index: 20;
    display: block;
    padding: 11px 14px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.map-toolbar-main {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.map-title-wrap {
    flex: 1 1 auto;
    min-width: 220px;
    text-align: left;
}

.map-context {
    margin: 0 0 2px;
    font-size: .58rem;
    line-height: 1.1;
}

.map-title-line {
    gap: 7px;
}

.map-title-wrap .map-title-line strong {
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
}

.map-level-badge {
    min-height: 22px;
    padding: 0 7px;
    font-size: .52rem;
}

.map-title-wrap > #map-subtitle {
    margin-top: 3px;
    font-size: .68rem;
    line-height: 1.25;
}

.map-controls-inline {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 1 610px;
    min-width: 420px;
}

.map-controls-inline .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.map-controls-inline .segmented button,
.map-controls-inline .segmented button:last-child {
    min-height: 44px;
    padding: 7px 10px;
    border-width: 1px;
    border-radius: 9px;
}

.map-controls-inline .layer-button-title {
    font-size: .7rem;
}

.map-controls-inline .layer-button-note {
    font-size: .56rem;
}

.map-controls-inline .segmented button:disabled::after {
    display: none;
}

.city-control-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding-left: 3px;
}

.city-control-label {
    color: var(--navy);
    font-size: .68rem;
    font-weight: 900;
}

.city-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 62px;
    min-height: 32px;
    padding: 3px 7px 3px 4px;
    cursor: pointer;
    color: #526273;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 900;
}

.city-toggle:not(:disabled):hover,
.city-toggle:not(:disabled):focus-visible {
    background: rgba(4,155,206,.06);
    outline: 2px solid rgba(4,155,206,.28);
    outline-offset: 2px;
}

.city-toggle:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.city-toggle-track {
    position: relative;
    display: block;
    width: 32px;
    height: 18px;
    flex: 0 0 32px;
    background: #c8d2d8;
    border-radius: 999px;
    transition: background .18s ease;
}

.city-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(7,24,39,.25);
    transition: transform .18s ease;
}

.city-toggle[aria-checked="true"] .city-toggle-track,
.city-toggle[aria-pressed="true"] .city-toggle-track {
    background: var(--primary);
}

.city-toggle[aria-checked="true"] .city-toggle-knob,
.city-toggle[aria-pressed="true"] .city-toggle-knob {
    transform: translateX(14px);
}

.city-toggle[aria-checked="true"],
.city-toggle[aria-pressed="true"] {
    color: var(--primary-dark);
    background: transparent;
    border-color: transparent;
}

.map-layer-hint {
    margin-top: 5px;
    color: var(--muted);
    font-size: .6rem;
    text-align: right;
}

/* Hide obsolete v0.8 overlay block geometry if inherited */
.overlay-controls,
.overlay-copy,
.overlay-kicker {
    display: none !important;
}

@media (max-width: 960px) {
    .map-toolbar-main {
        flex-wrap: wrap;
    }

    .map-title-wrap {
        flex: 1 1 330px;
    }

    .map-controls-inline {
        flex: 1 1 100%;
        min-width: 0;
    }

    .map-layer-hint {
        text-align: left;
    }
}

/* Mobile is intentionally a separate composition problem. */
@media (max-width: 760px) {
    .map-toolbar {
        position: sticky;
        top: 0;
        padding: 10px;
    }

    .map-toolbar-main {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .map-title-wrap {
        min-width: 0;
    }

    .map-controls-inline {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .map-controls-inline .segmented {
        width: 100%;
    }

    .map-controls-inline .segmented button,
    .map-controls-inline .segmented button:last-child {
        min-height: 44px;
        padding: 7px 5px;
    }

    .map-controls-inline .layer-button-note {
        display: none;
    }

    .city-control-inline {
        align-self: stretch;
        padding-left: 0;
    }

    .city-control-label {
        display: none;
    }

    .city-toggle {
        min-width: 58px;
        min-height: 44px;
        justify-content: center;
        padding-inline: 5px;
    }

    .map-layer-hint {
        display: none;
    }
}

@media (max-width: 420px) {
    .map-controls-inline {
        grid-template-columns: 1fr;
    }

    .city-control-inline {
        justify-content: flex-end;
    }

    .city-control-label {
        display: inline;
    }

    .city-toggle {
        min-height: 36px;
    }
}


/* =========================================================
   v1.0 PRECISION POLISH
   No desktop composition changes.
========================================================= */

/* Remove the hard cyan glow from the geography buttons. */
.segmented button.active,
.segmented button.active:not(:disabled),
.map-controls-inline .segmented button.active,
.map-controls-inline .segmented button.active:not(:disabled) {
    box-shadow: 0 3px 9px rgba(7,24,39,.10) !important;
}

.segmented button:not(:disabled):hover,
.segmented button:not(:disabled):focus-visible,
.map-controls-inline .segmented button:not(:disabled):hover,
.map-controls-inline .segmented button:not(:disabled):focus-visible {
    box-shadow: 0 3px 8px rgba(7,24,39,.08) !important;
}

/* Preserve the exact original SVG files. Give the Republican mark
   slightly more internal breathing room so no artwork feels cropped. */
.party-logo {
    overflow: visible;
}

.party-logo-rep {
    width: 50px;
    height: 50px;
    justify-self: center;
    transform: scale(.92);
    transform-origin: center;
}

/* City switch: clearer physical ON/OFF state without changing its footprint. */
.city-toggle {
    user-select: none;
}

.city-toggle-track {
    overflow: visible;
}

.city-toggle[aria-checked="false"] .city-toggle-track,
.city-toggle[aria-pressed="false"] .city-toggle-track {
    background: #bcc8cf;
}

.city-toggle[aria-checked="false"] .city-toggle-knob,
.city-toggle[aria-pressed="false"] .city-toggle-knob {
    transform: translateX(0);
}

/* Desktop: make the map itself substantially larger while preserving
   the existing control/header/sidebar layout. */
@media (min-width: 761px) {
    .map-stage {
        min-height: 650px;
        height: min(79vh, 920px);
    }
}

/* Keep the established mobile proportions untouched. */
@media (max-width: 760px) {
    .party-logo-rep {
        width: 39px;
        height: 39px;
    }
}

@media (max-width: 520px) {
    .party-logo-rep {
        width: 33px;
        height: 33px;
    }
}

@media (max-width: 390px) {
    .party-logo-rep {
        width: 28px;
        height: 28px;
    }
}


/* =========================================================
   v1.1 FUNCTIONAL CONTROL STATES
   Buttons respond even when a state/data dependency is missing.
========================================================= */

.segmented button[aria-disabled="true"] {
    cursor: pointer;
    opacity: .72;
}

.segmented button[aria-disabled="true"]:hover,
.segmented button[aria-disabled="true"]:focus-visible {
    border-color: #a8bbc7;
    background: #f7fafc;
    box-shadow: 0 2px 6px rgba(7,24,39,.06) !important;
}

.city-toggle[aria-disabled="true"] {
    cursor: pointer;
    opacity: .68;
}

.city-toggle[aria-disabled="true"]:hover,
.city-toggle[aria-disabled="true"]:focus-visible {
    background: rgba(4,155,206,.05);
    outline: 2px solid rgba(4,155,206,.18);
    outline-offset: 2px;
}

.map-layer-hint.is-feedback {
    color: var(--primary-dark);
    font-weight: 800;
}

.city-marker {
    transition: r .15s ease, opacity .15s ease;
}

.city-marker:hover {
    r: 7px;
}

.city-marker.capital {
    r: 6px;
}


/* =========================================================
   v1.2 CRISP CITY MARKERS + PARTY MARK SPACING
========================================================= */

/* The original Republican SVG fills its own viewBox tightly.
   Use real padding in the replaced element instead of transforms. */
.party-logo-rep {
    width: 54px !important;
    height: 54px !important;
    padding: 5px !important;
    box-sizing: border-box;
    object-fit: contain;
    transform: none !important;
    overflow: visible;
}

/* Crisp city references: solid dots only, no halo, no outline. */
.city-marker,
.city-marker.capital {
    stroke: none !important;
    stroke-width: 0 !important;
    filter: none !important;
    opacity: 1;
}

.city-marker {
    fill: var(--primary);
}

.city-marker.capital {
    fill: var(--gold);
}

.city-marker:hover,
.city-marker.capital:hover {
    opacity: .88;
}

/* Clean labels — no paint-order outline / no stroked text. */
.city-label {
    fill: #ffffff;
    stroke: none !important;
    stroke-width: 0 !important;
    paint-order: normal !important;
    filter: none !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .005em;
}

@media (max-width: 760px) {
    .party-logo-rep {
        width: 42px !important;
        height: 42px !important;
        padding: 4px !important;
    }
}

@media (max-width: 520px) {
    .party-logo-rep {
        width: 36px !important;
        height: 36px !important;
        padding: 3px !important;
    }
}

@media (max-width: 390px) {
    .party-logo-rep {
        width: 30px !important;
        height: 30px !important;
        padding: 3px !important;
    }
}

.city-marker {
    fill: var(--navy) !important;
    stroke: none !important;
    filter: none !important;
}

.city-marker.capital {
    fill: var(--gold) !important;
    stroke: none !important;
}

.city-label {
    fill: var(--navy) !important;
    stroke: none !important;
    paint-order: normal !important;
    filter: none !important;
    font-size: 11px;
    font-weight: 800;
}

.legend-dot.navy {
    background: #d3d3d3 !important;
    border: 1px solid #b8c1c8;
}

/* Crisp reference cities on the light map. */
.city-marker {
    fill: var(--navy) !important;
    stroke: none !important;
    stroke-width: 0 !important;
    filter: none !important;
}

.city-marker.capital {
    fill: var(--gold) !important;
    stroke: none !important;
}

.city-label {
    fill: var(--navy) !important;
    stroke: none !important;
    stroke-width: 0 !important;
    paint-order: normal !important;
    filter: none !important;
    font-size: 11px;
    font-weight: 800;
}

/* Geography legend now matches the neutral map. */
.legend-dot.navy {
    background: #d3d3d3 !important;
    border: 1px solid #b8c1c8;
}


/* =========================================================
   v1.5 ELECTION MAP VISUAL + TOOLTIP REFINEMENT
   No layout/composition changes.
========================================================= */

/* Give neutral geography enough contrast to breathe. */
.map-stage {
    background: #fcfcfc !important;
    border-top-color: rgba(7,24,39,.045) !important;
}

/* Desktop tooltip becomes a compact neutral map tag. */
.tooltip {
    max-width: 240px;
    padding: 7px 10px;
    color: var(--navy);
    background: rgba(255,255,255,.98);
    border: 1px solid #d4dde3;
    border-left: 1px solid #d4dde3;
    border-radius: 7px;
    box-shadow: 0 5px 16px rgba(7,24,39,.14);
    font-size: .72rem;
    line-height: 1.35;
    white-space: nowrap;
}

/* =========================================================
   v1.6 PARTY MARK NORMALIZATION
   Democratic and Republican marks use the exact same geometry.
========================================================= */

.national-race-bar .party-logo {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    transform: none !important;
    overflow: visible !important;
}

@media (max-width: 760px) {
    .national-race-bar .party-logo {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        padding: 0 !important;
    }
}

@media (max-width: 520px) {
    .national-race-bar .party-logo {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
    }
}

@media (max-width: 390px) {
    .national-race-bar .party-logo {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        padding: 0 !important;
    }
}





/* =========================================================
   v1.8 HEADER + PROVEN PARTY MARK TREATMENT
========================================================= */

/* Header: no logo. Let the identity block start flush at the hero padding. */
.brand-block {
    gap: 0 !important;
}

.brand-block > div {
    min-width: 0;
}

/* Mirror the existing working AFDES elections-map treatment literally. */
.national-race-bar {
    grid-template-columns: 68px minmax(0, 1fr) 68px !important;
    gap: 16px !important;
}

.national-race-logo {
    display: block;
    width: 68px;
    height: 68px;
}

@media (max-width: 520px) {
    .national-race-bar {
        grid-template-columns: 46px minmax(0, 1fr) 46px !important;
        gap: 9px !important;
    }

    .national-race-logo {
        width: 46px;
        height: 46px;
    }
}


/* =========================================================
   v1.9 NATIONAL RACE BALANCE — REBUILT FROM SCRATCH
   Completely isolated from every legacy party/race-bar rule.
========================================================= */

.afdes-rb {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 86px;
    gap: 18px;
    align-items: center;
    width: min(900px, calc(100% - 32px));
    margin: 14px auto;
    padding: 11px 16px;
    background: #ffffff;
    border: 1px solid #dbe3ea;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(7,24,39,.055);
}

.afdes-rb-party {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
}

.afdes-rb-logo-frame {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    overflow: hidden;
    contain: paint;
    isolation: isolate;
}

.afdes-rb-logo {
    display: block;
    width: 66px;
    height: 66px;
    max-width: none;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    transform: none;
    object-fit: contain;
    clip-path: inset(0);
}

.afdes-rb-value {
    color: var(--navy);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .025em;
    line-height: 1;
    white-space: nowrap;
}

.afdes-rb-center {
    min-width: 0;
}

.afdes-rb-title {
    display: block;
    margin: 0 0 7px;
    color: #71808a;
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .085em;
    text-align: center;
    text-transform: uppercase;
}

.afdes-rb-track {
    display: flex;
    width: 100%;
    height: 16px;
    overflow: hidden;
    background: #e4eaed;
    border: 1px solid #cbd6dc;
    border-radius: 999px;
}

.afdes-rb-fill {
    flex: 0 0 0%;
    width: 0%;
    min-width: 0;
    transition: flex-basis .8s ease, width .8s ease;
}

.afdes-rb-fill--dem {
    background: #2b6cb0;
}

.afdes-rb-fill--rep {
    order: 3;
    background: #d73027;
}

.afdes-rb-unreported {
    flex: 1 1 auto;
    min-width: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,.72) 0 7px,
        rgba(203,214,220,.72) 7px 14px
    );
}

.afdes-rb-caption {
    margin: 7px 0 0;
    color: #71808a;
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

@media (max-width: 760px) {
    .afdes-rb {
        grid-template-columns: 58px minmax(0,1fr) 58px;
        gap: 10px;
        width: calc(100% - 20px);
        margin: 10px auto;
        padding: 9px 10px;
    }

    .afdes-rb-logo-frame {
        width: 52px;
        height: 52px;
    }

    .afdes-rb-logo {
        width: 48px;
        height: 48px;
    }

    .afdes-rb-value {
        font-size: .64rem;
    }

    .afdes-rb-title {
        font-size: .6rem;
        line-height: 1.15;
    }

    .afdes-rb-track {
        height: 14px;
    }

    .afdes-rb-caption {
        font-size: .66rem;
    }
}

@media (max-width: 430px) {
    .afdes-rb {
        grid-template-columns: 46px minmax(0,1fr) 46px;
        gap: 7px;
        width: calc(100% - 14px);
        padding: 8px 7px;
    }

    .afdes-rb-logo-frame {
        width: 42px;
        height: 42px;
    }

    .afdes-rb-logo {
        width: 40px;
        height: 40px;
    }

    .afdes-rb-value {
        font-size: .57rem;
    }

    .afdes-rb-title {
        margin-bottom: 5px;
        font-size: .55rem;
    }

    .afdes-rb-caption {
        margin-top: 5px;
        font-size: .59rem;
    }
}


/* =========================================================
   v2.0 MOBILE GEOGRAPHY CONTROLS FIX
   Desktop layout untouched.
========================================================= */

@media (max-width: 760px) {
    .map-controls-inline {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #mode-switch.segmented {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #mode-switch.segmented button {
        display: flex !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 7px 5px !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #mode-switch .layer-button-title {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: .68rem !important;
        line-height: 1.15 !important;
    }

    #mode-switch .layer-button-note {
        display: none !important;
    }

    .city-control-inline {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 58px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .city-toggle {
        display: inline-flex !important;
        min-width: 58px !important;
        min-height: 46px !important;
        padding: 4px !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .city-toggle-track,
    .city-toggle-text {
        display: inline-block !important;
        visibility: visible !important;
    }

    .city-control-label {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .map-controls-inline {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .city-control-inline {
        justify-content: flex-end !important;
        min-width: 0 !important;
    }

    .city-control-label {
        display: inline !important;
        font-size: .66rem !important;
        font-weight: 900 !important;
    }

    .city-toggle {
        min-width: 62px !important;
        min-height: 38px !important;
    }
}




/* =========================================================
   v2.4 UNIFIED HOVER
   SAME COLORS + SAME TOOLTIP ON DESKTOP AND MOBILE
========================================================= */

.map-stage {
    background: #fcfcfc !important;
}

/* ONE tooltip design for every map and every device. */
.tooltip {
    display: block;
    max-width: 240px;
    padding: 7px 10px;
    pointer-events: none;
    color: var(--navy);
    background: rgba(255,255,255,.98);
    border: 1px solid #d4dde3;
    border-radius: 7px;
    box-shadow: 0 5px 16px rgba(7,24,39,.14);
    font-size: .72rem;
    line-height: 1.35;
    white-space: nowrap;
    text-align: left;
    z-index: 80;
}

.tooltip[hidden] {
    display: none !important;
}

/*
Touchscreen map interaction belongs to the map while the finger is on it.
This guarantees continuous pointermove events in every direction, allowing
the mobile hover to behave like a mouse moving over geography.
*/
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
}



/* =========================================================
   v2.7 WHITE AFDES HEADER LOGO
========================================================= */

.brand-block {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    min-width: 0;
}

.brand-logo-white {
    display: block;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    padding: 0;
    margin: 0;
    object-fit: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

.brand-copy {
    min-width: 0;
}

.brand-copy .eyebrow {
    margin-top: 0;
}

@media (max-width: 900px) {
    .brand-block {
        gap: 16px !important;
    }

    .brand-logo-white {
        width: 88px;
        height: 88px;
        flex-basis: 88px;
    }
}

@media (max-width: 760px) {
    .engine-header {
        align-items: stretch;
    }

    .brand-block {
        width: 100%;
        gap: 14px !important;
    }

    .brand-logo-white {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .brand-copy h1 {
        font-size: clamp(2rem, 10vw, 3.15rem);
    }
}

@media (max-width: 520px) {
    .brand-block {
        align-items: flex-start !important;
        gap: 11px !important;
    }

    .brand-logo-white {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        margin-top: 4px;
    }

    .brand-copy .eyebrow {
        font-size: .58rem;
        letter-spacing: .11em;
        line-height: 1.3;
    }

    .brand-copy h1 {
        font-size: clamp(1.75rem, 9.5vw, 2.55rem);
    }

    .brand-copy .subtitle {
        font-size: .72rem;
        line-height: 1.4;
    }
}

@media (max-width: 390px) {
    .brand-logo-white {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .brand-copy h1 {
        font-size: clamp(1.6rem, 9vw, 2.2rem);
    }
}


/* =========================================================
   v2.8 ELECTION VIEW
   Compact, future-facing election filter above the map.
========================================================= */

.election-view-bar {
    display: grid;
    grid-template-columns: auto 88px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 5px 14px;
    background: #f8fafb;
    border-top: 1px solid #e2e8ec;
    border-bottom: 1px solid #e2e8ec;
}

.election-view-heading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-right: 3px;
    color: var(--navy);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .105em;
    text-transform: uppercase;
    white-space: nowrap;
}

.election-view-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: #f5c451;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(245,196,81,.16);
}

.election-cycle-select,
.election-type-mobile {
    height: 30px;
    min-width: 0;
    padding: 0 28px 0 9px;
    color: var(--navy);
    background: #fff;
    border: 1px solid #cfd9df;
    border-radius: 7px;
    font-size: .7rem;
    font-weight: 850;
    cursor: pointer;
    outline: none;
}

.election-cycle-select:focus-visible,
.election-type-mobile:focus-visible {
    border-color: #9eaeb7;
    box-shadow: 0 0 0 2px rgba(7,24,39,.07);
}

.election-type-buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
}

.election-type-button {
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    overflow: hidden;
    cursor: pointer;
    color: #52636f;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: .66rem;
    font-weight: 850;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease;
}

.election-type-button:hover,
.election-type-button:focus-visible {
    color: var(--white);
    background: #0b263f;
    border-color: #0b263f;
    outline: none;
}

.election-type-button.active {
    color: var(--white);
    background: #0b263f;
    border-color: #0b263f;
}

.election-type-mobile {
    display: none;
}

/* Keep Race Balance close to the controls so the map remains immediately visible. */
.election-view-bar + .afdes-rb {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}




/* Active election type: requested AFDES deep navy.
   Gold remains reserved for selected map geography. */
.election-type-button.active {
    color: var(--white) !important;
    background: #0b263f !important;
    border-color: #0b263f !important;
}

/* Unavailable election type: intentionally quiet, not broken-looking. */
.election-type-button:disabled,
.election-type-button.is-unavailable {
    cursor: not-allowed !important;
    color: #a4adb3 !important;
    background: #f1f3f4 !important;
    border-color: #e2e6e8 !important;
    opacity: .72 !important;
    box-shadow: none !important;
}

.election-type-button:disabled:hover,
.election-type-button:disabled:focus-visible,
.election-type-button.is-unavailable:hover,
.election-type-button.is-unavailable:focus-visible {
    color: #a4adb3 !important;
    background: #f1f3f4 !important;
    border-color: #e2e6e8 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Mobile disabled option support is browser-native; mute the select if needed. */
.election-type-mobile option:disabled {
    color: #9ca5ab;
}

/* Gold remains part of the map/selection visual language. */
.legend-dot.gold {
    background: rgba(245,196,81,.42) !important;
}




/* =========================================================
   v3.1 RESULTS SOURCE / PROVIDER STATUS
   Lives inside the existing legend strip; adds no map-top height.
========================================================= */

.results-source-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    min-width: 0;
    color: #71808a;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.results-source-divider {
    margin: 0 3px;
    color: #b0bac0;
    font-weight: 900;
}

.results-source-label {
    color: #7a8892;
    font-weight: 700;
}

.results-source-status strong {
    overflow: hidden;
    color: var(--navy);
    font-size: inherit;
    font-weight: 900;
    text-overflow: ellipsis;
}

.results-source-light {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: #aeb8be;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(174,184,190,.14);
}

.results-source-state {
    color: #8b979e;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

/* Status colors only affect the tiny light/state label. */
.results-source-status.is-live .results-source-light {
    background: #2e9b62;
    box-shadow: 0 0 0 2px rgba(46,155,98,.14);
}

.results-source-status.is-live .results-source-state {
    color: #2e7f55;
}

.results-source-status.is-test .results-source-light {
    background: #f5c451;
    box-shadow: 0 0 0 2px rgba(245,196,81,.18);
}

.results-source-status.is-test .results-source-state {
    color: #9a7412;
}

.results-source-status.is-warning .results-source-light {
    background: #d75b4a;
    box-shadow: 0 0 0 2px rgba(215,91,74,.14);
}

.results-source-status.is-warning .results-source-state {
    color: #b4483b;
}

.results-source-status.is-disconnected .results-source-light {
    background: #aeb8be;
}

.results-source-status.is-disconnected .results-source-state {
    color: #8b979e;
}

/* Keep the legend compact and let the provider block sit on the far right. */
.map-legend {
    align-items: center;
}

.map-legend .legend-note {
    margin-left: auto;
}

/* On medium screens, keep it readable without increasing map-top spacing. */
@media (max-width: 900px) {
    .results-source-state {
        display: none;
    }

    .results-source-status {
        font-size: .63rem;
    }
}

/* Mobile: provider attribution remains present, but compress the wording. */
@media (max-width: 760px) {
    .map-legend {
        row-gap: 5px;
    }

    .map-legend .legend-note {
        width: 100%;
        margin-left: 0;
    }

    .results-source-status {
        margin-left: 0;
        max-width: 100%;
        font-size: .62rem;
    }

    .results-source-divider {
        display: none;
    }
}

@media (max-width: 430px) {
    .results-source-label {
        display: none;
    }

    .results-source-status::before {
        content: 'Source:';
        color: #7a8892;
        font-weight: 700;
    }
}


/* =========================================================
   v4.0 ELECTION RESULTS PANEL
========================================================= */

.results-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.results-status-badge {
    white-space: nowrap;
}

.results-unit-control {
    padding: 12px;
    background: #f7f9fa;
    border: 1px solid #e6eaed;
    border-radius: 12px;
}

.results-unit-control label {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.results-unit-control select {
    width: 100%;
    min-height: 40px;
    padding: 0 34px 0 11px;
    border: 1px solid #d7dde1;
    border-radius: 9px;
    background: #fff;
    color: var(--navy);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
}

.results-unit-control select:focus-visible {
    outline: 2px solid rgba(4,155,206,.25);
    outline-offset: 2px;
}

.results-unit-control select:disabled {
    color: #929da4;
    background: #f1f3f4;
    cursor: not-allowed;
}

#results-unit-help {
    margin: 7px 0 0;
    color: #77858e;
    font-size: .68rem;
    line-height: 1.35;
}

.results-empty {
    padding: 15px;
    border: 1px dashed #d7dde1;
    border-radius: 12px;
    background: #fcfcfc;
}

.results-empty strong {
    display: block;
    color: var(--navy);
    font-size: .84rem;
}

.results-empty p {
    margin: 5px 0 0;
    color: #74828b;
    font-size: .73rem;
    line-height: 1.5;
}

.results-candidates {
    display: grid;
    gap: 9px;
}

.result-candidate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid #e4e9ec;
    border-radius: 11px;
    background: #fff;
}

.result-candidate-main {
    min-width: 0;
}

.result-candidate-name {
    display: block;
    overflow: hidden;
    color: var(--navy);
    font-size: .84rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-candidate-party {
    display: block;
    margin-top: 2px;
    color: #7c8991;
    font-size: .66rem;
    font-weight: 700;
}

.result-candidate-numbers {
    text-align: right;
}

.result-candidate-percent {
    display: block;
    color: var(--navy);
    font-size: .9rem;
    font-weight: 950;
}

.result-candidate-votes {
    display: block;
    margin-top: 2px;
    color: #7c8991;
    font-size: .65rem;
    font-weight: 700;
}

.results-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.results-meta > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e6eaed;
    border-radius: 10px;
    background: #fbfcfc;
}

.results-meta dt {
    margin: 0 0 3px;
    color: #859198;
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.results-meta dd {
    margin: 0;
    overflow: hidden;
    color: var(--navy);
    font-size: .72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.results-integrity-note {
    margin: 0;
    color: #8a969d;
    font-size: .63rem;
    line-height: 1.45;
}

.results-card.is-loading .results-status-badge {
    background: #eef2f4;
    color: #71808a;
}

.results-card.is-live .results-status-badge,
.results-card.is-ready .results-status-badge {
    background: #edf8f2;
    color: #2e7f55;
}

.results-card.is-test .results-status-badge {
    background: rgba(245,196,81,.16);
    color: #8d6912;
}

.results-card.is-no-data .results-status-badge {
    background: #eef2f4;
    color: #71808a;
}

.results-card.is-error .results-status-badge {
    background: #fff0ee;
    color: #b4483b;
}

@media (max-width: 760px) {
    .results-meta {
        grid-template-columns: 1fr 1fr;
    }

    .results-unit-control {
        padding: 10px;
    }
}

@media (max-width: 430px) {
    .results-meta {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   v4.3 RESULTS GEOGRAPHY NAVIGATION
========================================================= */

.results-selected-unit {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid #e5eaed;
    color: var(--navy);
    font-size: .69rem;
    font-weight: 800;
}

.results-selected-unit::before {
    content: 'Selected: ';
    color: #7b8991;
    font-weight: 700;
}

.results-unit-control select {
    max-width: 100%;
}

/*
Native select menus automatically become scrollable when the state has many
counties/districts. Keep the closed control compact instead of expanding the
results panel vertically.
*/


/* =========================================================
   v4.4 CONTEXTUAL RESULT GEOGRAPHY
   No manual county/district layer choice.
========================================================= */

.result-geography-indicator {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "kicker label"
        "kicker note";
    column-gap: 9px;
    row-gap: 1px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 7px 11px;
    border: 1px solid #d8e1e6;
    border-radius: 9px;
    background: #f8fafb;
}

.result-geography-kicker {
    grid-area: kicker;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding-right: 9px;
    border-right: 1px solid #e0e6ea;
    color: #7b8991;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
}

#result-geography-label {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    color: var(--navy);
    font-size: .7rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#result-geography-note {
    grid-area: note;
    min-width: 0;
    overflow: hidden;
    color: #7f8b92;
    font-size: .55rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .result-geography-indicator {
        min-height: 40px;
        padding: 6px 9px;
    }

    .result-geography-kicker {
        display: none;
    }

    .result-geography-indicator {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "note";
    }
}


/* =========================================================
   v4.5 NATIONAL STATE ABBREVIATIONS
========================================================= */

.state-label-layer {
    pointer-events: none;
}

.state-abbr {
    pointer-events: none;
    user-select: none;
    fill: #20313e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .025em;
    paint-order: stroke fill;
    stroke: rgba(255,255,255,.82);
    stroke-width: 2px;
    stroke-linejoin: round;
}

@media (max-width: 760px) {
    .state-abbr {
        font-size: 9px;
        stroke-width: 1.6px;
    }
}

@media (max-width: 430px) {
    .state-abbr {
        font-size: 8px;
        stroke-width: 1.4px;
    }
}


/* =========================================================
   v4.7 AFDES RESPONSIVE CONTRACT
   Component-aware layout from 320px phones through large desktop.
   The map card is a CSS container so its controls respond to the
   space they actually receive, not merely the browser window width.
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.engine-shell,
.engine-header,
.system-strip,
.stats,
.workspace,
.map-card,
.detail-card,
.map-toolbar,
.map-toolbar-main,
.map-controls-inline,
.election-view-bar,
.afdes-rb,
.map-legend,
.engine-footer {
    min-width: 0;
    max-width: 100%;
}

.workspace > *,
.map-toolbar-main > *,
.map-controls-inline > *,
.election-view-bar > *,
.afdes-rb > * {
    min-width: 0;
}

select,
button,
input,
img,
svg {
    max-width: 100%;
}

/* Make the map module respond to its own available inline size. */
.map-card {
    container-name: afdes-map;
    container-type: inline-size;
}

/* DESKTOP ELECTION CONTROLS:
   Never allow the year field itself to collapse below a readable width. */
.election-view-bar {
    grid-template-columns: auto minmax(92px, 104px) minmax(0, 1fr);
}

.election-cycle-select {
    display: block;
    width: 100%;
    min-width: 0;
    padding-right: 27px;
    text-overflow: clip;
}

.election-type-mobile {
    min-width: 0;
}

/* Tablet cards should not remain four tiny columns. */
@media (max-width: 900px) {
    .system-strip,
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stats article {
        min-width: 0;
        padding: 15px 16px;
    }

    .stats strong {
        font-size: clamp(1.55rem, 4.5vw, 2rem);
    }

    .map-toolbar-main {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 12px;
        align-items: center;
    }

    .map-title-wrap {
        min-width: 0;
    }

    .map-controls-inline {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    .result-geography-indicator {
        min-width: 0;
    }

    .map-stage {
        min-height: 0 !important;
        height: clamp(440px, 68vw, 620px) !important;
    }

    .engine-footer {
        flex-wrap: wrap;
    }
}

/*
   COMPONENT BREAKPOINT:
   At <= 860px of MAP-CARD width the five election buttons are replaced
   with the already-existing two-select mobile controller.
   This fixes tablet/iframe widths such as 743px even when the overall
   browser viewport is larger.
*/
@container afdes-map (max-width: 860px) {
    .election-view-bar {
        grid-template-columns: minmax(94px, 112px) minmax(0, 1fr);
        gap: 7px;
        min-height: 40px;
        padding: 5px 10px;
    }

    .election-view-heading,
    .election-type-buttons {
        display: none;
    }

    .election-cycle-select,
    .election-type-mobile {
        display: block;
        width: 100%;
        min-width: 0;
        height: 32px;
        padding-left: 9px;
        padding-right: 26px;
        font-size: .69rem;
    }

    .election-view-bar + .afdes-rb {
        margin-top: 7px !important;
        margin-bottom: 7px !important;
    }

    .afdes-rb {
        grid-template-columns: 58px minmax(0,1fr) 58px;
        gap: 10px;
        width: calc(100% - 20px);
        padding: 9px 10px;
    }

    .afdes-rb-logo-frame {
        width: 52px;
        height: 52px;
    }

    .afdes-rb-logo {
        width: 48px;
        height: 48px;
    }

    .afdes-rb-title {
        font-size: .6rem;
        line-height: 1.15;
    }

    .afdes-rb-caption {
        font-size: .66rem;
    }
}

/* Fallback for browsers without container queries. */
@media (max-width: 900px) {
    .election-view-bar {
        grid-template-columns: minmax(94px, 112px) minmax(0, 1fr);
        gap: 7px;
        min-height: 40px;
        padding: 5px 10px;
    }

    .election-view-heading,
    .election-type-buttons {
        display: none;
    }

    .election-cycle-select,
    .election-type-mobile {
        display: block;
        width: 100%;
        min-width: 0;
        height: 32px;
        padding-left: 9px;
        padding-right: 26px;
        font-size: .69rem;
    }
}

/* Small tablet / large phone. */
@media (max-width: 640px) {
    body {
        padding: 0;
    }

    .system-strip,
    .stats,
    .workspace {
        margin-left: 8px;
        margin-right: 8px;
    }

    .workspace {
        padding-left: 0;
        padding-right: 0;
    }

    .map-toolbar {
        padding: 9px 10px;
    }

    .map-toolbar-main {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .map-back-button {
        width: max-content;
        max-width: 100%;
    }

    .map-title-wrap,
    .map-controls-inline {
        grid-column: 1;
        width: 100%;
    }

    .map-controls-inline {
        grid-template-columns: minmax(0,1fr) auto;
    }

    #result-geography-label,
    #result-geography-note,
    .map-title-wrap > #map-subtitle {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .map-layer-hint {
        white-space: normal;
    }

    .map-stage {
        height: clamp(380px, 88vw, 540px) !important;
    }

    .detail-card {
        padding: 16px;
    }

    .results-unit-control {
        padding: 10px;
    }

    .results-unit-control select {
        width: 100%;
        min-width: 0;
    }

    .map-legend {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .map-legend .legend-note {
        width: 100%;
        margin-left: 0;
    }

    .results-source-status {
        margin-left: 0;
        max-width: 100%;
        flex-wrap: wrap;
    }
}

/* Phone. */
@media (max-width: 480px) {
    .system-strip,
    .stats {
        grid-template-columns: 1fr;
    }

    .system-strip,
    .stats,
    .workspace {
        margin-left: 6px;
        margin-right: 6px;
    }

    .election-view-bar {
        grid-template-columns: minmax(88px, 100px) minmax(0, 1fr);
        gap: 6px;
        padding-inline: 7px;
    }

    .election-cycle-select,
    .election-type-mobile {
        height: 34px;
        padding-left: 8px;
        padding-right: 24px;
        font-size: .67rem;
    }

    .map-controls-inline {
        grid-template-columns: 1fr;
    }

    .city-control-inline {
        justify-self: start;
        padding-left: 0;
    }

    .result-geography-indicator {
        width: 100%;
    }

    .afdes-rb {
        grid-template-columns: 44px minmax(0,1fr) 44px;
        gap: 6px;
        width: calc(100% - 12px);
        padding: 8px 6px;
    }

    .afdes-rb-logo-frame {
        width: 42px;
        height: 42px;
    }

    .afdes-rb-logo {
        width: 40px;
        height: 40px;
    }

    .afdes-rb-value {
        font-size: .56rem;
    }

    .afdes-rb-title {
        font-size: .55rem;
        letter-spacing: .05em;
    }

    .afdes-rb-track {
        height: 12px;
    }

    .afdes-rb-caption {
        font-size: .61rem;
        line-height: 1.2;
    }

    .map-stage {
        height: clamp(350px, 103vw, 480px) !important;
    }

    .results-meta {
        grid-template-columns: 1fr;
    }

    .engine-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Very small phones: retain quality without horizontal compression. */
@media (max-width: 360px) {
    .election-view-bar {
        grid-template-columns: 86px minmax(0,1fr);
        gap: 5px;
        padding-inline: 6px;
    }

    .election-cycle-select,
    .election-type-mobile {
        padding-left: 7px;
        padding-right: 21px;
        font-size: .64rem;
    }

    .map-title-wrap .map-title-line strong {
        font-size: 1.15rem;
    }

    .map-level-badge {
        font-size: .48rem;
    }

    .detail-card h2 {
        font-size: 1.3rem;
    }
}

/* State abbreviations scale smoothly instead of making abrupt jumps. */
.state-abbr {
    font-size: clamp(8px, 1.1vw, 11px);
}


/* =========================================================
   v5.1 RESULTS CANDIDATE CARD POLISH
   Prevent candidate labels and numeric values from colliding.
========================================================= */

.results-card {
    container-name: afdes-results;
    container-type: inline-size;
}

.results-candidates {
    gap: 10px;
}

.result-candidate {
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
    column-gap: 14px;
    row-gap: 5px;
    align-items: center;
    min-width: 0;
    padding: 12px 13px;
}

.result-candidate-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.result-candidate-name {
    display: block;
    overflow: visible;
    min-width: 0;
    color: var(--navy);
    font-size: .84rem;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.result-candidate-party {
    display: block;
    margin-top: 0;
    color: #7c8991;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.25;
}

.result-candidate-numbers {
    display: grid;
    gap: 3px;
    min-width: 96px;
    text-align: right;
}

.result-candidate-percent {
    display: block;
    color: var(--navy);
    font-size: .92rem;
    font-weight: 950;
    line-height: 1.1;
    white-space: nowrap;
}

.result-candidate-votes {
    display: block;
    margin-top: 0;
    color: #7c8991;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/*
 * If the results card itself becomes truly narrow, stack the numeric block
 * beneath the candidate identity instead of allowing vote totals to split.
 */
@container afdes-results (max-width: 300px) {
    .result-candidate {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .result-candidate-numbers {
        grid-template-columns: auto auto;
        justify-content: start;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
        text-align: left;
    }

    .result-candidate-percent,
    .result-candidate-votes {
        white-space: nowrap;
    }
}

/* Browser fallback where container queries are unavailable. */
@media (max-width: 390px) {
    .result-candidate {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .result-candidate-numbers {
        grid-template-columns: auto auto;
        justify-content: start;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
        text-align: left;
    }
}


/* =========================================================
   v5.2 NATIVE CONTROL RESULT MAP
========================================================= */
.result-party-legend {
    display: none;
    align-items: center;
    gap: 6px;
}

.result-party-legend i {
    display: inline-block;
    width: 16px;
    height: 9px;
    border-radius: 2px;
}

.result-party-legend--dem i {
    background: linear-gradient(90deg, #afc9e3 0 50%, #4f83bd 50% 100%);
}

.result-party-legend--rep i {
    background: linear-gradient(90deg, #e6b4b1 0 50%, #cf625c 50% 100%);
}

.map-card.has-election-results .result-party-legend {
    display: inline-flex;
}

/*
 * ELECTION MAP COLOR CONTRACT
 *
 * Pale party color  = currently leading while reporting.
 * Solid party color = race has been called.
 * Gold stroke       = user's selected geography.
 *
 * Selection never changes the result fill.
 */
.geo-shape.has-election-result.result-dem:not(.result-called):not(:hover):not(.is-hovered) {
    fill: #afc9e3 !important;
}

.geo-shape.has-election-result.result-rep:not(.result-called):not(:hover):not(.is-hovered) {
    fill: #e6b4b1 !important;
}

.geo-shape.has-election-result.result-other:not(.result-called):not(:hover):not(.is-hovered) {
    fill: #cfc9da !important;
}

.geo-shape.has-election-result.result-dem.result-called:not(:hover):not(.is-hovered) {
    fill: #4f83bd !important;
}

.geo-shape.has-election-result.result-rep.result-called:not(:hover):not(.is-hovered) {
    fill: #cf625c !important;
}

.geo-shape.has-election-result.result-other.result-called:not(:hover):not(.is-hovered) {
    fill: #8f84a8 !important;
}

/* Called status is communicated by solid fill, not a special border.
   Selection owns the gold border when a geography is selected. */




/* =========================================================
   v5.3.2 GEOGRAPHY CONTROL CONTRACT
   Both choices use the established Result Geography card language.
   Active geography is indicated with a light AFDES accent — never black.
========================================================= */

.geography-layer-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 560px;
    min-width: min(560px, 100%);
}

.result-geography-indicator.geography-choice {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    margin: 0;
    text-align: left;
    cursor: pointer;
    border: 1px solid #d8e1e6;
    background: #f8fafb;
    color: inherit;
    box-shadow: none;
    transition:
        border-color .12s ease,
        background .12s ease,
        box-shadow .12s ease;
}

.result-geography-indicator.geography-choice:hover:not(:disabled) {
    border-color: #b9c9d3;
    background: #f3f7f9;
}

.result-geography-indicator.geography-choice.active {
    border-color: #049bce;
    background: #f1f9fc;
    box-shadow: inset 0 0 0 1px rgba(4, 155, 206, .10);
    color: var(--navy);
}

.result-geography-indicator.geography-choice.active .result-geography-kicker {
    color: #027ba3;
    border-right-color: #cfe8f1;
}

.result-geography-indicator.geography-choice > strong {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    color: var(--navy);
    font-size: .7rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-geography-indicator.geography-choice > span:last-child {
    grid-area: note;
    min-width: 0;
    overflow: hidden;
    color: #7f8b92;
    font-size: .55rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-geography-indicator.geography-choice:disabled {
    cursor: default;
    opacity: .48;
}

@media (max-width: 760px) {
    .geography-layer-switch {
        grid-template-columns: 1fr 1fr;
        flex-basis: 100%;
        min-width: 0;
    }

    .result-geography-indicator.geography-choice {
        min-height: 46px;
        padding: 7px 9px;
    }

    .result-geography-indicator.geography-choice .result-geography-kicker {
        display: none;
    }

    .result-geography-indicator.geography-choice {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "note";
    }

    .result-geography-indicator.geography-choice > strong,
    .result-geography-indicator.geography-choice > span:last-child {
        white-space: normal;
    }
}


/* =========================================================
   v5.4 REPRESENTATION + MULTI-RACE MAP LANGUAGE
========================================================= */

.geo-shape.has-election-result.result-split:not(.selected):not(:hover):not(.is-hovered) {
    fill: var(--split-fill) !important;
}

.result-split-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.result-split-legend i {
    display: inline-block;
    width: 18px;
    height: 8px;
    border: 1px solid rgba(32,49,62,.18);
    border-radius: 2px;
    background:
        linear-gradient(
            135deg,
            #afc9e3 0%,
            #afc9e3 49.5%,
            #e6b4b1 50.5%,
            #e6b4b1 100%
        );
}


/* v5.4.2 requested deep-navy system stripe */
.system-strip {
    background: #0b263f !important;
}

.system-strip > div,
.system-strip article {
    background: transparent !important;
}

.system-strip .strip-label,
.system-strip strong,
.system-strip span {
    color: #ffffff;
}


/* =========================================================
   v5.4.3 CITIES CONTROL CONTAINMENT
   Keep the Cities toggle inside the map toolbar.
   Label above; switch below.
========================================================= */

.city-control-inline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 4px 2px !important;
    overflow: hidden !important;
}

.city-control-label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.city-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
}

.city-toggle-track {
    flex: 0 0 auto !important;
}

.city-toggle-text {
    flex: 0 0 auto !important;
    min-width: 18px !important;
    text-align: left !important;
}

/* Do not let the toolbar control row spill into the Results column. */
.map-controls-inline {
    min-width: 0 !important;
    overflow: visible !important;
}

@media (max-width: 760px) {
    .city-control-inline {
        flex-basis: 68px !important;
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }
}


/* =========================================================
   v5.4.4 CITIES SPACING / NO-CLIP FIX
   Reserve explicit room for Cities instead of clipping overflow.
========================================================= */

.map-controls-inline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 66px !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    overflow: visible !important;
}

.geography-layer-switch {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 7px !important;
}

.city-control-inline {
    justify-self: end !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    padding: 4px 4px 4px 0 !important;
    overflow: visible !important;
}

.city-toggle {
    max-width: 62px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

@media (max-width: 760px) {
    .map-controls-inline {
        grid-template-columns: minmax(0, 1fr) 62px !important;
        column-gap: 6px !important;
    }

    .city-control-inline {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        padding-right: 2px !important;
    }
}


/* =========================================================
   v5.4.7 CLEAN GEOGRAPHY BUTTONS
   Built from working v5.4.4. Only the internal presentation
   of the two geography buttons is changed.
========================================================= */

.result-geography-indicator.geography-choice {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "label"
        "note" !important;
    align-content: center !important;
    row-gap: 3px !important;
    min-height: 48px !important;
    padding: 8px 14px !important;
}

.result-geography-indicator.geography-choice > strong {
    grid-area: label !important;
    display: block !important;
    width: 100% !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
    text-align: left !important;
}

.result-geography-indicator.geography-choice > span:last-child {
    grid-area: note !important;
    display: block !important;
    width: 100% !important;
    font-size: .56rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

/* Defensive: the removed kicker must never consume space if inherited markup appears. */
.result-geography-kicker {
    display: none !important;
}

@media (max-width: 760px) {
    .result-geography-indicator.geography-choice {
        min-height: 46px !important;
        padding: 7px 9px !important;
        row-gap: 2px !important;
    }
}


/* =========================================================
   v5.4.8 COMPACT MAP NAVIGATION
   Built from working v5.4.7.
   Geography buttons are compact, state jump sits beside them,
   and Cities is a small overlay on the map.
========================================================= */

.map-controls-inline {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.geography-layer-switch {
    display: grid !important;
    grid-template-columns: repeat(2, 170px) !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Roughly half the previous visual footprint. */
.result-geography-indicator.geography-choice {
    min-height: 42px !important;
    padding: 6px 9px !important;
    row-gap: 2px !important;
    border-radius: 8px !important;
}

.result-geography-indicator.geography-choice > strong {
    font-size: .66rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

.result-geography-indicator.geography-choice > span:last-child {
    font-size: .50rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* Important state navigation now sits immediately beside geography choices. */
.toolbar-state-jump {
    display: grid;
    gap: 4px;
    flex: 0 0 205px;
    width: 205px;
    min-width: 205px;
}

.toolbar-state-jump > span {
    color: #6b7a85;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.toolbar-state-jump select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 30px 0 10px;
    color: var(--navy);
    background: #ffffff;
    border: 1px solid #cbd7df;
    border-radius: 8px;
    font-size: .66rem;
    font-weight: 800;
}

.toolbar-state-jump select:hover,
.toolbar-state-jump select:focus {
    border-color: var(--primary);
    outline: none;
}

/* Cities is a map overlay, not a toolbar column. */
.map-cities-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    color: var(--navy);
    background: rgba(255,255,255,.96);
    border: 1px solid #d7e0e6;
    border-radius: 9px;
    box-shadow: 0 5px 16px rgba(7,24,39,.10);
}

.map-cities-overlay .city-control-label {
    font-size: .60rem !important;
    line-height: 1 !important;
}

.map-cities-overlay .city-toggle {
    min-width: 54px !important;
    min-height: 26px !important;
    padding: 2px 4px 2px 2px !important;
    gap: 4px !important;
}

.map-cities-overlay .city-toggle-track {
    width: 30px !important;
    height: 17px !important;
    flex-basis: 30px !important;
}

.map-cities-overlay .city-toggle-knob {
    top: 3px !important;
    left: 3px !important;
    width: 11px !important;
    height: 11px !important;
}

.map-cities-overlay .city-toggle[aria-checked="true"] .city-toggle-knob,
.map-cities-overlay .city-toggle[aria-pressed="true"] .city-toggle-knob {
    transform: translateX(13px) !important;
}

.map-cities-overlay .city-toggle-text {
    font-size: .55rem !important;
}

/* Do not reserve any toolbar width for the old Cities layout. */
.city-control-inline {
    display: none !important;
}

/* At narrower desktop widths, controls wrap as a unit instead of crushing. */
@media (max-width: 1180px) {
    .map-toolbar-main {
        flex-wrap: wrap !important;
    }

    .map-controls-inline {
        flex: 1 1 100% !important;
        justify-content: flex-end !important;
    }
}

@media (max-width: 760px) {
    .map-controls-inline {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        width: 100% !important;
    }

    .geography-layer-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .toolbar-state-jump {
        width: 100% !important;
        min-width: 0 !important;
        flex-basis: auto !important;
    }

    .result-geography-indicator.geography-choice > strong,
    .result-geography-indicator.geography-choice > span:last-child {
        white-space: normal !important;
    }

    .map-cities-overlay {
        top: 8px;
        right: 8px;
        padding: 5px 6px;
    }
}


/* =========================================================
   v5.4.9 CITIES CONTROL IN LEGEND
   Built from working v5.4.8.
   Cities is now a compact legend control instead of a map overlay.
========================================================= */

.map-cities-overlay {
    display: none !important;
}

.legend-city-control {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.legend-city-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.legend-city-control .legend-city-marker {
    margin-right: 0 !important;
}

.legend-city-control .city-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 52px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 2px 4px 2px 2px !important;
    border-radius: 999px !important;
}

.legend-city-control .city-toggle-track {
    width: 28px !important;
    height: 16px !important;
    flex: 0 0 28px !important;
}

.legend-city-control .city-toggle-knob {
    top: 3px !important;
    left: 3px !important;
    width: 10px !important;
    height: 10px !important;
}

.legend-city-control .city-toggle[aria-checked="true"] .city-toggle-knob,
.legend-city-control .city-toggle[aria-pressed="true"] .city-toggle-knob {
    transform: translateX(12px) !important;
}

.legend-city-control .city-toggle-text {
    font-size: .53rem !important;
    line-height: 1 !important;
}

@media (max-width: 760px) {
    .legend-city-control {
        gap: 5px !important;
    }

    .legend-city-label > span {
        display: none;
    }
}


/* =========================================================
   v5.4.10 LEGEND NOTE BELOW
   Keep legend symbols/controls on the first line and place
   the pale/solid/gold explanation on its own quiet line below.
========================================================= */

.map-legend {
    align-items: center !important;
}

.map-legend .legend-note {
    order: 90 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding-top: 6px !important;
    color: #7a8892 !important;
    border-top: 1px solid #edf1f4 !important;
    font-size: .58rem !important;
    line-height: 1.25 !important;
}

/* Keep provider/source status on the main legend line. */
.map-legend .results-source-status {
    order: 20 !important;
}

@media (max-width: 760px) {
    .map-legend .legend-note {
        margin-top: 3px !important;
        padding-top: 5px !important;
        font-size: .56rem !important;
    }
}


/* =========================================================
   v5.4.12 SAFE ELECTION AVAILABILITY
========================================================= */

/* Wrong geography stays visible, but clearly disabled. */
.result-geography-indicator.geography-choice:disabled,
.result-geography-indicator.geography-choice:disabled:hover,
.result-geography-indicator.geography-choice:disabled:focus-visible {
    cursor: not-allowed !important;
    color: #929ca3 !important;
    background: #f1f3f4 !important;
    border-color: #dde2e5 !important;
    box-shadow: none !important;
    opacity: .62 !important;
    outline: none !important;
}

.result-geography-indicator.geography-choice:disabled > strong,
.result-geography-indicator.geography-choice:disabled > span {
    color: #929ca3 !important;
}

/* State is still visible geography, but is not an election target. */
.geo-shape.state.election-unavailable,
.geo-shape.state.election-unavailable:hover,
.geo-shape.state.election-unavailable.is-hovered {
    cursor: default !important;
    fill: #e1e4e6 !important;
    stroke: #ffffff !important;
    stroke-width: .75 !important;
    filter: none !important;
}

/* Never let stale party classes visually override "no election". */
.geo-shape.state.election-unavailable.has-election-result,
.geo-shape.state.election-unavailable.result-dem,
.geo-shape.state.election-unavailable.result-rep,
.geo-shape.state.election-unavailable.result-other,
.geo-shape.state.election-unavailable.result-called,
.geo-shape.state.election-unavailable.result-split {
    fill: #e1e4e6 !important;
}

#state-select option:disabled {
    color: #9aa3a9;
}

/* Tooltip must stay inside the map and wrap short status messages. */
.tooltip {
    width: max-content !important;
    max-width: min(260px, calc(100% - 20px)) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.3 !important;
}


/* =========================================================
   v5.4.13 LOCKED ELECTION-GEOGRAPHY CONTRACT
========================================================= */

/* Never hide a geography choice just because it is unavailable. */
.geography-layer-switch .geography-choice {
    visibility: visible !important;
}

/* National map: both detail controls are visible but inactive until a state opens. */
.map-card:not(.is-state-view) .geography-layer-switch .geography-choice:disabled {
    display: grid !important;
}

/* House national map must remain visually neutral. */
body[data-election-type="house"] .geo-shape.state.has-election-result {
    fill: #d3d3d3 !important;
}

/* =========================================================
   v5.6.0 PERSISTENT SELECTED GEOGRAPHY
   LOCKED CONTRACT:
   result color is temporarily overridden by AFDES gold while selected.
   The underlying party/result classes remain untouched.
========================================================= */
#map-svg .geo-shape.selected,
#map-svg .geo-shape.selected:hover,
#map-svg .geo-shape.selected.is-hovered,
#map-svg .geo-shape.selected.has-election-result,
#map-svg .geo-shape.selected.has-election-result:hover,
#map-svg .geo-shape.selected.has-election-result.is-hovered,
#map-svg .geo-shape.selected.result-split,
#map-svg .geo-shape.selected.result-split:hover,
#map-svg .geo-shape.selected.result-split.is-hovered {
    fill: #f5c451 !important;
    stroke: #ffffff !important;
    stroke-width: .75 !important;
    filter: none !important;
}

/* Results metadata must remain readable in every panel width. */
.results-meta dd {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 1em;
    color: var(--navy) !important;
}

/* =========================================================
   v5.6.1 RESULTS METADATA DISPLAY FIX
   The global `dl div` rule uses a 112px two-column grid. Inside the
   compact Results metadata cards that pushed each <dd> value beyond
   the visible box. Metadata cards are intentionally vertical:
   label above, value below. No other Results layout is changed.
========================================================= */
.results-meta > div {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

.results-meta dt {
    display: block !important;
}

.results-meta dd {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* =========================================================
   v6.1.0 AUTHORITATIVE RESPONSIVE CONTRACT
   Final layout rules for Election Intelligence at all viewport sizes.
   These rules intentionally sit last so legacy development breakpoints
   cannot reintroduce fixed-width or mobile overflow behavior.
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body {
    background: transparent !important;
}

.engine-shell,
.engine-header,
.system-strip,
.stats,
.workspace,
.map-card,
.detail-card,
.map-toolbar,
.map-toolbar-main,
.map-controls-inline,
.geography-layer-switch,
.toolbar-state-jump,
.election-view-bar,
.afdes-rb,
.map-stage,
.map-legend,
.engine-footer,
.results-card,
.results-unit-control,
.results-content,
.results-candidates,
.results-meta {
    min-width: 0;
    max-width: 100%;
}

.engine-shell {
    width: min(1520px, 100%);
}

.brand-block,
.brand-copy,
.header-actions,
.system-strip > div,
.stats > article,
.workspace > *,
.map-toolbar-main > *,
.map-controls-inline > *,
.election-view-bar > *,
.afdes-rb > *,
.detail-topline > * {
    min-width: 0;
}

.brand-copy,
.brand-copy h1,
.brand-copy .subtitle,
.system-strip strong,
.stats span,
.map-title-wrap,
.map-title-wrap strong,
.map-title-wrap > span,
.map-layer-hint,
.results-card h2,
#results-context,
#results-unit-help,
.results-selected-unit,
.results-empty,
.results-empty p,
.results-integrity-note,
.engine-footer span {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.results-card {
    width: 100%;
    overflow: hidden;
}

.detail-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
}

.detail-topline .eyebrow {
    min-width: 0;
    margin: 0;
    white-space: normal;
}

.results-status-badge {
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.results-card h2 {
    margin-top: 0;
    font-size: clamp(1.3rem, 2.6vw, 1.65rem);
    line-height: 1.08;
}

#results-context {
    margin-top: 0;
    line-height: 1.5;
}

.results-unit-control,
.results-unit-control select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.results-unit-control select,
.election-cycle-select,
.election-type-mobile,
.toolbar-state-jump select {
    text-overflow: ellipsis;
}

.result-candidate,
.result-candidate-main,
.result-candidate-name,
.result-candidate-party,
.result-candidate-numbers {
    min-width: 0;
    max-width: 100%;
}

.results-meta > div {
    min-width: 0;
}

.results-meta dd {
    max-width: 100% !important;
}

.map-legend > *,
.results-source-status,
.legend-city-control {
    min-width: 0;
    max-width: 100%;
}

.results-source-status strong,
.results-source-state,
.results-source-label {
    max-width: 100%;
}

@container afdes-results (max-width: 380px) {
    .detail-topline {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .results-status-badge {
        justify-self: start;
    }

    .result-candidate {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .result-candidate-numbers {
        grid-template-columns: auto auto;
        justify-content: start;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
        text-align: left;
    }
}

@container afdes-results (max-width: 330px) {
    .results-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1080px) {
    .workspace {
        grid-template-columns: 1fr;
    }

    .detail-card {
        min-height: 0;
    }
}

@media (max-width: 900px) {
    body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .engine-header {
        align-items: stretch;
    }

    .header-actions {
        width: 100%;
    }

    .map-toolbar-main {
        grid-template-columns: 1fr;
    }

    .map-controls-inline {
        grid-column: 1;
        width: 100% !important;
    }

    .toolbar-state-jump {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 760px) {
    body {
        padding: 0;
        background: transparent !important;
    }

    .system-strip,
    .stats,
    .workspace {
        margin-left: 8px;
        margin-right: 8px;
    }

    .workspace {
        padding-left: 0;
        padding-right: 0;
    }

    .map-controls-inline {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .geography-layer-switch {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .toolbar-state-jump {
        width: 100% !important;
        max-width: 100% !important;
    }

    .results-card {
        padding: clamp(14px, 4vw, 19px);
    }

    .results-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-legend {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .system-strip,
    .stats {
        grid-template-columns: 1fr;
    }

    .system-strip,
    .stats,
    .workspace {
        margin-left: 6px;
        margin-right: 6px;
    }

    .engine-header {
        padding: 18px 14px;
    }

    .brand-block {
        gap: 10px;
    }

    .brand-logo,
    .brand-logo-white {
        flex: 0 0 auto;
        max-width: 50px;
        height: auto;
    }

    .brand-copy h1 {
        font-size: clamp(1.8rem, 9vw, 2.35rem);
        line-height: .98;
    }

    .system-strip > div,
    .stats article {
        padding: 12px 14px;
    }

    .map-toolbar {
        padding: 9px;
    }

    .map-stage {
        min-height: 0 !important;
        height: clamp(340px, 105vw, 470px) !important;
    }

    .results-meta {
        grid-template-columns: 1fr;
    }

    .engine-footer {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 390px) {
    .geography-layer-switch {
        grid-template-columns: 1fr !important;
    }

    .result-geography-indicator.geography-choice {
        min-height: 44px !important;
    }

    .election-view-bar {
        grid-template-columns: 1fr !important;
        gap: 6px;
        padding: 7px !important;
    }

    .election-cycle-select,
    .election-type-mobile {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px;
    }

    .detail-topline {
        grid-template-columns: 1fr;
    }

    .results-status-badge {
        justify-self: start;
    }

    .result-candidate {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .result-candidate-numbers {
        grid-template-columns: auto auto;
        justify-content: start;
        text-align: left;
        min-width: 0;
    }
}

@media (max-width: 340px) {
    .engine-header {
        padding-inline: 12px;
    }

    .brand-logo,
    .brand-logo-white {
        max-width: 44px;
    }

    .brand-copy h1 {
        font-size: 1.72rem;
    }

    .system-strip,
    .stats,
    .workspace {
        margin-left: 4px;
        margin-right: 4px;
    }

    .results-card {
        padding: 13px;
    }

    .results-unit-control {
        padding: 9px;
    }

    .results-meta > div {
        padding: 8px 9px;
    }
}