/* ============================================================
   Texas Electoral Shift Atlas — war-room data terminal
   ============================================================ */
:root{
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;

  --font-display:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;
  --font-body:'Satoshi',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --r-sm:5px; --r-md:9px; --r-lg:14px;
  --ease:cubic-bezier(.4,0,.2,1);

  /* data ramps — fixed across themes so colour reads identically.
     Partisan red/blue is NOT rebrandable: on an election map the hues are the
     legend. The deep D end is pulled to North Compass navy #00305B, which it
     was already within a hair of, and that is as far as brand can reach in. */
  --dem-4:#00305b; --dem-3:#15497f; --dem-2:#3d7ab8; --dem-1:#9dc0dd;
  --rep-1:#f0bcaf; --rep-2:#dd8a71; --rep-3:#c2573a; --rep-4:#98291a; --rep-5:#5d0f08;
  --to-d-3:#0a5b52; --to-d-2:#13968a; --to-d-1:#84cfc5;
  --to-r-1:#f3d19a; --to-r-2:#d9871f; --to-r-3:#8f4c07;
  --mid:#e0e4d9;

  /* intra-party contest ramp — deliberately NOT red/blue, because a primary
     head-to-head is one party arguing with itself. Violet vs. olive. */
  --con-a-3:#3b2a70; --con-a-2:#6249ad; --con-a-1:#a99bda;
  --con-b-1:#cfd9a4; --con-b-2:#8aa63e; --con-b-3:#4b5d17;

  /* sequential ramp for turnout rate (a magnitude, not a direction) —
     brand sage, which stays clear of both the red/blue and violet/olive ramps */
  --seq-1:#eaf0e7; --seq-2:#c3d4bf; --seq-3:#98b193;
  --seq-4:#6c8a68; --seq-5:#456045; --seq-6:#20361f;
}

/* ---------- dark (default) ---------- */
:root,[data-theme="dark"]{
  --bg:#0c120f; --bg-2:#111a15; --bg-3:#18231d; --bg-4:#223029;
  --line:#28372f; --line-2:#3a4d42;
  --ink:#eef3ee; --ink-2:#b0c0b4; --ink-3:#7f9187;
  --accent:#c1a052; --accent-ink:#141007;
  --neutral-fill:#2c3830;
  --map-void:#0a110d; --stroke-map:rgba(4,8,6,.5);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 36px -12px rgba(0,0,0,.7);
  --band:#17251e; --band-line:#2f463a;
  /* A sequential ramp has to run away from the page, not toward it: on a dark
     page high values must get BRIGHTER or the top of the scale disappears. */
  --seq-1:#1e2a22; --seq-2:#334435; --seq-3:#4f6a4e;
  --seq-4:#75946f; --seq-5:#a1bc99; --seq-6:#d6e6cf;
}
/* ---------- light ---------- */
[data-theme="light"]{
  --bg:#f1f5ef; --bg-2:#ffffff; --bg-3:#e4ebe1; --bg-4:#d3dfcf;
  --line:#c4d3bf; --line-2:#a8bda2;
  --ink:#0d2237; --ink-2:#3c5670; --ink-3:#5c7182;
  --accent:#705a25; --accent-ink:#fffdf5;
  --neutral-fill:#e2eade;
  --map-void:#e9efe6; --stroke-map:rgba(255,255,255,.78);
  --shadow:0 1px 2px rgba(13,34,55,.07),0 10px 30px -10px rgba(13,34,55,.18);
  --band:#88a788; --band-line:rgba(10,38,26,.24);
  --seq-1:#eaf0e7; --seq-2:#c3d4bf; --seq-3:#98b193;
  --seq-4:#6c8a68; --seq-5:#456045; --seq-6:#20361f;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  height:100dvh; overflow:hidden;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in oklch,var(--accent) 40%,transparent)}
a:hover{border-bottom-color:var(--accent)}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.hidden{display:none !important}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* ================= MASTHEAD ================= */
.masthead{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) var(--space-5);
  background:var(--band); border-bottom:1px solid var(--band-line);
  z-index:40; flex-wrap:wrap; flex:none;
}
/* The masthead is the one solid brand band, so it carries its own ink scale:
   on sage, navy reads and brass does not. */
