:root{
  --bg:#f7f8fb; --panel:#ffffff; --panel-2:#f1f3f8; --line:#e2e6ef;
  --ink:#14161c; --muted:#606a7f;
  --accent:#f5b301; --accent-text:#8a6100; --accent-ink:#1a1300;
  --accent-grad:linear-gradient(180deg,#f5c025,#e0a20a);
  --hot:#d93a12; --live:#12924a;
  --pfill:color-mix(in srgb,var(--accent) 15%,transparent);
  --pfill-2:color-mix(in srgb,var(--accent) 46%,transparent);
  --pfill-edge:color-mix(in srgb,var(--accent-text) 70%,transparent);
  --map-land:#dfe4ee; --map-claimed:#c6cddd; --map-label:#3c4457;
  --map-stroke:rgba(22,26,36,.34); --map-lead:rgba(22,26,36,.34);
  --map-label-halo:rgba(255,255,255,.9);
  --hi-bg:#fff8e3; --hi-line:#e8d089; --hi-text:#b4451f;
  --ok-bg:#e8f8ee; --ok-line:#a9dcc0; --ok-text:#146c3c;
  --warn-bg:#fff6da; --warn-line:#eddaa0; --warn-text:#6b5410;
  --warn-btn:#f6e9bf; --warn-btn-line:#e0cb8c; --warn-btn-ink:#5b4809;
  --tag-bg:#fdeceb; --tag-line:#f3c3bd; --tag-text:#c0341a;
  --plate:#ffffff; --shadow:rgba(24,28,40,.16); --scrim:rgba(30,34,44,.4);
  --tip-bg:rgba(255,255,255,.98); --tape-bg:#101420;
  --flag-red:#b22234; --flag-white:#ffffff; --flag-blue:#3c3b6e;
  --display:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;

  --font:ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#08090c; --panel:#0f1116; --panel-2:#151822; --line:#232838;
  --ink:#eef1f7; --muted:#8b93a7;
  --accent:#f5b301; --accent-text:#f5b301; --accent-ink:#1a1300;
  --accent-grad:linear-gradient(180deg,#f5c025,#d99a06);
  --hot:#ff5c39; --live:#3ecf6b;
  --pfill:color-mix(in srgb,var(--accent) 8%,transparent);
  --pfill-2:color-mix(in srgb,var(--accent) 25%,transparent);
  --pfill-edge:color-mix(in srgb,var(--accent) 72%,transparent);
  --map-land:#1b2030; --map-claimed:#2b3348; --map-label:#c8d0e2;
  --map-stroke:rgba(0,0,0,.72); --map-lead:rgba(255,255,255,.34);
  --map-label-halo:rgba(0,0,0,.72);
  --hi-bg:#1a1503; --hi-line:#4d3d0c; --hi-text:#ff7a52;
  --ok-bg:#0d2417; --ok-line:#1e5233; --ok-text:#8ee5ac;
  --warn-bg:#241d05; --warn-line:#4a3c0c; --warn-text:#f0d98a;
  --warn-btn:#3a2f08; --warn-btn-line:#5c4a10; --warn-btn-ink:#f5e7b0;
  --tag-bg:#2a1010; --tag-line:#5a1f1f; --tag-text:#ff6b5c;
  --plate:#ffffff; --shadow:rgba(0,0,0,.65); --scrim:rgba(0,0,0,.78);
  --tip-bg:rgba(16,18,25,.97); --tape-bg:#0c0f16;
  --flag-red:#8f2231; --flag-white:#cfd4e0; --flag-blue:#2f2f57;
  --display:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
} }
:root[data-theme="dark"]{
  --bg:#08090c; --panel:#0f1116; --panel-2:#151822; --line:#232838;
  --ink:#eef1f7; --muted:#8b93a7;
  --accent:#f5b301; --accent-text:#f5b301; --accent-ink:#1a1300;
  --accent-grad:linear-gradient(180deg,#f5c025,#d99a06);
  --hot:#ff5c39; --live:#3ecf6b;
  --pfill:color-mix(in srgb,var(--accent) 8%,transparent);
  --pfill-2:color-mix(in srgb,var(--accent) 25%,transparent);
  --pfill-edge:color-mix(in srgb,var(--accent) 72%,transparent);
  --map-land:#1b2030; --map-claimed:#2b3348; --map-label:#c8d0e2;
  --map-stroke:rgba(0,0,0,.72); --map-lead:rgba(255,255,255,.34);
  --map-label-halo:rgba(0,0,0,.72);
  --hi-bg:#1a1503; --hi-line:#4d3d0c; --hi-text:#ff7a52;
  --ok-bg:#0d2417; --ok-line:#1e5233; --ok-text:#8ee5ac;
  --warn-bg:#241d05; --warn-line:#4a3c0c; --warn-text:#f0d98a;
  --warn-btn:#3a2f08; --warn-btn-line:#5c4a10; --warn-btn-ink:#f5e7b0;
  --tag-bg:#2a1010; --tag-line:#5a1f1f; --tag-text:#ff6b5c;
  --plate:#ffffff; --shadow:rgba(0,0,0,.65); --scrim:rgba(0,0,0,.78);
  --tip-bg:rgba(16,18,25,.97); --tape-bg:#0c0f16;
  --flag-red:#8f2231; --flag-white:#cfd4e0; --flag-blue:#2f2f57;
  --display:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
}

/* A three pixel nod to the flag, at the very top of every page. Enough to say
   where we are without dressing the site up as a costume. */
.flagrule{height:3px;background:linear-gradient(90deg,
  var(--flag-red) 0 33.3%, var(--flag-white) 33.3% 66.6%, var(--flag-blue) 66.6% 100%)}

.themetog{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:15px;
  display:grid;place-items:center;padding:0;line-height:1}
.themetog:hover{color:var(--ink);border-color:var(--accent)}
.themetog .ti{grid-area:1/1}
.themetog[data-mode="dark"] .sun{display:none}
.themetog[data-mode="light"] .moon{display:none}

*{box-sizing:border-box}
/* An explicit display beats the hidden attribute, which had the empty
   president banner showing when nobody was president. */
[hidden]{display:none !important}
/* iOS inflates text when a phone turns landscape unless it is told not to,
   which breaks every width the rest of this stylesheet reasons about. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;line-height:1.5;
  /* clip, not hidden: overflow hidden on the body stops the header sticking */
  overflow-x:clip;
  -webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 22%,transparent)}
