/* Standalone election scoreboard. Fills a landscape TV exactly; scrolls naturally on phones.
   Follows the device's light or dark setting unless the viewer picks one with the theme button. */
:root {
    --tv-bg: #f4f4f2;
    --tv-panel: #fff;
    --tv-line: rgba(16, 17, 20, .12);
    --tv-text: #101114;
    --tv-muted: rgba(16, 17, 20, .6);
    --tv-hover: rgba(16, 17, 20, .06);
    --tv-track: rgba(16, 17, 20, .08);
    --tv-seat-line: rgba(16, 17, 20, .35);
    --tv-seat-label: #101114;
    --tv-seat-label-text: #fff;
    --tv-glow: rgba(225, 29, 72, .07);
    --tv-shadow: 0 24px 60px rgba(87, 3, 18, .1);
    --tv-focus: #101114;
    --tv-row-solid: #fff;
    --tv-gain: #15803d;
    --tv-accent: #e11d48;
    --tv-pad: clamp(16px, 3vw, 64px);
    color-scheme: light;
}
/* Dark palette: the viewer's own choice (theme button) wins, otherwise the device setting. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --tv-bg: #0a0b0e;
        --tv-panel: rgba(255, 255, 255, .045);
        --tv-line: rgba(255, 255, 255, .12);
        --tv-text: #f5f6f8;
        --tv-muted: rgba(245, 246, 248, .62);
        --tv-hover: rgba(255, 255, 255, .1);
        --tv-track: rgba(255, 255, 255, .08);
        --tv-seat-line: rgba(255, 255, 255, .35);
        --tv-seat-label: rgba(255, 255, 255, .85);
        --tv-seat-label-text: #0a0b0e;
        --tv-glow: rgba(225, 29, 72, .16);
        --tv-shadow: 0 30px 80px rgba(87, 3, 18, .35);
        --tv-focus: #fff;
        --tv-row-solid: #16171b;
        --tv-gain: #4ade80;
    }
    :root:not([data-theme="light"]) .tv-logo .tv-logo-light { display: none; }
    :root:not([data-theme="light"]) .tv-logo .tv-logo-dark { display: block; }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --tv-bg: #0a0b0e;
    --tv-panel: rgba(255, 255, 255, .045);
    --tv-line: rgba(255, 255, 255, .12);
    --tv-text: #f5f6f8;
    --tv-muted: rgba(245, 246, 248, .62);
    --tv-hover: rgba(255, 255, 255, .1);
    --tv-track: rgba(255, 255, 255, .08);
    --tv-seat-line: rgba(255, 255, 255, .35);
    --tv-seat-label: rgba(255, 255, 255, .85);
    --tv-seat-label-text: #0a0b0e;
    --tv-glow: rgba(225, 29, 72, .16);
    --tv-shadow: 0 30px 80px rgba(87, 3, 18, .35);
    --tv-focus: #fff;
    --tv-row-solid: #16171b;
        --tv-gain: #4ade80;
}
:root[data-theme="dark"] .tv-logo .tv-logo-light { display: none; }
:root[data-theme="dark"] .tv-logo .tv-logo-dark { display: block; }

* { box-sizing: border-box; }
html { background: var(--tv-bg); }
body.tv {
    margin: 0;
    color: var(--tv-text);
    background:
        radial-gradient(120% 70% at 0% 0%, var(--tv-glow), transparent 55%),
        var(--tv-bg);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
.tv a { color: inherit; }
.tv a:focus-visible,
.tv button:focus-visible { outline: 3px solid var(--tv-focus); outline-offset: 3px; }

.tv-screen {
    display: grid;
    /* minmax(0, 1fr): nothing inside may widen the page past the screen. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: clamp(12px, 2.2vh, 32px);
    /* Fills one screen on a TV; if the rows need more room the page scrolls instead of clipping. */
    min-height: 100svh;
    padding: max(var(--tv-pad), env(safe-area-inset-top)) max(var(--tv-pad), env(safe-area-inset-right)) max(calc(var(--tv-pad) * .6), env(safe-area-inset-bottom)) max(var(--tv-pad), env(safe-area-inset-left));
}

