/* Parallel States. One stylesheet for the landing page and the app.
   Shape rule: buttons and inputs 10px, cards 16px, chips full pill.
   Colour rule: ink for actions, blue and red only ever mean the two nations. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #F3F4F6; --surface: #FCFCFD; --sunk: #E9EBEF; --ink: #13151B; --ink-2: #3D424D; --muted: #636A78; --line: #D9DCE3;
  --blue: #2B50D6; --blue-soft: #E4EAFB; --red: #D2343F; --red-soft: #FBE6E7;
  --good: #0B7A63; --bad: #A65B00; --on-ink: #F7F8FA;
  --shadow: 0 1px 2px rgb(19 21 27 / .06), 0 10px 30px -12px rgb(19 21 27 / .18);
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif; --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-s: 10px; --r-l: 16px; --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1116; --surface: #171A21; --sunk: #1E222B; --ink: #ECEEF3; --ink-2: #C3C8D2; --muted: #969DAB; --line: #2B303B;
    --blue: #7090FF; --blue-soft: #1B2547; --red: #F26B74; --red-soft: #40191E;
    --good: #4CC9A8; --bad: #E6A14A; --on-ink: #13151B;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .6);
  }
}
[data-nation="dem"] { --side: var(--blue); --side-soft: var(--blue-soft); --them: var(--red); }
[data-nation="rep"] { --side: var(--red); --side-soft: var(--red-soft); --them: var(--blue); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.ph, .ph-fill { font-size: 1.15em; vertical-align: -0.14em; }
h1, h2, h3 { font-family: var(--display); font-stretch: 108%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* brand mark: two parallel bars, an equals sign */
.mark { display: inline-grid; gap: 4px; width: 24px; }
.mark i { height: 7px; border-radius: 2px; background: var(--blue); }
.mark i + i { background: var(--red); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 18px/1 var(--display); font-stretch: 112%; letter-spacing: -0.01em; text-decoration: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: var(--r-s);
  background: var(--ink); color: var(--on-ink); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), background .2s, opacity .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.side { background: var(--side); border-color: var(--side); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
@media (prefers-color-scheme: dark) { .btn.side { color: #10121A; } }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--sunk); font-size: 13px; line-height: 1.5; white-space: nowrap; }
.chip.good b { color: var(--good); } .chip.bad b { color: var(--bad); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.good { color: var(--good); } .delta.bad { color: var(--bad); } .delta.flat { color: var(--muted); font-weight: 500; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.tag.dem { background: var(--blue-soft); color: var(--blue); } .tag.rep { background: var(--red-soft); color: var(--red); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }

/* ---------- ballot card (shared) ---------- */
.measure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; }
.measure header .topic { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.measure h3 { font-size: 22px; margin: 8px 0 6px; }
.measure header p { color: var(--muted); font-size: 15px; }
.opts { display: grid; gap: 8px; margin-top: 16px; }
.opt { position: relative; border: 1.5px solid var(--line); border-radius: var(--r-s); overflow: hidden; transition: border-color .2s; }
.opt.is-picked { border-color: var(--ink); }
.opt-main { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 14px 6px; border: 0; background: none; text-align: left; }
.opt-main[disabled] { cursor: default; }
.radio { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--muted); border-radius: 50%; display: grid; place-items: center; transition: border-color .2s; }
.radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .3s var(--ease); }
.is-picked .radio { border-color: var(--ink); } .is-picked .radio::after { transform: scale(1); }
.opt-label { flex: 1; font-weight: 600; line-height: 1.35; }
.rec { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.opt-count { font: 800 18px/1.2 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.opt-count small { display: block; font: 500 12px/1.2 var(--body); color: var(--muted); }
.opt .bar { position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w); background: var(--sunk); transition: width .7s var(--ease); }
.opt.is-ahead .bar { background: var(--side-soft, var(--sunk)); }
.sheet { position: relative; z-index: 1; }
.sheet summary { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 10px 46px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.sheet summary::-webkit-details-marker { display: none; }
.sheet[open] summary { color: var(--ink); }
.sheet-body { margin: 0 14px 14px 46px; padding: 14px; border-radius: var(--r-s); background: var(--paper); font-size: 14px; display: grid; gap: 8px; }
.sheet-body h5 { margin-top: 6px; font: 700 13px/1.3 var(--body); }
.maybe { display: grid; gap: 8px; }
.maybe li { display: grid; gap: 4px; }
.odds { font-size: 12px; font-weight: 700; color: var(--muted); }
.reading li { color: var(--ink-2); padding-left: 14px; position: relative; }
.reading li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1.5px; background: var(--muted); }
.fine { font-size: 12.5px; color: var(--muted); }

/* ---------- charts ---------- */
svg .grid { stroke: var(--line); stroke-width: 1; }
svg .tick { fill: var(--muted); font: 500 11px var(--body); font-variant-numeric: tabular-nums; }
svg .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
svg .line.dem, svg .me.dem { stroke: var(--blue); } svg .line.rep, svg .me.rep { stroke: var(--red); }
svg .end.dem { fill: var(--blue); } svg .end.rep { fill: var(--red); }
svg .lab { font: 700 12px var(--body); font-variant-numeric: tabular-nums; } svg .lab.dem { fill: var(--blue); } svg .lab.rep { fill: var(--red); }
svg .dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
svg .ev line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
.spark { width: 120px; height: 34px; } .spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .them { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .draw .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) .15s forwards; }
  .draw .end, .draw .lab { opacity: 0; animation: fade .4s ease 1.5s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fade { to { opacity: 1; } }
}
/* Scroll-linked entrance. Pure CSS: without support, content is simply visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  }
}

/* ================= LANDING ================= */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.nav nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 600; }
.nav nav a { text-decoration: none; color: var(--ink-2); } .nav nav a:hover { color: var(--ink); }
.hero { padding: 64px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6.2vw, 84px); font-stretch: 100%; font-weight: 900; letter-spacing: -0.035em; line-height: .96; }
.hero h1 span { display: block; }
.hero .lede { margin: 22px 0 30px; max-width: 34ch; font-size: 20px; line-height: 1.45; color: var(--ink-2); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .cta .btn { min-height: 54px; padding: 0 26px; font-size: 17px; }
.run { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 20px 14px; box-shadow: var(--shadow); }
.run-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.run-top b { font: 800 17px/1.2 var(--display); }
.legend { display: flex; gap: 14px; font-size: 13px; font-weight: 600; }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--blue); }
.legend span + span::before { background: var(--red); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.tabs button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: none; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s; }
.tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.run-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.run-events { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-top: 6px; }

