/* ============================================================
   Election Night Simulator (/simulator) — full-bleed broadcast app.
   Self-contained, theme-aware under the .ei-sim-* namespace. Inspired by
   electionenjoyer.com + NYT election night. Enqueued only on /simulator.
   Colors are driven by CSS variables: a dark "broadcast" palette by default,
   a light palette under [data-theme="light"] so the app follows the site theme.
   ============================================================ */

.ei-simulator-page { margin: 0; padding: 0; background: var(--ei-bg, #0a1426); }
.ei-simulator-page .wp-block-post-content,
.ei-simulator-page .entry-content { max-width: none; margin: 0; }

/* ---- palette (dark = default broadcast) ---- */
.ei-sim-root {
  --d: #4f86e8; --d-deep: #1c3c78; --r: #e0524f; --r-deep: #9e1c1c; --ind: #9a6fd0;
  --d-txt: #8fb3ff; --r-txt: #ff9a9a; --accent: #ffd35b;
  --bg: #0a1426; --deck1: #0d1d39; --deck2: #0a1426;
  --panel: #122a4e; --panel2: #0f2143; --rail-bg: #0d1d39;
  --map1: #0e2348; --map2: #0a1426; --empty: #2a3550; --empty2: #27314c;
  --line: rgba(255,255,255,.09); --txt: #eaf1fb; --muted: #94abce;
  --btn-bg: #16315a; --chip-bg: #0a1830; --hover: rgba(255,255,255,.06);
  --title: linear-gradient(92deg, #8fb3ff, #fff 40%, #ffb3b1);
  display: block; min-height: 78vh; background: var(--bg); color: var(--txt);
  font-feature-settings: "tnum" 1; position: relative;
}
/* ---- light palette ---- */
[data-theme="light"] .ei-sim-root {
  --d-txt: #1c4fb0; --r-txt: #c5332f; --accent: #b07b00;
  --bg: #eef2f8; --deck1: #ffffff; --deck2: #eef3f9;
  --panel: #ffffff; --panel2: #f4f7fc; --rail-bg: #f8fafd;
  --map1: #e9eff8; --map2: #dde6f2; --empty: #cdd8e7; --empty2: #d2dce9;
  --line: rgba(20,42,72,.14); --txt: #142544; --muted: #5b7196;
  --btn-bg: #eaf0f8; --chip-bg: #ffffff; --hover: rgba(20,42,72,.05);
  --title: linear-gradient(92deg, #1c4fb0, #142544 42%, #c5332f);
}
.ei-sim-root * { box-sizing: border-box; }
.ei-sim-boot, .ei-sim-fatal {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; min-height: 70vh; color: var(--muted);
}
.ei-sim-fatal p { margin: .2rem; }
.ei-sim-fatal__detail { font-size: .9rem; color: var(--txt); font-family: monospace; white-space: pre-wrap; word-break: break-word; max-width: 500px; }
.ei-sim-fatal__actions { display: flex; gap: .6rem; margin-top: 1rem; }

/* ---------- start screen ---------- */
.ei-sim-start { max-width: 920px; margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 1.25rem 4rem; display: flex; flex-direction: column; gap: 2rem; }
.ei-sim-start__hero { text-align: center; }
.ei-sim-start__eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; margin: 0 0 .5rem; }
.ei-sim-start__title { font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1.14; padding-bottom: .08em; margin: 0 0 .85rem; font-weight: 850; background: var(--title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ei-sim-start__lead { color: var(--muted); font-size: 1.06rem; max-width: 640px; margin: 0 auto; line-height: 1.6; }
.ei-sim-start__scen h3, .ei-sim-start__pick h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .8rem; }
.ei-sim-start__presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.ei-sim-start__preset { display: flex; flex-direction: column; gap: .2rem; padding: .9rem .7rem; cursor: pointer; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; color: var(--txt); text-align: left; transition: border-color .15s, background .15s, transform .1s; }
.ei-sim-start__preset:hover { transform: translateY(-1px); border-color: var(--accent); }
.ei-sim-start__preset.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ei-sim-start__preset b { font-size: 1rem; }
.ei-sim-start__preset span { color: var(--muted); font-size: .8rem; }
.ei-sim-start__slider { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.ei-sim-start__slabel { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.ei-sim-start__slider input[type=range] { flex: 1; accent-color: var(--accent); }
.ei-sim-start__sval { font-weight: 800; min-width: 4ch; text-align: right; }
.ei-sim-start__go { align-self: center; margin: .5rem 0 1rem; padding: 1rem 2.4rem; cursor: pointer; font-size: 1.15rem; font-weight: 800; color: #0a1426; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffe08a, #ffd35b); box-shadow: 0 8px 26px rgba(255,211,91,.32); transition: transform .12s, box-shadow .15s; }
.ei-sim-start__go:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255,211,91,.45); }
.ei-sim-start__pick { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.ei-sim-start__search { width: 100%; padding: .85rem 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--txt); font-size: .95rem; }
.ei-sim-start__results { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin-top: .8rem; }
.ei-sim-start__result { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem .8rem; cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: 9px; color: var(--txt); text-align: left; }
.ei-sim-start__result:hover { background: var(--panel2); border-color: var(--accent); }
.ei-sim-start__result em { color: var(--muted); font-style: normal; font-size: .78rem; white-space: nowrap; }
.ei-sim-start__empty { color: var(--muted); grid-column: 1/-1; }

/* ---------- national board ---------- */
.ei-sim-board { display: flex; flex-direction: column; min-height: 78vh; }
.ei-sim-deck { padding: 1rem clamp(1rem, 3vw, 2rem) .6rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--deck1), var(--deck2)); }
.ei-sim-deck__needles { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.2rem; align-items: center; }
.ei-sim-needle { text-align: center; }
.ei-sim-needle__head { display: flex; align-items: baseline; justify-content: center; gap: .6rem; }
.ei-sim-needle__label { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; }
.ei-sim-needle__verbal { font-size: .82rem; font-weight: 700; }
.ei-sim-needle__verbal.is-d { color: var(--d-txt); } .ei-sim-needle__verbal.is-r { color: var(--r-txt); } .ei-sim-needle__verbal.is-t { color: var(--accent); }
.ei-sim-needle__svg { width: 100%; max-width: 300px; height: auto; }
.ei-sim-needle__band { opacity: .9; }
.ei-sim-needle__tick { stroke: var(--muted); stroke-width: 2; }
.ei-sim-needle__ptr { stroke: var(--txt); stroke-width: 3.5; stroke-linecap: round; transition: all .35s cubic-bezier(.34,1.4,.5,1); }
.ei-sim-needle__hub { fill: var(--txt); }
.ei-sim-needle__seats { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: .2rem; font-weight: 800; }
.ei-sim-needle__seats .is-d { color: var(--d-txt); } .ei-sim-needle__seats .is-r { color: var(--r-txt); }
.ei-sim-needle__win { color: var(--muted); font-weight: 600; font-size: .78rem; }
.ei-sim-govbar { min-width: 200px; }
.ei-sim-govbar__t { font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; margin-bottom: .35rem; }
.ei-sim-govbar__bar { height: 12px; border-radius: 999px; background: var(--r-deep); overflow: hidden; }
.ei-sim-govbar__bar span { display: block; height: 100%; background: var(--d); }
.ei-sim-govbar__n { display: flex; justify-content: space-between; margin-top: .3rem; font-weight: 700; font-size: .85rem; }
.ei-sim-govbar__n .is-d { color: var(--d-txt); } .ei-sim-govbar__n .is-r { color: var(--r-txt); }

.ei-sim-transport { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.ei-sim-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.05rem; padding: .3rem .7rem; border-radius: 8px; background: var(--chip-bg); border: 1px solid var(--line); min-width: 9.5ch; text-align: center; }
.ei-sim-btn { padding: .5rem .9rem; cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--btn-bg); color: var(--txt); font-weight: 700; font-size: .85rem; white-space: nowrap; flex: none; }
.ei-sim-btn:hover { border-color: var(--accent); }
.ei-sim-btn--play { background: linear-gradient(180deg, #ffe08a, #ffd35b); color: #0a1426; border: 0; min-width: 5.5rem; }
.ei-sim-btn--play.is-playing { background: var(--btn-bg); color: var(--txt); border: 1px solid var(--line); }
.ei-sim-btn--ghost { background: transparent; }
.ei-sim-speed { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ei-sim-speed__b { padding: .5rem .5rem; cursor: pointer; background: transparent; color: var(--muted); border: 0; font-weight: 700; font-size: .8rem; }
.ei-sim-speed__b.is-active { background: var(--btn-bg); color: var(--txt); }
/* Comprehensive playback-speed control (replaces the ½×–32× button row): a single
   row (matching the transport buttons' height) — fine 0.1×–32× slider with range
   labels + live readout + quick-jump presets. */
.ei-sim-speedslider { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--btn-bg); }
.ei-sim-speedslider__ic { font-size: .8rem; opacity: .7; }
.ei-sim-speedslider__end { font-size: .62rem; font-weight: 700; color: var(--muted); }
.ei-sim-speedslider__range { width: 84px; accent-color: var(--accent); cursor: pointer; }
.ei-sim-speedslider__v { font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; min-width: 3.6ch; text-align: right; }
.ei-sim-speedslider__presets { display: flex; gap: .2rem; margin-left: .1rem; }
.ei-sim-speedslider__preset { padding: .15rem .35rem; font-size: .68rem; font-weight: 800; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; line-height: 1.1; }
.ei-sim-speedslider__preset:hover { border-color: var(--accent); color: var(--txt); }
.ei-sim-speedslider__preset.is-active { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: var(--txt); }
.ei-sim-scen { padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--btn-bg); color: var(--txt); font-weight: 700; }
.ei-sim-modetag { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); }
.ei-sim-modetag.is-proj { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ei-sim-modetag.is-sim { color: var(--d-txt); border-color: var(--d-txt); background: color-mix(in srgb, var(--d-txt) 10%, transparent); }

/* legislatures wall */
.ei-sim-legtoggle { display: block; width: 100%; text-align: left; padding: .7rem clamp(1rem,3vw,2rem); cursor: pointer; background: var(--deck1); color: var(--accent); border: 0; border-bottom: 1px solid var(--line); font-weight: 800; font-size: .85rem; letter-spacing: .03em; }
.ei-sim-legwall { padding: 1rem clamp(1rem,3vw,2rem); border-bottom: 1px solid var(--line); background: var(--rail-bg); }
.ei-sim-legwall__hint { color: var(--muted); font-size: .82rem; margin-bottom: .8rem; }
.ei-sim-legwall__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.ei-sim-legcell { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .65rem; }
.ei-sim-legcell__h { font-weight: 800; font-size: .82rem; display: flex; justify-content: space-between; }
.ei-sim-legcell__h span { color: var(--muted); font-weight: 600; }
.ei-sim-legcell__bar { height: 7px; border-radius: 999px; background: var(--r-deep); overflow: hidden; margin: .4rem 0 .3rem; }
.ei-sim-legcell__bar span { display: block; height: 100%; background: var(--d); }
.ei-sim-legcell__p { font-weight: 800; font-size: .78rem; } .ei-sim-legcell__p.is-d { color: var(--d-txt); } .ei-sim-legcell__p.is-r { color: var(--r-txt); }

/* main: map + rail. Fixed-height row so the live feed scrolls INTERNALLY and
   never reflows the map as calls come in. */
.ei-sim-main { display: grid; grid-template-columns: 1fr 340px; gap: 0; height: clamp(460px, 72vh, 980px); min-height: 0; }
.ei-sim-mapcol { display: flex; flex-direction: column; padding: .8rem clamp(.8rem,2vw,1.4rem); min-width: 0; }
.ei-sim-tabs { display: flex; gap: .35rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.ei-sim-tabs__b { padding: .45rem .9rem; cursor: pointer; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 700; font-size: .85rem; }
.ei-sim-tabs__b.is-active { background: var(--btn-bg); color: var(--txt); border-color: var(--accent); }
.ei-sim-vseg { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ei-sim-vseg__b { padding: .42rem .7rem; cursor: pointer; background: transparent; color: var(--muted); border: 0; font-weight: 700; font-size: .8rem; }
.ei-sim-vseg__b.is-active { background: var(--btn-bg); color: var(--txt); }
.ei-sim-map { position: relative; flex: 1; min-height: 420px; background: radial-gradient(120% 120% at 50% 0%, var(--map1), var(--map2)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ei-sim-map__svg { width: 100%; height: 100%; display: block; }
.ei-sim-unit { stroke: var(--line); stroke-width: .4; cursor: pointer; transition: opacity .25s, fill .25s; }
.ei-sim-unit:hover { stroke: var(--txt); stroke-width: 1; }
.ei-sim-mesh { fill: none; stroke: var(--muted); stroke-width: .6; pointer-events: none; opacity: .6; }

/* right rail */
.ei-sim-rail { border-left: 1px solid var(--line); background: var(--rail-bg); display: flex; flex-direction: column; min-height: 0; }
.ei-sim-rail h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0; padding: .8rem 1rem .4rem; }
.ei-sim-ticker { padding: 1.1rem 1.1rem 1rem; border-bottom: 1px solid var(--line); }
.ei-sim-ticker__title { margin: 0 0 .75rem !important; padding: 0 !important; line-height: 1.2 !important; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
/* Popular-vote share bar + rows */
.ei-sim-pv__bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--line); margin: .1rem 0 .6rem; }
.ei-sim-pv__bar i { display: block; height: 100%; transition: width .3s ease; }
.ei-sim-pv__bar .is-d { background: var(--d-txt); } .ei-sim-pv__bar .is-r { background: var(--r-txt); } .ei-sim-pv__bar .is-o { background: #7a8aa0; }
/* lab column shrinks below content (minmax 0) + ellipsis so full candidate
   names ("Franklin D. Roosevelt") never push the % / vote columns out. */
.ei-sim-pv__row { display: grid; grid-template-columns: auto minmax(0, auto) 1fr auto; align-items: baseline; gap: .5rem; padding: .14rem 0; font-variant-numeric: tabular-nums; }
.ei-sim-pv__dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.ei-sim-pv__row.is-d .ei-sim-pv__dot { background: var(--d-txt); } .ei-sim-pv__row.is-r .ei-sim-pv__dot { background: var(--r-txt); } .ei-sim-pv__row.is-o .ei-sim-pv__dot { background: #7a8aa0; }
.ei-sim-pv__lab { font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ei-sim-pv__row.is-d .ei-sim-pv__lab { color: var(--d-txt); } .ei-sim-pv__row.is-r .ei-sim-pv__lab { color: var(--r-txt); } .ei-sim-pv__row.is-o .ei-sim-pv__lab { color: #7a8aa0; }
.ei-sim-pv__pct { font-size: 1.15rem; font-weight: 850; }
.ei-sim-pv__v { color: var(--muted); font-weight: 600; font-size: .82rem; text-align: right; }
.ei-sim-ticker__meta { color: var(--muted); font-size: .78rem; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.ei-sim-key { border-bottom: 1px solid var(--line); }
.ei-sim-key__list { display: flex; flex-direction: column; }
.ei-sim-key__row { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; padding: .4rem 1rem; cursor: pointer; background: transparent; border: 0; color: var(--txt); text-align: left; font-size: .84rem; }
.ei-sim-key__row:hover { background: var(--hover); }
.ei-sim-key__nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ei-sim-key__pi { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.ei-sim-key__m { font-weight: 800; min-width: 5ch; text-align: right; } .ei-sim-key__m.is-d { color: var(--d-txt); } .ei-sim-key__m.is-r { color: var(--r-txt); }
.ei-sim-feed { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.ei-sim-feed__list { overflow-y: auto; padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .45rem; }
.ei-sim-feed__item { font-size: .82rem; line-height: 1.35; padding: .4rem .55rem; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); animation: eisimIn .3s ease; }
.ei-sim-feed__item.is-flip { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset; }
.ei-sim-feed__item.is-close { background: transparent; border-style: dashed; color: var(--muted); }
@keyframes eisimIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ei-sim-call { font-weight: 850; font-size: .72rem; letter-spacing: .03em; padding: .08rem .4rem; border-radius: 5px; margin-right: .35rem; }
.ei-sim-call--dem { background: var(--d-deep); color: #cfe0ff; } .ei-sim-call--rep { background: var(--r-deep); color: #ffd9d8; } .ei-sim-call--ind { background: #3d2a63; color: #e6d8ff; }
.ei-sim-call--close { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.ei-sim-call--chamber { background: #f0b429; color: #1a1100; }
.ei-sim-feed__item.is-chamber { background: color-mix(in srgb, #f0b429 16%, var(--panel2)); border-color: #f0b429; font-size: .9rem; }
.ei-sim-feed__item.is-chamber b { font-weight: 850; }
.ei-sim-call__m { color: var(--muted); font-weight: 700; float: right; }

/* ---------- single-race night ---------- */
.ei-sim-race { display: flex; flex-direction: column; min-height: 78vh; padding: 1rem clamp(1rem,3vw,2rem) 2rem; }
.ei-sim-race__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ei-sim-race__title { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0; font-weight: 850; }
.ei-sim-race__clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--muted); }
.ei-sim-race__body { display: grid; grid-template-columns: 380px 1fr; gap: 1.4rem; height: clamp(460px, 72vh, 980px); min-height: 0; }
.ei-sim-race__left { display: flex; flex-direction: column; gap: 1rem; }
.ei-sim-race__pin { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.ei-sim-race__bars { display: flex; flex-direction: column; gap: .7rem; }
.ei-sim-rbar { background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: .7rem .85rem; transition: border-color .2s; }
.ei-sim-rbar.is-lead { border-color: var(--muted); }
.ei-sim-rbar.is-won { box-shadow: 0 0 0 1px currentColor inset; }
.ei-sim-rbar.is-d { color: var(--d); } .ei-sim-rbar.is-r { color: var(--r); } .ei-sim-rbar.is-ind { color: var(--ind); }
.ei-sim-rbar__top { display: flex; justify-content: space-between; align-items: baseline; }
.ei-sim-rbar__name { font-weight: 800; color: var(--txt); }
.ei-sim-rbar__pct { font-weight: 850; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ei-sim-rbar__track { height: 9px; border-radius: 999px; background: var(--empty); overflow: hidden; margin: .45rem 0 .3rem; }
.ei-sim-rbar__track span { display: block; height: 100%; background: currentColor; transition: width .3s; }
.ei-sim-rbar__votes { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.ei-sim-race__problabel { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .35rem; }
.ei-sim-race__probbar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; font-size: .78rem; font-weight: 800; }
.ei-sim-race__probbar .is-d { background: var(--d-deep); color: #cfe0ff; display: flex; align-items: center; justify-content: center; transition: width .3s; }
.ei-sim-race__probbar .is-r { background: var(--r-deep); color: #ffd9d8; display: flex; align-items: center; justify-content: center; transition: width .3s; }
.ei-sim-race__call { font-weight: 850; padding: .7rem .9rem; border-radius: 10px; text-align: center; }
.ei-sim-race__call.is-dem { background: var(--d-deep); color: #cfe0ff; } .ei-sim-race__call.is-rep { background: var(--r-deep); color: #ffd9d8; } .ei-sim-race__call.is-ind { background: #3d2a63; color: #e6d8ff; }
.ei-sim-race__feed { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; padding-right: .2rem; }
.ei-sim-race__feeditem { font-size: .78rem; color: var(--muted); padding: .3rem .4rem; border-bottom: 1px solid var(--line); animation: eisimIn .25s ease; }
.ei-sim-race__cty { font-weight: 700; color: var(--txt); }
.ei-sim-race__win.is-dem { color: var(--d-txt); } .ei-sim-race__win.is-rep { color: var(--r-txt); } .ei-sim-race__win.is-ind { color: var(--ind); }
.ei-sim-race__right { min-width: 0; }
.ei-sim-race__map { position: relative; height: 100%; min-height: 420px; background: radial-gradient(120% 120% at 50% 0%, var(--map1), var(--map2)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ei-sim-race__svg { width: 100%; height: 100%; display: block; }
.ei-sim-county { stroke: #fff; stroke-width: .5; stroke-linejoin: round; transition: opacity .3s, fill .3s; }
.ei-sim-county:hover { stroke: var(--txt); stroke-width: 1.2; }
/* vintage district outline over the clipped county fill (historical House races)
   — styled like the standard map mesh so these maps match the other race pages
   (subtle muted boundary, not a heavy dark ring). */
.ei-sim-race__cdoutline { fill: none; stroke: var(--muted); stroke-width: .8; stroke-linejoin: round; opacity: .6; pointer-events: none; }
.ei-sim-race__nomap, .ei-sim-race__err { color: var(--muted); padding: 2rem; text-align: center; }
/* synthesized-county disclaimer under statewide historical race maps */
.ei-sim-race__estnote { color: var(--muted); font-size: .76rem; line-height: 1.45; margin: .5rem 0 0; }

/* zoom controls (reused core.mapZoom): keep readable on the dark map only */
[data-theme="dark"] .ei-sim-map .ei-fc-zoomctl,
[data-theme="dark"] .ei-sim-race__map .ei-fc-zoomctl { filter: invert(1) hue-rotate(180deg); }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .ei-sim-main { grid-template-columns: 1fr; height: auto; }
  .ei-sim-race__body { height: auto; }
  .ei-sim-rail { border-left: 0; border-top: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; }
  .ei-sim-rail .ei-sim-ticker, .ei-sim-rail .ei-sim-key, .ei-sim-rail .ei-sim-feed { flex: 1 1 280px; }
  .ei-sim-race__body { grid-template-columns: 1fr; }
  .ei-sim-deck__needles { grid-template-columns: 1fr 1fr; }
  .ei-sim-govbar { grid-column: 1/-1; }
}
@media (max-width: 680px) {
  .ei-sim-start__presets { grid-template-columns: repeat(2, 1fr); }
  .ei-sim-start__results { grid-template-columns: 1fr; }
  .ei-sim-deck__needles { grid-template-columns: 1fr; }
}

/* ============================================================
   v2 overrides — viewport-fit board, scrollable feed, NYT-style
   single-race results, crisper borders, independents.
   ============================================================ */

/* The board/race height is set by JS (fitViewport) to fill the screen below the
   header; main/body flex-fill so the live feed scrolls INTERNALLY (card stays put). */
.ei-sim-board, .ei-sim-race { min-height: 560px; }
.ei-sim-main { flex: 1; min-height: 0; height: auto; }
.ei-sim-race__body { flex: 1; min-height: 0; height: auto; }
.ei-sim-legwall { max-height: 38vh; overflow-y: auto; }

/* live feed = a contained, scrollable card (called races never push the map) */
.ei-sim-feed { flex: 1; min-height: 0; }
.ei-sim-feed__list { flex: 1; min-height: 0; overflow-y: auto; }

/* crisper map borders: faint district lines + a clear white state mesh */
/* District borders — match the /forecasts map (solid white, .5). */
.ei-sim-unit { stroke: #fff; stroke-width: .5; stroke-linejoin: round; }
.ei-sim-mesh { opacity: 1; }
.ei-sim-mesh--state { stroke: rgba(255,255,255,.9); stroke-width: 1.1; stroke-linejoin: round; }
[data-theme="light"] .ei-sim-mesh--state { stroke: rgba(255,255,255,.95); }
.ei-sim-county { fill: var(--empty2); }

/* ---- single-race NYT results card ---- */
.ei-sim-race__winner { display: flex; flex-direction: column; gap: .12rem; padding: .8rem 1rem; border-radius: 12px; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.ei-sim-race__winner.is-dem { background: linear-gradient(135deg, #2a5db0, #16315a); }
.ei-sim-race__winner.is-rep { background: linear-gradient(135deg, #c5392f, #7c1512); }
.ei-sim-race__winner.is-ind { background: linear-gradient(135deg, #7a4fb5, #4d1a7a); }
.ei-sim-race__wtag { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; opacity: .95; }
.ei-sim-race__wcheck { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(255,255,255,.28); font-size: .68rem; }
.ei-sim-race__wname { font-weight: 850; font-size: 1.28rem; line-height: 1.22; margin-top: .15rem; }
.ei-sim-race__wsub { font-size: .76rem; opacity: .85; margin-top: .15rem; }

.ei-sim-race__card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
/* The card / win-prob / customize are fixed-size; only the county-calls feed scrolls,
   so the results card never squishes and clips its second candidate. */
.ei-sim-race__winner, .ei-sim-race__card, .ei-sim-race__prob, .ei-sim-race__custom, .ei-sim-race__feedlabel { flex-shrink: 0; }
.ei-sim-race__cardhead { display: flex; justify-content: space-between; align-items: center; padding: .65rem .9rem; border-bottom: 1px solid var(--line); }
.ei-sim-race__cardtitle { font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ei-sim-race__pin { color: var(--muted); font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.ei-sim-race__rows { display: flex; flex-direction: column; }
.ei-sim-rrow { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "chip id votes pct" "bar bar bar bar"; column-gap: .7rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--line); position: relative; }
.ei-sim-rrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: currentColor; }
.ei-sim-rrow.is-d { color: var(--d); --row: var(--d); } .ei-sim-rrow.is-r { color: var(--r); --row: var(--r); } .ei-sim-rrow.is-i { color: var(--ind); --row: var(--ind); }
.ei-sim-rrow.is-o { color: #7a8aa0; --row: #7a8aa0; }
.ei-sim-tip__row.is-oth .nm { border-left-color: #7a8aa0; }
.ei-sim-tip__row.is-leader.is-oth td { background: #7a8aa0; color: #fff; }
.ei-sim-rrow__chip { grid-area: chip; width: 34px; height: 34px; border-radius: 50%; background: var(--row); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .78rem; }
.ei-sim-rrow__id { grid-area: id; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ei-sim-rrow__id b { color: var(--txt); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ei-sim-rrow__id em { color: var(--muted); font-style: normal; font-size: .76rem; }
.ei-sim-rrow__chk { color: currentColor; font-weight: 900; }
.ei-sim-rrow__votes { grid-area: votes; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85rem; }
.ei-sim-rrow__pct { grid-area: pct; font-weight: 850; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--txt); }
.ei-sim-rrow__bar { grid-area: bar; height: 6px; border-radius: 999px; background: var(--empty); overflow: hidden; margin-top: .5rem; }
.ei-sim-rrow__bar i { display: block; height: 100%; background: currentColor; transition: width .35s; }
.ei-sim-rrow.is-won { background: color-mix(in srgb, currentColor 8%, transparent); }
.ei-sim-race__total { display: flex; justify-content: space-between; align-items: baseline; padding: .6rem .9rem; color: var(--muted); font-weight: 700; font-size: .85rem; }
.ei-sim-race__total b { color: var(--txt); font-size: 1rem; font-variant-numeric: tabular-nums; }
.ei-sim-race__feedlabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.ei-sim-race__probbar .is-i { background: var(--ind); color: #fff; display: flex; align-items: center; justify-content: center; transition: width .3s; }

/* map margin legend */
.ei-sim-race__legend { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .5rem; font-size: .72rem; color: var(--muted); font-weight: 700; }
.ei-sim-leg__ramp { width: 78px; height: 8px; border-radius: 3px; }
.ei-sim-leg__ramp--d { background: linear-gradient(90deg, #1c3c78, #fff); }
.ei-sim-leg__ramp--r { background: linear-gradient(90deg, #fff, #9e1c1c); }
.ei-sim-leg__mid { opacity: .8; }

@media (max-width: 1040px) {
  .ei-sim-board, .ei-sim-race { height: auto !important; }
  .ei-sim-map, .ei-sim-race__map { min-height: 52vh; }
}

/* ============================================================
   v3 — persistent chrome (env + view switch + transport) above a
   stage; the shell is height-fit to the viewport so the map never
   spills past the footer; the Forecast Viewer's dials in the deck.
   ============================================================ */
.ei-sim-shell { display: flex; flex-direction: column; }
.ei-sim-chrome { flex: none; background: linear-gradient(180deg, var(--deck1), var(--deck2)); border-bottom: 1px solid var(--line); padding: .55rem clamp(.8rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: .5rem; }
.ei-sim-chrome__row { display: flex; align-items: center; gap: .4rem .5rem; flex-wrap: nowrap; }
.ei-sim-chrome__grp { display: flex; align-items: center; gap: .5rem; min-width: 0; flex-wrap: wrap; }
.ei-sim-chrome__grp:not(.ei-sim-chrome__transport) { flex: 1 1 auto; flex-wrap: nowrap; }   /* left side stays on ONE line; the race card shrinks instead of wrapping ‹ Start off */
.ei-sim-chrome__transport { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; } /* controls keep full size on desktop */
/* mobile/tablet: stack the two groups full-width and let the controls wrap onto rows */
@media (max-width: 1040px) {
  .ei-sim-chrome__row { flex-wrap: wrap; }
  .ei-sim-chrome__grp { flex: 1 1 100%; }
  .ei-sim-chrome__transport { flex-wrap: wrap; justify-content: flex-start; }
}
.ei-sim-viewswitch { display: flex; align-items: center; gap: .2rem; border: 1px solid var(--line); border-radius: 9px; padding: .2rem; background: var(--panel2); flex: 0 1 auto; min-width: 0; }
.ei-sim-viewswitch__b { padding: .35rem .8rem; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; font-size: .85rem; flex: none; }
.ei-sim-viewswitch__b.is-active { background: var(--btn-bg); color: var(--txt); box-shadow: 0 0 0 1px var(--line); }
.ei-sim-raceselect { padding: .35rem .5rem; border: 0; background: transparent; color: var(--txt); font-weight: 700; cursor: pointer; flex: 1 1 auto; min-width: 70px; max-width: 260px; font-size: .85rem; text-overflow: ellipsis; }
.ei-sim-clock { margin-left: auto; }
.ei-sim-envlabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 800; }
.ei-sim-presets { display: inline-flex; gap: .3rem; }
.ei-sim-presets__b { padding: .32rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--txt); font-weight: 700; font-size: .78rem; cursor: pointer; }
.ei-sim-presets__b:hover { border-color: var(--accent); }
.ei-sim-presets.is-locked { opacity: .45; }
.ei-sim-presets__b:disabled, .ei-sim-envslider input:disabled { cursor: not-allowed; }
.ei-sim-presets__b.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--txt); }
.ei-sim-envslider { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .76rem; color: var(--muted); font-weight: 700; }
.ei-sim-envslider input[type=range] { width: 108px; accent-color: var(--accent); }
.ei-sim-envslider__v { min-width: 3.5ch; color: var(--txt); font-weight: 800; }
/* "incl. customized races" hint — shown under the lean slider when a pinned race
   override is contributing to the readout (see app.overrideLean in sim-app.js). */
.ei-sim-envslider__note { flex: 1 0 100%; font-style: italic; font-weight: 600; font-size: .68rem; color: var(--muted); opacity: .75; }
/* National-lean slider: a red→white→blue track (R+100 … D+100) */
.ei-sim-leanrange { -webkit-appearance: none; appearance: none; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #cf2a25, #eef0f3 50%, #1f59b0) !important; cursor: pointer; }
.ei-sim-leanrange::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 2px solid #444; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.ei-sim-leanrange::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 2px solid #444; cursor: pointer; }
.ei-sim-start__slider .ei-sim-leanrange { width: 100%; }

/* Sandbox demographic dials */
.ei-sim-settings.is-sandbox { max-height: min(82vh, 660px); overflow-y: auto; }
.ei-sim-demo { border-top: 1px solid var(--line); padding-top: .75rem; }
.ei-sim-demo.is-locked { opacity: .65; }
.ei-sim-demo__h { display: flex; justify-content: space-between; align-items: center; }
.ei-sim-demo__h span { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ei-sim-demo__reset { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; font-size: .68rem; font-weight: 700; padding: .2rem .5rem; cursor: pointer; }
.ei-sim-demo__reset:disabled { opacity: .5; cursor: default; }
.ei-sim-demo__lede { font-size: .74rem; color: var(--muted); margin: .35rem 0 .6rem; line-height: 1.4; }
.ei-sim-demo__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-bottom: .5rem; }
.ei-sim-demo__tab { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 7px; font-size: .73rem; font-weight: 700; padding: .35rem .3rem; cursor: pointer; }
.ei-sim-demo__tab.is-active { background: var(--btn-bg); color: var(--txt); border-color: var(--accent); }
.ei-sim-demo__tab:disabled { cursor: default; }
.ei-sim-demo__modeseg { display: flex; gap: .3rem; margin-bottom: .65rem; }
.ei-sim-demo__modeb { flex: 1; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; font-size: .72rem; font-weight: 700; padding: .32rem; cursor: pointer; }
.ei-sim-demo__modeb.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ei-sim-demo__hint { font-size: .71rem; color: var(--muted); margin: 0 0 .55rem; line-height: 1.35; }
.ei-sim-demo__row { margin-bottom: .5rem; }
.ei-sim-demo__rowh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .12rem; }
.ei-sim-demo__rl { font-size: .8rem; font-weight: 700; }
.ei-sim-demo__rv { font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.ei-sim-demo__rv.is-d { color: var(--d-txt); } .ei-sim-demo__rv.is-r { color: var(--r-txt); }
.ei-sim-demo__rv.is-up { color: #2e9e6b; } .ei-sim-demo__rv.is-down { color: #c0673a; }
.ei-sim-demo__range { -webkit-appearance: none; appearance: none; width: 100%; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #cf2a25, #eef0f3 50%, #1f59b0); cursor: pointer; }
.ei-sim-demo__range--turn { background: linear-gradient(90deg, #eef0f3, #2e9e6b); }
.ei-sim-demo__range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid #444; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.ei-sim-demo__range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid #444; cursor: pointer; }
.ei-sim-demo__range:disabled { opacity: .55; cursor: default; }

/* NORMAL page flow: the page is its natural height and the footer sits below it
   (you scroll to it). The map+rail row gets a definite, generous height so the map
   is large AND the live feed scrolls inside its rail (it never grows the row). */
.ei-sim-stage { display: flex; flex-direction: column; }
.ei-sim-board, .ei-sim-race, .ei-sim-leg { display: flex; flex-direction: column; }
.ei-sim-main { flex: none; height: clamp(540px, 74vh, 920px); min-height: 0; grid-template-rows: minmax(0, 1fr); }
.ei-sim-race__body, .ei-sim-leg__body { flex: none; height: clamp(540px, 74vh, 920px); min-height: 0; grid-template-rows: minmax(0, 1fr); }
.ei-sim-deck, .ei-sim-legtoggle, .ei-sim-legwall { flex: none; }
.ei-sim-mapcol, .ei-sim-map, .ei-sim-race__map, .ei-sim-race__right, .ei-sim-race__left { min-height: 0; }

/* deck dials — compact cards wrapping the Forecast Viewer's banded gauge */
.ei-sim-deck { padding: .5rem clamp(.8rem, 2vw, 1.4rem); }
.ei-sim-dials { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 0; }
.ei-sim-dial { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: .4rem .6rem .5rem; text-align: center; }
.ei-sim-dial__h { font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; }
.ei-sim-dial__g { display: flex; flex-direction: column; align-items: center; }
.ei-sim-dial__g svg { max-width: 172px; height: auto; display: block; overflow: visible; margin-top: -.15rem; }
.ei-sim-dial__g .ei-fc-gauge__needle { stroke-width: 4; }
.ei-sim-dial__g .ei-fc-gauge__hub { stroke-width: 3; r: 5; }
.ei-sim-dial__g .ei-fc-gauge__title { font-size: .82rem; text-align: center; margin: 0; }
.ei-sim-dial__g .ei-fc-gauge__pct { font-size: 1rem; }
.ei-sim-dial__seats { display: flex; justify-content: center; align-items: baseline; gap: .6rem; font-weight: 800; font-size: .82rem; margin-top: .1rem; }
.ei-sim-dial__seats .is-d { color: var(--d-txt); } .ei-sim-dial__seats .is-r { color: var(--r-txt); }
.ei-sim-dial__seats span { color: var(--muted); font-weight: 600; font-size: .72rem; }
.ei-sim-dial__call { text-align: center; font-weight: 800; font-size: .82rem; margin-top: .2rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.ei-sim-dial__call.is-d { color: var(--d-txt); }
.ei-sim-dial__call.is-r { color: var(--r-txt); }
.ei-sim-dial__call.is-t { color: var(--accent); }
.ei-sim-dial__call.is-wait { color: var(--muted); font-weight: 700; font-style: italic; }
@media (max-width: 720px) { .ei-sim-dials { grid-template-columns: 1fr 1fr; } .ei-sim-dial:last-child { grid-column: 1 / -1; } }

/* settings gear popover (folds the environment + night controls) */
.ei-sim-chrome { position: relative; }
.ei-sim-gear { font-size: 1.05rem; line-height: 1; }
.ei-sim-gear.is-active { background: #ffd35b; color: #0a1426; border-color: #eab308; }
.ei-sim-settings { position: absolute; right: clamp(.8rem, 2vw, 1.4rem); top: calc(100% + 5px); z-index: 60; width: min(380px, 92vw); display: flex; flex-direction: column; gap: .65rem; padding: .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.ei-sim-settings[hidden] { display: none !important; }
.ei-sim-settings__h { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ei-sim-settings .ei-sim-presets { display: flex; flex-wrap: wrap; gap: .3rem; }
.ei-sim-settings__sand { display: flex; flex-direction: column; gap: .55rem; padding: .2rem 0; }
.ei-sim-settings__sand .ei-sim-envslider { justify-content: space-between; }
.ei-sim-settings__sand .ei-sim-envslider input[type=range] { width: 150px; }
.ei-sim-settings__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ei-sim-settings__actions .ei-sim-btn { flex: 1 1 8.5rem; min-width: 8.5rem; text-align: center; }

/* start-screen actions + 5-up presets + Sandbox-only sliders */
.ei-sim-start__actions { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.ei-sim-start__go--alt { background: var(--btn-bg); color: var(--txt); box-shadow: none; }
.ei-sim-start__go--alt:hover { box-shadow: none; border: 1px solid var(--accent); }
/* Prominent "extension of the forecast" banner at the TOP of the start screen — all
   on one line: message + Read forecast + Contact. */
.ei-sim-start__topbanner { display: flex; align-items: center; gap: 1.2rem; margin: 0 0 2rem; padding: .85rem 1.3rem; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #1b4b8f 0%, #163d75 55%, #112648 100%); box-shadow: 0 10px 28px rgba(17,38,72,.24); }
.ei-sim-start__topbanner-txt { flex: 1; min-width: 0; font-size: 1rem; color: rgba(255,255,255,.94); }
.ei-sim-start__topbanner-txt strong { color: #fff; }
.ei-sim-start__topbanner-go { font-weight: 800; white-space: nowrap; color: #ffd35b; text-decoration: none; }
.ei-sim-start__topbanner-go:hover { text-decoration: underline; }
.ei-sim-start__topbanner-go--alt { color: rgba(255,255,255,.85); }
@media (max-width: 760px) { .ei-sim-start__topbanner { flex-wrap: wrap; gap: .5rem 1.2rem; } .ei-sim-start__topbanner-txt { white-space: normal; flex-basis: 100%; } }
/* "⚙ Customize" gear made prominent so users know the controls live there */
.ei-sim-gear { font-weight: 800; gap: .3rem; }
.ei-sim-gear:not(.is-active) { border-color: #eab308; color: var(--accent); }
.ei-sim-start__presets { grid-template-columns: repeat(4, 1fr); }
.ei-sim-start__sliders { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.ei-sim-start__sliders[hidden] { display: none; }
@media (max-width: 860px) { .ei-sim-start__presets { grid-template-columns: repeat(2, 1fr); } }

/* vote-ticker scope split (Total / House / Senate / Gov) */
.ei-sim-ticker__scope { display: flex; gap: .25rem; margin-bottom: .55rem; }
.ei-sim-ticker__scopeb { flex: 1; padding: .28rem .2rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-weight: 700; font-size: .72rem; cursor: pointer; }
.ei-sim-ticker__scopeb.is-active { background: var(--btn-bg); color: var(--txt); }

/* the [hidden] attribute must win over explicit display (phantom winner card /
   the Upper-Lower + Margin/Shift toggles were showing while "hidden"). */
.ei-sim-race__winner[hidden], .ei-sim-vseg[hidden] { display: none !important; }

/* back-to-national button above a district / chamber title */
.ei-sim-race__headwrap { display: flex; flex-direction: column; gap: .4rem; }
.ei-sim-backbtn { align-self: flex-start; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--btn-bg); color: var(--txt); font-weight: 700; font-size: .82rem; cursor: pointer; margin-bottom: .3rem; }
.ei-sim-backbtn:hover { border-color: var(--accent); }

/* state-legislature chamber night */
.ei-sim-leg { padding: 1rem clamp(1rem, 3vw, 2rem) 2rem; }
.ei-sim-leg__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ei-sim-leg__title { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0; font-weight: 850; }
.ei-sim-leg__body { display: grid; grid-template-columns: 340px 1fr; gap: 1.4rem; }
.ei-sim-leg__left { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.ei-sim-leg__gauge { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: .7rem; }
.ei-sim-leg__gauge svg { max-width: 240px; height: auto; display: block; margin: 0 auto; }
.ei-sim-leg__tally { display: flex; justify-content: center; align-items: baseline; gap: .8rem; font-weight: 850; font-size: 1.05rem; }
.ei-sim-leg__tally .is-d { color: var(--d-txt); } .ei-sim-leg__tally .is-r { color: var(--r-txt); }
.ei-sim-leg__tally span { color: var(--muted); font-weight: 600; font-size: .8rem; }
.ei-sim-leg__status { color: var(--muted); }
.ei-sim-leg__counts { color: var(--muted); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ei-sim-leg__feedlabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.ei-sim-leg__feed { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; padding-right: .2rem; }
.ei-sim-leg__feeditem { font-size: .8rem; padding: .3rem .45rem; border-bottom: 1px solid var(--line); animation: eisimIn .25s ease; }
.ei-sim-leg__fm { color: var(--muted); float: right; font-variant-numeric: tabular-nums; }
.ei-sim-leg__right { min-height: 0; display: flex; }
.ei-sim-leg__map { flex: 1; min-height: 0; position: relative; background: radial-gradient(120% 120% at 50% 0%, var(--map1), var(--map2)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ei-sim-leg__svg { width: 100%; height: 100%; display: block; }
.ei-sim-leg__nomap { color: var(--muted); padding: 2rem; text-align: center; }
.ei-sim-legsquare { stroke: rgba(0,0,0,.4); stroke-width: .5; transition: fill .3s; }
[data-theme="dark"] .ei-sim-legsquare { stroke: rgba(255,255,255,.45); }

/* single-race map column: stack [County/Town switch] · map · legend */
.ei-sim-race__right { display: flex; flex-direction: column; }
.ei-sim-race__map { flex: 1; height: auto; }
.ei-sim-race__mapswitch { display: inline-flex; align-self: flex-end; margin-bottom: .45rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ei-sim-race__mapswitch__b { padding: .35rem .85rem; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: .8rem; cursor: pointer; }
.ei-sim-race__mapswitch__b.is-active { background: var(--btn-bg); color: var(--txt); }

/* ---- NYT-style results tooltip (national + county/town maps) ----
   The tip floats on <body> (outside .ei-sim-root), so colors are explicit and
   themed via [data-theme]; we neutralize the shared .ei-fc-tip box on /simulator. */
.ei-page-simulator .ei-fc-tip { background: transparent; padding: 0; max-width: 360px; box-shadow: none; border-radius: 12px; }
.ei-sim-tip { background: #fff; color: #16223c; border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.28); overflow: hidden; min-width: 250px; font-size: .82rem; border: 1px solid rgba(0,0,0,.08); }
[data-theme="dark"] .ei-sim-tip { background: #14233f; color: #eaf1fb; border-color: rgba(255,255,255,.1); box-shadow: 0 16px 44px rgba(0,0,0,.55); }
.ei-sim-tip__title { font-weight: 800; font-size: .98rem; padding: .55rem .8rem .4rem; }
.ei-sim-tip__sub { padding: 0 .8rem .55rem; color: #6b7280; font-weight: 600; }
[data-theme="dark"] .ei-sim-tip__sub { color: #9fb6da; }
.ei-sim-tip__tbl { width: 100%; border-collapse: collapse; }
.ei-sim-tip__tbl th { text-align: left; font-weight: 600; font-size: .68rem; color: #9aa3af; padding: .15rem .8rem; letter-spacing: 0; }
.ei-sim-tip__tbl th.num { text-align: right; }
.ei-sim-tip__tbl td { padding: .32rem .8rem; border-top: 1px solid rgba(0,0,0,.06); }
[data-theme="dark"] .ei-sim-tip__tbl td { border-top-color: rgba(255,255,255,.08); }
.ei-sim-tip__tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ei-sim-tip__tbl td.pct { font-weight: 800; }
.ei-sim-tip__row .nm { font-weight: 700; border-left: 4px solid transparent; }
.ei-sim-tip__row.is-dem .nm { border-left-color: #1f59b0; }
.ei-sim-tip__row.is-rep .nm { border-left-color: #cf2a25; }
.ei-sim-tip__row.is-ind .nm { border-left-color: #7a4fb5; }
.ei-sim-tip__row.is-leader.is-dem td { background: #1f59b0; color: #fff; }
.ei-sim-tip__row.is-leader.is-rep td { background: #cf2a25; color: #fff; }
.ei-sim-tip__row.is-leader.is-ind td { background: #7a4fb5; color: #fff; }
.ei-sim-tip__row.is-leader .nm { border-left-color: transparent; }
.ei-sim-tip__row .pty { color: #6b7280; }
.ei-sim-tip__row.is-leader .pty, .ei-sim-tip__row.is-leader .num { color: rgba(255,255,255,.92); }
.ei-sim-tip__chk { font-weight: 900; }
.ei-sim-tip__foot { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .8rem; color: #6b7280; font-size: .72rem; border-top: 1px solid rgba(0,0,0,.06); }
[data-theme="dark"] .ei-sim-tip__foot { color: #9fb6da; border-top-color: rgba(255,255,255,.08); }

@media (max-width: 1040px) {
  .ei-sim-clock { margin-left: 0; }
  .ei-sim-main, .ei-sim-race__body { height: auto; }
  /* Size the map box to the map itself so there's no dead letterbox space:
     the national map is always the us-atlas frame (975×610); race maps vary, so
     they keep a capped viewport height. */
  .ei-sim-map { min-height: 0; height: auto; aspect-ratio: 975 / 610; }
  /* Race maps vary in shape, so flex:1 let them grow to each SVG's aspect height —
     tall/narrow states & districts ballooned to 600px+. Pin a definite, capped box
     (flex:none beats the desktop flex:1) and let the SVG letterbox inside it. */
  .ei-sim-race__map { flex: none; min-height: 0; height: min(62vh, 88vw); }
}

/* "Customize result" control on the race-detail page (also reachable from the dashboard) */
.ei-sim-race__custom { margin-top: .85rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.ei-sim-race__custom[hidden] { display: none !important; }
.ei-sim-race__custom.is-pinned { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ei-sim-race__customhd { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .5rem; }
.ei-sim-race__customclr { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; font-size: .68rem; font-weight: 700; padding: .18rem .5rem; cursor: pointer; }
.ei-sim-race__customclr[hidden] { display: none; }
.ei-sim-race__customquick { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem; margin-bottom: .55rem; }
.ei-sim-race__qbtn { border: 1px solid var(--line); background: transparent; border-radius: 7px; font-size: .76rem; font-weight: 800; padding: .35rem .2rem; cursor: pointer; color: var(--txt); }
.ei-sim-race__qbtn.is-d { color: var(--d-txt); } .ei-sim-race__qbtn.is-r { color: var(--r-txt); } .ei-sim-race__qbtn.is-t { color: var(--muted); }
.ei-sim-race__qbtn:hover { border-color: var(--accent); }
.ei-sim-race__customsl { display: flex; align-items: center; gap: .6rem; }
.ei-sim-race__customrange { flex: 1; }
.ei-sim-race__customval { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 4em; text-align: right; font-size: .85rem; }

/* Customize-district card on the state-leg chamber page (click a district) */
.ei-sim-leg__cardslot:empty { display: none; }
.ei-sim-leg__card { margin-top: .6rem; padding: .65rem .7rem; border: 1px solid var(--accent); border-radius: 11px; background: var(--panel2); }
.ei-sim-leg__cardhd { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .82rem; margin-bottom: .5rem; }
.ei-sim-leg__cardx { border: 0; background: transparent; color: var(--muted); font-size: .9rem; cursor: pointer; line-height: 1; }
.ei-sim-leg__cardq { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.ei-sim-leg__qbtn { border: 1px solid var(--line); background: transparent; border-radius: 7px; font-size: .76rem; font-weight: 800; padding: .35rem .2rem; cursor: pointer; color: var(--txt); }
.ei-sim-leg__qbtn.is-d { color: var(--d-txt); } .ei-sim-leg__qbtn.is-r { color: var(--r-txt); } .ei-sim-leg__qbtn.is-t { color: var(--muted); } .ei-sim-leg__qbtn.is-x { color: var(--muted); }
.ei-sim-leg__qbtn:hover { border-color: var(--accent); }

/* Realistic slow-count toggle in the settings popover */
.ei-sim-slowtoggle { display: flex; gap: .6rem; align-items: center; font-size: .8rem; line-height: 1.35; color: var(--txt); cursor: pointer; padding-top: .55rem; border-top: 1px solid var(--line); margin-top: .3rem; }
.ei-sim-slowtoggle input { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 5px; background: var(--panel2); cursor: pointer; position: relative; transition: background .12s, border-color .12s; }
.ei-sim-slowtoggle input:hover { border-color: var(--accent); }
.ei-sim-slowtoggle input:checked { background: var(--accent); border-color: var(--accent); }
.ei-sim-slowtoggle input:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #0a1426; }
.ei-sim-btn--warn { color: var(--r-txt); border-color: color-mix(in srgb, var(--r-txt) 45%, var(--line)); }

/* "Not real results" warnings — start screen callout + persistent board strip */
.ei-sim-warn { max-width: 660px; margin: -.6rem auto 0; padding: .8rem 1.1rem; border-radius: 12px; background: rgba(255,211,91,.14); border: 1px solid rgba(255,211,91,.5); color: var(--txt); font-size: .92rem; line-height: 1.5; text-align: center; }
.ei-sim-warnbar { padding: .45rem 1rem; text-align: center; font-size: .82rem; line-height: 1.35; background: rgba(255,211,91,.13); border-bottom: 1px solid rgba(255,211,91,.4); color: var(--txt); }
.ei-sim-warnbar strong { color: var(--accent); }

/* Over-time charts (NYT-style; full width, below the board) */
.ei-sim-ot { padding: 1.1rem clamp(1rem, 3vw, 2.4rem) 1.9rem; border-top: 1px solid var(--line); background: var(--panel2); }
.ei-sim-ot__head { margin-bottom: .2rem; }
.ei-sim-ot__title { font-size: 1.04rem; font-weight: 800; color: var(--txt); letter-spacing: -.01em; }
.ei-sim-ot__cap { font-size: .84rem; font-weight: 800; color: var(--txt); margin: .9rem 0 .1rem; }
.ei-sim-ot__chart { width: 100%; }
.ei-sim-ot__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ei-sim-ot__grid { stroke: var(--line); opacity: .55; }
.ei-sim-ot__grid.is-mid { opacity: 1; }
.ei-sim-ot__xgrid { stroke: var(--line); opacity: .28; }
.ei-sim-ot__maj { stroke: var(--muted); stroke-dasharray: 4 3; opacity: .85; }
.ei-sim-ot__majlab { fill: var(--muted); font-size: 10px; font-weight: 700; }
.ei-sim-ot__ylab { fill: var(--muted); font-size: 10px; text-anchor: end; }
.ei-sim-ot__xlab { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.ei-sim-ot__band { stroke: none; opacity: .18; }
.ei-sim-ot__band.is-d { fill: var(--d); }
.ei-sim-ot__band.is-r { fill: var(--r); }
.ei-sim-ot__line { fill: none; stroke-width: 2.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ei-sim-ot__line.is-d { stroke: var(--d); }
.ei-sim-ot__line.is-r { stroke: var(--r); }
.ei-sim-ot__now { stroke: var(--txt); stroke-dasharray: 3 3; opacity: .5; }
.ei-sim-ot__nowtri { fill: var(--txt); opacity: .65; }
.ei-sim-ot__nowlab { fill: var(--muted); font-size: 10px; font-weight: 700; text-anchor: middle; }
.ei-sim-ot__elab { font-size: 12px; font-weight: 800; dominant-baseline: middle; }
.ei-sim-ot__elab.is-d { fill: var(--d); }
.ei-sim-ot__elab.is-r { fill: var(--r); }

/* ---- presidential board ---- */
/* dial deck flexes to 1 / 2 / 3 dials (president-only, midterm, presidential year) */
.ei-sim-dials--1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
.ei-sim-dials--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ei-sim-dials--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 4 dials (2016+/2020/2024 nights: President · House · Senate · Governors) sit
   in ONE row on wide screens instead of stranding the 4th card on its own row. */
.ei-sim-dials--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .ei-sim-dials--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ei-sim-dial__seats .is-i { color: #9b76d6; }

/* president popular-vote strip under the dials (candidate names) */
.ei-sim-pvstrip { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.ei-sim-pvstrip__t { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; color: var(--muted); margin-bottom: .25rem; }

/* ME/NE split-EV chips under the map (the split-EV surface — no inset geometry) */
.ei-sim-cdchips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.ei-sim-cdchips[hidden] { display: none; }
.ei-sim-cdchip { font-weight: 800; font-size: .72rem; color: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .2rem .5rem; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.45); }

/* seat grid (House fallback for 1976–2004, when no district geometry ships) */
.ei-sim-seatgrid { position: absolute; inset: 0; overflow: auto; padding: .8rem; display: flex; flex-wrap: wrap; gap: .55rem 1rem; align-content: flex-start; }
.ei-sim-seatgrid__grp { display: flex; flex-direction: column; gap: .25rem; }
.ei-sim-seatgrid__st { font-weight: 800; font-size: .66rem; letter-spacing: .04em; color: var(--muted); }
.ei-sim-seatgrid__chips { display: flex; flex-wrap: wrap; gap: 3px; max-width: 152px; }
.ei-sim-seatchip { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--line); background: var(--empty); color: var(--muted); font-size: .62rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ei-sim-seatchip.is-d { background: var(--d); border-color: var(--d); color: #fff; }
.ei-sim-seatchip.is-r { background: var(--r); border-color: var(--r); color: #fff; }
.ei-sim-seatchip.is-i { background: #7A4FB5; border-color: #7A4FB5; color: #fff; }
.ei-sim-seatchip.is-lead-d { background: var(--d); opacity: .45; color: #fff; }
.ei-sim-seatchip.is-lead-r { background: var(--r); opacity: .45; color: #fff; }
.ei-sim-seatchip.is-lead-i { background: #7A4FB5; opacity: .45; color: #fff; }

/* rail: tipping-point card + independent key-race margin */
.ei-sim-tipping { display: flex; align-items: center; gap: .5rem; margin: 0 1rem .55rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); }
.ei-sim-tipping[hidden] { display: none; }
.ei-sim-tipping__l { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ei-sim-tipping__st { font-weight: 800; font-size: .9rem; margin-right: auto; }
.ei-sim-tipping__m { font-weight: 850; font-variant-numeric: tabular-nums; }
.ei-sim-tipping__m.is-d { color: var(--d-txt); } .ei-sim-tipping__m.is-r { color: var(--r-txt); }
.ei-sim-key__m.is-i { color: #9b76d6; }

/* district-map loading state */
.ei-sim-maploading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--muted); }

@media (max-width: 720px) { .ei-sim-dials--1 { grid-template-columns: 1fr; } }

/* ---- start menu: election picker ---- */
.ei-sim-start__elect h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .8rem; }
.ei-sim-start__electcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ei-sim-start__electcard { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem 1.15rem; cursor: pointer; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; color: var(--txt); text-align: left; transition: border-color .15s, background .15s, transform .1s; }
.ei-sim-start__electcard:hover { transform: translateY(-1px); border-color: var(--accent); }
.ei-sim-start__electcard.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: color-mix(in srgb, var(--accent) 8%, var(--panel2)); }
.ei-sim-start__electcard b { font-size: 1.05rem; font-weight: 850; }
.ei-sim-start__electcard span { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.ei-sim-start__electcard.is-loading { cursor: wait; }
.ei-sim-start__cardspin { position: absolute; top: .8rem; right: .8rem; width: 18px; height: 18px; border-width: 2px; }

.ei-sim-start__electdetail:empty { display: none; }
.ei-sim-start__electdetail { margin-top: .9rem; }

.ei-sim-start__contenders { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; padding: .95rem 1rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.ei-sim-start__contender { display: flex; flex-direction: column; gap: .3rem; }
.ei-sim-start__contenderl { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--muted); }
.ei-sim-start__contenderselect { padding: .55rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--btn-bg); color: var(--txt); font-weight: 700; font-size: .9rem; }
.ei-sim-start__disclaim { grid-column: 1/-1; color: var(--muted); font-size: .78rem; margin: .2rem 0 0; font-style: italic; }

.ei-sim-start__years { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .5rem; max-height: 48vh; overflow-y: auto; padding: .15rem; }
.ei-sim-start__yeartile { position: relative; display: block; padding: .65rem 2.1rem .65rem .8rem; cursor: pointer; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--txt); text-align: left; font-size: .84rem; line-height: 1.45; }
.ei-sim-start__yeartile:hover { border-color: var(--accent); }
.ei-sim-start__yeartile.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); }
.ei-sim-start__yeartile b { font-weight: 850; }
.ei-sim-start__yeartile span { color: var(--muted); }
.ei-sim-start__yeartile:disabled { opacity: .65; cursor: wait; }
.ei-sim-start__yearspin { position: absolute; top: .6rem; right: .6rem; width: 14px; height: 14px; border-width: 2px; }

.ei-sim-start__err { padding: .75rem .9rem; margin-bottom: .7rem; border-radius: 10px; background: color-mix(in srgb, var(--r) 14%, transparent); border: 1px solid color-mix(in srgb, var(--r) 45%, var(--line)); color: var(--txt); font-size: .85rem; }
.ei-sim-start__err p { margin: 0 0 .3rem; }
.ei-sim-start__errdetail { color: var(--muted); font-size: .78rem; font-family: monospace; word-break: break-word; }

.ei-sim-start__go:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.ei-sim-start__preset:disabled { opacity: .5; cursor: not-allowed; }
.ei-sim-start__preset:disabled:hover { transform: none; border-color: var(--line); }
.ei-sim-start__slider input:disabled { opacity: .5; cursor: not-allowed; }
.ei-sim-start__search:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 680px) {
  .ei-sim-start__electcards { grid-template-columns: 1fr; }
  .ei-sim-start__contenders { grid-template-columns: 1fr; }
  .ei-sim-start__years { grid-template-columns: repeat(2, 1fr); max-height: 44vh; }
}