/*
   Monitor MI theme (reskin, Josh 2026-10-13; mockups on the reskin canvas).
   Loaded last on every page, so it layers over each page's own stylesheet without
   rewriting it. Keeps the console character (CRT wordmark, mono console labels, signal
   green, dark instrument panels, faint scanlines) and makes reading easier: a serif for
   headings and big numbers, a larger sans for reading, rounder panels, bigger figures.
   All page text is unchanged.
   Fonts (SIL Open Font License, files and licenses in /fonts): Newsreader, IBM Plex Sans,
   IBM Plex Mono, VT323. Latin subset only.
*/

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/newsreader-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "VT323";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/vt323-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --theme-ground: #0a1315;
    --theme-panel: #101d20;
    --theme-panel-2: #0f1b1e;
    --theme-panel-3: #142a33;
    --theme-line: #22383b;
    --theme-line-2: #2c4a4e;
    --theme-ink: #e9efe9;
    --theme-body: #c4d1cc;
    --theme-muted: #a7b6b1;
    --theme-signal: #73e69b;
    --theme-glow: #8ff0b0;
    --theme-link: #9fdcff;
    --theme-dem: #6ea8ff;
    --theme-rep: #ff7a7a;
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --font-crt: "VT323", ui-monospace, monospace;
    /* the pages' own variables, pointed at the theme */
    --monitor-mono: var(--font-mono);
    --console-ink: var(--theme-ink);
    --console-muted: var(--theme-muted);
    --console-line: var(--theme-line);
    --console-signal: var(--theme-signal);
}

body {
    background-color: var(--theme-ground);
    background-image: repeating-linear-gradient(0deg, rgba(115, 230, 155, 0.025) 0, rgba(115, 230, 155, 0.025) 1px, transparent 1px, transparent 4px);
    color: var(--theme-ink);
    font-family: var(--font-sans);
}

/* ---------- House race page (index.html) ---------- */

.site-brand-wordmark {
    font-family: var(--font-crt);
    font-weight: 400;
    letter-spacing: 0.12em;
}

#race-title-text {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0;
}

.race-context,
.race-meta,
.monitor-rail,
.device-panel-label,
.results-console-label,
.map-console-label,
.panel-module-label,
.district-control-status,
.district-picker-label {
    font-family: var(--font-mono);
}

.district-control-panel,
.district-console-shell > .results-panel,
.district-console-shell > .map-wrapper,
.trust-panel,
.county-stitch-panel {
    border-color: var(--theme-line);
    border-radius: 16px;
    background: var(--theme-panel);
}

.district-console-shell > .map-wrapper {
    background: var(--theme-panel-2);
}

.results-heading,
.trust-heading {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0;
}

.results-heading {
    font-size: 28px;
    line-height: 1.15;
}

.district-control-panel .district-picker-button,
.michigan-overview-button {
    min-height: 44px;
    border-radius: 8px;
    border-color: var(--theme-line-2);
}

.primary-toggle-button {
    min-height: 44px;
    border-radius: 8px;
    font-family: var(--font-mono);
}

.party-label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.candidate {
    border-radius: 12px;
    background: var(--theme-panel-2);
}

#democratic-results .candidate:first-child,
#republican-results .candidate:first-child,
#general-results .candidate:first-child {
    border-radius: 12px;
}

.candidate-name {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
}

.candidate-votes {
    color: var(--theme-body);
    font-size: 13px;
}

.candidate-percent {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0;
}

.candidate-share-track {
    height: 8px;
    border-radius: 4px;
    background: var(--theme-ground);
}

.candidate-share-fill {
    border-radius: 4px;
}