a{color:inherit}
/* A phone must not wait 300ms to find out a tap was not a double tap. */
a,button,input,summary,.seat{touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The header is sticky, so an anchor jump has to stop below it. */
#board,#potus,#potus-seat{scroll-margin-top:76px}
/* The notch eats one edge in landscape, and every page sits inside a wrap. */
.wrap{max-width:1400px;margin:0 auto;
  padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}

.demo-bar{background:var(--warn-bg);border-bottom:1px solid var(--warn-line);color:var(--warn-text);
  font-size:13px;padding:9px 0}
.demo-bar .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.demo-bar b{color:var(--accent)}

/* Clear of the tape, which is 44px of fixed furniture at the bottom of the
   home page, and clear of the home indicator underneath that. */
.toast{position:fixed;left:50%;bottom:calc(58px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:60;
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;
  padding:12px 20px;font-size:14px;box-shadow:0 10px 40px var(--shadow)}
.toast b{color:var(--accent)}

header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px)}
.hdr{display:flex;align-items:center;gap:16px;height:60px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.5px;text-decoration:none;
  display:inline-flex;align-items:baseline;gap:0;color:inherit}
.logo .star{color:var(--accent-text);font-size:14px;margin-right:7px}
.logo .tld{color:var(--accent-text)}
.hdr nav{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px;
  color:var(--muted)}
.hdr nav a:hover{color:var(--ink)}

.hero{padding:20px 0 14px;text-align:center}
.hero h1{font-family:var(--display);font-size:clamp(23px,3.1vw,34px);line-height:1.12;
  margin:0 0 7px;font-weight:700;letter-spacing:-.6px}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.hero p{color:var(--muted);font-size:14px;margin:0 auto;max-width:640px}
.hero p b{color:var(--live)}

.pill{display:inline-flex;align-items:center;gap:6px;margin-top:13px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:8px 18px;font-size:14px;color:var(--muted);text-decoration:none}
.pill:hover{border-color:var(--accent)}
.pill b{color:var(--live);font-weight:650}
/* Shown only when the geometry asset fails; the ranked list carries the page. */
.map-fallback{padding:46px 22px;text-align:center;color:var(--muted)}
.map-fallback b{color:var(--ink);font-size:16px}
.map-fallback p{margin:6px 0}
/* Shown on a state page when the seat moved after the page was rendered. */
.stale{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;
  padding:10px 14px;border-radius:10px;background:var(--warn-bg);
  border:1px solid var(--warn-line);color:var(--warn-text);font-size:14px}
.stale button{margin-left:auto;background:var(--warn-btn);color:var(--warn-btn-ink);
  border:1px solid var(--warn-btn-line);border-radius:8px;padding:5px 12px;
  font:inherit;font-weight:600;cursor:pointer}
.stale button:hover{border-color:var(--accent)}
.pill #p-total{color:var(--ink)}
.pill em{font-style:normal;opacity:.5}
.pill .see{color:var(--ink);font-weight:550}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 60%,transparent);animation:pulse 2.2s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.mapcard{margin-top:14px;position:relative}
#map{display:block;width:100%;height:auto;background:var(--panel)}
#map path.state{fill:var(--map-land);stroke:var(--map-stroke);stroke-width:1.1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;
  transition:fill .12s ease,stroke .12s ease}
#map path.state:hover{stroke:var(--accent);stroke-width:1.6}
#map path.claimed{fill:var(--map-claimed)}
/* Sans, not the mono the prices use: these are place names, not figures. The
   halo is its own token because it has to contrast with the label, not with the
   land, so it flips white in light mode and black in dark. Painting the map
   stroke here put dark on dark and only fattened the letters. */
#map .lbl{font:700 9.5px var(--font);letter-spacing:.4px;fill:var(--map-label);
  pointer-events:none;text-anchor:middle;paint-order:stroke;
  stroke:var(--map-label-halo);stroke-width:2.4px}
#map .logo-img{pointer-events:none}
#map .plate{fill:var(--plate);opacity:.94;pointer-events:none}
/* A fat traced outline turns a detailed coastline into a scribble on a phone,
   Virginia's Chesapeake shore worst of all: a 2.4px non-scaling stroke merges
   across the sub-pixel tidewater zigzags into a solid band. Keep the accent
   edge thin and let a blurred glow carry the "selected" weight instead. */
#map path.hot{stroke:var(--accent);stroke-width:1.4;
  filter:drop-shadow(0 0 6px var(--accent))}
#map .lead{stroke:var(--map-lead);stroke-width:1;fill:none;pointer-events:none}
/* Invisible, but it has to be painted to be hittable. */
#map path.hit{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}

/* Zoom, for a screen where the whole country is 360px wide and the northeast
   is a pile of six states inside a thumb. Shown only where there is no cursor
   to hover with, because a mouse already has the hover card. */
/* Top left, over the Pacific. The right hand side of this map is the callout
   ladder for the seven states too small to hold a logo, which is exactly the
   part of the board somebody reaches for zoom to read. */
.mapzoom{display:none;position:absolute;top:10px;left:10px;z-index:15;
  flex-direction:column;gap:6px}
