/* ====================================================
   VOTER CHOICE · prototype styles
   Lifted from the design proposal — production components only
   ==================================================== */

:root {
  --paper: oklch(0.965 0.012 85);
  --paper-2: oklch(0.985 0.008 85);
  --rule: oklch(0.86 0.012 85);
  --rule-2: oklch(0.92 0.01 85);
  --ink: oklch(0.18 0.018 240);
  --ink-2: oklch(0.36 0.018 240);
  --ink-3: oklch(0.55 0.015 240);
  --civic: oklch(0.4 0.075 170);
  --civic-2: oklch(0.32 0.075 170);
  --civic-soft: oklch(0.9 0.025 170);
  --vote-red: oklch(0.54 0.16 28);
  --gold: oklch(0.76 0.1 75);
  --tag-bg: oklch(0.92 0.012 85);
  --shadow-card:
    0 1px 0 oklch(0.86 0.012 85), 0 30px 60px -30px oklch(0.18 0.018 240 / 0.18);
  --shadow-soft:
    0 1px 0 oklch(0.92 0.012 85), 0 10px 30px -20px oklch(0.18 0.018 240 / 0.12);

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
a {
  color: var(--civic);
  text-decoration: none;
  cursor: pointer;
}
button {
  font: inherit;
  color: inherit;
}
input,
textarea {
  font: inherit;
  color: inherit;
}

/* ============ NAV ============ */
.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 56px;
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper);
}
.app-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
}
.app-nav .brand .mark {
  width: 22px;
  height: 22px;
  background: var(--civic);
  display: grid;
  place-items: center;
  color: var(--paper-2);
  border-radius: 4px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
}
.app-nav .links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--ink-2);
}
.app-nav .links a:hover {
  color: var(--ink);
}
.app-nav .links a {
  cursor: pointer;
}
.app-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-nav .nav-tip {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--civic);
  border-radius: 999px;
  color: var(--civic);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.app-nav .nav-tip:hover {
  background: var(--civic);
  color: var(--paper);
}
.app-nav .lang {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
/* Language selector ("EN ▾") — decision #9: a selector, not an EN·ES
   toggle, so the menu can scale to any major US language. Caret sizing
   matches the canvas SCNav (.sc-lang .lang-caret). */
.app-nav .lang-wrap {
  position: relative;
  display: inline-flex;
}
.app-nav .lang .lang-caret {
  margin-left: 4px;
  font-size: 9px;
  color: var(--ink-3);
}
.app-nav .lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  min-width: 140px;
  z-index: 60;
}
.app-nav .lang-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 13px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.app-nav .lang-opt:hover {
  background: var(--paper-2);
}
.app-nav .lang-opt.on {
  font-weight: 600;
}
/* Bold Flag / Keystone: canvas's nav sits on the same white/navy/red ground
   as the hero (design-handoff/.../screens.css .sc-nav). Scoped to the App2
   redesign via the .bf-app ancestor (set on <body> in src/app/layout.tsx,
   see redesign2.css) rather than the nav's own data-current attribute --
   now that Bold Flag white is the app-wide default (redesign2.css
   .bf-app), the nav should read consistently on every route, not just
   home. The legacy ballot app has no .bf-app ancestor, so it still gets
   the base civic-styled nav below unchanged (src/app/civic-default.test.tsx
   is unaffected -- it only pins layout.tsx's own body attributes). */
.bf-app .app-nav .brand .mark {
  position: relative;
  overflow: hidden;
  background: var(--bf-brand);
}
.bf-app .app-nav .brand .mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--vote-red);
}
.bf-app .app-nav .nav-tip {
  /* Canvas's SCNav (design-handoff/.../screens.css .sc-nav-links .tip) is a
     grey-rule outline with navy text -- NOT a red outline; verified against
     both the source CSS and a close re-read of the ref screenshot. */
  border-color: var(--rule);
  color: var(--bf-brand);
}
.bf-app .app-nav .nav-tip:hover {
  background: var(--bf-brand);
  color: var(--paper);
  border-color: var(--bf-brand);
}
/* the global `a { color: var(--civic) }` rule (teal) otherwise wins over
   .app-nav .links' inherited ink-2, since a declared color on the element
   itself beats an inherited one regardless of ancestor specificity. */
.bf-app .app-nav .links a {
  color: var(--ink-2);
}
.bf-app .app-nav .links a:hover {
  color: var(--ink);
}
/* AppNav now always renders a leading .flagbar (tricolor strip, canvas's
   IqShell/SCNav shell convention) so every caller gets it for free instead
   of each screen re-rendering its own copy. AppNav is shared with the
   legacy ballot app though (App() in VoterChoiceApp.tsx also calls it), so
   the strip is hidden by default and only shown under .bf-app -- same
   scoping rule as every other override in this block. */
.app-nav .flagbar {
  display: none;
}
.bf-app .app-nav .flagbar {
  display: flex;
}

/* ============ HOMEPAGE ============ */
.hp-hero {
  padding: 80px 56px 56px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  /* Bold Flag / Keystone: canvas's HomeHero renders on data-palette="white"
     (design-handoff/design_handoff_voter_choice_redesign/screens.css) --
     scope that white/navy/red palette to the hero only; the rest of the
     app stays on its civic/cream default (pinned by
     src/app/civic-default.test.tsx). --hh-brand is a NEW token, not a
     --civic override: --civic doubles as the hp-preview's "keep" green,
     so overriding it here would turn that green navy too. */
  --hh-brand: oklch(0.4 0.155 262);
  --hh-brand-2: oklch(0.31 0.145 262);
  --paper: oklch(1 0 0);
  --paper-2: oklch(0.985 0.003 258);
  --ink: oklch(0.2 0.035 260);
  --ink-2: oklch(0.37 0.032 260);
  --ink-3: oklch(0.54 0.026 260);
  --rule: oklch(0.88 0.006 260);
  --rule-2: oklch(0.93 0.005 260);
  --tag-bg: oklch(0.95 0.006 260);
  background: var(--paper);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--civic);
  margin-bottom: 22px;
}
.hp-hero .eyebrow {
  color: var(--hh-brand);
}
.eyebrow .star {
  color: var(--vote-red);
}
.hp-hero h1 {
  /* Bold Flag / Keystone: canvas's .vh-h1 (home.css) is 40px/1.08, not a
     display-scale 76px -- the oversized size wrapped this headline to ~6
     lines and pushed the address card below the fold. */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
  text-wrap: balance;
  max-width: 600px;
}
.hp-hero h1 em {
  font-style: italic;
  color: var(--hh-brand);
}
.hp-hero p.lede {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 520px;
  text-wrap: pretty;
}
.hp-hero p.lede b {
  color: var(--ink);
  font-weight: 600;
}
.addr-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-card);
  max-width: 560px;
}
.addr-lab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.addr-lab-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.addr-why {
  width: 17px;
  height: 17px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.addr-priv {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--civic);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.addr-priv::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.addr-card .row {
  display: flex;
  gap: 9px;
}
.addr-card input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 13px 14px;
  font-size: 14px;
  color: var(--ink);
  border-radius: 10px;
  outline: none;
}
.addr-card input:focus {
  border-color: var(--hh-brand);
}
.addr-card .go {
  background: var(--hh-brand);
  color: var(--paper-2);
  border: 0;
  border-radius: 10px;
  padding: 0 20px;
  min-height: 48px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.addr-card .go:hover:not(:disabled) {
  background: var(--hh-brand-2);
}
.addr-card .go:disabled {
  background: var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
}
.addr-card .resume {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.addr-card .resume a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.addr-disclose {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px dashed var(--rule-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.addr-disclose-link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hh-brand);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.addr-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.addr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.addr-chip-n {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--tag-bg);
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.addr-chip-arw {
  color: var(--rule);
}
.addr-trust {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
  max-width: 560px;
}
.addr-trust span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.addr-trust span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--civic);
}
/* ---- hp-preview: right column, "what you'll get" product preview ---- */
.hp-preview {
  position: relative;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
}
.hp-preview-cap {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
.hp-stack {
  position: relative;
  width: 380px;
  height: 420px;
}
.hp-sheet {
  position: absolute;
  right: -6px;
  top: 36px;
  width: 270px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  transform: rotate(3deg);
  overflow: hidden;
}
.hp-sheet-pad {
  padding: 16px 18px 18px;
}
.hp-sheet-pad h5 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.hp-sheet-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.hp-sheet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-2);
  margin-top: 10px;
}
.hp-sheet-badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.hp-sheet-badge.keep {
  background: var(--civic);
  color: var(--paper-2);
}
.hp-sheet-badge.replace {
  background: var(--paper-2);
  border: 2px solid var(--vote-red);
  color: var(--vote-red);
  font-weight: 700;
}
.hp-sheet-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hp-sheet-o {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hp-sheet-n {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.hp-sheet-pct {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
}
.hp-sheet-pct.tone-good {
  color: var(--civic);
}
.hp-sheet-pct.tone-bad {
  color: var(--vote-red);
}
.hp-rcard {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 290px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 13px;
  box-shadow: var(--shadow-card);
  transform: rotate(-2deg);
  overflow: hidden;
}
.hp-rcard-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-2);
}
.hp-rcard-tag {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--tag-bg);
  color: var(--ink-2);
  padding: 2px 7px;
  border-radius: 4px;
}
.hp-rcard-up {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vote-red);
}
.hp-rcard-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 10px;
}
.hp-rcard-av {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--tag-bg);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.hp-rcard-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.hp-rcard-sub {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.hp-rcard-align {
  margin: 0 14px;
  padding: 12px 13px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
}
.hp-rcard-atop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.hp-rcard-lab {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.hp-rcard-pct {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--vote-red);
  line-height: 1;
}
.hp-rcard-bars {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}
.hp-rcard-bar {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 9px;
  align-items: center;
}
.hp-rcard-bar-k {
  font-size: 10.5px;
  color: var(--ink-2);
}
.hp-rcard-bar-t {
  height: 5px;
  border-radius: 999px;
  background: var(--rule-2);
  overflow: hidden;
  display: block;
}
.hp-rcard-bar-t i {
  display: block;
  height: 100%;
}
.hp-rcard-bar-t i.bar-good {
  background: var(--civic);
}
.hp-rcard-bar-t i.bar-bad {
  background: var(--vote-red);
}
.hp-rcard-verd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 13px 14px 15px;
}
.hp-rcard-vb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1.5px solid;
}
.hp-rcard-vb.keep {
  background: var(--civic);
  border-color: var(--civic);
  color: var(--paper-2);
}
.hp-rcard-vb.replace {
  background: var(--paper);
  border-color: var(--vote-red);
  color: var(--vote-red);
}
.stat-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 1px solid var(--rule);
  padding-left: 36px;
}
.stat {
  display: flex;
  flex-direction: column;
}
.stat .v {
  font-family: var(--serif);
  font-size: 58px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stat .v small {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ink-2);
  margin-left: 4px;
}
.stat .l {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 340px;
  line-height: 1.4;
}
.stat .cite {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-top: 6px;
}
.stat.alt .v {
  color: var(--vote-red);
}

