/* Same palette and type as the main election page, so the map reads as part of the site.
   The root size is 19px, so .95rem is the smallest text here and stays at 18px. */
:root{--paper:#f1f5f8;--card:#fff;--navy:#0f2a5c;--stage:#0a1b3d;--blue:#1a66ad;--bright:#2379c4;--red:#b8202f;--ink:#14213a;--muted:#46536b;--line:#cfd9e4;--gold:#e6b325;--violet:#7d62ad}
*{box-sizing:border-box}
html{font-size:118.75%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.5 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--blue);font-weight:700;text-underline-offset:.16em}
:focus-visible{outline:3px solid var(--bright);outline-offset:2px}
h1,h2,h3{font-family:Poppins,"Atkinson Hyperlegible",system-ui,sans-serif;color:var(--navy);line-height:1.15;margin:0;text-wrap:balance}
.wrap{max-width:78rem;margin:0 auto;padding:0 1rem}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;padding:.7rem 0}
.top img{height:2.9rem;width:auto;display:block}
.top a{margin-left:auto}
h1{font-size:1.6rem}
.intro{margin:.35rem 0 .7rem;font-size:1.05rem;max-width:48rem}
.controls{display:flex;flex-wrap:wrap;gap:.45rem;align-items:stretch;margin-bottom:.6rem}
.controls button{font-family:inherit;font-weight:700;font-size:1.05rem;line-height:1.1;min-height:2.9rem;padding:.4rem .95rem;border:2px solid var(--navy);border-radius:.4rem;background:#fff;color:var(--navy);cursor:pointer}
.controls button:hover{background:#e4edf6}
.controls button[aria-pressed=true]{background:var(--navy);color:#fff}
.controls button.star{border-color:var(--red)}
.controls input{font:inherit;min-height:2.9rem;flex:1 1 14rem;min-width:0;padding:.3rem .7rem;border:2px solid var(--navy);border-radius:.4rem;background:#fff;color:var(--ink)}
.layout{display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.layout{grid-template-columns:minmax(0,1fr) 25rem}}
.stage{position:relative;background:var(--stage);border-radius:.5rem;overflow:hidden;height:58svh;min-height:21rem}
@media (min-width:960px){.stage{height:min(46rem,max(26rem,calc(100svh - 14.5rem)))}}
.stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:1.5rem;font-size:1.2rem;background:var(--stage)}
.status[hidden]{display:none}
.labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lab{position:absolute;left:0;top:0;font-weight:700;font-size:.95rem;line-height:1;color:#fff;white-space:nowrap;text-shadow:0 0 3px #06122b,0 0 3px #06122b,0 1px 2px #06122b;will-change:transform}
.lab.st{letter-spacing:.03em;color:#e6eef8}
.lab.ny{font-size:1.05rem}
.tip{position:absolute;left:0;top:0;background:#fff;color:var(--ink);padding:.3rem .6rem;border-radius:.3rem;font-size:.95rem;font-weight:700;pointer-events:none;box-shadow:0 2px 8px #0006;max-width:22rem}
.tip[hidden]{display:none}
.cap{position:absolute;left:.5rem;right:.5rem;bottom:.5rem;min-height:2.75rem;padding:.35rem .7rem;border:0;border-radius:.35rem;background:#fff;color:var(--navy);font-family:inherit;font-weight:700;font-size:.95rem;text-align:left;box-shadow:0 2px 10px #0008;cursor:pointer}
.cap[hidden]{display:none}
@media (min-width:960px){.cap{display:none}}
.panel{background:var(--card);border:1px solid var(--line);border-top:.35rem solid var(--navy);border-radius:.35rem;padding:.9rem 1rem;min-width:0;align-self:start;overflow-wrap:anywhere}
@media (min-width:960px){.panel{max-height:min(46rem,max(26rem,calc(100svh - 14.5rem)));overflow:auto}}
.panel h2{font-size:1.6rem}
.panel h3{font-size:1.1rem;margin-top:.9rem;padding-top:.6rem;border-top:1px solid var(--line)}
.panel .sub{margin:.1rem 0 0;color:var(--muted);font-weight:700}
.panel p{margin:.35rem 0 0}
.badge{display:inline-block;margin:.45rem 0 0;padding:.15rem .55rem;border-radius:.25rem;background:#fff4d2;border:1px solid #b88a00;color:#4f3b00;font-weight:700}
.dem{margin:.4rem 0 0;padding:.5rem .7rem;border-left:.4rem solid var(--blue);background:#eef4fb}
.dem b{display:block;font-size:1.35rem;line-height:1.2;color:var(--navy)}
.others{list-style:none;margin:.45rem 0 0;padding:0;font-size:.95rem;color:var(--muted)}
.others li{padding:.15rem 0}
.others b{color:var(--ink);font-weight:700}
.src{font-size:.95rem;color:var(--muted)}
.res{margin:.5rem 0 0;padding:.45rem .7rem;background:#e9eff5;border-radius:.25rem;font-weight:700;color:var(--navy)}
.res small{display:block;font-weight:400;font-size:.95rem;color:var(--muted)}
.res.called{background:var(--navy);color:#fff}.res.called small{color:#fff}
.res.called a{color:#fff}
.nums{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .7rem;margin:.35rem 0 0}
.nums dt{color:var(--muted)}.nums dd{margin:0;font-weight:700}
.linky{font-family:inherit;font-weight:700;font-size:1rem;background:none;border:0;padding:.3rem 0;color:var(--blue);text-decoration:underline;cursor:pointer;min-height:2.75rem;text-align:left}
.key{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:.8rem 0 0;align-items:center}
.key span.i{display:inline-flex;align-items:center;gap:.4rem}
.chip{display:inline-block;width:1.05rem;height:1.05rem;border-radius:.15rem;flex:none;border:1px solid #0003}
.c-D{background:var(--bright)}.c-R{background:#d3232f}.c-I{background:var(--violet)}.c-V{background:var(--gold)}
.ramp{display:flex;align-items:flex-end;gap:.5rem;flex-wrap:wrap}
.ramp i{display:inline-block;width:.7rem;background:var(--navy);border-radius:.1rem .1rem 0 0;margin-right:.2rem}
.method{margin:.6rem 0 0;font-size:1.05rem}
section{margin:2rem 0 0;scroll-margin-top:.5rem}
section>h2{font-size:1.55rem;padding-bottom:.3rem;border-bottom:.2rem solid var(--navy)}
#q{font:inherit;width:100%;min-height:3rem;padding:.4rem .8rem;margin:.7rem 0 0;border:2px solid var(--navy);border-radius:.4rem;background:#fff;color:var(--ink)}
#count{margin:.4rem 0 0;color:var(--muted)}
.state{margin:1.3rem 0 0}
.state h3{font-size:1.25rem;display:flex;flex-wrap:wrap;gap:.1rem .6rem;align-items:baseline}
.state h3 small{font:400 .95rem "Atkinson Hyperlegible",system-ui,sans-serif;color:var(--muted)}
.state .note{margin:.25rem 0 0}
.state ul{list-style:none;margin:.3rem 0 0;padding:0}
.state li{border-top:1px solid var(--line)}
.state li a{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:0 .6rem;padding:.45rem 0;text-decoration:none;color:var(--ink);font-weight:400;min-height:2.75rem}
.state li a:hover{background:#e6edf5}
.state li .d{font-weight:700;color:var(--navy)}
.state li .w{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.state li .m{grid-column:2;color:var(--muted);font-size:.95rem}
.tag{font-size:.95rem;font-weight:700;color:#4f3b00}
.prose li{margin:.45rem 0}
.prose{padding-left:1.2rem;margin:.7rem 0 0}
footer{margin:2.5rem 0 1.5rem;padding-top:.8rem;border-top:.2rem solid var(--navy)}

/* Home page embed: just the controls, the map and the color key. */
html.embed,html.embed body{height:100%;margin:0;overflow:hidden;background:transparent}
html.embed .wrap{height:100%;max-width:none;padding:0;display:flex;flex-direction:column}
html.embed .top,html.embed h1,html.embed .intro,html.embed .panel,html.embed .key~*{display:none}
html.embed .layout{display:block;flex:1 1 auto;min-height:0;margin:0}
html.embed .stage{height:100%;min-height:0}
html.embed .key{margin:.4rem 0 0}
html.embed .key .i:not(:has(.chip)){display:none}