.mapzoom button{width:44px;height:44px;border-radius:12px;padding:0;line-height:1;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent);
  color:var(--ink);font-size:20px;font-weight:700;font-family:inherit;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(8px);
  box-shadow:0 4px 14px var(--shadow)}
.mapzoom button:disabled{opacity:.38}
.mapzoom .mz-reset{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
@media (pointer:coarse){.mapzoom{display:flex}}
@media (max-width:900px){.mapzoom{display:flex}}

.tip{position:absolute;z-index:20;pointer-events:none;min-width:262px;max-width:320px;
  background:var(--tip-bg);border:1px solid var(--line);border-radius:14px;
  padding:11px 14px;box-shadow:0 14px 44px var(--shadow);
  transform:translate(-50%,calc(-100% - 16px));backdrop-filter:blur(8px)}
.tip-top{display:flex;align-items:center;gap:9px}
.tip-code{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--tag-text);
  background:var(--tag-bg);border:1px solid var(--tag-line);border-radius:6px;padding:2px 7px}
.tip-name{font-size:16px;font-weight:750;letter-spacing:-.3px;
  color:inherit;text-decoration:none}
a.tip-name:hover{color:var(--accent-text)}
.tip-rank{margin-left:auto;color:var(--accent-text);font-family:var(--mono);
  font-size:12px;font-weight:700}
.tip-nick{color:var(--accent-text);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.9px;margin-top:5px}
.tip-state{color:var(--muted);font-size:12px;font-style:italic;margin-top:7px;
  padding-top:7px;border-top:1px solid var(--line)}
/* The governor block. The logo and the monogram are the same box, so whichever
   one is showing the row never changes height and hovering fast cannot jump. */
.tip-gov{display:flex;align-items:center;gap:10px;margin-top:8px;
  padding-top:9px;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;cursor:pointer}
/* Says out loud that the row goes somewhere. With a mouse the card is inert and
   this reads as a label; on the sheet it is the tap target it names. */
.tip-visit{flex:none;font-size:11px;font-weight:800;color:var(--accent-text);
  background:var(--hi-bg);border:1px solid var(--hi-line);border-radius:999px;
  padding:4px 10px;white-space:nowrap}
.tip-logo,.tip-mark{width:34px;height:34px;border-radius:9px;flex:none}
.tip-logo{object-fit:contain;background:var(--plate);border:1px solid var(--line)}
.tip-mark{display:grid;place-items:center;font-family:var(--mono);font-size:14px;
  font-weight:800;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--line)}