.candidate-affiliation {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.trust-panel,
.trust-panel p,
.source-attribution-list {
    font-family: var(--font-sans);
}

/* ---------- Governor and State Senate pages (office-monitor.html) ---------- */

:root {
    --ink: var(--theme-ink);
    --muted: var(--theme-muted);
    --panel: var(--theme-panel);
    --line: var(--theme-line);
    --signal: var(--theme-signal);
    --background: var(--theme-ground);
}

.office-masthead {
    background: rgba(10, 19, 21, .96);
    border-bottom-color: var(--theme-line);
}

.office-brand-screen {
    border-color: #3f8f5c;
    border-radius: 6px;
    background: #0d2418;
}

.office-brand-screen span,
.site-brand-wordmark {
    color: var(--theme-glow);
}

.office-brand-screen span {
    font: 400 clamp(1.5rem, 2.6vw, 2rem)/1 var(--font-crt);
    letter-spacing: .12em;
}

.office-identity h1 {
    font-family: var(--font-serif);
    font-weight: 600;
}

.office-identity p,
.office-identity #office-channel,
.panel-code,
.signal-pill,
.house-link {
    font-family: var(--font-mono);
}

.panel-code {
    letter-spacing: .14em;
}

.office-control-panel,
.office-map-panel,
.office-shell .money-panel {
    border-color: var(--theme-line);
    border-radius: 16px;
    background: var(--theme-panel);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .28);
}

.office-control-panel > h2,
.result-panel h2,
.source-panel h2,
.map-panel-heading h2,
.office-shell .money-panel .results-heading {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
}

#senate-selector,
#governor-county {
    min-height: 44px;
    border-color: var(--theme-line-2);
    border-radius: 8px;
    background: var(--theme-panel-2);
}

.party-switch button {
    min-height: 44px;
    border-color: var(--theme-line-2);
    border-radius: 8px;
    font-family: var(--font-mono);
    letter-spacing: .06em;
}

.candidate-row {
    padding: .8rem .9rem 1.1rem;
    border-color: var(--theme-line);
    border-radius: 12px;
    background: var(--theme-panel-2);
}

/* The share bar: an 8px rounded track, filled to the share in the party color (the page
   already sets --share and --candidate-color on each row). */
.candidate-row::before {
    inset: auto .9rem .45rem;
    width: auto;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--candidate-color, var(--theme-signal)) var(--share, 0%), var(--theme-ground) var(--share, 0%));
}

.candidate-row .candidate-votes {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
}

.candidate-share {
    font-size: .8rem;
}

.party-name {
    font-weight: 600;
}

.source-list li {
    border-radius: 8px;
}

.office-footer,
.office-footer p {
    font-family: var(--font-sans);
}

/* Money panels (race-preview.js) on every race page: dollar figures a size down from the
   results percentages, so the column keeps room for names. */
.money-panel .candidate-percent.money-figure {
    font-size: 24px;
}

.money-panel .candidate-name {
    font-size: 15px;
}

.money-panel .candidate-votes {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.35;
    color: var(--theme-body);
}

/* ---------- Landing page (hub.html) and the elections portal (home.html) ---------- */

:root {
    --portal-mono: var(--font-mono);
    --portal-tech: var(--font-sans);
    --portal-surface: var(--theme-ground);
    --portal-panel: var(--theme-panel);
    --portal-panel-strong: var(--theme-panel-3);
    --portal-ink: var(--theme-ink);
    --portal-muted: var(--theme-muted);
}

.portal-brand-wordmark {
    color: var(--theme-glow);
    font-family: var(--font-crt);
    font-size: clamp(30px, 6.2vw, 92px);
    font-weight: 400;
    letter-spacing: .14em;
    text-shadow: 0 0 8px rgba(115, 230, 155, .7), 0 0 22px rgba(115, 230, 155, .3);
}

.hub-tile {
    gap: 12px;
    border-color: var(--theme-line);
    border-radius: 18px;
    background: var(--theme-panel);
    box-shadow: none;
}

.hub-tile:hover,
.hub-tile:focus-visible {
    border-color: #3f8f5c;
    background: var(--theme-panel-3);
}

.hub-tile-title {
    color: var(--theme-ink);
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 2.6vw, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
}