[data-theme="light"] .masthead{
  /* all three clear 4.5:1 against sage — checked, not eyeballed */
  --ink:#082139; --ink-2:#123048; --ink-3:#15362b;
  --accent:#0a2b47; --line:rgba(8,33,57,.26);
  --bg-3:rgba(255,255,255,.34); --bg-4:#ffffff;
}
/* NB: no bare `:root .masthead` here — it ties on specificity with the light
   rule above and, coming later, would win in light mode too. */
[data-theme="dark"] .masthead{
  --line:var(--band-line); --bg-3:#1e2f26; --bg-4:#2c4335;
}
.brand{display:flex; align-items:center; gap:var(--space-3); min-width:0}
.logo{width:30px; height:30px; color:var(--accent); flex:none}
.brand-txt h1{
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:800;
  letter-spacing:-.02em; line-height:1.1;
}
.brand-txt p{margin:1px 0 0; font-size:var(--text-xs); color:var(--ink-3); letter-spacing:.01em}
.brand-cred{color:var(--accent); font-weight:600}
.masthead-right{display:flex; align-items:center; gap:var(--space-3)}
.icon-btn{
  width:32px; height:32px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink-2);
  background:var(--bg-3); transition:color .15s,border-color .15s;
}
.icon-btn:hover{color:var(--ink); border-color:var(--line-2)}

.strip{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.strip-cell{
  background:var(--bg-3); padding:5px 11px 6px; min-width:64px; text-align:center;
  transition:background .2s var(--ease);
}
.strip-cell.is-on{background:var(--bg-4)}
.strip-cell.is-void{opacity:.45}
.strip-yr{display:block; font-size:10.5px; color:var(--ink-3); letter-spacing:.07em; font-weight:500}
.strip-val{display:block; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; margin-top:1px}

/* ================= SHELL ================= */
.shell{
  flex:1 1 auto; display:grid; gap:1px; min-height:0;
  grid-template-columns:268px minmax(0,1fr) 318px;
  background:var(--line);
}
.rail{background:var(--bg-2); overflow-y:auto; display:flex; flex-direction:column; scrollbar-width:thin}
/* left rail: control stack is fixed height; the ranked list caps itself and
   scrolls internally so it is never pushed fully below the fold */
.rail-left>.ctl:not(.ctl-grow){flex:none}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:var(--bg-4); border-radius:4px}
.stage{background:var(--bg); display:flex; flex-direction:column; min-width:0; min-height:0}

/* ---------- controls ---------- */
.ctl{padding:13px var(--space-4); border-bottom:1px solid var(--line)}
.ctl-grow{flex:1 1 auto; display:flex; flex-direction:column; min-height:190px; overflow:hidden; border-bottom:0}
.stage-note{margin:6px 0 0; font-size:var(--text-xs); color:var(--ink-3); line-height:1.5; max-width:78ch}
.ctl-h{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; font-weight:700;
  color:var(--ink-3); margin-bottom:7px;
}
.ctl-h span{color:var(--accent); text-transform:none; letter-spacing:.02em}

.seg{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.seg-col{flex-direction:column}
.seg-btn{
  flex:1; padding:5px 10px; font-size:var(--text-sm); font-weight:500; text-align:left;
  background:var(--bg-3); color:var(--ink-2); transition:background .14s,color .14s;
}
.seg:not(.seg-col) .seg-btn{text-align:center}
.seg-btn:hover:not(.is-on){background:var(--bg-4); color:var(--ink)}
.seg-btn.is-on{background:var(--accent); color:var(--accent-ink); font-weight:700}
.note{margin:8px 0 0; font-size:11px; color:var(--ink-3); line-height:1.4}
.sub{margin-top:11px}
.sub-lbl{display:block; font-size:var(--text-xs); color:var(--ink-2); margin-bottom:5px; font-weight:500}
.sel{
  width:100%; padding:7px 9px; font:inherit; font-size:var(--text-sm);
  background:var(--bg-3); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm);
}
.chk{display:flex; align-items:center; gap:8px; margin-top:11px; font-size:var(--text-xs); color:var(--ink-2); cursor:pointer}
.chk input{accent-color:var(--accent); width:14px; height:14px; margin:0}

