/* SignalData — v5 look (editor, Oct. 31, 2026): lavender light and deep-violet dark themes, Inter Tight type,
   a slow-moving glow behind every page, hover menus. Loaded last; html.paper / html.gloss keep these rules ahead
   of site.css and glass.css. Brand gradient runs blue → violet → rose. Never brown (editor). */

/* ---------- Tokens ---------- */
html.paper {
  --surface:#f6f4fb; --panel:#ffffff; --stage:#ece8f6; --ink:#1b1230; --muted:#574e6b;
  --line:#e2ddec; --line-strong:#cdc6dc; --chip:#eeeaf7; --track:#ece8f4;
  --accent:#5b3be0; --focus:#5b3be0; --link:#4a2fc4; --lime:#c6b4ff; --lime-ink:#170f2b;
  --tint-lilac:#efeafb; --tint-blue:#e8eefe; --tint-sage:#ece6fb; --tint-peach:#fbe9f0;
  --q0:#ece6fb; --q1:#cdbff5; --q2:#a28be8; --q3:#6f55d0; --q4:#3f2a9a;
  --s1:#4a2fc4; --s2:#7a5be0; --s4:#b9a8ee; --owed:#7a5be0; --badge:#efe7ff; --badge-ink:#3b2486;
  --grad:linear-gradient(95deg,#2457f5 0%,#8a3fd2 52%,#e5336f 100%);
  --glass:rgba(255,255,255,.82);
  --glass-line:rgba(27,18,48,.08);
  --glass-shadow:inset 0 1px 0 #fff, 0 20px 50px -28px rgba(40,20,90,.28);
  --glass-lift:inset 0 1px 0 #fff, 0 30px 64px -26px rgba(40,20,90,.34);
  --btn:var(--grad); --btn-ink:#ffffff;
  --btn-shadow:0 10px 26px -12px rgba(91,59,224,.55);
  --glow-a:rgba(36,87,245,.16); --glow-b:rgba(138,63,210,.14); --glow-c:rgba(229,51,111,.09); --grain:rgba(27,18,48,.9);
  color-scheme: light;
}
html.gloss {
  --surface:#0b0815; --panel:#140e24; --stage:#1d1533; --ink:#f2eef9; --muted:#b8afca;
  --line:#2a2142; --line-strong:#3c3159; --chip:#1d1533; --track:#1f1735;
  --accent:#a58cff; --focus:#a58cff; --link:#b8a3ff; --lime:#c6b4ff; --lime-ink:#170f2b;
  --tint-lilac:#21183a; --tint-blue:#17203d; --tint-sage:#221a3d; --tint-peach:#35192c;
  --q0:#241a40; --q1:#3a2b6b; --q2:#5a45a0; --q3:#8a72d8; --q4:#c4b3ff;
  --s1:#c6b4ff; --s2:#9d86f0; --s4:#78a9ef; --owed:#9d86f0; --badge:#2a1f4a; --badge-ink:#d9ccff;
  --grad:linear-gradient(95deg,#4d7bff 0%,#a067f0 52%,#ff5a8a 100%);
  --glass:linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(20,14,36,.72);
  --glass-line:rgba(242,238,249,.10);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.45);
  --glass-lift:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 72px rgba(0,0,0,.55);
  --btn:var(--grad); --btn-ink:#ffffff;
  --btn-shadow:0 10px 30px -10px rgba(160,103,240,.55);
  --glow-a:rgba(77,123,255,.20); --glow-b:rgba(130,70,255,.22); --glow-c:rgba(255,90,138,.12); --grain:rgba(255,255,255,.9);
  color-scheme: dark;
}

/* ---------- Type ---------- */
html.paper body, html.gloss body {
  font-family: "Inter Tight", "Archivo", Arial, Helvetica, sans-serif; font-size: 15.5px; letter-spacing: -0.003em;
}
html.paper .display, html.gloss .display { font-family: "Inter Tight", Arial, sans-serif; font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
html.paper .h2, html.gloss .h2, html.paper h2, html.gloss h2, html.paper h3, html.gloss h3 { font-family: "Inter Tight", Arial, sans-serif; letter-spacing: -0.03em; }
html.paper .display .hl, html.gloss .display .hl, .grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .09em; -webkit-box-decoration-break: clone; box-decoration-break: clone; /* tight tracking would clip the last letter */
}
html.paper .eyebrow, html.gloss .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .16em; font-weight: 600; }
html.paper .eyebrow.accent, html.gloss .eyebrow.accent { color: var(--accent); }
html.paper .lede, html.gloss .lede { color: var(--muted); }