/* Top bar: logo left, live state and controls right. */
.tv-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tv-logo { display: inline-flex; flex: 0 1 auto; align-items: center; min-width: 0; min-height: 44px; text-decoration: none; }
.tv-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(28px, 5.2vh, 68px); object-fit: contain; }
.tv-logo .tv-logo-dark { display: none; }
.tv-logo span { font-size: clamp(1.1rem, 3vh, 2rem); font-weight: 900; letter-spacing: -.02em; }
.tv-top-right { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(8px, 1.2vw, 18px); }
.tv-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(225, 29, 72, .45);
    border-radius: 999px;
    background: rgba(225, 29, 72, .14);
    font-size: clamp(.85rem, 1.9vh, 1.3rem);
    font-weight: 700;
}
.tv-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--tv-line);
    border-radius: 12px;
    color: var(--tv-text);
    background: var(--tv-panel);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.tv-icon-btn:hover { background: var(--tv-hover); }
.tv-icon-btn:active { transform: scale(.95); }
.tv-icon-btn.is-confirmed { border-color: rgba(34, 197, 94, .6); color: #16a34a; }

/* Heading and contest blocks. */
.tv-main { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 28px); min-height: 0; }
.tv-title { margin: 0; font-size: clamp(1.3rem, 3.4vh, 2.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.tv-subtitle { margin: clamp(4px, .7vh, 10px) 0 0; color: var(--tv-muted); font-size: clamp(.85rem, 1.8vh, 1.4rem); font-weight: 500; line-height: 1.3; }
.tv-preview-banner { padding: 10px var(--tv-pad); color: #3b2300; background: #fcd34d; font-size: clamp(.85rem, 1.7vh, 1.2rem); font-weight: 500; text-align: center; }
.tv-contests { display: flex; flex: 1; flex-direction: column; gap: clamp(16px, 3vh, 40px); min-height: 0; }
.tv-contests:focus { outline: none; }
.tv-contest { display: flex; flex: 1; flex-direction: column; gap: clamp(8px, 1.4vh, 18px); min-height: 0; }
.tv-contest-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.tv-contest-head h2 { margin: 0; font-size: clamp(1.15rem, 3.4vh, 2.8rem); font-weight: 800; letter-spacing: -.02em; }
.tv-contest-head span { color: var(--tv-muted); font-size: clamp(.82rem, 1.9vh, 1.4rem); font-weight: 700; }
.tv-contest > [data-live-results-contest] { display: flex; flex: 1; min-height: 0; }

/* Scoreboard rows. */
.tv-board { display: flex; flex: 1; flex-direction: column; min-height: 0; border: 1px solid var(--tv-line); border-radius: clamp(14px, 1.6vh, 24px); overflow: hidden; background: var(--tv-panel); box-shadow: var(--tv-shadow); }
.tv-board-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: clamp(10px, 1.5vh, 20px) clamp(14px, 1.8vw, 32px); border-bottom: 1px solid var(--tv-line); color: var(--tv-muted); font-size: clamp(.8rem, 1.8vh, 1.35rem); font-weight: 700; }
.tv-board-meta span:first-child { color: var(--tv-text); }
.tv-board-meta .tv-board-times { color: var(--tv-muted); }
.tv-board-meta time { font-variant-numeric: tabular-nums; }
.tv-rows { display: flex; flex: 1; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tv-row {
    position: relative;
    display: grid;
    flex: 1;
    grid-template-columns: clamp(28px, 3.2vw, 64px) auto minmax(0, 1fr) auto clamp(92px, 11vw, 230px);
    align-items: center;
    gap: clamp(10px, 1.6vw, 32px);
    min-height: clamp(64px, 9vh, 150px);
    padding: clamp(8px, 1.2vh, 18px) clamp(14px, 1.8vw, 32px);
    border-bottom: 1px solid var(--tv-line);
    box-shadow: inset clamp(4px, .5vw, 8px) 0 var(--c, var(--tv-accent));
}
.tv-row:last-child { border-bottom: 0; }
/* While rows trade places they need a solid face so passing rows never show through each other. */
.tv-row.is-shuffling { background-color: var(--tv-row-solid); }
.tv-row.is-leading { background-image: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--tv-accent)) 16%, transparent), transparent 70%); }
.tv-rank { color: var(--tv-muted); font-size: clamp(1rem, 3vh, 2.6rem); font-weight: 800; text-align: center; }
/* Candidate portrait (or initials), ringed in the campaign color. */
.tv-photo { display: flex; width: clamp(40px, 7vh, 120px); }
.tv-photo .ec-candidate-avatar--tv { width: 100%; height: auto; aspect-ratio: 1; box-shadow: 0 0 0 clamp(2px, .3vh, 4px) var(--tv-row-solid), 0 0 0 clamp(4px, .55vh, 7px) var(--c, var(--tv-accent)); }
.tv-photo .ec-candidate-avatar__initials { font-size: clamp(.85rem, 2.4vh, 2rem); }
.tv-name-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(6px, 1vh, 14px) 14px; min-width: 0; }
.tv-name { overflow-wrap: anywhere; font-size: clamp(1.05rem, 4vh, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
/* Ballot designation sits on its own line between the name and the bar. */
.tv-designation { flex: 1 0 100%; margin-top: calc(clamp(6px, 1vh, 14px) * -0.6); color: var(--tv-muted); font-size: clamp(.78rem, 1.9vh, 1.5rem); font-weight: 500; line-height: 1.2; }
.tv-gap { display: flex; flex-direction: column; align-items: flex-end; margin-top: .15em; color: var(--tv-muted); font-size: .5em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.tv-gap > span { white-space: nowrap; }
.tv-chip { padding: .25em .7em; border-radius: 999px; color: #fff; background: var(--c, var(--tv-accent)); font-size: clamp(.72rem, 1.6vh, 1.2rem); font-weight: 700; }
.tv-bar { flex: 1 0 100%; height: clamp(6px, 1vh, 14px); border-radius: 999px; background: var(--tv-track); overflow: hidden; }
.tv-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--tv-accent)); transition: width .7s cubic-bezier(.22, 1, .36, 1); }
.tv-pct { font-size: clamp(1.35rem, 6.2vh, 5.4rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; text-align: right; }
.tv-pct small { margin-left: .06em; font-size: .5em; font-weight: 800; }
.tv-votes { display: flex; flex-direction: column; align-items: flex-end; color: var(--tv-muted); font-size: clamp(.95rem, 3vh, 2.5rem); font-weight: 800; line-height: 1.05; text-align: right; }
.tv-votes small { font-size: .55em; font-weight: 600; }
/* "votes" and the change since the last count share one line to keep rows short. */
.tv-votes-meta { display: flex; align-items: baseline; gap: .45em; line-height: 1.2; }
.tv-votes-meta .tv-delta { font-size: .55em; }
/* Votes gained since the previous County count. */
.tv-delta { color: var(--tv-gain); font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-delta.is-down { color: var(--tv-muted); }
.tv-board.is-pending .tv-pct,
.tv-board.is-pending .tv-votes { color: var(--tv-muted); }
.tv-board.is-pending .tv-votes { font-size: clamp(.85rem, 2vh, 1.45rem); font-weight: 600; }
.tv-seat-line { position: relative; height: 0; border-top: 2px dashed var(--tv-seat-line); }
.tv-seat-line span { position: absolute; top: 0; right: clamp(14px, 1.8vw, 32px); padding: 2px 10px; border-radius: 999px; color: var(--tv-seat-label-text); background: var(--tv-seat-label); font-size: clamp(.7rem, 1.5vh, 1.1rem); font-weight: 700; transform: translateY(-50%); }
[data-live-results-contest].is-updated .tv-board { animation: tv-arrived 1.8s ease-out; }
@keyframes tv-arrived { from { box-shadow: 0 0 0 4px rgba(225, 29, 72, .45), 0 30px 80px rgba(225, 29, 72, .25); } to { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0), var(--tv-shadow); } }
.tv-note { color: var(--tv-muted); font-size: clamp(1rem, 2.4vh, 1.6rem); }

/* Footer: the semi-official caveat and the County source. */
.tv-foot { color: var(--tv-muted); font-size: clamp(.74rem, 1.6vh, 1.15rem); font-weight: 600; }
.tv-foot p { margin: 0; }
.tv-foot p a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px; font-weight: 800; }

/* Landscape screens (TVs, laptops): lock to one viewport so nothing scrolls. */


/* TV alert: centered over the scoreboard, sized for across the room, leaves on its own. */
.tv .ec-live-toast--tv {
    top: 50%;
    bottom: auto;
    gap: clamp(14px, 1.6vw, 28px);
    width: auto;
    max-width: calc(100vw - 32px);
    padding: clamp(18px, 3vh, 40px) clamp(24px, 3.4vw, 64px);
    border-radius: clamp(16px, 2vh, 28px);
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.tv .ec-live-toast--tv.is-visible { transform: translate(-50%, -50%) scale(1); }
.tv .ec-live-toast--tv .ec-live-dot { width: clamp(12px, 1.6vh, 20px); height: clamp(12px, 1.6vh, 20px); }
.tv .ec-live-toast--tv .ec-live-toast-text { gap: clamp(2px, .5vh, 8px); text-align: left; }
.tv .ec-live-toast--tv .ec-live-toast-text strong { font-size: clamp(1.25rem, 4.4vh, 3.4rem); letter-spacing: -.02em; }
.tv .ec-live-toast--tv .ec-live-toast-text span { font-size: clamp(.95rem, 2.4vh, 1.8rem); }

/* Phones: stack the numbers so names keep their width. */
@media (max-width: 640px) {
    .tv-row { grid-template-columns: 18px auto minmax(0, 1fr) auto; row-gap: 2px; }
    .tv-rank { grid-column: 1; grid-row: 1 / span 2; }
    .tv-photo { grid-column: 2; grid-row: 1 / span 2; width: 42px; }
    .tv-name-wrap { grid-column: 3; grid-row: 1 / span 2; }
    .tv-pct { grid-column: 4; grid-row: 1; }
    .tv-votes { grid-column: 4; grid-row: 2; font-size: .9rem; }
    .tv-votes-meta .tv-delta { font-size: .7rem; }
    .tv-name { font-size: 1.15rem; overflow-wrap: normal; }
    .tv-designation { font-size: .78rem; margin-top: -2px; }
    .tv-gap { font-size: .66rem; }
    .tv-pct { font-size: 1.65rem; }
    .tv-row { min-height: 72px; padding: 12px 14px; gap: 10px; }
    .tv-title { font-size: 1.4rem; }
    /* Phone top bar: smaller logo, compact Live pill, and no full-screen button (phones can't use it). */
    .tv-top { gap: 10px; }
    .tv-logo img { max-height: 26px; }
    .tv-top-right { gap: 6px; }
    .tv-live { gap: 6px; padding: 5px 10px; font-size: .78rem; }
    .tv-top-right [data-tv-fullscreen] { display: none; }
    /* The centered alert is sized for TVs by screen height; phones get a compact card. */
    .tv .ec-live-toast--tv { gap: 12px; width: max-content; max-width: calc(100vw - 48px); padding: 14px 20px; border-radius: 16px; }
    .tv .ec-live-toast--tv .ec-live-dot { width: 10px; height: 10px; }
    .tv .ec-live-toast--tv .ec-live-toast-text strong { font-size: 1.1rem; }
    .tv .ec-live-toast--tv .ec-live-toast-text span { font-size: .85rem; }
    .tv-subtitle { font-size: .9rem; }
    .tv-board.is-pending .tv-votes { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-bar > span,
    .tv-icon-btn { transition: none; }
    [data-live-results-contest].is-updated .tv-board { animation: none; }
    .tv .ec-live-toast--tv,
    .tv .ec-live-toast--tv.is-visible { transform: translate(-50%, -50%); transition: opacity .2s linear; }
}