/* ---------- legend ---------- */
.legend{margin-top:11px}
.legend-bar{display:flex; height:12px; border-radius:2px; overflow:hidden; border:1px solid var(--line); position:relative}
.legend-zero{position:absolute; top:-2px; bottom:-2px; width:1px; background:var(--ink); opacity:.7; transform:translateX(-.5px)}
.legend-bar i{flex:1}
.legend-ax{display:flex; justify-content:space-between; align-items:baseline; gap:6px; margin-top:5px; font-size:10.5px; color:var(--ink-3)}
.legend-ax b:nth-child(2){color:var(--ink-2)}
.legend-ax b{font-family:var(--font-mono); font-weight:500}
.legend-cap{margin-top:6px; font-size:11px; color:var(--ink-3); text-align:center; line-height:1.4}

/* ---------- ranked list ---------- */
.find{
  display:flex; align-items:center; gap:7px; padding:0 9px; margin-bottom:var(--space-3);
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink-3);
}
.find input{
  flex:1; min-width:0; padding:7px 0; font:inherit; font-size:var(--text-sm);
  background:none; border:0; color:var(--ink);
}
.find input::placeholder{color:var(--ink-3)}
.find input:focus{outline:none}
.rank{flex:1; overflow-y:auto; margin:0 calc(var(--space-4) * -1) 0; padding:0 var(--space-4) var(--space-4); scrollbar-width:thin}
.rank::-webkit-scrollbar{width:6px}
.rank::-webkit-scrollbar-thumb{background:var(--bg-4); border-radius:3px}
.rank-row{
  display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:8px;
  width:100%; padding:6px 7px; border-radius:var(--r-sm); text-align:left;
  font-size:var(--text-sm); transition:background .12s;
}
.rank-row:hover{background:var(--bg-3)}
.rank-row.is-sel{background:var(--bg-4); box-shadow:inset 2px 0 0 var(--accent)}
.rank-sw{width:14px; height:14px; border-radius:3px; border:1px solid rgba(0,0,0,.28)}
.rank-nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.rank-v{font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500; color:var(--ink-2)}
.rank-hd{
  font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3);
  padding:var(--space-3) 7px 4px; font-weight:700;
}
.rank-hd:first-child{padding-top:0}

/* ================= STAGE ================= */
.stage-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-6) var(--space-3);
}
#map-title{font-family:var(--font-display); font-size:var(--text-xl); font-weight:800; letter-spacing:-.025em; line-height:1.12}
#map-sub{margin:4px 0 0; font-size:var(--text-sm); color:var(--ink-2)}
.flag{
  flex:none; max-width:290px; padding:9px 12px; border-radius:var(--r-md);
  background:color-mix(in oklch,var(--accent) 12%,var(--bg-2));
  border:1px solid color-mix(in oklch,var(--accent) 34%,transparent);
  font-size:var(--text-xs); color:var(--ink-2); line-height:1.45;
}
.flag b{color:var(--ink); display:block; font-size:var(--text-xs); letter-spacing:.02em; margin-bottom:2px}

.map-wrap{flex:1; position:relative; min-height:0; padding:0 var(--space-4)}
#map{width:100%; height:100%; display:block; touch-action:none}
.unit{stroke:var(--stroke-map); stroke-width:.6; cursor:pointer; transition:fill .38s var(--ease)}
.unit:hover{stroke:var(--ink); stroke-width:1.6}
.unit.is-sel{stroke:var(--accent); stroke-width:2.2}
.unit.is-dim{opacity:.16}
.unit.is-void{fill:var(--neutral-fill)}
.outline{fill:none; stroke:var(--ink-3); stroke-width:1.1; opacity:.55; pointer-events:none}
.cd-lbl{
  font-family:var(--font-mono); font-size:9.5px; font-weight:700; fill:#fff;
  text-anchor:middle; pointer-events:none; paint-order:stroke;
  stroke:rgba(0,0,0,.55); stroke-width:2.6px; stroke-linejoin:round;
}