section { padding: 88px 0; scroll-margin-top: 66px; }
section > .wrap > h2 { font-size: clamp(32px, 4.2vw, 52px); max-width: 18ch; }
section > .wrap > .intro { margin-top: 14px; max-width: 56ch; font-size: 18px; color: var(--ink-2); }

/* week track */
.week { margin-top: 44px; display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
.day { padding: 14px 14px 18px; border-left: 1px solid var(--line); min-height: 190px; }
.day:first-child { border-left: 0; }
.day > span { font: 800 13px/1 var(--display); font-stretch: 112%; color: var(--muted); }
.day.on { background: var(--ink); color: var(--on-ink); border-left-color: var(--ink); }
.day.on > span { color: inherit; opacity: .7; }
.day b { display: block; margin: 44px 0 6px; font: 800 19px/1.1 var(--display); }
.day p { font-size: 14px; line-height: 1.4; opacity: .85; }
.week-note { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; color: var(--ink-2); }
.week-note span { display: inline-flex; gap: 8px; align-items: center; }

/* fact sheet demo */
.demo { background: var(--sunk); }
.demo .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.demo h2 { font-size: clamp(30px, 3.6vw, 46px); }
.demo .points { margin-top: 26px; display: grid; gap: 18px; }
.demo .points li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; font-size: 16px; color: var(--ink-2); }
.demo .points .ph { font-size: 24px; color: var(--ink); }
.demo .points b { display: block; color: var(--ink); }

/* results table */
.results { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.result-card { padding: 22px; }
.result-card h3 { font-size: 20px; margin-bottom: 14px; }
.rt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rt th { font-size: 13px; font-weight: 700; text-align: right; padding: 0 0 10px; }
.rt th:first-child, .rt td:first-child { text-align: left; }
.rt td { padding: 11px 0; border-top: 1px solid var(--line); text-align: right; font-weight: 600; }
.rt td:first-child { font-weight: 500; color: var(--ink-2); }
.rt .dem { color: var(--blue); } .rt .rep { color: var(--red); }
.rt .lead { font-weight: 800; } .rt .lead::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-left: 6px; vertical-align: middle; }
.ladder { padding: 22px; display: grid; gap: 10px; align-content: start; }
.ladder h3 { font-size: 20px; margin-bottom: 6px; }
.rung { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-s); background: var(--paper); }
.rung:nth-of-type(2) { margin-left: 22px; } .rung:nth-of-type(3) { margin-left: 44px; } .rung:nth-of-type(4) { margin-left: 66px; background: var(--ink); color: var(--on-ink); }
.rung .ph { font-size: 24px; } .rung b { display: block; line-height: 1.2; } .rung span { font-size: 14px; opacity: .8; }

/* crises bento: 5 tiles, 5 events */
.bento { margin-top: 40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tile { grid-column: span 2; padding: 22px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); min-height: 200px; display: flex; flex-direction: column; }
.tile:nth-child(1) { grid-column: span 3; background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tile:nth-child(2) { grid-column: span 3; background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--sunk) 14px 15px); }
.tile:nth-child(3) { background: var(--blue-soft); border-color: transparent; }
.tile:nth-child(5) { background: var(--red-soft); border-color: transparent; }
.tile .ph { font-size: 30px; }
.tile h3 { font-size: 22px; margin: auto 0 8px; padding-top: 28px; }
.tile p { font-size: 15px; opacity: .85; max-width: 44ch; }