.hub-tile-text {
    color: var(--theme-body);
    font-size: 1.1rem;
    line-height: 1.5;
}

/* "Open →" reads as a button (the whole tile stays the link). */
.hub-tile-go {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: auto;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--theme-signal);
    color: #062012;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.hub-money .hub-tile-go {
    align-self: center;
    border: 1px solid #3f8f5c;
    background: transparent;
    color: var(--theme-glow);
}

.hub-status {
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--theme-signal);
}

.hub-quick a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-color: var(--theme-line-2);
    border-radius: 8px;
    color: var(--theme-ink);
}

.hub-quick-label {
    font-family: var(--font-mono);
    letter-spacing: .12em;
}

.hub-footer,
.portal-footer {
    color: var(--theme-muted);
    font-family: var(--font-sans);
}

.portal-mode-button,
.portal-election-button {
    min-height: 44px;
    font-family: var(--font-mono);
}

.portal-mode-switcher,
.portal-election-switcher,
.portal-home-link a {
    border-radius: 10px;
}

.portal-mode-switcher {
    overflow: hidden;
}

.portal-mode-description,
.portal-home-link a {
    font-family: var(--font-mono);
}

/* ---------- Public money pages (money.html) ---------- */

:root {
    --bg: var(--theme-ground);
    --text: var(--theme-ink);
    --panel-strong: var(--theme-panel-3);
}

.money-masthead {
    border-bottom-color: var(--theme-line);
    background: rgba(10, 19, 21, .96);
}

.money-masthead .brand-wordmark {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid #3f8f5c;
    border-radius: 6px;
    background: #0d2418;
    box-shadow: 0 0 14px rgba(115, 230, 155, .25), inset 0 0 10px rgba(115, 230, 155, .12);
    color: var(--theme-glow);
    font-family: var(--font-crt);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: .12em;
    text-shadow: 0 0 8px rgba(115, 230, 155, .7);
}

.section-switcher a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

.money-masthead ~ main h1,
.money-masthead ~ main h2,
.money-masthead ~ main h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0;
}

.money-masthead ~ main h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
}

.money-masthead ~ main h2 {
    font-size: 1.6rem;
}

.money-masthead ~ main h3 {
    font-size: 1.25rem;
}

.money-masthead ~ main .lede {
    color: var(--theme-body);
    font-size: 1.05rem;
}

.card,
.view-option,
.notice,
.table-wrap,
.h2h-side {
    border-radius: 14px;
}

.card .figure,
.h2h-total {
    font-family: var(--font-serif);
    font-weight: 600;
}

.card .figure {
    font-size: 1.75rem;
}

.view-option-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
}

.money-masthead ~ main input,
.money-masthead ~ main select,
.money-masthead ~ main button {
    min-height: 44px;
    border-radius: 8px;
}

.h2h-party,
.tier-tag,
.status {
    font-family: var(--font-mono);
}

/* ---------- About and Support pages ---------- */

.about-masthead .brand-wordmark,
.support-masthead .brand-wordmark,
.about-masthead .brand-wordmark::before,
.about-masthead .brand-wordmark::after,
.support-masthead .brand-wordmark::before,
.support-masthead .brand-wordmark::after {
    font-family: var(--font-crt);
    font-weight: 400;
    letter-spacing: .12em;
}

.about-masthead .brand-wordmark,
.support-masthead .brand-wordmark {
    color: var(--theme-glow);
    font-size: 28px;
}

.about-masthead,
.support-masthead {
    border-bottom-color: var(--theme-line);
}

.channel-label,
.eyebrow,
.console-label {
    font-family: var(--font-mono);
}

.about-masthead ~ main h1,
.about-masthead ~ main h2,
.about-masthead ~ main h3,
.support-masthead ~ main h1,
.support-masthead ~ main h2,
.support-masthead ~ main h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0;
}

.hero-summary {
    color: var(--theme-body);
}

.about-masthead ~ main h1,
.support-masthead ~ main h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    text-transform: none;
}