.tip{
  position:absolute; z-index:30; pointer-events:none; min-width:184px; max-width:246px;
  padding:9px 11px; background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r-md); box-shadow:var(--shadow); font-size:var(--text-xs);
}
.tip-nm{font-weight:700; font-size:var(--text-sm); color:var(--ink); margin-bottom:5px; font-family:var(--font-display)}
.tip-big{font-family:var(--font-mono); font-size:var(--text-lg); font-weight:700; line-height:1.05}
.tip-lbl{font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:700}
.tip-row{display:flex; justify-content:space-between; gap:12px; margin-top:3px; color:var(--ink-2)}
.tip-row b{font-family:var(--font-mono); color:var(--ink); font-weight:500}
.tip-hint{margin-top:7px; padding-top:6px; border-top:1px solid var(--line); color:var(--ink-3); font-size:10.5px}

.skel{position:absolute; inset:0; display:grid; place-items:center; background:var(--bg)}
.skel span{
  width:34px; height:34px; border:2.5px solid var(--line-2); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- timeline ---------- */
.timeline{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-6) var(--space-4);
  border-top:1px solid var(--line);
}
.play{
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); transition:transform .14s var(--ease);
}
.play:hover{transform:scale(1.07)}
.years{flex:1; display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.yr{
  flex:1; padding:9px 4px 10px; background:var(--bg-2); color:var(--ink-2);
  font-family:var(--font-mono); font-size:var(--text-sm); font-weight:500; letter-spacing:-.02em;
  position:relative; transition:background .16s,color .16s;
}
.yr:hover:not(:disabled):not(.is-on){background:var(--bg-4); color:var(--ink)}
.yr.is-on{background:var(--accent); color:var(--accent-ink); font-weight:700}
.yr.is-on:hover{background:var(--accent)}
.yr:disabled{color:var(--ink-3); cursor:not-allowed; background:var(--bg-2)}
.yr small{display:block; font-family:var(--font-body); font-size:9.5px; letter-spacing:.07em; opacity:.7; margin-top:1px; text-transform:uppercase}

/* ================= DETAIL RAIL ================= */
.detail{padding:var(--space-4); flex:1}
.detail-empty{
  height:100%; min-height:200px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--space-3); text-align:center; color:var(--ink-3); padding:var(--space-6) var(--space-4);
}
.detail-empty p{margin:0; font-size:var(--text-xs); max-width:200px; line-height:1.5}

.d-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4)}
.d-nm{font-family:var(--font-display); font-size:var(--text-lg); font-weight:800; letter-spacing:-.02em; line-height:1.12}
.d-meta{margin:3px 0 0; font-size:var(--text-xs); color:var(--ink-3)}
.x-btn{
  width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm);
  color:var(--ink-3); border:1px solid var(--line);
}
.x-btn:hover{color:var(--ink); border-color:var(--line-2)}

.d-hero{padding:var(--space-3); background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--space-4)}
.d-hero-lbl{font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:700}
.d-hero-v{font-family:var(--font-mono); font-size:1.6rem; font-weight:700; line-height:1.05; margin-top:3px; letter-spacing:-.03em}
.d-hero-sub{font-size:var(--text-xs); color:var(--ink-2); margin-top:4px}
.d-bar{display:flex; height:7px; border-radius:99px; overflow:hidden; margin-top:9px; background:var(--bg-4)}
.d-bar i:first-child{background:var(--dem-3)}
.d-bar i:nth-child(2){background:var(--rep-3)}
.d-bar i:nth-child(3){background:var(--ink-3)}

