/* ---------------------------------------------------------------
           CSS Variables — customize branding here
        --------------------------------------------------------------- */
        :root {
            --color-rep: #cc0000;
            --color-dem: #0055aa;
            --color-lib: #e8a820;
            --color-grn: #2e8b57;
            --color-other: #888888;
            --color-bar-bg: #e8e8e8;
            --color-bg: #F3F4F2;
            --color-text: #222222;
            --color-text-muted: #666666;
            --color-border: #dddddd;
            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --max-width: 720px;
        }

        /* ---------------------------------------------------------------
           Reset & Base
        --------------------------------------------------------------- */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-sans);
            color: var(--color-text);
            background: var(--color-bg);
            line-height: 1.5;
            padding: 16px;
        }

        html.sc-election-embedded,
        html.sc-election-embedded body {
            overflow: hidden;
        }

        .container {
            max-width: var(--max-width);
            margin: 0 auto;
        }

        /* ---------------------------------------------------------------
           Header
        --------------------------------------------------------------- */
        .header {
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .header .meta {
            font-size: 13px;
            color: var(--color-text-muted);
        }

        .header .meta .updated-time {
            font-weight: 600;
        }

        /* ---------------------------------------------------------------
           Race Selector
        --------------------------------------------------------------- */
        .race-selector {
            margin-bottom: 24px;
        }

        .race-selector label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--color-text-muted);
            margin-bottom: 6px;
        }

        .race-selector select {
            width: 100%;
            padding: 10px 12px;
            font-size: 15px;
            font-family: var(--font-sans);
            border: 2px solid var(--color-border);
            border-radius: 6px;
            background: var(--color-bg);
            color: var(--color-text);
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }

        .race-selector select:focus {
            outline: none;
            border-color: #4a90d9;
        }

        /* ---------------------------------------------------------------
           Results Panel
        --------------------------------------------------------------- */
        .results-panel {
            margin-bottom: 32px;
        }

        .race-header {
            margin-bottom: 16px;
        }

        .race-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .party-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: 700;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            vertical-align: middle;
            position: relative;
            top: -2px;
        }

        .party-badge.rep { background: var(--color-rep); }
        .party-badge.dem { background: var(--color-dem); }
        .party-badge.other { background: var(--color-other); }

        .reporting-status {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        .reporting-status .pct {
            font-weight: 600;
        }

        .total-votes {
            font-size: 13px;
            color: var(--color-text-muted);
            margin-top: 2px;
        }

        /* ---------------------------------------------------------------
           Bar Chart
        --------------------------------------------------------------- */
        .bar-chart {
            margin-top: 16px;
        }

        .candidate-row {
            margin-bottom: 12px;
        }

        .candidate-info {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 4px;
        }

        .candidate-name {
            font-size: 15px;
            font-weight: 600;
        }

        .candidate-name .party-label {
            font-weight: 400;
            color: var(--color-text-muted);
            font-size: 13px;
        }

        .candidate-votes {
            font-size: 14px;
            color: var(--color-text-muted);
            white-space: nowrap;
            margin-left: 12px;
        }

        .candidate-votes .pct {
            font-weight: 700;
            color: var(--color-text);
        }

        .bar-container {
            width: 100%;
            height: 24px;
            background: var(--color-bar-bg);
            border-radius: 4px;
            overflow: hidden;
        }

        .bar-fill {
            height: 100%;
            border-radius: 4px;
            min-width: 2px;
            transition: width 0.4s ease;
        }

        .bar-fill.rep { background: var(--color-rep); }
        .bar-fill.dem { background: var(--color-dem); }
        .bar-fill.lib { background: var(--color-lib); }
        .bar-fill.grn { background: var(--color-grn); }
        .bar-fill.other { background: var(--color-other); }

        .candidate-row.leader .candidate-name {
            color: var(--color-text);
        }

        .candidate-row.leader .bar-fill {
            opacity: 1;
        }

        .candidate-row:not(.leader) .bar-fill {
            opacity: 0.7;
        }

        .winner-check {
            color: #2e7d32;
            font-weight: 700;
            margin-right: 4px;
        }

        /* ---------------------------------------------------------------
           County Map
        --------------------------------------------------------------- */
        #county-map {
            margin-bottom: 24px;
            position: relative;
        }

        #county-map svg {
            width: 100%;
            height: auto;
            display: block;
        }

        .county-path {
            stroke: #ffffff;
            stroke-width: 0.5px;
            cursor: pointer;
            transition: opacity 0.15s;
        }

        .county-path:hover {
            stroke: #333333;
            stroke-width: 1.5px;
            opacity: 0.85;
        }

        .county-path.active {
            stroke: #333333;
            stroke-width: 1.5px;
        }

        .map-tooltip {
            position: absolute;
            background: #ffffff;
            border: 1px solid var(--color-border);
            border-radius: 6px;
            padding: 10px 12px;
            font-size: 13px;
            line-height: 1.5;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            z-index: 10;
            max-width: 260px;
            display: none;
        }

        .map-tooltip .tooltip-county {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 4px;
            border-bottom: 1px solid var(--color-border);
            padding-bottom: 4px;
        }

        .map-tooltip .tooltip-row {
            display: flex;
            justify-content: space-between;
            gap: 12px;
        }

        .map-tooltip .tooltip-cand-name {
            font-weight: 600;
        }

        .map-tooltip .tooltip-cand-votes {
            white-space: nowrap;
            color: var(--color-text-muted);
        }

        .map-tooltip .tooltip-cand-votes .pct {
            font-weight: 700;
            color: var(--color-text);
        }

        .map-tooltip .tooltip-others {
            font-size: 12px;
            color: var(--color-text-muted);
            font-style: italic;
            margin-top: 2px;
        }
        .map-tooltip .tooltip-reporting {
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px solid var(--color-border);
            font-size: 12px;
            color: var(--color-text-muted);
        }

        .map-no-data {
            text-align: center;
            padding: 20px;
            color: var(--color-text-muted);
            font-size: 14px;
            font-style: italic;
        }

        /* ---------------------------------------------------------------
           Placeholder Sections (county table — step 5)
        --------------------------------------------------------------- */
        .placeholder-section {
            border: 2px dashed var(--color-border);
            border-radius: 8px;
            padding: 32px 24px;
            text-align: center;
            color: var(--color-text-muted);
            margin-bottom: 24px;
        }

        .placeholder-section h3 {
            font-size: 16px;
            margin-bottom: 4px;
        }

        .placeholder-section p {
            font-size: 13px;
        }

        /* ---------------------------------------------------------------
           County Results Cards
        --------------------------------------------------------------- */
        #county-results-section {
            margin-bottom: 24px;
        }

        .county-card {
            border-top: 2px solid var(--color-border);
            padding: 14px 0;
        }

        .county-card-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 8px;
        }

        .county-card-name {
            font-size: 15px;
            font-weight: 700;
        }

        .county-card-precincts {
            font-size: 12px;
            color: var(--color-text-muted);
            white-space: nowrap;
        }

        .county-card .candidate-row {
            margin-bottom: 6px;
        }

        .county-card .candidate-info {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 2px;
        }

        .county-card .candidate-name {
            font-size: 13px;
            font-weight: 600;
        }

        .county-card .candidate-votes {
            font-size: 13px;
            color: var(--color-text-muted);
            white-space: nowrap;
            margin-left: 8px;
        }

        .county-card .candidate-votes .pct {
            font-weight: 700;
            color: var(--color-text);
        }

        .county-card .bar-container {
            width: 100%;
            height: 16px;
            background: var(--color-bar-bg);
            border-radius: 3px;
            overflow: hidden;
        }

        .county-card .candidate-row:not(.leader) .bar-fill {
            opacity: 0.7;
        }

        .county-card .candidate-row.leader .bar-fill {
            opacity: 1;
        }

        /* ---------------------------------------------------------------
           View Toggle
        --------------------------------------------------------------- */
        .view-toggle {
            display: flex;
            margin-bottom: 20px;
            border: 2px solid var(--color-border);
            border-radius: 6px;
            overflow: hidden;
        }

        .view-toggle-btn {
            flex: 1;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 600;
            font-family: var(--font-sans);
            border: none;
            cursor: pointer;
            background: var(--color-bg);
            color: var(--color-text-muted);
            transition: background 0.15s, color 0.15s;
        }

        .view-toggle-btn + .view-toggle-btn {
            border-left: 1px solid var(--color-border);
        }

        .view-toggle-btn.active {
            background: var(--color-text);
            color: #ffffff;
        }

        .view-toggle-btn:not(.active):hover {
            background: #f0f0f0;
        }

        /* ---------------------------------------------------------------
           County Selector (By County view)
        --------------------------------------------------------------- */
        .county-selector {
            margin-bottom: 24px;
        }

        .county-selector label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--color-text-muted);
            margin-bottom: 6px;
        }

        .county-selector select {
            width: 100%;
            padding: 10px 12px;
            font-size: 15px;
            font-family: var(--font-sans);
            border: 2px solid var(--color-border);
            border-radius: 6px;
            background: var(--color-bg);
            color: var(--color-text);
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }

        .county-selector select:focus {
            outline: none;
            border-color: #4a90d9;
        }

        /* ---------------------------------------------------------------
           Race Cards (By County view)
        --------------------------------------------------------------- */
        .race-category-heading {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--color-text-muted);
            padding: 16px 0 8px;
            border-bottom: 1px solid var(--color-border);
            margin-bottom: 0;
        }

        .race-category-heading:first-child {
            padding-top: 0;
        }

        .race-card {
            border-top: 2px solid var(--color-border);
            padding: 14px 0;
        }

        .race-category-heading + .race-card {
            border-top: none;
        }

        .race-card-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 8px;
        }

        .race-card-name {
            font-size: 15px;
            font-weight: 700;
        }

        .race-card-precincts {
            font-size: 12px;
            color: var(--color-text-muted);
            white-space: nowrap;
            margin-left: 8px;
        }

        .race-card .candidate-row {
            margin-bottom: 6px;
        }

        .race-card .candidate-info {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 2px;
        }

        .race-card .candidate-name {
            font-size: 13px;
            font-weight: 600;
        }

        .race-card .candidate-votes {
            font-size: 13px;
            color: var(--color-text-muted);
            white-space: nowrap;
            margin-left: 8px;
        }

        .race-card .candidate-votes .pct {
            font-weight: 700;
            color: var(--color-text);
        }

        .race-card .bar-container {
            width: 100%;
            height: 16px;
            background: var(--color-bar-bg);
            border-radius: 3px;
            overflow: hidden;
        }

        .race-card .candidate-row:not(.leader) .bar-fill {
            opacity: 0.7;
        }

        .race-card .candidate-row.leader .bar-fill {
            opacity: 1;
        }

        /* ---------------------------------------------------------------
           Scoreboard widget — two races side by side
        --------------------------------------------------------------- */
        .scoreboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        /* Cards sit in their own grid cells, so drop the divider/padding the
           stacked race-card uses. */
        .scoreboard-cell .race-card {
            border-top: none;
            padding: 0;
        }

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

        /* ---------------------------------------------------------------
           Banner widget — compact desktop strip, one race at a time
        --------------------------------------------------------------- */
        .banner {
            display: flex;
            align-items: center;
            gap: 18px;
            height: 100%;
            padding: 8px 14px;
            overflow: hidden;
            /* Thin rule on top (as under category headings), heavier rule on
               the bottom (as between race cards). */
            border-top: 1px solid var(--color-border);
            border-bottom: 2px solid var(--color-border);
        }

        .banner-title {
            flex: 0 0 auto;
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
        }

        .banner-title .party-badge {
            margin-left: 6px;
            top: 0;
        }

        /* Fixed N-column layout, filled down first then across (1 4 7 / 2 5 8 /
           3 6 9). grid-template-columns/-rows are set inline per render so the
           columns stay a constant width no matter the candidate count. */
        .banner-grid {
            flex: 1 1 auto;
            display: grid;
            grid-auto-flow: column;
            column-gap: 18px;
            row-gap: 1px;
            align-content: center;
            min-width: 0;
        }

        .banner-cell {
            display: flex;
            align-items: baseline;
            font-size: 12px;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
        }

        .banner-cell .banner-cand-name {
            font-weight: 600;
            flex: 0 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Dot leaders between name and results: a clipped run of periods that
           grows to fill the gap (e.g. "Name........54% 45,000"). flex-basis 0
           so the long dot string only fills leftover space — it never inflates
           and starves the candidate name. */
        .banner-cell .banner-fill {
            flex: 1 1 0;
            min-width: 0;
            margin: 0 4px;
            overflow: hidden;
            color: #bbbbbb;
        }

        .banner-cell .banner-fill::before {
            content: "............................................................................................";
        }

        .banner-cell .banner-cand-pct {
            flex: 0 0 auto;
            font-weight: 700;
        }

        .banner-dot {
            flex: 0 0 auto;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            align-self: center;
            margin-right: 6px;
        }

        .banner-dot.rep { background: var(--color-rep); }
        .banner-dot.dem { background: var(--color-dem); }
        .banner-dot.lib { background: var(--color-lib); }
        .banner-dot.grn { background: var(--color-grn); }
        .banner-dot.other { background: var(--color-other); }

        /* Race widget: citation line sits at the bottom, tight to the results
           (the results-panel's 32px bottom margin is dropped so the gap matches
           the featured embed). */
        .race-widget .results-panel {
            margin-bottom: 0;
        }

        .race-widget .header {
            margin-bottom: 0;
            margin-top: 6px;
            text-align: right;
        }

        /* Scoreboard widget: citation line at the bottom, right-justified and
           tight to the cards. */
        .scoreboard-widget .header {
            margin-bottom: 0;
            margin-top: 6px;
            text-align: right;
        }

        /* Statewide + congressional roundup widgets: citation line at the
           bottom, right-justified and tight to the cards. */
        .statewide-widget .results-panel,
        .congressional-widget .results-panel {
            margin-bottom: 0;
        }

        .statewide-widget .header,
        .congressional-widget .header {
            margin-bottom: 0;
            margin-top: 6px;
            text-align: right;
        }

        /* Featured widget: citation line sits at the bottom, right-justified
           and tight to the framed block (the marquee's 28px bottom margin is
           only needed on the main page, between it and the key-races list). */
        .featured-widget #featured-race {
            margin-bottom: 0;
        }

        .featured-widget-meta {
            text-align: right;
        }

        .featured-widget-meta .header {
            margin-bottom: 0;
            margin-top: 6px;
        }

        /* ---------------------------------------------------------------
           Featured (Marquee) Race — Key Races tab
        --------------------------------------------------------------- */
        #featured-race {
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-rep);
            border-radius: 10px;
            padding: 16px 18px;
            margin-bottom: 28px;
            background: #fbfafa;
        }

        .featured-eyebrow {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--color-rep);
            margin-bottom: 12px;
        }

        .featured-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
            gap: 20px;
            align-items: start;
        }

        /* The featured results reuse the .race-card markup; drop its divider
           since it now sits inside its own framed block. */
        .featured-race-results .race-card {
            border-top: none;
            padding: 0;
        }

        .featured-race-results .race-card-name {
            font-size: 17px;
        }

        .featured-race-map {
            position: relative;
        }

        .featured-race-map svg {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Stack the map under the results on narrow screens */
        @media (max-width: 600px) {
            .featured-grid {
                grid-template-columns: 1fr;
            }

            .featured-race-map {
                margin-top: 4px;
            }
        }

        /* ---------------------------------------------------------------
           Loading & Error States
        --------------------------------------------------------------- */
        .loading {
            text-align: center;
            padding: 48px 24px;
            color: var(--color-text-muted);
            font-size: 16px;
        }

        .error {
            text-align: center;
            padding: 48px 24px;
            color: #cc0000;
            font-size: 16px;
        }

        .status-banner {
            display: none;
            margin-bottom: 20px;
        }

        .status-banner .error {
            padding: 16px;
            border: 1px solid #cc0000;
            border-radius: 6px;
            background: #fff5f5;
        }

        /* ---------------------------------------------------------------
           Responsive
        --------------------------------------------------------------- */
        @media (max-width: 480px) {
            body {
                padding: 12px;
            }

            .header h1 {
                font-size: 18px;
            }

            .race-title {
                font-size: 17px;
            }

            .candidate-info {
                flex-wrap: wrap;
            }

            .candidate-votes {
                margin-left: 0;
                font-size: 13px;
            }

            .bar-container {
                height: 20px;
            }

            .map-tooltip {
                font-size: 12px;
            }

            .county-card .candidate-name {
                font-size: 12px;
            }

            .county-card .candidate-votes {
                font-size: 12px;
            }

            .county-card .bar-container {
                height: 14px;
            }

            .race-card .candidate-name {
                font-size: 12px;
            }

            .race-card .candidate-votes {
                font-size: 12px;
            }

            .race-card .bar-container {
                height: 14px;
            }

            .view-toggle-btn {
                font-size: 13px;
                padding: 8px 12px;
            }

            .race-card-header {
                flex-wrap: wrap;
            }

            .race-card-precincts {
                margin-left: 0;
                width: 100%;
            }

            .county-card-header {
                flex-wrap: wrap;
            }

            .county-card-precincts {
                margin-left: 0;
                width: 100%;
            }
        }

        @media (max-width: 360px) {
            .view-toggle-btn {
                font-size: 12px;
                padding: 8px 6px;
            }
        }