.tip-who{flex:1;min-width:0}
.tip-whotop{display:flex;align-items:baseline;gap:10px}
.tip-whotop b{color:var(--ink);font-size:14px;font-weight:750;letter-spacing:-.2px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip-price{margin-left:auto;color:var(--ink);font-family:var(--mono);font-size:13px;
  font-weight:700;white-space:nowrap}
.tip-slogan{color:var(--muted);font-size:12px;margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tip-open{color:var(--muted);font-size:13px;margin-top:8px;
  padding-top:9px;border-top:1px solid var(--line)}
/* The named way into the state's own page. The take button below stays the
   loud one; this reads as the quiet second action it is. */
.tip-more{display:block;margin-top:8px;padding-top:9px;border-top:1px solid var(--line);
  color:var(--accent-text);font-size:13px;font-weight:750;text-decoration:none}
/* A button, not a line of text, because on a touch screen this is the thing
   you press. With a mouse the whole card is inert, so it still reads as text. */
.tip-cta{display:block;width:100%;margin-top:8px;padding:0;border:0;background:none;
  color:var(--accent-text);font-family:inherit;font-size:13px;font-weight:750;
  white-space:nowrap;text-align:right}
.tip-x{display:none;position:absolute;top:8px;right:8px;width:40px;height:40px;
  border:0;background:none;color:var(--muted);font-size:24px;line-height:1;
  cursor:pointer;padding:0;place-items:center}
.tip-grab{display:none;width:38px;height:4px;border-radius:999px;background:var(--line);
  margin:0 auto 8px}

.legend{display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.legend .ramp{flex:1;max-width:280px;height:9px;border-radius:5px;
  border:1px solid var(--line)}
.legend b{color:var(--ink);font-family:var(--mono);font-weight:700}

.potus{margin-top:26px}
.pbar.below{opacity:.72}
.pbar .gap{color:var(--muted);font-size:12px;flex:none}
.pbar .gap::before{content:'\00b7';margin-right:9px;opacity:.45}

.pn-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pn-head h2{margin:0;font-family:var(--display);font-size:21px;font-weight:700}
.pn-rule{color:var(--muted);font-size:13px}
.pn-bars{display:flex;flex-direction:column;gap:7px}
.pbar{display:flex;align-items:center;gap:11px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:9px 14px;position:relative;
  overflow:hidden}
/* How far this name is from 270. It was panel-2 on panel, a difference of a
   few points of lightness that neither theme could actually show, so the bar
   that carries the whole point of the row read as nothing. Accent instead:
   faint at the start, strongest at the head, with a hard leading edge so the
   number it stops at is readable at a glance. */
.pbar .fill{position:absolute;inset:0 auto 0 0;z-index:0;
  background:linear-gradient(90deg,var(--pfill),var(--pfill-2));
  border-right:2px solid var(--pfill-edge)}
/* The fill is positioned, so anything that is not would paint behind it. */
.pbar > *,.pbar .pmeta > *{position:relative;z-index:1}
/* No box of its own on a wide screen: the two spans sit in the bar directly,
   exactly as they always have. The narrow layout gives it one and moves both
   of them onto a row of their own. */
.pbar .pmeta{display:contents}
.pbar img{width:24px;height:24px;border-radius:6px;object-fit:contain;flex:none;
  background:var(--panel-2);border:1px solid var(--line)}
.pbar .who{flex:1;min-width:0;text-decoration:none;color:inherit}
.pbar .who b{display:block;font-weight:650;font-size:14px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pbar .who small{display:block;color:var(--muted);font-size:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pbar .who:hover b{color:var(--accent-text)}
.pbar .st{color:var(--muted);font-size:12px;flex:none}
.pbar .ev{font-family:var(--mono);font-weight:800;color:var(--accent-text);flex:none;
  min-width:64px;text-align:right}
.pbar.empty-ballot{color:var(--muted);font-size:13px;justify-content:flex-start}
/* Quiet on purpose. Every candidate row carries one of these, and on a phone they
   stack right above the section's own Run for president button: painted in the same
   accent they all read as one pile of yellow and the section CTA reads as the last
   row's. One hero button per section; the rows get the outline. */
.pbar .push{flex:none;border-radius:9px;padding:8px 13px;font-size:12px;
  font-weight:750;font-family:inherit;cursor:pointer;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.pbar .push:hover{border-color:var(--accent);color:var(--accent-text)}
/* A locked seat is hatched, so the lock reads without relying on colour and
   without hiding whose logo is sitting on it. */
svg .state.locked{stroke:var(--accent);stroke-width:1.6;
  stroke-dasharray:3 2.5;paint-order:stroke}
.pn-cta{margin-top:12px;background:var(--accent-grad);color:var(--accent-ink);
  border:0;border-radius:12px;padding:13px 22px;font-weight:800;font-size:15px;
  cursor:pointer;font-family:inherit}
.pn-cta b{font-family:var(--mono)}
.pn-note{color:var(--muted);font-size:12px;margin:9px 0 0}

.potus-seat{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:16px;
  background:linear-gradient(100deg,var(--warn-bg),var(--panel));
  border:1px solid var(--accent);flex-wrap:wrap;margin-top:26px}
.potus-seat.vacant{background:var(--panel);border:1px dashed var(--line)}
.potus-seat img{width:64px;height:64px;border-radius:14px;object-fit:contain;flex:none;
  background:var(--plate);border:1px solid var(--line)}
.pw-chair{width:64px;height:64px;border-radius:14px;flex:none;display:grid;
  place-items:center;font-size:26px;color:var(--muted);
  background:var(--panel-2);border:1px dashed var(--line)}
.pw-vacant{display:block;font-family:var(--display);font-size:30px;font-weight:700;
  letter-spacing:-.8px;color:var(--muted);margin:2px 0}
.pw-body{flex:1;min-width:200px}
.pw-label{display:block;color:var(--accent-text);font-size:11px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase}
#pw-name{display:block;font-family:var(--display);font-size:30px;font-weight:700;
  letter-spacing:-.8px;text-decoration:none;color:var(--ink);margin:2px 0}
#pw-name:hover{color:var(--accent-text)}
.pw-ev{color:var(--muted);font-size:13px;font-family:var(--mono)}

/* A term is running: the seat cannot be taken until the clock runs out. */
.pw-term{flex:none;text-align:right;padding:0 4px}
.pw-term-label{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;
  letter-spacing:1.2px}
.pw-clock{display:block;font-family:var(--mono);font-size:30px;font-weight:800;
  letter-spacing:-1px;color:var(--accent-text);font-variant-numeric:tabular-nums}
.pw-term-note{display:block;color:var(--muted);font-size:11px}
.potus-seat.locked{border-color:var(--hot);
  background:linear-gradient(100deg,var(--hi-bg),var(--panel))}
.potus-seat.locked .pw-clock{color:var(--hot)}

/* Locked states read as untouchable on the map rather than merely claimed. */
#map path.locked{stroke:var(--hot);stroke-width:2;stroke-dasharray:4 3}
.seat.locked .n{color:var(--hot)}
.seat .lockchip{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--hot);border:1px solid var(--hot);border-radius:5px;padding:1px 6px}

/* A news tape, pinned to the bottom of every screen. Takeovers are the thing
   that makes the board feel alive, and they were buried below the fold. */
.tape{position:fixed;left:0;right:0;bottom:0;z-index:40;height:44px;
  /* The home indicator sits under the last few pixels of a fixed bar. */
  height:calc(44px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:stretch;
  background:color-mix(in srgb,var(--tape-bg) 92%,transparent);
  border-top:2px solid var(--flag-red);
  box-shadow:0 -8px 28px var(--shadow);backdrop-filter:blur(14px)}
.tape-label{flex:none;display:flex;align-items:center;gap:8px;
  padding:0 26px 0 18px;font-size:12px;font-weight:900;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--accent-ink);background:var(--accent);
  white-space:nowrap;
  /* the angled tab a news lower-third always has */
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.tape-label .livedot{background:var(--flag-red);box-shadow:none;animation:blink 1.4s infinite;
  width:7px;height:7px}
@keyframes blink{0%,55%{opacity:1}70%,100%{opacity:.25}}
.tape-view{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
/* stretch, not center: each item is a link to a state, and a moving target is
   hard enough to hit without it being 21px of the tape's 40. */
.tape-run{display:flex;align-items:stretch;gap:0;width:max-content;height:100%;
  animation:tape 60s linear infinite}
.tape:hover .tape-run{animation-play-state:paused}
/* A finger has no hover, so holding the tape is how you stop it to read one. */
.tape:active .tape-run{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .tape-run{animation:none}
  .tape-view{overflow-x:auto}
}
/* The tape is always dark, the way a broadcast lower-third is, so its own
   colours are fixed rather than following the page theme. */
.tape-item{display:flex;align-items:center;gap:8px;padding:0 20px;font-size:13px;
  color:#98a2b8;white-space:nowrap;border-right:1px solid #232838;
  text-decoration:none}
@media (hover:hover){.tape-item:hover{color:#fff}}
.tape-item img{width:20px;height:20px;border-radius:5px;object-fit:contain;flex:none;
  background:#1a1f2c;border:1px solid #262c3c}
.tape-item b{color:#eef1f7;font-weight:700}
.tape-item .code{font-family:var(--mono);font-size:11px;font-weight:700;
  color:#eef1f7;background:#1a1f2c;border:1px solid #262c3c;
  border-radius:5px;padding:1px 6px}
.tape-item .amt{font-family:var(--mono);font-weight:800;color:var(--accent-text)}
.tape-item .beat{color:var(--hot)}

.ranking{margin-top:34px;padding-bottom:60px}
.rankhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.rankhead h2{margin:0;font-family:var(--display);font-size:21px;font-weight:700;
  letter-spacing:-.3px}
.filters{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.chip-btn{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;font-family:inherit}
.chip-btn em{font-style:normal;opacity:.65;margin-left:4px;font-family:var(--mono);font-size:12px}
.chip-btn:hover{color:var(--ink)}
.chip-btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  font-weight:700}
.chip-btn.on em{opacity:.75}
#rank-search{width:210px;padding:8px 13px;border-radius:999px;font-size:13px}

.ranklist{display:flex;flex-direction:column;gap:9px}
/* A rule closes the group above it, so it reads as "everything over this line
   was the top three". The list already carries a 9px flex gap, so 13px of
   margin puts 22px of air on each side of the rule. */
.rankdiv{display:flex;align-items:center;gap:12px;margin:13px 0}
.rankdiv::before,.rankdiv::after{content:"";flex:1 1 0;height:1px;background:var(--line)}
.rankdiv-pill{flex:0 0 auto;padding:5px 14px;border:1px solid var(--hi-line);
  border-radius:999px;background:var(--hi-bg);color:var(--accent-text);
  font-size:11px;font-weight:700;line-height:1;letter-spacing:1.2px;text-transform:uppercase}

/* The top three get real weight. A ranked list where every row looks the same
   is a spreadsheet, and the whole point is that first place is worth wanting. */
.seat.podium{padding:16px 18px}
.seat.podium .n{font-size:19px}
.seat.podium .sname{font-size:18px}
.seat.podium .holder img{width:34px;height:34px}
.seat.podium .holder b{font-size:16px}
.seat.podium .price b{font-size:22px}
.seat.p1{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.seat.p1 .n{color:var(--accent-text)}
.seat.p2{box-shadow:inset 3px 0 0 #9aa6bd}
.seat.p3{box-shadow:inset 3px 0 0 #a9743f}
.seat{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:13px 16px;align-items:center;cursor:pointer;
  transition:border-color .12s,background .12s}
.seat:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--panel-2)}
/* Taken is said by the shading and the star; the left edge is saved for the
   podium, so first place actually looks like first place. */
.seat.taken{border-left:1px solid var(--line)}
.seat .n{width:30px;flex:none;text-align:center;font-family:var(--mono);font-size:15px;
  color:var(--muted);font-weight:700}
.seat.top1 .n{color:var(--accent-text)}
.seat .main{flex:1;min-width:0}
.seat .line1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.seat .sname{font-size:16px;font-weight:700;letter-spacing:-.3px}
.seat .scode{font-family:var(--mono);font-size:11px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.seat .sev{font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--accent-text);background:var(--hi-bg);border:1px solid var(--hi-line);
  border-radius:5px;padding:1px 6px}
.seat .role{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
.seat a.sname{color:inherit;text-decoration:none}
.seat a.sname:hover{color:var(--accent-text)}
.seat .bidders{font-size:12px;color:var(--muted);text-decoration:none;
  border-bottom:1px dashed var(--line)}
.seat .bidders:hover{color:var(--accent-text)}
.seat .holder{display:flex;align-items:center;gap:9px;margin-top:7px;min-width:0;
  text-decoration:none;color:inherit}
.seat .holder:hover b{color:var(--accent-text)}
.seat .holder img{width:26px;height:26px;border-radius:7px;flex:none;object-fit:contain;
  background:var(--panel-2);border:1px solid var(--line)}
.seat .holder .hb{min-width:0}
.seat .holder b{display:block;font-size:14px;font-weight:650;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.seat .holder small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.seat .empty{margin-top:6px;color:var(--muted);font-size:13px}
/* A governor's priced way onto the ballot. A text action, not a second yellow
   button: the row already sells the seat, and this buys states FOR the holder
   rather than from them. */
.seat .hpush{display:block;margin-top:6px;padding:0;border:0;background:none;
  color:var(--accent-text);font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;text-align:left}
.seat .hpush:hover{text-decoration:underline}
/* What the state is known for. Belongs to the state, so it stays put when
   somebody takes the seat and their own slogan appears below it. */
.seat .stateline{margin-top:4px;color:var(--muted);font-size:12.5px;font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Two columns, and the second one is the button's whether the row has a button
   or not. The governor never has one, so a flex row let his card grow into the
   space the challengers below him spend on it: every card ended somewhere
   different and no two prices sat under each other. He keeps the empty column
   instead. A price long enough to need more than the reserved width takes it,
   which is the old ragged behaviour for a case that is rare rather than the
   normal one for every row. */
.seat .right{display:grid;grid-template-columns:auto minmax(196px,auto);
  align-items:center;justify-items:end;gap:14px;flex:none}
/* Every button the same width, so the prices beside them line up too. The
   column grows only for a price long enough to need it. */
.seat .right > button{width:100%}
.seat .price{text-align:right}
.seat .price b{display:block;font-family:var(--mono);font-size:18px;font-weight:800;
  color:var(--accent-text);letter-spacing:-.5px}
/* One breath: "take it for $2" split over two lines read as two facts. */
.seat .price small{color:var(--muted);font-size:11px;white-space:nowrap}
.seat .price.free b{color:var(--accent-text);font-size:15px;letter-spacing:.5px}
.seat .take{border:0;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:750;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;font-family:inherit;
  white-space:nowrap}
.seat .take:hover{filter:brightness(1.08)}
dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:20px;padding:0;width:min(560px,94vw);max-height:92vh}
dialog::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}
.modal{padding:26px 28px 22px;position:relative;overflow:auto;max-height:92vh}
.modal .x{position:absolute;top:16px;right:18px;background:none;border:0;
  color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.modal .x:hover{color:var(--ink)}

.mhead{display:flex;gap:15px;align-items:center;margin-bottom:18px}
.crest{width:60px;height:60px;flex:none;border-radius:15px;display:grid;place-items:center;
  font-size:28px;background:var(--warn-bg);border:1px solid var(--warn-line)}
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--tag-bg);
  border:1px solid var(--tag-line);color:var(--tag-text);border-radius:999px;padding:3px 12px;
  font-size:12px;font-weight:650;letter-spacing:.4px;margin-bottom:6px}
.badge b{font-family:var(--mono)}
a.badge{text-decoration:none}
a.badge:hover{filter:brightness(1.15)}
.boardlink{color:inherit;text-decoration:underline;text-underline-offset:3px}
.boardlink:hover{color:var(--accent-text)}
.note .boardlink{color:var(--accent-text)}
.badge em{font-style:normal;opacity:.5}
.mhead h3{margin:0;font-family:var(--display);font-size:28px;font-weight:700;
  letter-spacing:-.6px;line-height:1.1}

.holder{background:var(--hi-bg);border:1px solid var(--hi-line);border-radius:14px;
  padding:14px 16px;margin-bottom:20px}
.hrow{display:flex;align-items:baseline;gap:10px}
.htag{color:var(--accent-text);font-weight:650;font-size:13px}
.hamt{margin-left:auto;font-family:var(--mono);font-size:17px;font-weight:700}
.hname{font-size:17px;font-weight:650;margin-top:6px;line-height:1.3}
.hdesc{color:var(--muted);font-size:13px;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hrule{color:var(--hi-text);font-size:13px;font-weight:600;margin-top:10px;line-height:1.45}
.hrule u{text-underline-offset:3px}

.freebar{border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.45;
  margin-bottom:4px}
.freebar.good{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-text)}
.freebar.good b{color:var(--live)}
.freebar.used{background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.freebar.used b{color:var(--ink)}
.freebar a{color:var(--accent-text)}
/* A standing link's identity is the board's, not the form's; the fields show it, locked. */
.modal input[readonly]{background:var(--panel-2);color:var(--muted);cursor:default}

.open-seat{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;margin-bottom:20px;color:var(--muted);font-size:14px}
.open-seat b{color:var(--accent-text);font-family:var(--mono)}

label{display:block;font-size:13px;color:var(--ink);font-weight:600;
  margin:15px 0 6px;letter-spacing:0}
label .minhint{float:right;color:var(--muted);font-weight:500;font-size:12px}
input{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:15px;font-family:inherit}
input::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
input:focus{outline:2px solid var(--accent);outline-offset:-1px}

.urlrow{display:flex;gap:8px;align-items:stretch}
.urlrow .globe{display:grid;place-items:center;width:38px;flex:none;
  background:var(--bg);border:1px solid var(--line);border-right:0;
  border-radius:11px 0 0 11px;font-size:14px}
.urlrow input{border-radius:0 11px 11px 0;border-left:0}
/* A helper, not a warning: the tag red it once borrowed made "Fetch details" read
   as an error sitting under an empty field. Neutral like the quick-bid buttons. */
.urlrow button{flex:none;padding:0 16px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);font-weight:650;font-size:13px;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.urlrow button:hover{border-color:var(--accent);color:var(--accent-text)}
.urlrow button:disabled{opacity:.55;cursor:progress}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.logorow{display:flex;gap:8px;align-items:center}
.logorow img{width:38px;height:38px;flex:none;border-radius:9px;background:var(--panel-2);
  object-fit:contain;border:1px solid var(--line)}

/* Where the picture came from. An X profile fills the logo with a face and not
   a bird, which reads as a bug until the line under the field says whose face. */
.pulled{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.pulled b{color:var(--ink);font-weight:650}

.bidrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.money{position:relative;flex:none;width:118px}
.money span{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:15px;pointer-events:none}
.money input{padding-left:27px;font-family:var(--mono);font-weight:700;font-size:16px}
.qb{padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit}
.qb:hover{border-color:var(--accent)}
.qb.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  font-weight:800}

.btn{display:block;width:100%;margin-top:18px;padding:16px;border:0;border-radius:13px;
  background:var(--accent-grad);color:var(--accent-ink);
  font-weight:800;font-size:16px;cursor:pointer;font-family:inherit;letter-spacing:-.2px}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.turnstile{margin-top:14px;min-height:0}
.err{color:var(--hot);font-size:13px;min-height:17px;margin-top:11px}
.note{color:var(--muted);font-size:12px;text-align:center;margin:11px 0 0}

footer{border-top:1px solid var(--line);color:var(--muted);
  /* The tape is 44px of fixed furniture, plus whatever the home indicator takes. */
  padding:26px 0 calc(78px + env(safe-area-inset-bottom));
  font-size:13px;text-align:center}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--accent-text)}
footer .fmain{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  align-items:center;font-weight:600}
footer .sep{color:var(--accent-text);font-size:9px;opacity:.7}
footer .credit{margin-top:12px;font-size:12px;max-width:620px;margin-left:auto;
  margin-right:auto;line-height:1.6}
footer .credit a{color:var(--muted);border-bottom:1px solid var(--line)}
footer .credit a:hover{color:var(--accent-text)}
footer .built{margin-top:7px;opacity:.85}

/* ==================================================================
   Small screens.

   Most of the traffic arrives on a phone, so this is not a fallback.
   It is the layout most visitors will ever see. Four rules run through
   all of it:

   1. Nothing a finger has to hit is smaller than 44px.
   2. Every text input is 16px, because anything smaller makes iOS
      Safari zoom the page on focus and the visitor has to pinch back
      out to read what they typed.
   3. Nothing scrolls sideways except the tape, which is meant to.
   4. Anything fixed to the bottom clears the home indicator.
   ================================================================== */

/* A tap leaves :hover stuck on whatever it landed on in mobile Safari, so the
   last thing you touched stays lit until you touch another one. */
@media (hover:none){
  #map path.state:hover{stroke:var(--map-stroke);stroke-width:1.1}
  .seat:hover{border-color:var(--line);background:var(--panel)}
  .pill:hover,.chip-btn:hover{border-color:var(--line)}
  .themetog:hover{color:var(--muted);border-color:var(--line)}
  .qb:hover,.stale button:hover{border-color:var(--line)}
}

@media (max-width:900px){
  input,select,textarea{font-size:16px}
  .wrap{padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}

  .hero{padding:16px 0 12px}
  /* Four facts in a pill that cannot wrap is four facts on one line off the
     side of the screen. Let it become a small card instead. */
  .pill{flex-wrap:wrap;justify-content:center;border-radius:16px;
    padding:9px 16px;max-width:100%;line-height:1.7;min-height:44px}

  .legend{flex-wrap:wrap;gap:6px 10px;padding:10px 14px}
  .legend > span:first-child{flex:1 0 100%}
  .legend .ramp{max-width:none}
  .map-fallback{padding:34px 18px}

  .rankhead{gap:10px}
  .filters{margin-left:0;width:100%}
  /* The id beats the bare input selector above, so this has to say 16px again
     or iOS zooms the whole page the moment the search box takes focus. */
  #rank-search{flex:1;width:auto;min-height:44px;font-size:16px}
  .chip-btn{min-height:44px}

  .seat{flex-wrap:wrap}
  /* Back to a flex row on a phone: the button goes full width under the price
     here, so there is no second column to reserve and nothing to line up. */
  .seat .right{display:flex;width:100%;justify-content:space-between;margin-top:6px}
  /* A row with no button carries only its price, and space-between with one
     child pins it to the left, where it reads as a stray number. Asked of the
     markup rather than of a class, so a row that loses its button later still
     lays out correctly. */
  .seat .right.solo,.seat .right:not(:has(> button)){justify-content:flex-end}
  .seat .take{min-height:44px;padding:11px 20px;font-size:14px}
  /* The whole row opens the seat, and the state name inside it goes somewhere
     else. Two targets that close together need the smaller one to be a real
     one: the padding buys 44px and the negative margin gives the layout back,
     so the row looks exactly as it did. */
  .seat .line1 a.sname{padding:11px 0;margin:-11px 0}
  /* A 15px text action inside a tappable row. Same trade as the state name
     above: padding buys the target, the negative margin gives the layout back. */
  .seat .hpush{padding:14px 0;margin:-8px 0 -14px}
  /* A paid outbound link. Nothing on this page has more claim to a target. */
  #pw-name{padding:2px 0}
  /* A candidate with no tagline is one line of text, 21px of it, and this is
     the outbound link they paid for. Centre it in a real target instead. */
  .pbar .who{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  /* Site navigation, not prose, so it gets navigation sized targets. Inline
     links inside a sentence are left alone: 44px there breaks the line box. */
  footer .fmain a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

  .stale{gap:9px}
  .stale button{margin-left:0;width:100%;min-height:44px}
}

@media (max-width:700px){
  /* The whole country is about 330px wide here, so a state label rendered at 9
     map units is roughly three pixels. Bigger units, bigger on screen. */
  #map .lbl{font-size:12px;stroke-width:3px}

  .potus-seat{gap:12px;padding:16px;margin-top:20px}
  .potus-seat img,.pw-chair{width:52px;height:52px;border-radius:12px}
  .pw-body{flex:1 1 150px;min-width:0}
  #pw-name,.pw-vacant{font-size:clamp(22px,7vw,28px);letter-spacing:-.6px}
  .pw-term{flex:1 1 100%;text-align:left;padding:0;display:flex;
    align-items:baseline;gap:9px;flex-wrap:wrap}
  .pw-clock{font-size:24px}
  /* Stacked right under the last candidate card here, so it needs the air that
     tells a thumb it belongs to the section and not to that card. */
  .pn-cta{width:100%;min-height:50px;margin-top:14px}

  .potus{margin-top:20px}
  .pn-head h2{font-size:19px}
  /* Name, votes and a price on one line is five things fighting for 330px.
     Three rows: who, how they stand, and the button. */
  .pbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"img who ev" "meta meta meta" "push push push";
    gap:5px 10px;padding:11px 13px;align-items:center}
  .pbar img{grid-area:img}
  .pbar .who{grid-area:who}
  .pbar .ev{grid-area:ev;min-width:0;font-size:13px}
  .pbar .pmeta{display:flex;grid-area:meta;align-items:baseline;gap:8px;
    min-width:0;flex-wrap:wrap}
  .pbar .gap::before{content:"";margin:0}
  .pbar .push{grid-area:push;width:100%;min-height:46px;margin-top:4px}
  .pbar.empty-ballot{display:block;line-height:1.5}
}

@media (max-width:600px){
  .hdr{height:56px;gap:8px}
  .logo{font-size:18px}
  .logo .star{font-size:12px;margin-right:5px}
  .hdr nav{gap:2px;font-size:13px}
  .hdr nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  /* The board is the home page and the wordmark already goes there. Two links
     and a theme switch are what fits beside the wordmark at 360px. */
  .themetog{width:44px;height:44px}
  /* The way back to the board from every other page. */
  .logo{min-height:44px;align-items:center}
  .demo-bar{font-size:12px;padding:8px 0}

  .mapcard{margin-top:12px;border-radius:14px}
  /* The hover card has nothing to hover. On a phone it is a sheet you tap,
     sitting above the tape, with the price as a real button. */
  .tip{position:fixed;left:0;right:0;top:auto;bottom:0;
    transform:none;min-width:0;max-width:none;pointer-events:auto;z-index:45;
    border-radius:18px 18px 0 0;border-bottom:0;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 44px var(--shadow)}
  /* The tape is only there once something has actually happened on the board,
     and a sheet floating 40px above the bottom edge reads as a bug. */
  body.has-tape .tip{bottom:calc(40px + env(safe-area-inset-bottom));padding-bottom:16px}
  .tip-grab{display:block}
  .tip-x{display:grid}
  .tip-top{padding-right:42px}
  .tip-cta{margin-top:12px;min-height:48px;border-radius:12px;text-align:center;
    background:var(--accent-grad);color:var(--accent-ink);font-size:15px;
    font-weight:800;white-space:normal}
  /* A thumb target on the sheet; with a mouse the card is inert anyway. */
  .tip-more{display:flex;align-items:center;min-height:44px}

  .ranking{margin-top:24px;padding-bottom:36px}
  .seat{padding:12px 13px;gap:10px;border-radius:12px}
  .seat .n{width:20px;font-size:13px}
  .seat .line1{gap:7px}
  .seat .sname{font-size:15px}
  .seat.podium{padding:14px}
  .seat.podium .n{font-size:16px}
  .seat.podium .sname{font-size:17px}
  .seat.podium .price b{font-size:20px}
  .seat.podium .holder img{width:30px;height:30px}
  .rankdiv{margin:9px 0}

  /* A full width sheet from the bottom edge, the way every other payment form
     on a phone works, instead of a centred box with the keyboard over it. */
  dialog{width:100%;max-width:100%;max-height:92vh;max-height:92dvh;
    margin:auto auto 0;border-radius:20px 20px 0 0;border-bottom:0}
  .modal{padding:18px 16px calc(16px + env(safe-area-inset-bottom));
    max-height:92vh;max-height:92dvh}
  .modal .x{top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;
    padding:0}
  .mhead{gap:12px;margin-bottom:14px;padding-right:42px}
  .crest{width:46px;height:46px;border-radius:12px;font-size:22px}
  .mhead h3{font-size:23px}
  .holder,.open-seat{padding:12px 13px;margin-bottom:16px;border-radius:12px}
  label{margin:13px 0 6px}
  /* The globe is decoration and it costs 38px of a field somebody has to type a
     URL into, so it goes and the fetch button takes its own line. */
  .urlrow{flex-wrap:wrap}
  .urlrow .globe{display:none}
  .urlrow input{border-radius:11px;border-left:1px solid var(--line);width:100%}
  .urlrow button{width:100%;min-height:46px;padding:12px 16px}
  .logorow img{width:44px;height:44px}
  /* The amount and the minimum each get a full row, then the four steps share
     one. Nothing here is narrower than a thumb. */
  .bidrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .money{width:auto;grid-column:1 / -1}
  .qb{min-height:46px;padding:11px 6px}
  .qb.primary{grid-column:1 / -1}
  /* The price is the decision, so it stays on screen while the form scrolls. */
  .modal .btn{position:sticky;bottom:0;z-index:2;min-height:54px;font-size:15px;
    box-shadow:0 0 0 10px var(--panel)}
  .two{grid-template-columns:1fr}
  /* The two links a thumb actually goes for in the sheet: the board link under
     the form and the state chip in the head. The chip keeps its size and grows
     an invisible halo instead, because a 44px pill would shout. */
  .modal .note .boardlink{display:inline-flex;align-items:center;min-height:44px}
  .mhead .badge{position:relative}
  .mhead .badge::after{content:'';position:absolute;inset:-10px -8px}

  .tape{height:calc(40px + env(safe-area-inset-bottom))}
  .tape-label{padding:0 17px 0 12px;font-size:10px;letter-spacing:1.1px}
  .tape-item{padding:0 14px;font-size:12px;gap:7px}
  .tape-item img{width:17px;height:17px}
  .toast{left:12px;right:12px;transform:none;text-align:center;
    bottom:calc(54px + env(safe-area-inset-bottom))}
  footer{padding:22px 0 calc(64px + env(safe-area-inset-bottom))}
  footer .fmain{gap:9px}
}

/* An iPhone SE, and every phone once the keyboard is up. */
/* The wordmark plus three links plus the theme switch needs 398px laid out at
   the sizes above. Rather than drop a link at the first sign of pressure, the
   header tightens: at these widths it needs 347px and Governors survives on
   every phone in use. */
@media (max-width:430px){
  .logo{font-size:17px}
  .logo .star{margin-right:4px}
  .hdr nav{font-size:12px;gap:0}
  .hdr nav a{padding:0 6px}
}

@media (max-width:380px){
  .wrap{padding:0 max(13px,env(safe-area-inset-right)) 0 max(13px,env(safe-area-inset-left))}
  .seat .take{padding:11px 14px}
  .qb{font-size:12px;padding:11px 4px}
  .mhead h3{font-size:21px}
}

/* Under 347px the three of them genuinely do not fit, and something has to go.
   Governors is the one that can: it points at /#board, and the wordmark beside
   it already goes to the same page. About and Rules have no second route. */
@media (max-width:346px){
  .hdr nav a.navboard{display:none}
}