/* rules + faq */
.rules .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.rules h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 22px; }
.rule { padding: 16px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.rule .ph { font-size: 22px; margin-top: 2px; } .rule b { display: block; } .rule span { color: var(--ink-2); font-size: 15px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ph { transition: transform .3s var(--ease); flex: none; margin-top: 3px; }
.faq details[open] summary .ph { transform: rotate(180deg); }
.faq details p { padding: 0 0 18px; color: var(--ink-2); font-size: 15px; max-width: 60ch; }

/* doors */
.doors h2 { text-align: center; margin: 0 auto; }
.doors .pair { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.door { display: flex; flex-direction: column; gap: 6px; padding: 32px; min-height: 230px; border-radius: var(--r-l); color: #fff; text-decoration: none; transition: transform .4s var(--ease); }
.door:hover { transform: translateY(-4px); }
.door.dem { background: #2B50D6; } .door.rep { background: #C92F3A; }
.door b { font: 900 clamp(26px, 3.4vw, 40px)/1 var(--display); letter-spacing: -0.02em; }
.door span { opacity: .9; } .door em { margin-top: auto; font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.doors .lockline { margin-top: 18px; text-align: center; color: var(--muted); font-size: 15px; }
footer.site { padding: 36px 0 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between; }
footer.site p { max-width: 70ch; }

@media (max-width: 900px) {
  .nav nav { display: none; } .nav .btn { margin-left: auto; }
  .hero { padding: 36px 0 48px; } .hero .wrap, .demo .wrap, .rules .wrap { grid-template-columns: 1fr; gap: 32px; }
  section { padding: 60px 0; }
  .week { grid-template-columns: 1fr; } .day { min-height: 0; border-left: 0; border-top: 1px solid var(--line); display: none; } .day.on { display: block; } .day b { margin-top: 10px; }
  .results, .doors .pair { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; } .tile, .tile:nth-child(1), .tile:nth-child(2) { grid-column: auto; min-height: 0; }
  .rung:nth-of-type(n) { margin-left: 0; }
}

/* ================= APP ================= */
.app { min-height: 100dvh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.rail { position: sticky; top: 0; height: 100dvh; padding: 22px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.rail .brand { padding: 4px 10px 22px; }
.rail a.t { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-s); text-decoration: none; font-weight: 600; color: var(--ink-2); position: relative; }
.rail a.t .ph { font-size: 21px; }
.rail a.t:hover { background: var(--sunk); }
.rail a.t[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.rail a.t .n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--side); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.rail .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: none; text-align: left; width: 100%; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--side); color: #fff; display: grid; place-items: center; font: 800 14px var(--display); }
.rail .me .avatar { color: #fff; font-size: 14px; }
.rail .me b { display: block; line-height: 1.2; font-size: 14px; } .rail .me span { font-size: 12px; color: var(--muted); }
.main { padding: 0 28px 150px; }
.topline { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 16px 0; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); }
.topline h1 { font-size: 26px; }
.topline .when { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.col { max-width: 760px; display: grid; gap: 16px; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.subtabs a { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.subtabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; }
.panel > h2 { font-size: 19px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.panel > h2 .more { margin-left: auto; font: 600 13px var(--body); letter-spacing: 0; color: var(--muted); }
.note { color: var(--muted); font-size: 14px; }
.todo li { border-top: 1px solid var(--line); } .todo li:first-child { border-top: 0; }
.todo a { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; text-decoration: none; font-weight: 600; }
.todo .box { width: 22px; height: 22px; border: 2px solid var(--muted); border-radius: 6px; display: grid; place-items: center; font-size: 14px; }
.todo .done { color: var(--muted); font-weight: 500; } .todo .done .box { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.todo small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.hero-card { padding: 22px; border-radius: var(--r-l); background: var(--side); color: #fff; display: grid; gap: 6px; }
.hero-card h2 { font-size: 26px; } .hero-card p { opacity: .92; max-width: 52ch; }
@media (prefers-color-scheme: dark) { .hero-card, .avatar, .rail .me .avatar, .rail a.t .n, .person.is-me .face, .postit.is-me .face, .tabbar a .n { color: #10121A; } }

.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { padding: 14px; border-radius: var(--r-s); background: var(--paper); display: grid; gap: 2px; }
.stat span { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat b { font: 800 24px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.stat .vs { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ind { padding: 16px; display: grid; gap: 4px; }
.ind .lab { font-size: 13px; font-weight: 700; color: var(--muted); }
.ind .val { display: flex; align-items: baseline; gap: 8px; }
.ind .val b { font: 800 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ind .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ind small { font-size: 12px; color: var(--muted); }

.news { display: grid; gap: 14px; }
.news .event { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; border-radius: var(--r-s); background: var(--ink); color: var(--on-ink); }
.news .event .ph { font-size: 30px; } .news .event b { display: block; font: 800 17px/1.2 var(--display); } .news .event span { font-size: 14px; opacity: .85; }
.passed li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.passed li:first-child { border-top: 0; } .passed span { color: var(--muted); font-weight: 600; font-size: 13px; padding-top: 2px; }
.passed em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 6px; }
.side-effect { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 14px; padding: 8px 12px; border-radius: var(--r-s); background: var(--paper); }
.them-box { padding: 14px; border-radius: var(--r-s); border: 1px dashed var(--line); font-size: 14px; display: grid; gap: 6px; }
.them-box b { color: var(--them); }

.person { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.person:first-of-type { border-top: 0; }
.person .face { width: 42px; height: 42px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; font: 800 15px var(--display); color: var(--ink-2); }
.person.is-me .face { background: var(--side); color: #fff; }
.person b { display: block; line-height: 1.25; } .person .q { font-size: 14px; color: var(--ink-2); } .person .role { font-size: 12px; font-weight: 700; color: var(--muted); }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: none; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; transition: border-color .2s, background .2s; }
.back:hover { border-color: var(--ink); }
.back[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.office-h { margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--ink); font: 800 15px var(--display); display: flex; gap: 8px; align-items: center; }
.office-h:first-of-type { margin-top: 0; }

.field { display: grid; gap: 6px; } .field label { font-size: 14px; font-weight: 700; } .field small { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.form { display: grid; gap: 14px; } .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.err { color: var(--bad); font-size: 14px; font-weight: 600; }

.budget-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.budget-row:first-of-type { border-top: 0; }
.budget-row .ph { font-size: 20px; color: var(--ink-2); } .budget-row b { font-weight: 600; } .budget-row small { display: block; font-size: 12px; color: var(--muted); }
.pips { display: flex; gap: 3px; } .pips i { width: 9px; height: 16px; border-radius: 2px; background: var(--sunk); } .pips i.on { background: var(--ink-2); } .pips i.mid { background: var(--muted); }
.move { min-width: 62px; text-align: center; padding: 4px 8px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--sunk); }
.move.up { background: var(--ink); color: var(--on-ink); } .move.down { background: transparent; border: 1.5px solid var(--ink); }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.seg button { padding: 6px 10px; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.yn button { min-height: 50px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: none; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.yn button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

.channels { display: flex; gap: 8px; flex-wrap: wrap; }
.posts { display: grid; gap: 4px; }
.postit { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.postit:first-child { border-top: 0; }
.postit .face { width: 38px; height: 38px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; font: 800 13px var(--display); color: var(--ink-2); }
.postit.is-me .face { background: var(--side); color: #fff; }
.postit b { font-size: 14px; } .postit .sim { font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; margin-left: 6px; }
.postit p { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.composer textarea { min-height: 46px; height: 46px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); resize: none; }

.score { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.score th { text-align: right; font-size: 13px; padding: 0 0 10px; } .score th:first-child { text-align: left; }
.score td { padding: 10px 0; border-top: 1px solid var(--line); text-align: right; font-weight: 600; } .score td:first-child { text-align: left; font-weight: 500; }
.score .dem { color: var(--blue); } .score .rep { color: var(--red); }
.score .lead { font-weight: 800; } .score .lead::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-left: 6px; vertical-align: middle; }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; text-align: center; }
.duel b { display: block; font: 900 44px/1 var(--display); } .duel .dem b { color: var(--blue); } .duel .rep b { color: var(--red); } .duel span { font-size: 13px; color: var(--muted); font-weight: 600; }

/* preview clock */
.clock { position: fixed; left: 232px; right: 0; bottom: 0; z-index: 30; padding: 12px 28px; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; gap: 14px; }
.clock p { font-size: 14px; line-height: 1.35; opacity: .9; } .clock p b { display: block; opacity: 1; }
.clock .btn { margin-left: auto; background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); flex: none; }
.tabbar { display: none; }

/* onboarding */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px; }
.gate-in { width: min(100%, 720px); display: grid; gap: 22px; }
.gate h1 { font-size: clamp(32px, 5vw, 48px); } .gate .lede { color: var(--ink-2); font-size: 18px; max-width: 52ch; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pick button { text-align: left; padding: 22px; min-height: 190px; border-radius: var(--r-l); border: 2.5px solid transparent; color: #fff; display: flex; flex-direction: column; gap: 6px; transition: transform .35s var(--ease), box-shadow .35s; }
.pick button.dem { background: #2B50D6; } .pick button.rep { background: #C92F3A; }
.pick button:hover { transform: translateY(-3px); }
.pick button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--paper) inset; }
.pick b { font: 900 26px/1.05 var(--display); } .pick span { opacity: .9; font-size: 15px; } .pick em { margin-top: auto; font-style: normal; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.confirm { padding: 16px; border-radius: var(--r-s); border: 1.5px solid var(--ink); display: grid; gap: 12px; }
dialog { border: 0; border-radius: var(--r-l); padding: 24px; width: min(92vw, 440px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(10 12 16 / .55); }
dialog h2 { font-size: 22px; margin-bottom: 8px; } dialog .row { margin-top: 18px; justify-content: flex-end; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; } .rail { display: none; }
  .main { padding: 0 16px 190px; } .topline h1 { font-size: 22px; }
  .four { grid-template-columns: 1fr 1fr; } .pick { grid-template-columns: 1fr; } .pick button { min-height: 130px; }
  .clock { left: 0; bottom: 62px; padding: 10px 16px; } .clock p span { display: none; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; height: 62px; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; place-items: center; align-content: center; gap: 2px; text-decoration: none; font-size: 11px; font-weight: 700; color: var(--muted); position: relative; }
  .tabbar a .ph { font-size: 23px; } .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a .n { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 99px; background: var(--side); color: #fff; font-size: 10px; display: grid; place-items: center; }
  .passed li { grid-template-columns: 1fr; gap: 0; } .budget-row { grid-template-columns: 28px 1fr auto; } .budget-row .pips { display: none; }
  .sheet summary, .sheet-body { margin-left: 14px; }
}

/* the President's desk */
.bill { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.bill:first-of-type { border-top: 0; }
.bill b { display: block; line-height: 1.3; } .bill .role { font-size: 12px; font-weight: 700; color: var(--muted); } .bill .q { font-size: 14px; color: var(--ink-2); }
.signs { display: flex; gap: 6px; }
.verdict { padding: 5px 12px; border-radius: 99px; background: var(--sunk); font-size: 13px; font-weight: 700; white-space: nowrap; }
.verdict.signed, .verdict.unsigned { background: var(--ink); color: var(--on-ink); }
.verdict.vetoed { background: transparent; border: 1.5px solid var(--ink); }
.subtabs button { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: none; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.subtabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 20px); max-width: min(92vw, 420px); padding: 12px 16px; border-radius: var(--r-s);
  background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .bill { grid-template-columns: 1fr; } .toast { bottom: 140px; } }

/* sign-in extras */
.btn.google { background: var(--surface); gap: 10px; min-height: 50px; }
.or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cf-box { min-height: 65px; }

/* real-world notes, crises, forecasts */
.tried { font-size: 14px; color: var(--ink-2); padding-left: 12px; border-left: 3px solid var(--line); }
.crisis .event { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; border-radius: var(--r-s); background: var(--ink); color: var(--on-ink); }
.crisis .event .ph { font-size: 30px; } .crisis .event b { display: block; font: 800 19px/1.2 var(--display); } .crisis .event span { font-size: 15px; opacity: .88; }
.news .event span { display: block; }
.budget-row.fc { grid-template-columns: 1fr auto; }
.score tr.area th, .score tr.area td { padding-top: 18px; border-top: 2px solid var(--ink); font-size: 13px; font-weight: 800; }
.score tr.area th { text-align: left; }
.score thead + tbody tr.area:first-child th, .score thead + tbody tr.area:first-child td { border-top: 0; padding-top: 4px; }
#think .score th:not(:first-child), #think .score td:not(:first-child) { padding-left: 12px; }

/* ---------- launch page (/soon/) ---------- */
.soon { min-height: calc(100dvh - 66px); display: grid; align-items: center; padding: 56px 0 72px; }
.soon-in { max-width: 880px; display: grid; gap: 28px; }
.soon h1 { font-size: clamp(40px, 7vw, 80px); font-stretch: 112%; max-width: 14ch; }
.soon .lede { font-size: 19px; color: var(--ink-2); max-width: 52ch; }
.meter { display: grid; gap: 14px; max-width: 640px; }
.meter-bars { display: grid; gap: 8px; }
.meter-bars i { display: block; height: 22px; border-radius: 6px; background: var(--sunk); position: relative; overflow: hidden; }
.meter-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 6px; background: var(--blue); transition: width 1.1s var(--ease); }
.meter-bars i + i::after { background: var(--red); transition-delay: .08s; }
.meter figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.meter figcaption b { font: 900 40px/1 var(--display); font-stretch: 110%; min-width: 2ch; }
.meter figcaption span { color: var(--muted); font-weight: 600; }
.meter .togo { margin-left: auto; color: var(--ink); font-weight: 700; }
.soon .cta:empty { display: none; }
.soon-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 24px; border-top: 1px solid var(--line); }
.soon-steps li { display: flex; gap: 12px; align-items: flex-start; }
.soon-steps .ph { font-size: 22px; margin-top: 2px; }
.soon-steps b { display: block; line-height: 1.3; } .soon-steps span { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
  .soon { padding: 36px 0 56px; } .soon .lede { font-size: 17px; }
  .soon-steps { grid-template-columns: 1fr; gap: 14px; }
  .meter figcaption b { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .meter-bars i::after { transition: none; } }

/* ---------- owner admin panel (/admin/) ---------- */
.adm-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.adm-top .wrap { display: flex; align-items: center; gap: 14px; min-height: 62px; flex-wrap: wrap; }
.adm-top .tag { background: var(--ink); color: var(--on-ink); }
.adm-top .row { margin-left: auto; }
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.adm-tabs a { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.adm-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.adm { display: grid; gap: 16px; padding: 14px 0 64px; }
.adm h1 { font-size: 28px; }
.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.adm-stats .stat { background: var(--surface); border: 1px solid var(--line); }
.adm-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.adm-list { display: grid; }
.adm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.adm-row:first-child { border-top: 0; }
.adm-row .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.adm-row .who b { font-size: 16px; }
.adm-row .meta { font-size: 13px; color: var(--muted); }
.adm-row .text { grid-column: 1 / -1; font-size: 15px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-row .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.adm-row.is-off .who b { text-decoration: line-through; color: var(--muted); }
.adm-empty { padding: 28px 0; color: var(--muted); text-align: center; }
.adm-log li { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.adm-log li:first-child { border-top: 0; } .adm-log time { color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-form .wide { grid-column: 1 / -1; }
.adm-form .seg { justify-self: start; } .adm-form .seg button { padding: 8px 14px; font-size: 14px; }
.adm-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.adm-search input { flex: 1; min-width: 200px; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.adm-search input:focus { outline: none; border-color: var(--ink); }
.adm-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 96px; margin-top: 8px; }
.adm-days div { display: grid; align-content: end; gap: 2px; height: 100%; }
.adm-days i { display: block; border-radius: 3px 3px 0 0; min-height: 0; }
.adm-days i.d { background: var(--blue); } .adm-days i.r { background: var(--red); border-radius: 0; }
.adm-days-x { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.btn.danger { background: transparent; color: var(--bad); border-color: currentColor; }
.adm-gate { min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px; }
.adm-gate form { width: min(100%, 420px); display: grid; gap: 18px; }
@media (max-width: 900px) {
  .adm-stats { grid-template-columns: 1fr 1fr; } .adm-2, .adm-form { grid-template-columns: 1fr; }
  .adm-row { grid-template-columns: 1fr; } .adm-row .acts { justify-content: flex-start; }
  .adm-log li { grid-template-columns: 1fr; gap: 0; }
  .adm-top .wrap { padding-top: 8px; padding-bottom: 8px; }
}

/* ---------- installed app (home-screen web app) ---------- */
[data-install] { display: none !important; }
.can-install [data-install] { display: inline-flex !important; }
.can-install .install-card[data-install] { display: flex !important; }
.install-card { align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); width: 100%; text-align: left; color: var(--ink); }
.install-card .ph { font-size: 28px; flex: none; }
.install-card b { display: block; } .install-card span { font-size: 14px; color: var(--muted); }
.install-card em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 14px; white-space: nowrap; }
.rail [data-install] { margin: 0 0 10px; }
.install-how ol { display: grid; gap: 10px; margin: 16px 0 6px; padding-left: 22px; list-style: decimal; }
.install-how li .ph { vertical-align: -0.2em; }
/* Opened from the home screen: keep clear of the notch and the home indicator. */
.is-app body { padding-top: env(safe-area-inset-top); }
.is-app .rail { padding-top: calc(22px + env(safe-area-inset-top)); }
@media (max-width: 900px) {
  .tabbar { height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .clock { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .main { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
}
/* landing nav on phones: the install button shrinks to its icon so both buttons fit */
@media (max-width: 760px) {
  .nav .wrap { gap: 10px; }
  .nav .btn + .btn { margin-left: 0; }
  .nav-install { padding: 0 10px; } .nav-install span { display: none; }
}

/* admin: writing votes and events */
.lab { font-size: 14px; font-weight: 700; }
.choices { display: grid; gap: 12px; justify-items: start; }
.choice { width: 100%; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-s); display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.choice legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.choice .field:last-child { grid-column: 1 / -1; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; }
.fx-row select, .fx-row input { min-height: 42px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); width: 100%; }
.fx-row select:focus, .fx-row input:focus { outline: none; border-color: var(--ink); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt:has(input:checked) { background: var(--ink); color: var(--on-ink); }
.seg-opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (max-width: 900px) { .choice { grid-template-columns: 1fr; } .fx-row { grid-template-columns: 1fr 96px; } }
.seg-opt { position: relative; }
/* long option text in selects must not stretch the admin forms */
.adm-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.choice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.adm-form .field, .choice .field, .adm-form select { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .adm-form, .choice { grid-template-columns: minmax(0, 1fr); } }

/* ---------- offices, law library, petitions (2026-11-13) ---------- */
.is-busy { opacity: .55; cursor: progress; pointer-events: none; }
.who { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.who:hover { text-decoration: underline; text-underline-offset: 3px; }
.ptag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--pc, var(--muted)); color: #fff; font: 800 10.5px/1.5 var(--body); letter-spacing: .05em; vertical-align: 2px; white-space: nowrap; }
.ptag.big { margin: 0; padding: 10px; font-size: 15px; border-radius: var(--r-s); flex: none; }
.law { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; display: grid; gap: 10px; }
.law header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.law h3 { font-size: 19px; line-height: 1.25; } .law > p { color: var(--ink-2); font-size: 15px; }
.law-acts { display: flex; flex-wrap: wrap; gap: 8px; } .law-acts:empty { display: none; }
.lstate { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; background: var(--sunk); font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.lstate.law { background: var(--ink); color: var(--on-ink); }
.lstate.go { background: transparent; border: 1.5px solid var(--side); color: var(--ink); }
.lstate.wait { background: transparent; border: 1.5px dashed var(--line); }
.lstate.off { color: var(--muted); }
.draft { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.draft:first-of-type { border-top: 0; }
.draft b { display: block; line-height: 1.3; margin: 2px 0 4px; } .draft .role { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.draft .q { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.quote { font-size: 14px; color: var(--ink-2); font-style: italic; margin-top: 4px; }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.filters a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.filters a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.activity li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.activity li:first-child { border-top: 0; } .activity li span { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.order { border-top: 1px solid var(--line); } .order summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.order summary::-webkit-details-marker { display: none; } .order[open] summary .ph { transform: rotate(180deg); }
.order > :not(summary) { margin-bottom: 10px; } .order p { font-size: 15px; color: var(--ink-2); }
.meter-s { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; max-width: 320px; }
.meter-s i { display: block; height: 100%; width: var(--p); background: var(--side); border-radius: 99px; }
.line-chip { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding: 8px 10px; border-radius: var(--r-s); background: var(--paper); font-size: 13.5px; }
.line-chip .ptag { margin: 0 4px 0 0; vertical-align: 0; }
.law-vote .yn { margin-top: 14px; }

/* ---------- people: friends, messages, parties ---------- */
.cnt { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--side); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: 1px; }
.subtabs a .cnt { margin-left: 4px; }
.subtabs.small a { padding: 5px 12px; font-size: 13px; }
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.search-row input:focus { outline: none; border-color: var(--ink); }
.inbox-row { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.inbox-row:first-child { border-top: 0; }
.inbox-row .face { width: 38px; height: 38px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; font: 800 13px var(--display); color: var(--ink-2); }
.chat > h2 .who { font: inherit; }
.back-link { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: inherit; text-decoration: none; }
.back-link:hover { background: var(--sunk); }
.msgs { display: flex; flex-direction: column; gap: 8px; height: min(56vh, 520px); min-height: 260px; overflow-y: auto; padding: 12px; margin-bottom: 12px; border-radius: var(--r-s); background: var(--paper); overscroll-behavior: contain; }
.bubble { max-width: 80%; align-self: flex-start; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--line); }
.bubble p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; } .bubble b { font-size: 12.5px; display: block; }
.bubble time { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }
.bubble.me { align-self: flex-end; background: var(--side); border-color: var(--side); color: #fff; border-radius: 14px 14px 4px 14px; }
.is-tmp { opacity: .6; }
.postit time { margin-left: 8px; font-size: 12px; color: var(--muted); }
.party-head { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-l); border: 1px solid var(--line); border-left: 6px solid var(--pc); background: var(--surface); }
.party-head .ptag.big { background: var(--pc); }
.party-head h2 { font-size: 22px; } .party-head p { color: var(--ink-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--pc); cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked) { outline: 3px solid var(--ink); outline-offset: 2px; }
.swatch:has(input:focus-visible) { outline: 3px dashed var(--ink); outline-offset: 2px; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.links li a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; font-weight: 600; }
.links li:first-child a { border-top: 0; } .links li a .ph:last-child { margin-left: auto; color: var(--muted); }
dialog .row.wrap { justify-content: flex-start; margin-top: 16px; }
@media (prefers-color-scheme: dark) { .bubble.me, .cnt { color: #10121A; } }
@media (max-width: 900px) {
  .tabbar { grid-template-columns: repeat(6, 1fr); } .tabbar a { font-size: 10.5px; } .tabbar a .ph { font-size: 22px; }
  .draft { grid-template-columns: 1fr; } .party-head { align-items: flex-start; }
  .person { grid-template-columns: 42px minmax(0, 1fr); } .person > :nth-child(3) { grid-column: 2; justify-self: start; }
  .msgs { height: 52vh; }
}

/* ---------- elections with parties: tickets, campaign cards, party roles (2026-11-13) ---------- */
.rules { display: grid; gap: 10px; }
.rules li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 15px; color: var(--ink-2); }
.rules .ph { font-size: 20px; color: var(--ink); margin-top: 1px; } .rules b { color: var(--ink); }
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.ticket { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: var(--r-l); border: 1.5px solid var(--line); border-top: 5px solid var(--pc); background: var(--surface); }
.ticket.is-mine { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc) inset; }
.ticket-h { display: flex; gap: 10px; align-items: center; } .ticket-h b { display: block; line-height: 1.2; } .ticket-h .ptag.big { background: var(--pc); padding: 7px 8px; font-size: 13px; }
.ticket ul { display: grid; gap: 4px; font-size: 14px; }
.ticket li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); } .ticket li:first-child { border-top: 0; }
.ticket li span { color: var(--muted); font-size: 12.5px; font-weight: 700; } .ticket li .who { font-weight: 700; text-align: right; }
.ticket .btn { justify-self: start; }
.ticket .btn[aria-pressed="true"] { background: var(--pc); border-color: var(--pc); color: #fff; }
.person.cand .badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; } .person.cand .badges .lstate { font-size: 11.5px; padding: 2px 8px; }
.person.cand .role { display: block; font-weight: 600; }
.back.is-ticket { border-style: dashed; border-color: var(--ink); }
.office-h .more { margin-left: auto; font: 600 12px var(--body); color: var(--muted); }
.slogan { font: 800 19px/1.3 var(--display); } .pitch { color: var(--ink-2); margin-top: 6px; white-space: pre-wrap; }
.sub-h { font-size: 15px; margin: 16px 0 6px; }
.promises { display: grid; gap: 8px; } .promises li { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-s); background: var(--paper); } .promises b { line-height: 1.3; }
dialog .promises li { font-size: 14px; }
dialog { max-height: 88dvh; overflow-y: auto; }
.pk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--sunk); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sheet-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 14px 12px 46px; border: 0; background: none; font-size: 13.5px; font-weight: 700; color: var(--muted); text-align: left; }
.sheet-btn:hover { color: var(--ink); }
.pinned { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 16px; border-radius: var(--r-l); background: var(--ink); color: var(--on-ink); font-weight: 600; }
.pinned .ph { font-size: 18px; margin-top: 2px; }
details.roles summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; } details.roles summary::-webkit-details-marker { display: none; }
details.roles summary h2 { font-size: 17px; display: flex; gap: 8px; align-items: center; } details.roles[open] summary > .ph { transform: rotate(180deg); }
details.roles ul { display: grid; gap: 0; margin-top: 10px; }
details.roles li { display: grid; grid-template-columns: 150px 1fr; gap: 2px 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
details.roles li span { color: var(--ink-2); } details.roles li em { grid-column: 2; font-style: normal; font-size: 12.5px; color: var(--muted); }
select.mini { min-height: 36px; padding: 4px 8px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); font-size: 13.5px; font-weight: 600; max-width: 170px; }
@media (max-width: 900px) { details.roles li { grid-template-columns: 1fr; } details.roles li em { grid-column: 1; } .sheet-btn { padding-left: 14px; } }

/* ---------- the Elections page, announcements (2026-11-13) ---------- */
.el-progress { margin-top: 4px; font-weight: 700; } .el-progress .ph { vertical-align: -0.15em; margin-right: 6px; }
.el-progress a { color: inherit; }
.filters.offices a { display: inline-flex; align-items: center; gap: 6px; }
.filters.offices a b { font-size: 11.5px; padding: 0 6px; border-radius: 99px; background: var(--sunk); color: var(--ink-2); }
.filters.offices a[aria-current="page"] b { background: color-mix(in srgb, var(--on-ink) 22%, transparent); color: var(--on-ink); }
.el-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.el-controls input { flex: 1 1 220px; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.el-controls input:focus { outline: none; border-color: var(--ink); }
.el-list .person:first-child { border-top: 0; }
.person.cand .face { font-size: 13px; }
.mypick { margin: 4px 0 12px; padding: 4px 14px; border: 1.5px solid var(--ink); border-radius: var(--r-s); }
.mypick > .fine { display: block; padding-top: 8px; font-weight: 700; }
.mypick .person { border-top: 0; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); font-weight: 600; }
details.rules-box summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
details.rules-box summary::-webkit-details-marker { display: none; } details.rules-box summary h2 { font-size: 17px; display: flex; gap: 8px; align-items: center; }
details.rules-box[open] summary > .ph { transform: rotate(180deg); } details.rules-box .rules { margin-top: 12px; }
.news-banner { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--r-l); background: var(--ink); color: var(--on-ink); text-decoration: none; }
.news-banner .ph:first-child { font-size: 24px; } .news-banner b { display: block; } .news-banner span span { font-size: 14px; opacity: .9; }
.bubble.official { max-width: 92%; border-color: var(--ink); border-width: 1.5px; }
.bubble.official b { display: flex; align-items: center; gap: 5px; font-size: 12.5px; margin-bottom: 2px; }
@media (max-width: 900px) {
  .tabbar { grid-template-columns: repeat(7, 1fr); } .tabbar a { font-size: 10px; } .tabbar a .ph { font-size: 21px; }
  .el-controls select.mini { flex: 1 1 40%; max-width: none; }
  .pager span { text-align: center; }
}