.d-sec{margin-bottom:var(--space-5)}
.d-sec-h{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:700; margin-bottom:var(--space-3)}
.spark{width:100%; height:96px; display:block; overflow:visible}
.spark-ax{stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 3}
.spark-ln{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.spark-dot{stroke:var(--bg-2); stroke-width:1.6}
.spark-t{font-family:var(--font-mono); font-size:9px; fill:var(--ink-3)}

table.d-tbl{width:100%; border-collapse:collapse; font-size:var(--text-xs)}
.d-tbl th{
  text-align:right; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); font-weight:700; padding:0 0 5px; border-bottom:1px solid var(--line);
}
.d-tbl th:first-child{text-align:left}
.d-tbl td{padding:6px 0; border-bottom:1px solid var(--line); text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.d-tbl td:first-child{text-align:left; font-family:var(--font-body); color:var(--ink-2)}
.d-tbl tr.is-on td{color:var(--ink); font-weight:700}
.d-tbl tr.is-on td:first-child{color:var(--ink)}
.d-tbl tr.is-void td{color:var(--ink-3)}
.d-tbl .c{font-size:10px; color:var(--ink-3); font-family:var(--font-body)}

.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{
  font-size:10.5px; padding:3px 7px; border-radius:99px; background:var(--bg-3);
  border:1px solid var(--line); color:var(--ink-2);
}
.chip b{color:var(--ink); font-family:var(--font-mono); font-weight:500}

/* ================= FOOTER ================= */
.foot{
  flex:none; background:var(--bg-2); border-top:1px solid var(--line);
  max-height:38vh; overflow-y:auto;
}
.foot summary{
  list-style:none; cursor:pointer; padding:9px var(--space-5);
  display:flex; align-items:center; gap:8px;
  font-size:var(--text-xs); color:var(--ink-2); font-weight:500;
}
.foot summary::-webkit-details-marker{display:none}
.foot-cred{margin-left:auto; color:var(--ink-3); font-weight:400; letter-spacing:.01em; white-space:nowrap}
.foot-cred b{color:var(--accent); font-weight:600}
.foot summary:hover{color:var(--ink)}
.foot summary svg{transition:transform .18s var(--ease); flex:none; color:var(--ink-3)}
.foot[open] summary svg{transform:rotate(90deg)}
.foot-body{padding:0 var(--space-5) var(--space-5); max-width:110ch}
.foot p{margin:0; font-size:var(--text-xs); color:var(--ink-2); line-height:1.55}
.foot-dim{margin-top:7px !important; color:var(--ink-3) !important}

/* ================= RESPONSIVE ================= */
@media (max-width:1240px){
  .shell{grid-template-columns:244px minmax(0,1fr) 280px}
}
@media (max-width:1080px){
  body{height:auto; overflow:visible}
  .shell{grid-template-columns:244px minmax(0,1fr); grid-template-rows:minmax(520px,1fr) auto}
  .rail-left{grid-row:1}
  .stage{grid-row:1; min-height:520px}
  .rail-right{grid-column:1/-1; grid-row:2; max-height:none}
  .detail-empty{min-height:120px}
  .foot{max-height:none}
}
@media (max-width:860px){
  /* map first on small screens — controls below it, not stacked on top */
  .shell{grid-template-columns:1fr; grid-template-rows:auto auto auto}
  .stage{grid-row:1; grid-column:1; height:68vh; min-height:400px}
  .rail-left{grid-row:2; grid-column:1}
  .rail-right{grid-row:3; grid-column:1}
  .ctl-grow{max-height:340px; border-bottom:1px solid var(--line)}
  .seg-col{display:grid; grid-template-columns:1fr 1fr}
  .seg-col .seg-btn{text-align:center}
  .seg-col .seg-btn:last-child:nth-child(odd){grid-column:1/-1}
  .masthead{gap:var(--space-3)}
  .masthead-right{width:100%; justify-content:space-between}
  .strip{overflow-x:auto; flex:1; -webkit-overflow-scrolling:touch}
  .stage-head{flex-direction:column; padding:var(--space-4) var(--space-4) var(--space-3)}
  .flag{max-width:100%}
  .timeline{padding:var(--space-3) var(--space-4) var(--space-4)}
  .yr{font-size:var(--text-xs); padding:8px 2px}
  .yr small{display:none}
  .rail-right{order:0}
}
@media (max-width:620px){
  .strip{display:none}
  .brand-txt p{display:none}
  .foot-cred{display:none}
  .masthead-right{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- statewide default panel hint ---------- */
.d-hint{display:flex; align-items:flex-start; gap:8px; font-size:var(--text-xs); color:var(--ink-3); line-height:1.5}
.d-hint svg{flex:none; margin-top:1px; color:var(--accent)}

/* ================= ACCESS GATE ================= */
.gate{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:var(--space-5);
  /* The sage band is the strongest brand cue on north-compass.com, so the gate
     is a full field of it with the white card sitting on top. */
  background:var(--band);
}
[data-theme="light"] .gate{
  background-image:radial-gradient(78% 58% at 50% 44%, rgba(255,255,255,.5), transparent 72%);
}
[data-theme="dark"] .gate{
  background-image:radial-gradient(78% 58% at 50% 44%, rgba(136,167,136,.13), transparent 72%);
}
[data-theme="light"] .gate-card{--gate-bad:#a3352b}
[data-theme="dark"] .gate-card{--gate-bad:#f0857a}
.gate.is-out{opacity:0; pointer-events:none; transition:opacity .34s var(--ease)}
.gate-card{
  width:100%; max-width:376px; text-align:center;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:var(--space-8) var(--space-6) var(--space-5);
}
.gate-logo{width:38px; height:38px; color:var(--accent)}
.gate-title{
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:800;
  letter-spacing:-.02em; margin-top:var(--space-4); line-height:1.15;
}
.gate-sub{margin:var(--space-2) 0 0; font-size:var(--text-xs); color:var(--ink-3)}
#gate-form{margin-top:var(--space-6); text-align:left}
.gate-lbl{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--space-2);
}
.gate-field{position:relative; display:flex; align-items:center}
#gate-pw{
  width:100%; padding:11px 42px 11px 12px; font:inherit; font-size:var(--text-base);
  font-family:var(--font-mono); letter-spacing:.04em; color:var(--ink);
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
#gate-pw:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 22%,transparent);
}
.gate-eye{
  position:absolute; right:6px; width:30px; height:30px; display:grid; place-items:center;
  color:var(--ink-3); border-radius:var(--r-sm);
}
.gate-eye:hover{color:var(--ink)}
.gate-go{
  width:100%; margin-top:var(--space-4); padding:11px 14px;
  font-weight:700; font-size:var(--text-sm); letter-spacing:.01em;
  background:var(--accent); color:var(--accent-ink);
  border-radius:var(--r-sm); transition:filter .16s var(--ease);
}
.gate-go:hover{filter:brightness(1.08)}
.gate-go[disabled]{opacity:.62; cursor:default; filter:none}
.gate-msg{
  min-height:1.15rem; margin:var(--space-3) 0 0; font-size:var(--text-xs);
  color:var(--ink-3); line-height:1.4;
}
.gate-msg.is-bad{color:var(--gate-bad); font-weight:600}
.gate-card.is-shake{animation:gate-shake .34s var(--ease)}
@keyframes gate-shake{
  0%,100%{transform:translateX(0)} 18%{transform:translateX(-7px)}
  42%{transform:translateX(6px)} 68%{transform:translateX(-3px)}
}
.gate-foot{
  margin:var(--space-6) 0 0; padding-top:var(--space-4);
  border-top:1px solid var(--line); font-size:var(--text-xs); color:var(--ink-3);
}
.gate-foot b{color:var(--accent); font-weight:600}
@media (prefers-reduced-motion:reduce){
  .gate.is-out{transition:none}
  .gate-card.is-shake{animation:none}
}

/* Sign-out is a two-step: an icon-only misclick would cost the whole view state
   (year, layer, selected county) plus a password re-entry, so the second click
   confirms. Reverts itself after 4s or on blur. */
#signout{gap:6px; transition:color .15s, border-color .15s, width .18s var(--ease)}
#signout .so-label{
  display:none; font-size:11px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
}
#signout.is-arm{
  /* .icon-btn is display:grid, which would stack the label under the icon and
     clip it against the masthead edge — must switch to a row. */
  display:flex; align-items:center; justify-content:center;
  width:auto; padding:0 10px 0 8px; color:var(--accent-ink);
  background:var(--accent); border-color:var(--accent);
}
#signout.is-arm .so-label{display:block}
#signout.is-arm:hover{color:var(--accent-ink); filter:brightness(1.08)}

/* ================= PDF REPORT BUTTON ================= */
.rp-btn{
  display:flex; align-items:center; gap:6px; flex:none; padding:0 11px; height:32px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-3);
  color:var(--ink-2); font:inherit; font-size:var(--text-xs); font-weight:600;
  letter-spacing:.01em; white-space:nowrap;
  transition:color .15s, border-color .15s, background .15s;
}
.rp-btn:hover{color:var(--ink); border-color:var(--line-2); background:var(--bg-4)}
.rp-btn.is-busy{color:var(--accent); border-color:var(--accent); cursor:progress}
.rp-btn.is-busy svg{animation:rp-pulse 1s ease-in-out infinite}
@keyframes rp-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ================= VOTES-NEEDED CALCULATOR ================= */
.calc{flex:none; border-top:1px solid var(--line); background:var(--bg-2)}
.calc.hidden{display:none}
.calc-h{
  display:flex; align-items:center; gap:8px; width:100%; padding:11px var(--space-4);
  background:none; border:0; color:var(--ink-2); font:inherit;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  text-align:left; cursor:pointer; transition:color .15s;
}
.calc-h:hover{color:var(--ink)}
.calc-h span{flex:1}
.calc-h svg:first-child{flex:none; color:var(--accent)}
.calc-chev{flex:none; transition:transform .18s ease}
.calc-h.is-open .calc-chev{transform:rotate(90deg)}
.calc-body{padding:0 var(--space-4) var(--space-4)}
.calc-body.hidden{display:none}
.calc-lead{margin:0 0 12px; font-size:var(--text-xs); color:var(--ink-3); line-height:1.5}
.calc-lead b{color:var(--ink)}
.calc-row{margin-bottom:11px}
.calc-tv{float:right; font-family:var(--font-mono); font-weight:600; color:var(--accent)}
.calc-row input[type=range]{
  width:100%; margin:2px 0 0; accent-color:var(--accent); height:18px;
}
.calc-scale{
  display:flex; justify-content:space-between; margin-top:1px;
  font-size:9.5px; color:var(--ink-3); font-family:var(--font-mono);
}
.calc-hero{
  padding:11px 12px; margin:4px 0 11px; border-radius:var(--r-sm);
  background:var(--bg-3); border:1px solid var(--line);
}
.calc-hero-lbl{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); font-weight:700;
}
.calc-hero-v{
  font-family:var(--font-mono); font-size:26px; font-weight:600; line-height:1.15;
  color:var(--ink); margin-top:3px; letter-spacing:-.01em;
}
.calc-hero-sub{margin-top:4px; font-size:11px; color:var(--ink-3); line-height:1.45}
.calc-tbl{width:100%; border-collapse:collapse; font-size:11px}
.calc-tbl th{
  text-align:left; font-weight:500; color:var(--ink-3); padding:4px 8px 4px 0;
  vertical-align:top; white-space:nowrap; border-top:1px solid var(--line);
}
.calc-tbl td{
  color:var(--ink); padding:4px 0; vertical-align:top;
  border-top:1px solid var(--line); font-family:var(--font-mono); font-size:10.5px;
}
.calc-tbl tr:first-child th, .calc-tbl tr:first-child td{border-top:0}
.calc-note{margin:11px 0 0; font-size:10px; color:var(--ink-3); line-height:1.5}
.calc-none{margin:0; font-size:var(--text-xs); color:var(--ink-3)}
@media (max-width:620px){
  .rp-btn .rp-label{display:none}
  .rp-btn{padding:0 9px}
}