/* ---------- Living background: three soft glows drifting slowly, a faint grain ---------- */
html.paper body, html.gloss body { background: var(--surface); background-image: none; }
html.paper body::before, html.gloss body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 22%, var(--glow-a), transparent 70%),
    radial-gradient(34vmax 30vmax at 82% 18%, var(--glow-b), transparent 70%),
    radial-gradient(40vmax 32vmax at 60% 88%, var(--glow-c), transparent 72%);
  animation: sd-drift 46s ease-in-out infinite alternate; will-change: transform;
}
/* While the page scrolls the glows hold still, so scrolling never waits on the background (assets/site.js adds .sd-scrolling). */
html.sd-scrolling body::before { animation-play-state: paused; }
html.paper body::after, html.gloss body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  background-image: radial-gradient(var(--grain) .5px, transparent .6px); background-size: 3px 3px;
}
html.gloss body::after { opacity: .05; }
@keyframes sd-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33% { transform: translate3d(4vmax, -3vmax, 0) rotate(6deg); }
  66% { transform: translate3d(-3vmax, 3vmax, 0) rotate(-4deg); }
  100% { transform: translate3d(2vmax, 2vmax, 0) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { html.paper body::before, html.gloss body::before { animation: none; } }
html.theme-fade, html.theme-fade body, html.theme-fade .site-header { transition: background-color .35s ease, color .35s ease; }

/* ---------- Header ---------- */
html.paper .site-header { background: rgba(246,244,251,.74); border-bottom: 1px solid rgba(27,18,48,.07); color: var(--ink); }
html.gloss .site-header { background: rgba(11,8,21,.70); border-bottom: 1px solid rgba(242,238,249,.08); color: var(--ink); }
html.paper .site-header .wrap, html.gloss .site-header .wrap { position: relative; min-height: 64px; gap: 10px 18px; }
html.paper .wordmark .wm b { color: #e5336f; }
html.gloss .wordmark .wm b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.paper .wordmark, html.gloss .wordmark { color: var(--ink); }
html.paper .wordmark .wm-tag { color: var(--muted); } html.gloss .wordmark .wm-tag { color: #9f96b3; }

/* Menu: smaller type; hover or focus opens a panel under the header */
html.paper .site-header .nav, html.gloss .site-header .nav { gap: 2px; font-size: 14px; font-weight: 500; align-items: center; }
.site-header .nv { position: static; }
html.paper .site-header .nv-top, html.gloss .site-header .nv-top {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; color: var(--ink); text-decoration: none;
}
.site-header .nv-top[aria-haspopup]::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .2s; }
.site-header .nv:hover .nv-top, .site-header .nv:focus-within .nv-top { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.site-header .nv:hover .nv-top[aria-haspopup]::after, .site-header .nv:focus-within .nv-top[aria-haspopup]::after { transform: translateY(1px) rotate(225deg); }
.site-header .nv:has([aria-current="page"]) > .nv-top, .site-header .nv-top[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 10px 10px 4px 4px; text-decoration: none; }
.site-header .nv-pop {
  position: absolute; left: 24px; right: 24px; top: calc(100% - 6px); z-index: 70;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; padding: 22px 26px 18px;
  border-radius: 18px; background: var(--panel); border: 1px solid var(--glass-line); box-shadow: var(--glass-lift);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease .08s, transform .16s ease .08s, visibility 0s linear .24s;
}
html.gloss .site-header .nv-pop { background: rgba(20,14,36,.97); }
.site-header .nv:hover .nv-pop, .site-header .nv:focus-within .nv-pop { opacity: 1; visibility: visible; transform: none; transition-delay: .06s, .06s, 0s; }
.site-header .nv-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* keeps the pointer inside on the way down */
.site-header .nv-h { margin: 0 0 6px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.site-header .nv-col { display: grid; align-content: start; gap: 2px; }
.site-header .nv-col a { display: grid; gap: 1px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.site-header .nv-col a:hover, .site-header .nv-col a:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.site-header .nv-col a b { font-size: 14.5px; font-weight: 600; }
.site-header .nv-col a span { font-size: 12.5px; color: var(--muted); }
.site-header .nv-col a[aria-current="page"] b { color: var(--accent); }
.site-header .nv-live { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; background: var(--badge); color: var(--badge-ink); vertical-align: 1px; }
.site-header .nv-all { grid-column: 1 / -1; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; text-decoration: none; color: var(--accent); }

.site-header .nv-pop a[data-nav="ballot"] { display: grid !important; }

/* Search, light switch, Sign in */
html.paper .hdr-search input { background-color: rgba(255,255,255,.7); border-color: var(--line-strong); color: var(--ink); border-radius: 30px; }
html.gloss .hdr-search input { background-color: rgba(255,255,255,.05); border-color: rgba(242,238,249,.14); color: var(--ink); border-radius: 30px; }
html.paper .hdr-search input::placeholder { color: #807796; }
.hdr-theme {
  order: 0; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: transparent; color: var(--ink);
}
.hdr-theme svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hdr-theme .bulb-off { display: none; }
html.gloss .hdr-theme .bulb-on { display: none; } html.gloss .hdr-theme .bulb-off { display: block; }
.hdr-theme:hover { color: var(--accent); }
.hdr-theme:focus { outline: none; } .hdr-theme:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html.paper .site-header .hdr-auth, html.gloss .site-header .hdr-auth { margin-left: 0; }
html.paper .site-header .hdr-signin, html.gloss .site-header .hdr-signin {
  min-height: 38px; padding: 0 16px; border-radius: 30px; border: 0; font-size: 13.5px; font-weight: 600;
  background: var(--ink); color: var(--surface);
}
html.paper .site-header .hdr-signin:hover, html.gloss .site-header .hdr-signin:hover { background: var(--grad); color: #fff; }
html.paper .site-header .preview-flag, html.gloss .site-header .preview-flag { background: var(--badge); color: var(--badge-ink); font-family: "IBM Plex Mono", monospace; border-radius: 6px; }

/* Phones and narrow screens: the menu opens as a list; each section shows its links */
@media (max-width: 860px) {
  .site-header .nv-pop { position: static; display: grid; grid-template-columns: 1fr; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent !important; padding: 0 0 8px 12px; gap: 2px; }
  .site-header .nv-pop::before { display: none; }
  .site-header .nv-h { margin-top: 6px; }
  .site-header .nv-col a span { display: none; }
  .site-header .nv-col a b { font-size: 16px; font-weight: 500; }
  .site-header .nv-all { display: none; }
  html.paper .hdr-menu .nav .nv-top, html.gloss .hdr-menu .nav .nv-top { font-size: 18px; font-weight: 700; padding: 12px 0 4px; border: 0; }
  .site-header .nv-top[aria-haspopup]::after { display: none; }
  html.paper .hdr-menu .nav, html.gloss .hdr-menu .nav { align-items: stretch; }
  html.paper .hdr-menu.open .nav a, html.gloss .hdr-menu.open .nav a { border-bottom: 0; min-height: 40px; }
  .hdr-theme { width: 40px; height: 40px; }
}

/* ---------- Surfaces and controls ---------- */
html.paper .btn, html.gloss .btn { background: var(--btn); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow); border-radius: 30px; }
html.paper .btn:not(.ghost), html.gloss .btn:not(.ghost) { background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), var(--grad); color: #fff; border-color: transparent; }
html.paper .btn.ghost, html.gloss .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
html.paper .chip[aria-pressed="true"], html.gloss .chip[aria-pressed="true"],
html.paper .chip[aria-selected="true"], html.gloss .chip[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
html.paper a:not(.btn):not(.chip):not(.nv-top):hover, html.gloss a:not(.btn):not(.chip):not(.nv-top):hover { text-decoration-color: var(--accent); }
html.paper .panel, html.gloss .panel { border-radius: 18px; }
html.paper .crumbs, html.gloss .crumbs { border-bottom-color: var(--line); }
html.paper ::selection { background: #dcd2ff; } html.gloss ::selection { background: #4b3a86; }
html.paper .auth-new, html.gloss .auth-new { margin: 10px 0 0; }

/* Section heroes (.hx: Florida and state pages) sit on the page's own background in both themes */
html.paper .hx, html.gloss .hx { background: transparent; color: var(--ink); }
html.paper .hx-bg, html.gloss .hx-bg { background: transparent; }
html.paper .hx::after, html.gloss .hx::after { background: none; }
html.gloss .hx .blook-row input { background: rgba(255,255,255,.05); border-color: var(--line-strong); }

/* Early-vote map, glossy (editor, Oct. 31): saturated jewel tones, a sheen on every state, a drop shadow under the map
   and the pies. No hatching, no greyish purple: "within 5 points" is a clear violet. */
.cv { --ev-dem: #2563eb; --ev-rep: #e11d48; --ev-oth: #7c6fa6; --ev-nodata: #ddd6f3;
  --ev-d2: #1d4ed8; --ev-d1: #4f8bff; --ev-e: #8b5cf6; --ev-r1: #fb6f87; --ev-r2: #d6153f; --ev-none: #e4ddf7; }
html.gloss .cv { --ev-dem: #4f8bff; --ev-rep: #ff4d6d; --ev-oth: #9d8fd0; --ev-nodata: #3b3160;
  --ev-d2: #2f6bff; --ev-d1: #6ea0ff; --ev-e: #a07bff; --ev-r1: #ff7a92; --ev-r2: #f0284f; --ev-none: #2c2448; }
/* One shadow, on its own layer (will-change) so the browser paints it once instead of on every scroll frame. */
.cv.ev-on .cv-svg { filter: drop-shadow(0 12px 18px rgba(46, 22, 120, .2)); overflow: visible; will-change: transform; }
html.gloss .cv.ev-on .cv-svg { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); }
.cv.ev-on .cv-st path { stroke: rgba(255, 255, 255, .85); stroke-width: 1.1; transition: filter .2s; }
html.gloss .cv.ev-on .cv-st path { stroke: rgba(11, 8, 21, .9); }
.cv.ev-on .cv-st:hover path, .cv.ev-on .cv-st:focus-visible path { filter: brightness(1.12) saturate(1.1); stroke: #fff; stroke-width: 2.4; }
.ev-gloss path { fill: url(#ev-sheen); stroke: none; }
.ev-pie-rim { stroke: #fff; stroke-width: 1.4; }
html.gloss .ev-pie-rim { stroke: rgba(255, 255, 255, .7); }
.cv-legend i.ev-d2, .cv-legend i.ev-d1, .cv-legend i.ev-e, .cv-legend i.ev-r1, .cv-legend i.ev-r2, .cv-legend i.ev-none {
  background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.05) 50%, rgba(0,0,0,.12));
  box-shadow: 0 1px 3px rgba(20, 10, 50, .3); border-radius: 4px; }
.er-f { box-shadow: 0 1px 3px rgba(20, 10, 50, .25); border-radius: 4px; overflow: hidden; }
.er-f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 55%); pointer-events: none; }
.er-f { position: relative; }

/* Every-state table and FAQ (/elections/2026/) */
table.ev-all { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.ev-all th, table.ev-all td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.ev-all .r { text-align: right; font-variant-numeric: tabular-nums; }
table.ev-all thead th { font-size: 12.5px; vertical-align: bottom; white-space: normal; line-height: 1.25; }
table.ev-all th, table.ev-all td { padding: 7px 6px; }
table.ev-all .r { font-size: 14px; }
@media (max-width: 1100px) { table.ev-all .ev-of22 { display: none; } }
table.ev-all .th-sort { all: unset; cursor: pointer; font-weight: 600; }
table.ev-all .th-sort[data-dir="desc"]::after { content: " ↓"; } table.ev-all .th-sort[data-dir="asc"]::after { content: " ↑"; }
table.ev-all tbody tr:hover { background: color-mix(in srgb, var(--lime) 18%, transparent); }
table.ev-all sup { color: var(--accent, #8a3fd2); margin-left: 3px; }
tr.evt-na { color: var(--muted); }
.ev-of22 { display: inline-block; width: 46px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); margin-right: 7px; vertical-align: 1px; overflow: hidden; }
.ev-of22 i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.ev-spark { display: block; }
.ev-spark .sp-l { fill: none; stroke: #8a3fd2; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ev-spark .sp-a { fill: rgba(138, 63, 210, .14); }
.ev-spark .sp-d { fill: #e5336f; }
html.gloss .ev-spark .sp-l { stroke: #c6b4ff; } html.gloss .ev-spark .sp-a { fill: rgba(198, 180, 255, .14); }
.ev-faq-i { border-bottom: 1px solid var(--line); padding: 12px 0; }
.ev-faq-i summary { cursor: pointer; font-weight: 600; font-size: 17px; }
.ev-faq-i p { margin: 8px 0 2px; max-width: 70ch; color: var(--muted); }
/* National bars on the early-vote map: violet tones with the same gloss (was green) */
i.evn-mail { background: #5b2bd6; } i.evn-inp { background: #a78bfa; }
html.gloss i.evn-mail { background: #8b5cf6; } html.gloss i.evn-inp { background: #c6b4ff; }
.evn-prog i, .evn-party > div { background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.04) 55%, rgba(0,0,0,.1)); }
.evn-prog, .evn-party { box-shadow: 0 2px 6px rgba(46, 22, 120, .18); }
table.ev-all .th-sort { white-space: normal; display: inline-block; max-width: 8.5em; text-align: inherit; }

/* Reveal on scroll, quicker (editor, Oct. 31: delayed loading while scrolling). motion.js now reveals a block well before it
   reaches the screen; the fade is short and the stagger small, so nothing is still appearing when it scrolls into view. */
html.mo .mo-r.mo-in { transition: opacity .35s var(--mo-out), transform .35s var(--mo-out); transition-delay: calc(var(--mo-i, 0) * 30ms); }
html.mo:not(.mo-off) .mo-r { transform: translateY(8px); }
html.mo .mo-bar.mo-in { transition: clip-path .7s var(--mo-out); transition-delay: calc(60ms + var(--mo-i, 0) * 25ms); }
.cv.ev-on p.ev-more { display: block; margin: 10px 0 0; font-weight: 600; }