.hp-foot {
  padding: 36px 56px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-3);
  max-width: 1280px;
  margin: 64px auto 0;
}
.hp-foot .l {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

/* ============ LOADING SCREEN ============ */
.loading-screen {
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
  padding: 80px 56px;
}
.loading-card {
  max-width: 520px;
  text-align: center;
}
.loading-card .pulse {
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  border: 2px solid var(--civic-soft);
  border-top-color: var(--civic);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading-card h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.loading-card .addr {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 22px;
}
.loading-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.loading-card ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.loading-card ul li.done {
  color: var(--ink);
}
.loading-card ul li .ck {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
}
.loading-card ul li.done .ck {
  background: var(--civic);
  border-color: var(--civic);
  position: relative;
}
.loading-card ul li.done .ck::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 5px;
  height: 2.5px;
  border-left: 1.5px solid var(--paper-2);
  border-bottom: 1.5px solid var(--paper-2);
  transform: rotate(-45deg);
}
.loading-card ul li.active .ck {
  border-color: var(--civic);
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}

/* ============ COLD OPEN VIEW ============ */
.coldopen {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}
.co-context {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.co-context::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--civic);
  border-radius: 50%;
}
.co-context b {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.msg .who {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.msg.user {
  align-items: flex-end;
}
.msg.user .bubble {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  border-radius: 14px 14px 4px 14px;
  max-width: 540px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.msg.ai .bubble {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 14px 18px;
  border-radius: 4px 14px 14px 14px;
  max-width: 100%;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.msg.ai .bubble p {
  margin: 0 0 10px;
}
.msg.ai .bubble p:last-child {
  margin-bottom: 0;
}
.msg.ai .bubble b {
  font-weight: 600;
}

.starter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.starter-chips .sc {
  font-family: var(--sans);
  font-size: 12.5px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.starter-chips .sc:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.starter-chips .sc.primary {
  background: var(--civic);
  color: var(--paper-2);
  border-color: var(--civic);
}

.co-input {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
}
.co-input textarea {
  width: 100%;
  min-height: 140px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  resize: vertical;
  outline: none;
  line-height: 1.55;
}
.co-input textarea::placeholder {
  color: var(--ink-3);
}
.co-input .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.co-input .hint {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.co-input .send {
  background: var(--civic);
  color: var(--paper-2);
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
.co-input .send:disabled {
  background: var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
}

/* Themes card */
.themes-card {
  background: var(--paper-2);
  border: 1px solid var(--civic-soft);
  border-top: 3px solid var(--civic);
  border-radius: 12px;
  padding: 22px 24px;
  margin-top: 16px;
  box-shadow: var(--shadow-soft);
}
.themes-card .th-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.themes-card .th-head h4 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.themes-card .th-head .of {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.themes-card .th-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
}

.theme-row {
  display: grid;
  grid-template-columns: 18px 30px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--rule-2);
}
.theme-row:last-of-type {
  border-bottom: 0;
  padding-bottom: 4px;
}
.theme-row .ord {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.theme-row .ord button {
  width: 16px;
  height: 14px;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.theme-row .ord button:hover:not(:disabled) {
  color: var(--ink);
}
.theme-row .ord button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.theme-row .rank {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--civic);
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-top: -2px;
}
.theme-row .body {
  min-width: 0;
}
.theme-row .nm {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.theme-row .nm input.name-edit {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  border: 1px dashed var(--civic);
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
  outline: none;
  min-width: 280px;
}
.theme-row .nm .edit-pencil {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  font-weight: 400;
  background: transparent;
}
.theme-row .nm .edit-pencil:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.theme-row .quotes {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.theme-row .quote {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
  padding-left: 10px;
  border-left: 2px solid var(--civic-soft);
}
.theme-row .quote em {
  font-style: italic;
}
.theme-row .quote .lab {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-style: normal;
  margin-right: 6px;
  font-weight: 500;
}
.theme-row .acts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-row .acts button {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px 0;
  text-align: right;
  font-weight: 500;
}
.theme-row .acts button:hover {
  color: var(--ink);
}
.theme-row .acts button.danger:hover {
  color: var(--vote-red);
}

.themes-card .th-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.themes-card .th-foot .secondary {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
}
.themes-card .th-foot .lock {
  background: var(--civic);
  color: var(--paper-2);
  border: 0;
  padding: 14px 26px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition:
    background 0.15s ease,
    transform 0.05s ease;
}
.themes-card .th-foot .lock:hover:not(:disabled) {
  background: var(--civic-2);
}
.themes-card .th-foot .lock:active:not(:disabled) {
  transform: translateY(1px);
}
.themes-card .th-foot .lock:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============ WORKSPACE ============ */
.ws-wrap {
  display: grid;
  grid-template-columns: 240px 1fr 380px;
  min-height: calc(100vh - 80px);
}

/* Left rail */
.ws-rail {
  background: oklch(0.94 0.01 85);
  border-right: 1px solid var(--rule);
  padding: 22px 18px;
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
}
body[data-treatment="inkwell"] .ws-rail {
  background: oklch(0.18 0.018 240);
}

.ws-rail .progress {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.ws-rail .progress .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.ws-rail .progress .big {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.ws-rail .bar {
  height: 6px;
  background: var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.ws-rail .bar .fill {
  height: 100%;
  background: var(--civic);
  transition: width 0.4s ease;
}

.ws-rail .priorities {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.ws-rail .priorities .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.ws-rail .priorities .top .lab {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.ws-rail .priorities .top .edit {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--civic);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ws-rail .priorities ol {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
}
.ws-rail .priorities ol li::marker {
  color: var(--civic);
  font-weight: 600;
}

.ws-rail .seclabel {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 12px 8px 6px;
}
.ws-rail .race-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ws-rail .race-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.ws-rail .race-list li:hover {
  background: var(--paper);
}
.ws-rail .race-list li.active {
  background: var(--paper);
  color: var(--ink);
}
body[data-treatment="inkwell"] .ws-rail .race-list li:hover,
body[data-treatment="inkwell"] .ws-rail .race-list li.active {
  background: oklch(0.22 0.018 240);
}
.ws-rail .race-list li .ind {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
}
.ws-rail .race-list li.done .ind {
  background: var(--civic);
  border-color: var(--civic);
  position: relative;
}
.ws-rail .race-list li.done .ind::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid var(--paper-2);
  border-bottom: 1.6px solid var(--paper-2);
  transform: rotate(-45deg);
}
.ws-rail .race-list li.active .ind {
  border-color: var(--civic);
  box-shadow: inset 0 0 0 3px var(--paper);
  background: var(--civic);
}
body[data-treatment="inkwell"] .ws-rail .race-list li.active .ind {
  box-shadow: inset 0 0 0 3px oklch(0.22 0.018 240);
}

.ws-rail .foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
  font-size: 12.5px;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-rail .foot a {
  color: var(--ink-2);
  cursor: pointer;
}
.ws-rail .foot a:hover {
  color: var(--ink);
}

/* Chat center */
.ws-chat {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  min-height: 0;
}
.ws-chat .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.ws-chat .head .title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ws-chat .head .title small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.ws-chat .head .h-act {
  display: flex;
  gap: 6px;
}
.ws-chat .head .h-act button {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.ws-chat .head .h-act button:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}

.ws-chat .body {
  flex: 1;
  padding: 28px 28px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--paper-2);
}

.ws-chat .body .msg.ai .bubble {
  background: var(--paper);
}

.ws-input {
  padding: 12px 20px 18px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.ws-input .chips {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ws-input .chip {
  font-size: 12.5px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  /* Suggested-question chip row — a cluster of tap targets in the seat
     chat panel; the 7px/12.5px padding alone renders ~35px tall, short of
     the 44px touch-target minimum used elsewhere in this file. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ws-input .chip:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.ws-input .input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
}
.ws-input input[type="text"] {
  border: 0;
  background: transparent;
  font-size: 14.5px;
  padding: 10px 0;
  outline: none;
  color: var(--ink);
}
.ws-input .send {
  background: var(--civic);
  color: var(--paper-2);
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.ws-input .meta {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* ============ CANDIDATE CARD ============ */
.cand-card {
  margin-top: 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 18px 16px;
  max-width: 100%;
  box-shadow: var(--shadow-soft);
}
.cand-card .head2 {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.cand-card .photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: repeating-linear-gradient(
    45deg,
    oklch(0.92 0.01 85) 0 6px,
    oklch(0.95 0.008 85) 6px 12px
  );
  border: 1px solid var(--rule);
}
.cand-card .name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.005em;
}
.cand-card .sub {
  font-size: 12.5px;
  color: var(--ink-2);
}
.cand-card .sub .pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.cand-card .pip.dem {
  background: oklch(0.5 0.16 240);
}
.cand-card .pip.rep {
  background: var(--vote-red);
}
.cand-card .pip.ind {
  background: var(--gold);
}
.cand-card .tenure {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: right;
}
.cand-card .tenure b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.cand-card .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
}
.alignment .lab,
.donors .lab {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.align-row {
  display: grid;
  grid-template-columns: 100px 1fr 38px;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.align-row .topic {
  color: var(--ink-2);
}
.align-row .barwrap {
  height: 6px;
  background: var(--rule-2);
  border-radius: 3px;
  overflow: hidden;
}
.align-row .barfill {
  height: 100%;
  background: var(--civic);
  transition: width 0.5s ease;
}
.align-row .barfill.mid {
  background: var(--gold);
}
.align-row .barfill.low {
  background: var(--vote-red);
}
.align-row .pct {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  text-align: right;
}
.donor-bar {
  display: flex;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--rule);
}
.donor-bar > span {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--paper-2);
  overflow: hidden;
  white-space: nowrap;
}
.donor-list {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.donor-list .row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
}
.donor-list .sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.donor-list .amt {
  color: var(--ink);
}

.cand-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
}
.cand-actions button {
  flex: 1;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.cand-actions button:hover {
  border-color: var(--ink-3);
}
.cand-actions button.add {
  background: var(--civic);
  border-color: var(--civic);
  color: var(--paper-2);
}
.cand-actions button.add:hover {
  background: var(--civic-2);
  border-color: var(--civic-2);
}
.cand-actions button.picked {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Proposition card */
.prop-card {
  margin-top: 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.prop-card .ttl {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}
.prop-card .sub {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 14px;
  line-height: 1.45;
}
.prop-card .twobtn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.prop-card .twobtn button {
  padding: 14px 18px;
  border-radius: 8px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.prop-card .twobtn button:hover {
  border-color: var(--ink);
}
.prop-card .twobtn button.yes-picked {
  background: var(--civic);
  border-color: var(--civic);
  color: var(--paper-2);
}
.prop-card .twobtn button.no-picked {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ============ BALLOT PANE (RIGHT) ============ */
.ws-ballot {
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.ws-ballot .b-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule);
}
.ws-ballot .b-head .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ws-ballot .b-head h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.ws-ballot .b-head .sub {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.ws-ballot .b-head address {
  margin-top: 8px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-2);
}
.ws-ballot .b-list {
  flex: 1;
  padding: 6px 22px 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.b-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  cursor: pointer;
}
.b-row:hover .pick {
  color: var(--civic);
}
.b-row .ck {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--rule);
  border-radius: 4px;
  margin-top: 2px;
  position: relative;
  flex-shrink: 0;
}
.b-row.done .ck {
  background: var(--civic);
  border-color: var(--civic);
}
.b-row.done .ck::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 9px;
  height: 4px;
  border-left: 2px solid var(--paper-2);
  border-bottom: 2px solid var(--paper-2);
  transform: rotate(-45deg);
}
.b-row .race {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.b-row .pick {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.b-row .why {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
  line-height: 1.4;
  font-style: italic;
}
.b-row.pending .pick {
  color: var(--ink-3);
  font-style: italic;
  font-weight: 400;
}
.b-row.pending .ck {
  border-style: dashed;
}
.b-row.active {
  background: var(--civic-soft);
  margin: 0 -14px;
  padding: 14px;
  border-radius: 6px;
  border-bottom: none;
}
body[data-treatment="inkwell"] .b-row.active {
  background: oklch(0.28 0.04 170);
}

.ws-ballot .b-foot {
  border-top: 1px solid var(--rule);
  padding: 16px 22px 20px;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-ballot .b-foot button {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ws-ballot .b-foot button .arrow {
  color: var(--ink-3);
}
.ws-ballot .b-foot button.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.ws-ballot .b-foot button.primary .arrow {
  color: var(--paper);
}
.ws-ballot .b-foot button.primary:disabled {
  background: var(--rule);
  border-color: var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
}
/* Privacy reassurance note under the "Save my voting plan" button.
   Sits as a small caption between the save and continue buttons so
   first-time users know exactly what's saved — issues + picks, not
   personal data. The negative margin pulls it visually closer to
   the save button it's annotating. */
.ws-ballot .b-foot .b-foot-note {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  line-height: 1.45;
  margin: -2px 2px 4px;
  text-align: left;
}

/* "Why I picked this" inline editor */
.why-edit {
  margin-top: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--civic);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.why-edit label {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.why-edit textarea {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--ink);
  border-radius: 6px;
  outline: none;
  resize: vertical;
  font-family: var(--sans);
  line-height: 1.45;
}
.why-edit .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.why-edit .row .hint {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.why-edit .row button {
  background: var(--civic);
  color: var(--paper-2);
  border: 0;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}

/* ============ PRINT VIEW ============ */
.print-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 32px 80px;
  background: #fff;
}
.print-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}
.print-header h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
}
.print-header .actions {
  display: flex;
  gap: 8px;
}
.print-header .actions button {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.print-header .actions button.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.print-sheet {
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
  padding: 56px 56px 48px;
  position: relative;
}
.print-sheet .ph-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.print-sheet .ph-head .l {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.015em;
}
.print-sheet .ph-head .l small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 6px;
}
.print-sheet .ph-head .r {
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.6;
}
.print-sheet .ph-head .r b {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  display: block;
}
.voter-meta {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
/* Logistics block now trails the decisions (D): a top rule + section title
   separate it from the verdicts above; no bottom rule needed. */
.logistics-title {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.voter-meta.voter-meta-logistics {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.voter-meta .cell .k {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.voter-meta .cell .v {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.ballot-list {
  margin-top: 24px;
}
.ballot-group {
  margin-bottom: 28px;
}
.ballot-group .gtitle {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--vote-red);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.br {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--rule);
}
.br:last-child {
  border-bottom: 0;
}
.br .bx {
  width: 18px;
  height: 18px;
  border: 1.8px solid var(--ink);
  margin-top: 2px;
  position: relative;
}
.br.checked .bx::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 14px;
  height: 7px;
  border-left: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg);
}
/* Differentiate the verdict at a glance (A): KEEP = green box + green check,
   REPLACE = red box + a red swap-arrow glyph instead of the check. */
.br.verdict-row.keep .bx {
  border-color: var(--civic);
  background: oklch(0.96 0.02 170);
}
.br.verdict-row.keep .bx::after {
  border-left-color: var(--civic-2);
  border-bottom-color: var(--civic-2);
}
.br.verdict-row.replace .bx {
  border-color: var(--vote-red);
  background: oklch(0.97 0.02 28);
}
.br.verdict-row.replace .bx::after {
  content: "\21C4"; /* ⇄ swap-arrow — distinct from the keep check */
  left: 0;
  top: -2px;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  color: var(--vote-red);
}
.br .race-name {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.br .pick-name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.br .pick-name .party {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-left: 8px;
  vertical-align: 2px;
}
.br .my-note {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 3px;
  font-style: italic;
}
.print-foot {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.print-foot .l b {
  display: block;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.print-foot .sig {
  border-top: 1px solid var(--ink);
  width: 220px;
  padding-top: 4px;
  text-align: center;
  color: var(--ink-3);
  font-size: 10px;
}

@media print {
  body {
    background: white;
  }
  .app-nav,
  .print-header,
  .tweaks {
    display: none !important;
  }
  .print-wrap {
    padding: 0;
    max-width: none;
  }
  .print-sheet {
    box-shadow: none;
    border: none;
    padding: 32px;
  }
}

/* ============ TYPE MOODS ============ */
body[data-mood="civic"] {
  --serif: "IBM Plex Serif", Georgia, serif;
}
body[data-mood="civic"] .hp-hero h1 em {
  font-style: italic;
  color: var(--ink);
  background: linear-gradient(transparent 62%, var(--civic-soft) 62%);
  padding: 0 2px;
}
/* Bold Flag / Keystone: canvas's italic emphasis is plain navy, no
   highlighter-mark background -- override the civic-mood default (which
   otherwise wins on specificity) inside the hero only. */
body[data-mood="civic"] .hp-hero h1 em {
  color: var(--hh-brand);
  background: none;
  padding: 0;
}

body[data-mood="manifesto"] {
  --serif: "Space Grotesk", system-ui, sans-serif;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
body[data-mood="manifesto"] .hp-hero h1,
body[data-mood="manifesto"] .loading-card h2,
body[data-mood="manifesto"] .print-header h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
body[data-mood="manifesto"] .hp-hero h1 em {
  font-style: normal;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--vote-red);
  text-decoration-thickness: 7px;
  text-underline-offset: 10px;
}
body[data-mood="manifesto"] .cand-card .name,
body[data-mood="manifesto"] .br .pick-name {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ============ PALETTES ============ */
body[data-palette="constitutional"] {
  --civic: oklch(0.34 0.1 255);
  --civic-2: oklch(0.27 0.1 255);
  --civic-soft: oklch(0.9 0.025 255);
}
body[data-palette="constitutional"] .cand-card .pip.dem {
  background: oklch(0.34 0.1 255);
}

body[data-palette="newsprint"] {
  --civic: oklch(0.24 0.018 240);
  --civic-2: oklch(0.16 0.018 240);
  --civic-soft: oklch(0.9 0.012 85);
  --gold: oklch(0.62 0.025 60);
  --paper: oklch(0.955 0.02 85);
  --paper-2: oklch(0.975 0.014 85);
  --rule: oklch(0.8 0.014 85);
  --rule-2: oklch(0.88 0.012 85);
}

/* ============ TREATMENTS ============ */
body[data-treatment="inkwell"] {
  --paper: oklch(0.16 0.018 240);
  --paper-2: oklch(0.2 0.018 240);
  --rule: oklch(0.3 0.018 240);
  --rule-2: oklch(0.26 0.018 240);
  --ink: oklch(0.97 0.012 85);
  --ink-2: oklch(0.78 0.012 85);
  --ink-3: oklch(0.58 0.012 85);
  --tag-bg: oklch(0.26 0.012 85);
  --shadow-card:
    0 1px 0 oklch(0.28 0.018 240), 0 30px 60px -30px oklch(0 0 0 / 0.6);
  --shadow-soft:
    0 1px 0 oklch(0.26 0.018 240), 0 10px 30px -20px oklch(0 0 0 / 0.4);
}
body[data-treatment="inkwell"]:not([data-palette="constitutional"]):not(
    [data-palette="newsprint"]
  ) {
  --civic: oklch(0.72 0.1 170);
  --civic-2: oklch(0.62 0.1 170);
  --civic-soft: oklch(0.3 0.05 170);
}
body[data-treatment="inkwell"][data-palette="constitutional"] {
  --civic: oklch(0.7 0.13 255);
  --civic-2: oklch(0.6 0.13 255);
  --civic-soft: oklch(0.28 0.06 255);
}
body[data-treatment="inkwell"][data-palette="newsprint"] {
  --civic: oklch(0.94 0.018 85);
  --civic-2: oklch(0.86 0.018 85);
  --civic-soft: oklch(0.3 0.012 85);
  --paper: oklch(0.15 0.012 85);
  --paper-2: oklch(0.19 0.012 85);
}
body[data-treatment="inkwell"] .msg.user .bubble {
  background: var(--civic);
  color: oklch(0.14 0.018 240);
}
body[data-treatment="inkwell"] .addr-card input,
body[data-treatment="inkwell"] .co-input textarea,
body[data-treatment="inkwell"] .ws-input .input-row,
body[data-treatment="inkwell"] .why-edit textarea {
  background: oklch(0.14 0.018 240);
  color: var(--ink);
  border-color: var(--rule);
}
body[data-treatment="inkwell"] .br .bx {
  border-color: var(--ink);
}
body[data-treatment="inkwell"] .br.checked .bx::after {
  border-color: var(--ink);
}
body[data-treatment="inkwell"] .print-sheet .ph-head {
  border-bottom-color: var(--ink);
}

/* ============ TWEAKS PANEL ============ */
.tweaks {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 308px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow:
    0 1px 0 var(--rule),
    0 30px 60px -20px oklch(0.18 0.018 240 / 0.35);
  font-family: var(--sans);
  color: var(--ink);
  z-index: 9999;
  overflow: hidden;
  user-select: none;
}
.tweaks header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  background: oklch(0.94 0.008 85);
}
body[data-treatment="inkwell"] .tweaks header {
  background: oklch(0.22 0.018 240);
}
.tweaks header h4 {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.tweaks header .close {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.tweaks .body-inner {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tweaks .row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tweaks .row > label {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.tweaks .seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: oklch(0.92 0.012 85);
  padding: 4px;
  border-radius: 8px;
}
body[data-treatment="inkwell"] .tweaks .seg {
  background: oklch(0.14 0.018 240);
}
.tweaks .seg.two {
  grid-template-columns: repeat(2, 1fr);
}
.tweaks .seg button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.tweaks .seg button.active {
  background: var(--paper-2);
  color: var(--ink);
  box-shadow:
    0 1px 0 var(--rule),
    0 1px 4px oklch(0.18 0.018 240 / 0.08);
}
body[data-treatment="inkwell"] .tweaks .seg button.active {
  background: var(--civic);
  color: oklch(0.14 0.018 240);
}
.tweaks .hint {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-style: italic;
}
.tweaks .hint b {
  color: var(--ink-2);
  font-weight: 600;
  font-style: normal;
}

/* Prototype banner */
.proto-banner {
  background: oklch(0.95 0.04 75);
  color: oklch(0.3 0.06 75);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 6px 16px;
  border-bottom: 1px solid oklch(0.85 0.05 75);
}
body[data-treatment="inkwell"] .proto-banner {
  background: oklch(0.24 0.06 75);
  color: oklch(0.85 0.05 75);
  border-bottom-color: oklch(0.32 0.06 75);
}

/* ====================================================
   v2 CANDIDATE CARD · hero visual layout
   + expandable drill-down with curated narratives
   + funding mix (small/large/PAC) money-map
   + named issue-PACs row
   ==================================================== */

.cv2-card {
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 var(--rule-2),
    0 18px 36px -28px oklch(0.18 0.018 240 / 0.25);
}

/* ─── Head ─── */
.cv2-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--rule-2);
}
.cv2-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: repeating-linear-gradient(
    45deg,
    oklch(0.9 0.012 85) 0 6px,
    oklch(0.95 0.008 85) 6px 12px
  );
  border: 1px solid var(--rule);
}
.cv2-id {
  min-width: 0;
}
.cv2-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.cv2-vp-name {
  /* Running-mate sub-line on presidential ticket cards.
     Sits between the primary name and the party/tag row so the
     layout hierarchy is: Primary Name → w/ VP → party · tag.
     Uses a smaller, lighter style so it reads as supporting info. */
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-2);
  margin-top: 2px;
  line-height: 1.2;
}
.cv2-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.cv2-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cv2-pip.dem {
  background: oklch(0.5 0.16 240);
}
.cv2-pip.rep {
  background: var(--vote-red);
}
.cv2-pip.ind {
  background: var(--gold);
}
.cv2-tag {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.cv2-tenure {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.cv2-tenure .num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cv2-tenure .unit {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-top: 5px;
  max-width: 80px;
  text-align: right;
  line-height: 1.2;
}
.cv2-tenure.no-record .unit-lg {
  font-family: var(--serif);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--ink-3);
}
.cv2-bio {
  font-size: 13.5px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.5;
  padding: 12px 20px 0;
}

/* ─── Block heads (Issues / Funding) ─── */
.cv2-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.cv2-block-head .lab {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.cv2-block-head .overall {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-2);
}
.cv2-block-head .overall b {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
/* Research-provenance caveat ("Based on public statements — not a voting
   record") shown alongside the block-head label when AlignmentScoreBanner
   falls back to web_search scores or the no-citable-statements honest
   fallback. Not scoped to .rep-card: the legacy ballot CandidateCard hits
   the same code path (it doesn't pass rowVariant, so this can render there
   too whenever a candidate's alignmentEntry has no voting record). */
.cv2-research-caveat {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 2px;
}

/* ─── Issues block ─── */
.cv2-issues {
  padding: 18px 20px 20px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-2);
}
.cv2-norecord {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  padding: 4px 0;
}
.cv2-norecord p {
  margin: 0 0 8px;
}
.cv2-norecord p:last-child {
  margin: 0;
}
.cv2-norecord a {
  color: var(--civic);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ─── Issue alignment row ─── */
.cv2-iss-row {
  border-top: 1px solid var(--rule-2);
}
.cv2-iss-row:first-of-type {
  border-top: 0;
}
.cv2-iss-row.open {
  background: var(--paper);
  margin: 0 -20px;
  padding: 0 20px;
  border-radius: 0;
  border-top: 1px solid var(--rule);
  box-shadow: inset 4px 0 0 var(--civic);
}
.cv2-iss-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: default;
  color: inherit;
}
.cv2-iss-row.has-drill .cv2-iss-head {
  cursor: pointer;
}
.cv2-iss-row.has-drill .cv2-iss-head:hover .name {
  color: var(--civic);
}

.cv2-iss-head .topic {
  min-width: 0;
}
.cv2-iss-head .name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 7px;
}
.cv2-bar {
  height: 8px;
  background: oklch(0.9 0.012 85);
  border-radius: 4px;
  overflow: hidden;
}
.cv2-bar .fill {
  height: 100%;
  background: var(--civic);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.cv2-bar .fill.mid {
  background: var(--gold);
}
.cv2-bar .fill.low {
  background: var(--vote-red);
}
.cv2-iss-head .meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 7px;
  letter-spacing: 0.02em;
}
.cv2-iss-head .meta.thin {
  font-style: italic;
  color: var(--ink-3);
}
.cv2-iss-head .meta b {
  color: var(--ink-2);
  font-weight: 600;
}
/* Web-search evidence links inside alignment rows */
.cv2-evidence-link {
  font-size: 11px;
  color: var(--civic);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  line-height: 1.4;
}

.cv2-iss-head .pct {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cv2-iss-head .pct.mid {
  color: var(--ink-2);
}
.cv2-iss-head .pct.low {
  color: var(--vote-red);
}
/* web_search alignment right column (directional badge + confidence chip).
   Classed instead of inline so it scales with the breakpoints below, matching
   the voting-record .pct column. Background color stays inline (data-driven). */
.cv2-iss-head .cv2-ws-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.cv2-iss-head .cv2-ws-badge {
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
}
.cv2-iss-head .cv2-ws-conf {
  font-size: 10px;
  color: var(--ink-3, #888);
  border: 1px solid var(--rule, #ddd);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.cv2-iss-head .pct small {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
}
.cv2-iss-head .pct .chev {
  font-size: 14px;
  color: var(--ink-3);
  margin-left: 2px;
  font-family: var(--sans);
}

/* ─── Drill-down ─── */
.cv2-drill {
  padding: 6px 0 18px;
  border-top: 1px dashed var(--rule);
}
.cv2-drill-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 12px;
  flex-wrap: wrap;
}
.cv2-drill-head .lab {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.cv2-drill-head .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-style: italic;
}
.cv2-votes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Curated vote card ─── */
.cv2-vote {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px 12px;
}
/* [Δ Muxin round-3.1] green/red left rail — screens-results.jsx's
   .votecard/.votecard.against border-left treatment, ported onto the
   repo's own cv2-vote card rather than renamed to canvas's class
   (02c-results-votes-drilldown stays a functional-equivalence waiver,
   not a literal class port — see parity-gate.ts STRUCTURAL_WAIVERS). */
.cv2-vote.vote-with {
  border-left: 3px solid var(--civic);
}
.cv2-vote.vote-against {
  border-left: 3px solid var(--vote-red);
}
.cv2-vote-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 4px;
}
.cv2-vote-head .bill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cv2-vote-head .bill .num {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--civic);
  font-weight: 600;
}
.cv2-vote-head .bill .ttl {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--ink);
}
.cv2-vote-head .vote-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.cv2-vote-head .vote-badge.yea {
  background: var(--civic-soft);
  color: var(--civic-2);
}
.cv2-vote-head .vote-badge.nay {
  background: oklch(0.93 0.05 28);
  color: oklch(0.4 0.12 28);
}
.cv2-vote-head .vote-badge.other {
  background: oklch(0.92 0.012 85);
  color: var(--ink-2);
}
/* [Δ Muxin round-3.1] ContributingVoteCard's own alignment pill —
   canvas's .vc-align copy/shape ("✓ With you" / "✗ Against you",
   mixed-case, not the all-caps YEA/NAY .vote-badge above), reusing
   the same green/red pair as the .vote-badge.yea/.nay colors so both
   badge styles stay visually consistent. */
.cv2-vote-align {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cv2-vote-align.with {
  background: var(--civic-soft);
  color: var(--civic-2);
}
.cv2-vote-align.against {
  background: oklch(0.93 0.05 28);
  color: oklch(0.4 0.12 28);
}
.cv2-vote-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.cv2-vote-narr {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 12px;
  text-wrap: pretty;
}
.cv2-vote-cite {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-2);
}
.cv2-vote-cite .src-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--civic);
  background: var(--civic-soft);
  padding: 4px 8px;
  border-radius: 4px;
}
.cv2-vote-cite .src-link {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  text-decoration: none;
  margin-left: auto;
  cursor: pointer;
}
.cv2-vote-cite .src-link:hover {
  color: var(--civic);
}

/* ─── Issue-specific PACs (in drill-down) ─── */
.cv2-issue-pacs {
  margin-top: 14px;
  padding: 12px 14px;
  background: oklch(0.95 0.04 75 / 0.45);
  border-radius: 8px;
  border: 1px solid oklch(0.85 0.04 75 / 0.5);
}
.cv2-issue-pacs .lab {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(0.42 0.08 60);
  margin-bottom: 8px;
  font-weight: 600;
}
.cv2-issue-pac {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  padding: 5px 0;
}
.cv2-issue-pac .sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.cv2-issue-pac .name {
  color: var(--ink-2);
}
.cv2-issue-pac .amt {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* ─── Funding block ─── */
.cv2-funding {
  padding: 18px 20px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
}

/* Money map — small / large / PAC */
.cv2-money-map-wrap {
  margin-bottom: 16px;
}
.cv2-money-map {
  display: flex;
  height: 48px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cv2-money-map .seg {
  display: grid;
  place-items: center;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0 4px;
}
.cv2-money-map .seg .pct {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.cv2-money-map .seg.small {
  background: var(--civic);
  color: var(--paper-2);
}
.cv2-money-map .seg.large {
  background: var(--gold);
  color: var(--ink);
}
.cv2-money-map .seg.pac {
  background: var(--vote-red);
  color: var(--paper-2);
}
/* Legend rows beneath the bar — flex-wrap so each label sizes
   to its own content. The old rigid `repeat(3, 1fr)` grid forced
   "Small donors <$200" to wrap onto two lines in narrow cards
   when it would have fit naturally in one. */
.cv2-money-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.cv2-money-legend > div {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cv2-money-legend small {
  text-transform: none;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.cv2-money-legend .sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cv2-money-legend .sw.small {
  background: var(--civic);
}
.cv2-money-legend .sw.large {
  background: var(--gold);
}
.cv2-money-legend .sw.pac {
  background: var(--vote-red);
}

/* Named issue PACs aggregated */
.cv2-named-pacs {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  margin-bottom: 14px;
}
/* Industry breakdown — same clear separation from the section above it. */
.cv2-industry {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.cv2-named-pacs .lab,
.cv2-industry .lab {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 700;
}
.cv2-pac-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--paper-2);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13.5px;
}
.cv2-pac-row .sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.cv2-pac-row .name {
  color: var(--ink-2);
}
.cv2-pac-row .amt {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Industry breakdown.
   Bar is a visual rhythm strip only — no inline labels (they
   truncated on narrow slices). Names + amounts live in the
   chip rows below. */
.cv2-industry-bar {
  display: flex;
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--rule);
}
.cv2-industry-bar > span {
  min-width: 0;
}
.cv2-industry-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cv2-industry-list .row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-2);
}
.cv2-industry-list .row .sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.cv2-industry-list .row .amt {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* ─── Actions ───
   Right-aligned cluster: secondary text-link on the left, primary
   filled CTA on the right — conventional commit-row pattern. The
   primary button gets a min-width so it has presence at any card
   width, but doesn't stretch into a full-bleed slab. Mobile media
   query overrides this to stack vertically. */
.cv2-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 18px;
  background: var(--paper);
}
.cv2-actions .see {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  order: 1;
}
.cv2-actions .see:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.cv2-actions .pick {
  background: var(--civic);
  color: var(--paper-2);
  border: 0;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  order: 2;
  min-width: 220px;
}
.cv2-actions .pick:hover {
  background: var(--civic-2);
}
.cv2-actions .pick .ck {
  width: 18px;
  height: 18px;
  border: 2px solid var(--paper-2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
}
.cv2-actions .pick.picked {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--civic);
}
.cv2-actions .pick.picked .ck {
  border-color: var(--civic);
  background: var(--civic);
  color: var(--paper-2);
}

/* Treatment-specific tweaks for v2 card */
body[data-treatment="inkwell"] .cv2-card {
  background: var(--paper-2);
}
body[data-treatment="inkwell"] .cv2-issues {
  background: var(--paper);
}
body[data-treatment="inkwell"] .cv2-vote {
  background: oklch(0.24 0.018 240);
}
body[data-treatment="inkwell"] .cv2-pac-row {
  background: oklch(0.24 0.018 240);
}
body[data-treatment="inkwell"] .cv2-issue-pacs {
  background: oklch(0.26 0.04 75);
  border-color: oklch(0.34 0.04 75);
}
body[data-treatment="inkwell"] .cv2-issue-pacs .lab {
  color: oklch(0.85 0.05 75);
}
body[data-treatment="inkwell"] .cv2-bar {
  background: oklch(0.3 0.018 240);
}
body[data-treatment="inkwell"] .cv2-iss-row.open {
  background: var(--paper);
}

/* Hide mobile back button on desktop (default) — the mobile media
   query below uses display:grid !important to show it on mobile */
.ws-mobile-back-hide-desktop {
  display: none;
}

/* ====================================================
   RESPONSIVE WORKSPACE — Pattern B (ballot-first mobile)
   ==================================================== */

/* Tablet — 768–1023 — chat + ballot, no rail */
@media (max-width: 1023px) and (min-width: 768px) {
  .ws-wrap {
    grid-template-columns: 1fr 340px;
  }
  .ws-rail {
    display: none;
  }
  .ws-chat .body {
    padding: 22px 22px 20px;
  }
  .cv2-head {
    padding: 16px 18px 14px;
  }
  .cv2-issues,
  .cv2-funding {
    padding: 16px 18px;
  }
}

/* Mobile — ≤ 767 — ballot-first; chat as full-screen sheet */
@media (max-width: 767px) {
  .app-nav {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 14px 18px;
  }
  /* All nav links now live only in the header (the footer was stripped
     to brand + copyright), so they must stay reachable on phones. Keep
     the brand + tip/settings cluster on the top row and drop the link
     group to its own full-width second row. */
  .app-nav .brand {
    order: 1;
  }
  .app-nav .nav-right {
    order: 2;
  }
  .app-nav .links {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0 22px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--rule-2);
  }
  .app-nav .links a {
    display: inline-flex;
    align-items: center;
    /* Apple HIG / Material both call 44px the minimum touch target (see the
       prototype-c.css touch-target section) — this was 40px. */
    min-height: 44px;
  }
  .app-nav .lang-wrap {
    display: none;
  }

  /* Ballot is the primary surface */
  .ws-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    position: relative;
    min-height: calc(100vh - 64px);
  }
  .ws-rail {
    display: none;
  }

  /* Chat is hidden by default on mobile and only shown
     when the workspace has the data-mobile-chat="open" attr */
  .ws-chat {
    display: none;
  }
  .ws-wrap[data-mobile-chat="open"] .ws-chat {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--paper-2);
    flex-direction: column;
  }

  /* Always-visible "back to ballot" bar at top of chat on mobile */
  .ws-chat .head {
    padding: 10px 12px 10px;
    display: grid !important;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .ws-chat .head .title {
    text-align: center;
    font-size: 15px;
  }
  .ws-chat .head .title small {
    font-size: 10.5px;
  }
  .ws-mobile-back {
    width: 40px;
    height: 40px;
    display: grid !important;
    place-items: center;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink-2);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }
  .ws-mobile-back:hover {
    color: var(--ink);
  }
  /* Hide on desktop */
  .ws-mobile-back-hide-desktop {
    display: none;
  }

  .ws-chat .body {
    padding: 16px 14px 20px;
    gap: 14px;
  }
  .ws-input {
    padding: 10px 14px 14px;
    background: var(--paper);
  }
  .ws-input .meta {
    display: none;
  }
  .ws-input .chips {
    gap: 6px;
  }
  .ws-input .chip {
    font-size: 12.5px;
    padding: 7px 12px;
  }

  /* Ballot pane goes full width with a sticky CTA */
  .ws-ballot {
    background: var(--paper);
    width: 100%;
    padding-bottom: 140px;
  }
  .ws-ballot .b-head {
    padding: 14px 18px 12px;
  }
  /* [Fix] On mobile, .b-foot becomes position:fixed below — so the
     scrollable list above needs enough bottom padding to clear it,
     otherwise the last race/prop is hidden behind the fixed buttons.
     ~ 3 stacked 48px buttons + container padding + safe-area inset. */
  .ws-ballot .b-list {
    padding: 4px 18px calc(200px + env(safe-area-inset-bottom, 0px));
  }
  .ws-ballot .b-foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--rule);
    background: var(--paper-2);
    z-index: 20;
    box-shadow: 0 -8px 24px -16px oklch(0.18 0.018 240 / 0.3);
  }
  .ws-ballot .b-foot button {
    padding: 14px 16px;
    font-size: 14.5px;
    min-height: 48px;
  }

  /* "Currently deciding · Resume" bar (Pattern B borrowed-from-A) */
  .ws-mobile-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--civic-soft);
    border-left: 3px solid var(--civic);
    border-bottom: 1px solid oklch(0.85 0.025 170);
  }
  .ws-mobile-resume .l {
    min-width: 0;
  }
  .ws-mobile-resume .lab {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--civic-2);
    margin-bottom: 2px;
  }
  .ws-mobile-resume .name {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ws-mobile-resume .resume {
    background: var(--civic);
    color: var(--paper-2);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: 0;
    white-space: nowrap;
  }

  /* Bigger candidate-card targets on mobile */
  .cv2-head {
    padding: 16px 18px 14px;
    gap: 12px;
  }
  .cv2-photo {
    width: 50px;
    height: 50px;
  }
  .cv2-name {
    font-size: 18px;
  }
  .cv2-tenure .num {
    font-size: 28px;
  }
  .cv2-issues,
  .cv2-funding {
    padding: 16px 18px;
  }
  .cv2-iss-row.open {
    margin: 0 -18px;
    padding: 0 18px;
  }
  .cv2-iss-head .pct {
    font-size: 26px;
  }
  .cv2-iss-head .pct small {
    font-size: 12.5px;
  }
  .cv2-iss-head .cv2-ws-badge {
    font-size: 9.5px;
    padding: 2px 6px;
  }
  .cv2-iss-head .cv2-ws-conf {
    font-size: 9.5px;
  }
  .cv2-actions {
    padding: 14px 18px 16px;
  }
  .cv2-actions .pick {
    font-size: 14px;
    padding: 14px 14px;
  }
  .cv2-actions .see {
    padding: 14px 14px;
  }

  /* [Fix] At <430px the "See all votes →" button was being
     pushed off the right edge by the wider "Pick X" CTA.
     Stack them vertically on small phones — primary action
     on top full-width, secondary action below. */
  .cv2-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cv2-actions .see {
    justify-self: stretch;
    text-align: center;
  }

  /* Mobile blind header — the IDENTITY HIDDEN pill + name + REVEAL
     button all in one row gets cramped at <480px and the pill wraps
     to 3-4 lines. Stack the REVEAL button below as a full-width CTA,
     and keep the name + pill together up top. */
  .cv2-head.blind {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  .cv2-head.blind > .cv2-photo.blind {
    grid-column: 1;
    grid-row: 1;
  }
  .cv2-head.blind > div:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .cv2-head.blind > .cv2-reveal {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    justify-content: center;
    padding: 10px 14px;
    gap: 8px;
  }
  /* Shrink the blind name on mobile so "Candidate A" stays on one line.
     Higher specificity than `.cv2-name.blind` later in the file so this
     wins inside the media query. */
  .cv2-head .cv2-name.blind {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* And let the pill text breathe at narrow widths without overflowing the column. */
  .cv2-sub.blind .cv2-tag {
    display: inline-block;
    line-height: 1.4;
  }

  /* Tweaks panel — bottom sheet style on mobile */
  .tweaks {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 14px 14px 0 0;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* ────────── Print view — mobile-friendly restructure ──────────
     The print view shows a printable 8.5×11 ballot. On mobile the
     paper-ish horizontal layouts (header row, voter-meta 4-col)
     squish into unusable narrow text columns. Restructure so the
     chrome and the ballot itself flow naturally at narrow widths
     — desktop print preview is unchanged because everything below
     lives inside the mobile media query.  */
  .print-wrap {
    padding: 16px 14px 32px;
  }
  /* Header chrome — title stacks above buttons; buttons sit in a
     horizontal row, each sized to content. */
  .print-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .print-header h2 {
    font-size: 22px;
    margin: 0;
  }
  .print-header .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .print-header .actions button {
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 11px 14px;
    font-size: 14px;
  }
  /* Ballot sheet — paper padding shrinks at narrow widths. */
  .print-sheet {
    padding: 22px 18px;
  }
  /* "My Ballot · Date" + "Precinct …" stack vertically; right-align
     becomes left-align so both blocks read as one column. */
  .print-sheet .ph-head {
    flex-direction: column;
    gap: 10px;
  }
  .print-sheet .ph-head .l {
    font-size: 22px;
  }
  .print-sheet .ph-head .r {
    text-align: left;
    font-size: 11.5px;
  }
  /* Voter meta — 4-column grid collapses to 2 columns at narrow
     widths so each cell has room to breathe without single-letter
     vertical text. */
  .voter-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 18px;
  }
  .voter-meta .cell .v {
    font-size: 13px;
  }
}

/* Small mobile — ≤ 380 — tighten further */
@media (max-width: 380px) {
  .cv2-head {
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    padding: 14px;
  }
  .cv2-photo {
    width: 44px;
    height: 44px;
  }
  .cv2-name {
    font-size: 17px;
  }
  .cv2-tenure .num {
    font-size: 24px;
  }
  .cv2-iss-head {
    gap: 10px;
  }
  .cv2-iss-head .name {
    font-size: 14.5px;
  }
  .cv2-iss-head .pct {
    font-size: 24px;
  }
  .cv2-iss-head .cv2-ws-badge {
    font-size: 9px;
    padding: 1px 5px;
    letter-spacing: 0.04em;
  }
  .cv2-iss-head .cv2-ws-conf {
    font-size: 9px;
    padding: 1px 4px;
  }
  .cv2-money-map .seg .pct {
    font-size: 16px;
  }
  .cv2-money-map .seg .lab {
    font-size: 9.5px;
  }
}

/* ====================================================
   PASS B SCREENS · styles
   ==================================================== */

/* ── Common modal overlay (used by Budget exhausted, Resume,
       Compare, All votes) ────────────────────────────── */
.be-modal-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.18 0.018 240 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  animation: be-fadein 0.15s ease;
}
@keyframes be-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.be-modal,
.cmp-modal,
.av-panel,
.amend-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-card, 0 20px 60px -20px oklch(0.18 0.018 240 / 0.3));
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Party Gate (full screen route) ───────────────── */
.pg-wrap {
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
  padding: 40px 20px 80px;
  background: var(--paper-2);
}
.pg-card {
  max-width: 680px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 32px 36px 28px;
  box-shadow: 0 18px 48px -28px oklch(0.18 0.018 240 / 0.3);
}
.pg-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--vote-red);
  font-weight: 600;
  margin-bottom: 14px;
}
.pg-card h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  line-height: 1.1;
}
.pg-lede {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.pg-lede b {
  color: var(--ink);
}

.pg-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.pg-opt {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1.5px solid var(--rule);
  background: var(--paper-2);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.pg-opt:hover {
  border-color: var(--civic);
  background: var(--paper);
}
.pg-opt.nope {
  grid-template-columns: 1fr auto;
}
.pg-pip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rule);
}
.pg-opt.dem .pg-pip {
  background: oklch(0.5 0.16 240);
  border-color: oklch(0.5 0.16 240);
}
.pg-opt.rep .pg-pip {
  background: var(--vote-red);
  border-color: var(--vote-red);
}
.pg-ttl {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.pg-sub {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 2px;
}
.pg-arrow {
  color: var(--ink-3);
  font-size: 18px;
}
.pg-foot {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: 16px;
  border-top: 1px solid var(--rule-2);
  margin: 0;
}
.pg-src {
  color: var(--civic);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Amendment editor (modal) ─────────────────────── */
.amend-modal {
  position: fixed;
  inset: 0;
  background: oklch(0.18 0.018 240 / 0.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  animation: be-fadein 0.15s ease;
}
.amend-card {
  max-width: 640px;
  padding: 26px 30px 22px;
}
.amend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.amend-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--civic);
  margin-bottom: 6px;
  font-weight: 600;
}
.amend-head h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
.amend-x {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.amend-help {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--rule);
}
.amend-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.amend-row {
  display: grid;
  grid-template-columns: 28px 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: 8px;
}
.amend-ord {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.amend-ord button {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 9px;
  padding: 1px 4px;
  cursor: pointer;
}
.amend-ord button:disabled {
  opacity: 0.25;
}
.amend-ord button:hover:not(:disabled) {
  color: var(--ink);
}
.amend-rank {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--civic);
  font-weight: 600;
  text-align: center;
}
.amend-name {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  width: 100%;
}
.amend-name:focus {
  outline: 0;
  border-color: var(--civic);
}
.amend-remove {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
}
.amend-remove:hover {
  color: var(--vote-red);
  border-color: var(--vote-red);
}

.amend-add {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 5px 5px 5px 12px;
}
.amend-add input {
  background: transparent;
  border: 0;
  font-size: 14px;
  padding: 9px 0;
  outline: 0;
}
.amend-add-btn {
  background: var(--civic);
  color: var(--paper-2);
  border: 0;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.amend-add-btn:disabled {
  background: var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
}

.amend-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.amend-cancel,
.amend-apply {
  border: 0;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.amend-cancel {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.amend-apply {
  background: var(--civic);
  color: var(--paper-2);
}
.amend-apply:disabled {
  background: var(--rule);
  cursor: not-allowed;
}

/* ── Amend delta message (chat bubble) ───────────── */
.amend-delta .ad-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.ad-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.ad-row.significant {
  background: oklch(0.95 0.04 75 / 0.6);
  border-color: oklch(0.85 0.04 75 / 0.7);
}
.ad-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ad-row.significant .ad-tag {
  color: oklch(0.42 0.1 60);
  font-weight: 700;
}
.ad-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 2px;
}
.ad-pick {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
.ad-score {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
  align-items: center;
  font-family: var(--serif);
  text-align: center;
}
.ad-old,
.ad-new {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.ad-old {
  color: var(--ink-3);
}
.ad-arrow {
  font-size: 14px;
  color: var(--ink-3);
}
.ad-row.up .ad-arrow {
  color: var(--civic);
}
.ad-row.down .ad-arrow {
  color: var(--vote-red);
}
.ad-diff {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.ad-row.up .ad-diff {
  color: var(--civic);
}
.ad-row.down .ad-diff {
  color: var(--vote-red);
}
.ad-revisit {
  background: oklch(0.42 0.1 60);
  color: var(--paper-2);
  border: 0;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ad-foot {
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
  margin: 8px 0 0;
}

.rescore-yes,
.rescore-no {
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.rescore-yes {
  background: var(--civic);
  color: var(--paper-2);
}
.rescore-no {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule);
}

/* ── Budget Exhausted modal ─────────────────────── */
.be-modal {
  max-width: 720px;
  padding: 28px 32px 22px;
}
.be-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.be-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--civic);
  margin-bottom: 6px;
  font-weight: 600;
}
.be-head h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.15;
}
.be-x {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.be-lede {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 18px;
}
.be-lede b {
  color: var(--ink);
}

.be-prompt {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.be-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper);
}
.be-prompt-lab {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.be-copy {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.be-prompt-text {
  width: 100%;
  height: 240px;
  border: 0;
  background: transparent;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  resize: none;
  outline: 0;
  white-space: pre;
  overflow-x: auto;
}

.be-extras {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.be-ext-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.be-ext-btn:hover {
  border-color: var(--ink-3);
}
.be-ext-ic {
  font-size: 16px;
}

.be-foot {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
}

/* ── Profile Resume modal ───────────────────────── */
.pr-modal {
  max-width: 560px;
}
.pr-dropzone {
  margin: 8px 0;
  padding: 36px 20px 30px;
  border: 2px dashed var(--rule);
  border-radius: 12px;
  background: var(--paper-2);
  text-align: center;
}
.pr-drop-ic {
  font-size: 32px;
  color: var(--civic);
  margin-bottom: 10px;
}
.pr-drop-lab {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.pr-drop-or {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.pr-drop-file {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.pr-sample {
  background: var(--civic);
  color: var(--paper-2);
  border: 0;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Compare modal ──────────────────────────────── */
.cmp-modal {
  max-width: 880px;
  padding: 26px 30px 24px;
}
.cmp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.cmp-head h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.cmp-corner {
  background: var(--paper-2);
}
.cmp-name-cell {
  background: var(--paper);
  padding: 14px 16px;
  text-align: center;
}
.cmp-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cmp-role {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-top: 4px;
}
.cmp-issue-cell {
  background: var(--paper-2);
  padding: 14px 16px;
}
.cmp-issue-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cmp-issue-stance {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 3px;
}
.cmp-score-cell {
  background: var(--paper);
  padding: 14px 16px;
  text-align: center;
}
.cmp-score-cell.na {
  color: var(--ink-3);
  font-style: italic;
  font-size: 13px;
  display: grid;
  place-items: center;
}
.cmp-pct {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.cmp-pct small {
  font-size: 14px;
  color: var(--ink-3);
  margin-left: 2px;
}
.cmp-score-cell.mid .cmp-pct {
  color: var(--ink-2);
}
.cmp-score-cell.low .cmp-pct {
  color: var(--vote-red);
}
.cmp-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 5px;
}
.cmp-funding {
  width: 100%;
}

/* ── All Votes panel ────────────────────────────── */
.av-panel {
  max-width: 760px;
  padding: 26px 30px 22px;
}
.av-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.av-head h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
.av-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 4px 0;
}
.av-filter {
  font-size: 12.5px;
  font-weight: 500;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--ink-2);
  cursor: pointer;
}
.av-filter.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.av-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.av-vote {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px 12px;
}
.av-vote-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 4px;
}
.av-vote-num {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--civic);
  font-weight: 600;
}
.av-vote-ttl {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 3px;
}
.av-vote-meta {
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.av-vote-tag {
  background: var(--paper);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--rule-2);
}
.av-vote-narr {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 10px;
}
.av-vote-cite {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule-2);
}

/* ── All Votes sheet — Bold Flag / Keystone parity (02d-results-allvotes-sheet) ──
   Locally-scoped white-palette tokens matching design-handoff/keystone-canvas
   src/screens.css .screen[data-palette="white"], restructuring the panel into
   the canvas AllVotesSheet's grouped-by-issue / one-row-expanded shape. Every
   rule below is scoped under .avsheet (or the compound .be-modal-overlay.avsheet-scrim
   / .av-panel.avsheet), so it overrides the legacy flat-list rules above by
   specificity without touching them — other modals (Budget, Resume, Compare)
   that still use the bare .be-modal-overlay/.av-panel/.be-eyebrow/.be-x classes
   are unaffected. */
.be-modal-overlay.avsheet-scrim {
  background: oklch(0.2 0.035 260 / 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 34px;
}
.av-panel.avsheet {
  --av-paper: oklch(1 0 0);
  --av-paper-2: oklch(0.985 0.003 258);
  --av-ink: oklch(0.2 0.035 260);
  --av-ink-2: oklch(0.37 0.032 260);
  --av-ink-3: oklch(0.54 0.026 260);
  --av-brand: oklch(0.4 0.155 262);
  --av-brand-2: oklch(0.31 0.145 262);
  --av-brand-soft: oklch(0.94 0.04 262);
  --av-keep: oklch(0.44 0.115 159);
  --av-keep-soft: oklch(0.93 0.045 159);
  --av-replace: oklch(0.53 0.205 27);
  --av-replace-soft: oklch(0.94 0.05 27);
  --av-rule: oklch(0.88 0.006 260);
  --av-rule-2: oklch(0.93 0.005 260);
  --av-tag-bg: oklch(0.95 0.006 260);
  --av-serif: "Newsreader", Georgia, serif;
  --av-mono: "IBM Plex Mono", ui-monospace, monospace;
  width: 100%;
  max-width: 600px;
  max-height: 100%;
  padding: 0;
  background: var(--av-paper);
  border-color: var(--av-rule);
  border-radius: 16px;
  box-shadow: 0 40px 90px -40px oklch(0.2 0.03 255 / 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.avsheet .av-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--av-rule-2);
}
.avsheet .av-eyebrow {
  font-family: var(--av-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--av-brand);
  font-weight: 700;
}
.avsheet .av-head h3 {
  font-family: var(--av-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--av-ink);
  margin: 5px 0 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.avsheet .av-close {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--av-rule);
  background: var(--av-paper);
  color: var(--av-ink-2);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.avsheet .av-filters {
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid var(--av-rule-2);
  background: var(--av-paper);
}
.avsheet .avf,
.avsheet .av-filter {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--av-ink-2);
  background: var(--av-paper-2);
  border: 1px solid var(--av-rule-2);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
  cursor: pointer;
}
.avsheet .avf.active,
.avsheet .av-filter.active {
  background: var(--av-brand);
  color: var(--av-paper-2);
  border-color: var(--av-brand);
  font-weight: 600;
}
.avsheet .avf-sep {
  width: 1px;
  height: 18px;
  background: var(--av-rule);
  margin: 0 2px;
}
.avsheet .av-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px 14px;
}
.avsheet .av-group {
  margin-top: 14px;
}
.avsheet .av-glab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--av-rule-2);
  margin-bottom: 4px;
}
.avsheet .avg-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--av-ink);
}
.avsheet .avg-frac {
  font-family: var(--av-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.avsheet .avg-frac.good {
  background: var(--av-keep-soft);
  color: var(--av-keep);
}
.avsheet .avg-frac.bad {
  background: var(--av-replace-soft);
  color: var(--av-replace);
}
.avsheet .av-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto 12px;
  gap: 11px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--av-rule-2);
  cursor: pointer;
}
.avsheet .av-row:last-child {
  border-bottom: none;
}
.avsheet .av-row.open {
  background: var(--av-brand-soft);
  margin: 0 -22px;
  padding: 10px 22px;
  border-bottom: none;
}
.avsheet .av-row .avr-chev {
  font-size: 8px;
  color: var(--av-ink-3);
  text-align: center;
}
.avsheet .av-row.open .avr-chev {
  color: var(--av-brand);
}
.avsheet .avr-flag {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.avsheet .avr-flag.with {
  background: var(--av-keep-soft);
  color: var(--av-keep);
}
.avsheet .avr-flag.against {
  background: var(--av-replace-soft);
  color: var(--av-replace);
}
.avsheet .avr-bill {
  font-size: 12.5px;
  color: var(--av-ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avsheet .avr-bill b {
  color: var(--av-ink);
  font-weight: 600;
}
.avsheet .avr-cast {
  font-family: var(--av-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.avsheet .avr-cast.yea,
.avsheet .avr-cast.with {
  background: var(--av-brand-soft);
  color: var(--av-brand-2);
}
.avsheet .avr-cast.nay,
.avsheet .avr-cast.against {
  background: var(--av-tag-bg);
  color: var(--av-ink-2);
}
.avsheet .avr-date {
  font-family: var(--av-mono);
  font-size: 10px;
  color: var(--av-ink-3);
  white-space: nowrap;
}
.avsheet .av-detail {
  background: var(--av-brand-soft);
  margin: 0 -22px 4px;
  padding: 0 22px 14px;
  display: grid;
  gap: 11px;
}
.avsheet .avd-what {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--av-ink);
}
.avsheet .avd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.avsheet .avd-pair,
.avsheet .av-vote-tag {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--av-paper-2);
  border: 1px solid var(--av-rule-2);
  border-radius: 8px;
  padding: 7px 11px;
}
.avsheet .avd-pair .k {
  font-family: var(--av-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-ink-3);
  font-weight: 700;
}
.avsheet .avd-pair .val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--av-ink);
}
.avsheet .avd-pair .val.with {
  color: var(--av-keep);
}
.avsheet .avd-pair .val.against {
  color: var(--av-replace);
}
.avsheet .avd-link {
  font-family: var(--av-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--av-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.avsheet .av-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  border-top: 1px solid var(--av-rule-2);
  background: var(--av-paper);
  font-family: var(--av-mono);
  font-size: 10px;
  color: var(--av-ink-3);
}
.avsheet .av-src {
  letter-spacing: 0.02em;
}
.avsheet .av-src a {
  color: inherit;
}
@media (max-width: 767px) {
  .av-panel.avsheet {
    max-width: 100%;
  }
}

/* Inkwell treatment tweaks for modals */
body[data-treatment="inkwell"] .be-modal,
body[data-treatment="inkwell"] .cmp-modal,
body[data-treatment="inkwell"] .av-panel,
body[data-treatment="inkwell"] .amend-card,
body[data-treatment="inkwell"] .pg-card {
  background: var(--paper-2);
}
body[data-treatment="inkwell"] .be-prompt-text {
  background: oklch(0.13 0.018 240);
}

/* Mobile: modals go full-bleed at small widths */
@media (max-width: 767px) {
  .be-modal-overlay,
  .amend-modal {
    padding: 0;
    align-items: flex-end;
  }
  .be-modal,
  .cmp-modal,
  .av-panel,
  .amend-card {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 14px 14px 0 0;
    padding: 22px 20px 18px;
  }
  .pg-card {
    padding: 24px 20px 20px;
  }
  .pg-card h2 {
    font-size: 26px;
  }
  .cmp-grid {
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 12px;
  }
  .cmp-issue-cell,
  .cmp-name-cell,
  .cmp-score-cell {
    padding: 10px 8px;
  }
  .cmp-pct {
    font-size: 22px;
  }
  .cmp-issue-name {
    font-size: 12.5px;
  }
  .be-extras {
    flex-direction: column;
  }
  .av-filters {
    flex-wrap: wrap;
  }
}

/* ====================================================
   BLIND CANDIDATE MODE
   ==================================================== */

/* Card head when names are hidden */
.cv2-head.blind {
  background: oklch(0.93 0.018 240 / 0.4);
  grid-template-columns: 56px minmax(0, 1fr) auto;
}
.cv2-photo.blind {
  background: oklch(0.85 0.018 240);
  border: 2px dashed oklch(0.65 0.02 240);
  position: relative;
}
.cv2-photo.blind::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: oklch(0.55 0.02 240);
}
.cv2-name.blind {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.cv2-sub.blind {
  margin-top: 5px;
}
.cv2-sub.blind .cv2-tag {
  background: oklch(0.93 0.018 240);
  border-color: oklch(0.78 0.018 240);
  color: oklch(0.4 0.02 240);
  font-weight: 600;
}
.cv2-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.cv2-reveal:hover {
  border-color: var(--civic);
  background: var(--paper);
}
.cv2-reveal .eye {
  font-size: 18px;
  line-height: 1;
}
.cv2-reveal .lab {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  font-weight: 600;
}

/* Workspace chat-header blind toggle */
.h-act .blind-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  cursor: pointer;
  font-size: 12px;
}
.h-act .blind-toggle.on {
  background: oklch(0.93 0.018 240);
  border-color: oklch(0.65 0.02 240);
  color: oklch(0.3 0.02 240);
}
.h-act .blind-toggle .eye {
  font-size: 14px;
}
.h-act .blind-toggle .lab {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ====================================================
   PAC v2 ROWS — full context with stance against issues
   ==================================================== */

.cv2-pac-row.v2 {
  display: block;
  padding: 12px 14px;
  background: var(--paper-2);
  border-radius: 8px;
  margin-bottom: 6px;
}
.cv2-pac-row.v2 .cv2-pac-top {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.cv2-pac-row.v2 .cv2-pac-top .sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.cv2-pac-row.v2 .cv2-pac-top .name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cv2-pac-row.v2 .cv2-pac-top .amt {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.cv2-pac-row.v2 .cv2-pac-full {
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: italic;
  margin-left: 22px;
  margin-bottom: 4px;
}
.cv2-pac-row.v2 .cv2-pac-advocates {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-left: 22px;
  margin-bottom: 8px;
}
.cv2-pac-row.v2 .cv2-pac-flag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-left: 22px;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.4;
}
.cv2-pac-row.v2 .cv2-pac-flag .msg {
  flex: 1;
  min-width: 0;
}
.cv2-pac-row.v2 .cv2-pac-flag .ic {
  flex-shrink: 0;
  line-height: 1.4;
}
.cv2-pac-row.v2 .cv2-pac-flag.conflict {
  background: oklch(0.94 0.045 28 / 0.6);
  color: oklch(0.36 0.12 28);
  border-left: 3px solid var(--vote-red);
}
.cv2-pac-row.v2 .cv2-pac-flag.align {
  background: var(--civic-soft);
  color: var(--civic-2);
  border-left: 3px solid var(--civic);
}
.cv2-pac-row.v2 .cv2-pac-flag .ic {
  font-size: 14px;
}
.cv2-pac-row.v2 .cv2-pac-flag b {
  font-weight: 700;
}

/* ====================================================
   INDUSTRY % column
   ==================================================== */

.cv2-industry-list .row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-2);
  padding: 4px 0;
}
.cv2-industry-list .row .pct {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  min-width: 38px;
  text-align: right;
}
.cv2-industry-list .row .amt {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  min-width: 56px;
  text-align: right;
}

/* ====================================================
   COMPARE MODAL v2 — stacked, mobile-friendly
   ==================================================== */

.cmp-modal.v2 {
  max-width: 700px;
  padding: 22px 24px 18px;
}
.cmp-roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.cmp-roster-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  position: relative;
}
.cmp-roster-card.blind {
  background: oklch(0.93 0.018 240 / 0.4);
  border-color: oklch(0.78 0.018 240);
}
.cmp-alias {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--civic);
  font-weight: 600;
  margin-bottom: 3px;
}
.cmp-roster-card.blind .cmp-alias {
  color: oklch(0.4 0.02 240);
}
.cmp-roster-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.cmp-roster-card.blind .cmp-roster-name {
  color: var(--ink-2);
  font-style: italic;
}
.cmp-roster-role {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 3px;
}
.cmp-reveal {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.cmp-reveal:hover {
  border-color: var(--civic);
  color: var(--civic);
}
.cmp-reveal .eye {
  font-size: 13px;
}

.cmp-issues {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cmp-issue-panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
}
.cmp-issue-head {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--rule);
}
.cmp-issue-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.cmp-issue-stance {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.4;
}
.cmp-cand-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
}
.cmp-cand-row + .cmp-cand-row {
  border-top: 1px solid var(--rule-2);
}
.cmp-cand-tag {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.3;
}
.cmp-cand-tag .cmp-total {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-weight: 600;
  margin-top: 4px;
}
.cmp-score-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}
.cmp-score-row.na {
  display: block;
  color: var(--ink-3);
  font-style: italic;
  font-size: 13px;
}
.cmp-bar {
  height: 10px;
  background: oklch(0.9 0.012 85);
  border-radius: 5px;
  overflow: hidden;
}
.cmp-bar-fill {
  height: 100%;
  background: var(--civic);
  border-radius: 5px;
}
.cmp-bar-fill.mid {
  background: var(--gold);
}
.cmp-bar-fill.low {
  background: var(--vote-red);
}
.cmp-pct {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  min-width: 48px;
  text-align: right;
}
.cmp-pct small {
  font-size: 12px;
  color: var(--ink-3);
}
.cmp-score-row.mid .cmp-pct {
  color: var(--ink-2);
}
.cmp-score-row.low .cmp-pct {
  color: var(--vote-red);
}
.cmp-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cmp-money-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-money-bar {
  display: flex;
  height: 28px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.cmp-money-bar .seg {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}
.cmp-money-bar .seg.small {
  background: var(--civic);
  color: var(--paper-2);
}
.cmp-money-bar .seg.large {
  background: var(--gold);
  color: var(--ink);
}
.cmp-money-bar .seg.pac {
  background: var(--vote-red);
  color: var(--paper-2);
}
.cmp-money-legend {
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.cmp-money-legend b {
  color: var(--ink);
  font-weight: 600;
}

.cmp-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.cmp-foot .ic {
  font-size: 14px;
  flex-shrink: 0;
}

/* ====================================================
   ALL VOTES — filter pills + methodology footer
   ==================================================== */

.av-filter {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
}
.av-filter:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}
.av-filter.active {
  background: var(--civic);
  color: var(--paper-2);
  border-color: var(--civic);
  font-weight: 600;
}
.av-filter-ct {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: oklch(0.92 0.012 85);
  color: var(--ink-2);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
}
.av-filter.active .av-filter-ct {
  background: oklch(0.3 0.075 170);
  color: var(--paper-2);
}

.av-method {
  margin-top: 18px;
  padding: 14px 16px;
  background: oklch(0.93 0.018 240 / 0.35);
  border-left: 3px solid oklch(0.55 0.02 240);
  border-radius: 0 8px 8px 0;
}
.av-method-head {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: oklch(0.36 0.02 240);
  margin-bottom: 6px;
  font-weight: 600;
}
.av-method p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ====================================================
   MOBILE — compare panels stack tighter, drop the
   2-column roster to a vertical pair
   ==================================================== */
@media (max-width: 600px) {
  .cmp-roster {
    grid-template-columns: 1fr;
  }
  .cmp-cand-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cmp-cand-tag {
    border-bottom: 1px dotted var(--rule-2);
    padding-bottom: 4px;
  }
  .cmp-score-row {
    grid-template-columns: 1fr auto;
  }
  .cmp-score-row .cmp-meta {
    grid-column: 1 / -1;
    text-align: right;
  }
  .cv2-money-legend {
    gap: 6px 18px;
  }
  .cv2-industry-list .row {
    grid-template-columns: 12px 1fr auto;
  }
  .cv2-industry-list .row .amt {
    display: none;
  }
}

/* ====================================================
   FOLLOW-UP FIXES
   ==================================================== */

/* ── Reveal SVG icon ───────────────────────────────── */
.cv2-reveal .reveal-ic,
.cmp-reveal svg {
  color: var(--civic);
}
.cv2-reveal:hover .reveal-ic,
.cmp-reveal:hover svg {
  color: var(--civic-2);
}

/* ── Filter pills (stronger contrast) ─────────────── */
.av-filter {
  background: var(--paper);
  border: 1px solid oklch(0.72 0.014 85);
  color: var(--ink-2);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}
.av-filter:hover {
  background: oklch(0.94 0.012 85);
  border-color: var(--ink-3);
  color: var(--ink);
}
.av-filter.active {
  background: var(--civic);
  color: var(--paper-2);
  border-color: var(--civic);
  font-weight: 600;
  box-shadow: 0 1px 0 oklch(0.32 0.075 170);
}

/* ── Compare modal · per-issue vote drill-downs ──── */
.cmp-cand-body {
  min-width: 0;
}
.cmp-expand {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--civic);
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-weight: 600;
}
.cmp-expand:hover {
  color: var(--civic-2);
  text-decoration: underline;
}
.cmp-votes {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-vote {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
}
.cmp-vote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.cmp-vote-num {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--civic);
  font-weight: 600;
}
.cmp-vote-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.cmp-vote-badge.yea {
  background: var(--civic-soft);
  color: var(--civic-2);
}
.cmp-vote-badge.nay {
  background: oklch(0.93 0.05 28);
  color: oklch(0.4 0.12 28);
}
.cmp-vote-badge.other {
  background: oklch(0.92 0.012 85);
  color: var(--ink-2);
}
.cmp-vote-ttl {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 6px;
}
.cmp-vote-narr {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 8px;
}
.cmp-vote-cite {
  font-family: var(--mono);
  font-size: 11px;
  padding-top: 6px;
  border-top: 1px solid var(--rule-2);
}
.cmp-vote-cite a {
  color: var(--civic);
  text-decoration: none;
  font-weight: 600;
}
.cmp-vote-cite a:hover {
  text-decoration: underline;
}

/* ── Methodology footer · source links ──────────── */
.av-method-sources {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.av-method-sources li::before {
  content: "→ ";
  color: var(--civic);
  font-family: var(--mono);
  font-weight: 600;
  margin-right: 2px;
}
.av-method-sources a {
  color: var(--civic);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
}
.av-method-sources a:hover {
  color: var(--civic-2);
}
.av-method-disclaim {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.5;
}

/* ====================================================
   FOLLOW-UP: peer raise compare, PAC data-gap callout,
   proposition kind banner
   ==================================================== */

/* ── Peer raise comparison row ───────────────────── */
.cv2-peer-compare {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.cv2-peer-compare.less {
  background: oklch(0.94 0.045 28 / 0.4);
  color: oklch(0.4 0.12 28);
}
.cv2-peer-compare.more {
  background: var(--civic-soft);
  color: var(--civic-2);
}
.cv2-peer-compare .ic {
  font-size: 14px;
  font-weight: 600;
}

/* ── PAC data-gap callout (when pac% high but no named PACs) ─ */
.cv2-pac-gap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: oklch(0.94 0.018 240 / 0.5);
  border-left: 3px solid oklch(0.55 0.02 240);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.cv2-pac-gap .ic {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: oklch(0.55 0.02 240);
  color: var(--paper-2);
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}
.cv2-pac-gap b {
  color: var(--ink);
  font-weight: 700;
}

/* ── Proposition kind banner ─────────────────────── */
.prop-kind {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 4px solid;
}
.prop-kind.binding {
  background: oklch(0.94 0.045 28 / 0.5);
  border-color: var(--vote-red);
}
.prop-kind.advisory {
  background: oklch(0.96 0.06 75 / 0.5);
  border-color: var(--gold);
}
.prop-kind-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.prop-kind-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.prop-kind.binding .prop-kind-tag {
  color: oklch(0.36 0.12 28);
}
.prop-kind.advisory .prop-kind-tag {
  color: oklch(0.42 0.1 60);
}
.prop-kind-state {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
}
.prop-kind-blurb {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
}
.prop-kind.binding .prop-kind-blurb {
  color: oklch(0.3 0.04 28);
}
.prop-kind.advisory .prop-kind-blurb {
  color: oklch(0.35 0.05 60);
}

/* ====================================================
   HEAD-TO-HEAD funding visualization (peer compare)
   ==================================================== */

.cv2-h2h-wrap {
  margin-bottom: 14px;
}

.cv2-h2h-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.cv2-h2h-cap.less {
  background: oklch(0.94 0.045 28 / 0.45);
  color: oklch(0.4 0.12 28);
}
.cv2-h2h-cap.more {
  background: var(--civic-soft);
  color: var(--civic-2);
}
.cv2-h2h-cap .ic {
  font-size: 12px;
}

.cv2-h2h-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.cv2-h2h-row.peer {
  opacity: 0.92;
}
.cv2-h2h-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  text-align: right;
  line-height: 1.3;
  word-break: break-word;
}
.cv2-h2h-row.peer .cv2-h2h-tag {
  color: var(--ink-3);
}
.cv2-h2h-track {
  display: grid;
  grid-template-columns: 1fr 56px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cv2-h2h-bar {
  display: flex;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--rule);
  min-width: 30px;
  max-width: 100%;
}
.cv2-h2h-bar.self {
  border-color: var(--ink-3);
  box-shadow: 0 1px 0 var(--rule);
}
.cv2-h2h-bar .seg {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  letter-spacing: -0.01em;
}
.cv2-h2h-bar .seg.small {
  background: var(--civic);
  color: var(--paper-2);
}
.cv2-h2h-bar .seg.large {
  background: var(--gold);
  color: var(--ink);
}
.cv2-h2h-bar .seg.pac {
  background: var(--vote-red);
  color: var(--paper-2);
}
.cv2-h2h-total {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}
.cv2-h2h-row.peer .cv2-h2h-total {
  color: var(--ink-2);
}

/* Funding header — let the cycle text wrap below cleanly */
.cv2-funding .cv2-block-head {
  flex-wrap: wrap;
  row-gap: 4px;
}
.cv2-funding .cv2-block-head .overall {
  text-align: right;
  white-space: normal;
}
/* ── PAC partial-coverage variant ─────────────────── */
.cv2-pac-gap.partial {
  background: oklch(0.96 0.06 75 / 0.55);
  border-left-color: var(--gold);
}
.cv2-pac-gap.partial .ic {
  background: oklch(0.55 0.1 60);
}

/* ── Mobile: stack h2h tag above bar ──────────────── */
@media (max-width: 480px) {
  .cv2-h2h-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .cv2-h2h-tag {
    text-align: left;
  }
  .cv2-h2h-track {
    gap: 8px;
  }
  .cv2-h2h-total {
    font-size: 13px;
  }
}

/* ====================================================
   FUNDING SECTION v3 — single bar + peer chip + subtitles
   ==================================================== */

/* Subtitle text under section labels (PAC vs Industry clarifier).
   Now lowercase + normal weight so it reads as a clarifying caption
   beneath the louder mono title above, instead of competing with it. */
.cv2-sub-lab {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.4;
}
/* PAC gloss — single-sentence editorial definition + why-it-matters,
   set as a muted footnote beneath the funding-mix legend. Always
   visible so first-time readers learn the term inline without
   needing to click anything. */
.cv2-pac-gloss {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 14px 0 0;
  max-width: 64ch;
}
.cv2-pac-gloss b {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

/* Peer-comparison chip — clean, visual, NOT a chart */
.cv2-peer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
  line-height: 1.3;
}
.cv2-peer-chip.less {
  background: oklch(0.94 0.045 28 / 0.45);
  color: oklch(0.36 0.12 28);
}
.cv2-peer-chip.more {
  background: var(--civic-soft);
  color: var(--civic-2);
}
.cv2-peer-chip .ic {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}
.cv2-peer-chip .txt {
  font-family: var(--sans);
  font-weight: 600;
}
.cv2-peer-chip .amt {
  font-family: var(--serif);
  font-weight: 600;
  opacity: 0.8;
}

/* Blind-mode toggle — SVG icon (matches Reveal button style) */
.blind-toggle .blind-toggle-ic {
  color: var(--civic);
  flex-shrink: 0;
}
.blind-toggle.on .blind-toggle-ic {
  color: oklch(0.36 0.02 240);
}
.blind-toggle:hover .blind-toggle-ic {
  color: var(--civic-2);
}

/* ====================================================
   FUNDING SECTION v4 — comparison rails
   ====================================================
   Replaces the tiny peer-chip + single bar combo with a
   proper stat-headline + two proportional rails on the
   same x-axis. The mix-by-source segments are preserved
   exactly; what changes is that "X.X× more/less raised"
   is now spatial — the peer's bar is rendered at its
   proportional width, so the length difference reads
   visually before the multiplier is even parsed. */

.cv2-compare-rails {
  margin-bottom: 20px;
}

/* Headline — neutral typography, no background tint, no arrow.
   "More" / "less" is a magnitude fact; readers decide whether
   that's good. The big serif multiplier reads first; the bars
   below carry the spatial weight. */
.cv2-cr-headline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-bottom: 14px;
  color: var(--ink);
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--rule-2);
}
.cv2-cr-mult {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cv2-cr-dir {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cv2-cr-ctx {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Two rails — same scale, left-anchored, dollar totals
   right-aligned in a fixed column so bar origins line up. */
.cv2-cr-rail-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 14px;
}
.cv2-cr-rail-row.this {
  margin-bottom: 8px;
}
.cv2-cr-rail-row.peer {
  margin-bottom: 12px;
}
.cv2-cr-rail-row .cv2-cr-total {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cv2-cr-rail-row.peer .cv2-cr-total {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 16px;
}

/* The track is the full-width "100% lane" the rail lives in.
   Holding the track at full width keeps both rows' baselines
   aligned, so when the peer rail is at 50% width, the empty
   space to its right is the visible "gap" the multiplier
   describes. */
.cv2-cr-rail-track {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* This-candidate rail — same segments as the original
   money map, same colors, just rendered inside the rail. */
.cv2-cr-rail.this-rail {
  display: flex;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 oklch(0.86 0.012 85);
}
.cv2-cr-rail.this-rail .seg {
  display: grid;
  place-items: center;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
.cv2-cr-rail.this-rail .seg .pct {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cv2-cr-rail.this-rail .seg.small {
  background: var(--civic);
  color: var(--paper-2);
}
.cv2-cr-rail.this-rail .seg.large {
  background: var(--gold);
  color: var(--ink);
}
.cv2-cr-rail.this-rail .seg.pac {
  background: var(--vote-red);
  color: var(--paper-2);
}

/* Peer rail — single muted bar at proportional width.
   Intentionally NOT segmented; the focus is the LENGTH
   comparison, not the peer's own mix. */
.cv2-cr-rail.peer-rail {
  height: 28px;
  border-radius: 5px;
  background: repeating-linear-gradient(
    135deg,
    oklch(0.78 0.012 85) 0 6px,
    oklch(0.82 0.012 85) 6px 12px
  );
  box-shadow: inset 0 0 0 1px oklch(0.74 0.012 85);
  flex-shrink: 0;
}
.cv2-cr-peer-name {
  /* Retired: the comparison headline already names the peer,
     so the inline label inside the rail track was redundant
     and overflowed when the peer raised more. Kept the class
     stub so any prior usage stays harmless. */
  display: none;
}

/* Legend below — unchanged visually, just lives inside
   the compare-rails block when peer is present. */
.cv2-cr-legend {
  margin-top: 16px;
}

/* Mobile: collapse the dollar-total column and let the
   bars run full width with the total stacked above. */
@media (max-width: 520px) {
  .cv2-cr-rail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .cv2-cr-rail-row .cv2-cr-total {
    text-align: left;
  }
  .cv2-cr-headline {
    row-gap: 4px;
  }
  .cv2-cr-mult {
    font-size: 26px;
  }
}

/* Inkwell treatment — peer rail needs to read against
   dark paper, so flip the muted-stripe palette. */
body[data-treatment="inkwell"] .cv2-cr-rail.peer-rail {
  background: repeating-linear-gradient(
    135deg,
    oklch(0.32 0.012 85) 0 6px,
    oklch(0.36 0.012 85) 6px 12px
  );
  box-shadow: inset 0 0 0 1px oklch(0.4 0.012 85);
}
body[data-treatment="inkwell"] .cv2-cr-rail.this-rail {
  box-shadow: 0 1px 0 oklch(0.28 0.018 240);
}

/* ====================================================
   Industry breakdown — "Unclassified" tail
   ====================================================
   Industry data from FEC/OpenSecrets only covers donations
   that aggregate cleanly to a sector. The remainder
   (small-dollar individuals, uncategorized contributions)
   is real money, just unattributed. Surfacing it as an
   explicit segment + row makes the bar honest at 100%
   and answers "why don't the rows add up to the total?". */

.cv2-industry-bar > .other-seg {
  background: repeating-linear-gradient(
    135deg,
    oklch(0.78 0.012 85) 0 5px,
    oklch(0.84 0.012 85) 5px 10px
  );
  min-width: 0;
}
.cv2-industry-list .row.other {
  color: var(--ink-3);
  align-items: start;
}
.cv2-industry-list .row.other > .other-sw,
.cv2-industry-list .row.other > .pct,
.cv2-industry-list .row.other > .amt {
  margin-top: 3px;
}
.cv2-industry-list .row.other .other-sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    135deg,
    oklch(0.78 0.012 85) 0 3px,
    oklch(0.84 0.012 85) 3px 6px
  );
  flex-shrink: 0;
}
/* [Fix] The "Outside named sectors" explainer was set in mono
   at 10.5px — reads code-y and gets unreadable on narrow
   screens. Sans, slightly larger, normal letter spacing. */
.cv2-industry-list .row.other .name small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.45;
}
.cv2-industry-list .row.other .amt {
  color: var(--ink-3);
  font-weight: 500;
}

body[data-treatment="inkwell"] .cv2-industry-bar > .other-seg {
  background: repeating-linear-gradient(
    135deg,
    oklch(0.32 0.012 85) 0 5px,
    oklch(0.38 0.012 85) 5px 10px
  );
}
body[data-treatment="inkwell"] .cv2-industry-list .row.other .other-sw {
  background: repeating-linear-gradient(
    135deg,
    oklch(0.32 0.012 85) 0 3px,
    oklch(0.38 0.012 85) 3px 6px
  );
}