/* Capitol Lens
   Layout: every view anchors on "the chamber", a seat chart ordered by voting record, with
           content on a 1200px grid and prose in a 68ch column.
   Color:  cool stone paper and near-black ink; ballot-ink violet for the brand and for
           highlighting a member; teal = Yes and amber = No (CVD-validated, light and dark).
           Party colors only label a member's party.
   Type:   Libre Caslon Display for page titles only (34px and up), Public Sans for everything
           else, IBM Plex Mono for roll call numbers and district codes. */

@font-face { font-family: "Libre Caslon Display"; src: url("/fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #F4F5F2;
  --surface: #FFFFFF;
  --sunk: #ECEEE9;
  --ink: #15171C;
  --ink-2: #3D424A;
  --muted: #646A73;
  --faint: #8D929A;
  --rule: #DFE1DC;
  --rule-strong: #C9CCC5;
  --violet: #4F2F88;
  --violet-hover: #3F2470;
  --violet-ink: #FFFFFF;
  --violet-tint: #EFEAF8;
  --violet-line: #BBA9DD;
  --link: #5534A0;
  --yes: #00897A;
  --no: #AD6F00;
  --present: #8A9097;
  --seat: #C3C7C0;
  --seat-faint: #E2E4DF;
  --aisle: #8D929A;
  /* Seat shades (charts.seat_shade): party color moving to purple the more often a member crosses party lines
     toward the middle. Blue oklch(.445 .15 257) through purple (--ideo-n, oklch(.68 .11 318)) to red oklch(.475 .17 27), interpolated in OKLab. The middle
     is lighter than the ends, so the order also reads in lightness (red-blind readers see purple as blue).
     Measured with the dataviz validator: every shade >= 2.6:1 on the page, even ~5 ΔE steps, poles vs
     purple >= 20 ΔE under CVD, purple vs the violet highlight 27+. Gray (--seat) means not scored yet. */
  --ideo-b5: #0a50a4; --ideo-b4: #3c5cab; --ideo-b3: #5d66b2; --ideo-b2: #7b70b8; --ideo-b1: #9879be; --ideo-n: #b582c4;
  --ideo-r1: #b473a5; --ideo-r2: #b26285; --ideo-r3: #af5066; --ideo-r4: #ab3c46; --ideo-r5: #a72120;
  --dem: #2F5C96;
  --rep: #A13A36;
  --ind: #4E6A47;
  --warn-bg: #FFF3D1;
  --warn-ink: #5A4100;
  --s0: #EEE9F7; --s1: #CDBEE6; --s2: #A58BD0; --s3: #7457AE; --s4: #452A7C;
  --shadow: 0 1px 2px rgb(20 22 28 / 0.05), 0 8px 24px -12px rgb(20 22 28 / 0.18);
  --shadow-pop: 0 18px 50px -12px rgb(20 22 28 / 0.35), 0 2px 6px rgb(20 22 28 / 0.08);
  --header-bg: rgb(244 245 242 / 0.86);

  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-ui: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --wrap: 1200px;
  --gutter: 24px;
  --header-h: 60px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1014; --surface: #161920; --sunk: #1D2129; --ink: #ECEDEF; --ink-2: #C5C9CF; --muted: #9AA0A9; --faint: #6F757E;
    --rule: #272B34; --rule-strong: #353A44; --violet: #B9A3EA; --violet-hover: #CDBDF1; --violet-ink: #170F26; --violet-tint: #231B33;
    --violet-line: #5C4A86; --link: #C3B0F0; --yes: #14A28C; --no: #B88014; --present: #7D838B; --seat: #3B414B; --seat-faint: #262A32;
    --aisle: #6F757E; --dem: #8FB2E6; --rep: #EE9C96; --ind: #A9C2A0; --warn-bg: #3A3016; --warn-ink: #F2DC9A;
    --ideo-b5: #619eea; --ideo-b4: #6a8cd4; --ideo-b3: #6f7bbe; --ideo-b2: #726aa8; --ideo-b1: #735993; --ideo-n: #72477f;
    --ideo-r1: #89517d; --ideo-r2: #a05a7b; --ideo-r3: #b86277; --ideo-r4: #d06a72; --ideo-r5: #ea726b;
    --s0: #241D33; --s1: #3F305C; --s2: #634C91; --s3: #8F74C4; --s4: #CBB9F0;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.6);
    --shadow-pop: 0 18px 50px -12px rgb(0 0 0 / 0.75), 0 2px 6px rgb(0 0 0 / 0.4);
    --header-bg: rgb(14 16 20 / 0.82);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E1014; --surface: #161920; --sunk: #1D2129; --ink: #ECEDEF; --ink-2: #C5C9CF; --muted: #9AA0A9; --faint: #6F757E;
  --rule: #272B34; --rule-strong: #353A44; --violet: #B9A3EA; --violet-hover: #CDBDF1; --violet-ink: #170F26; --violet-tint: #231B33;
  --violet-line: #5C4A86; --link: #C3B0F0; --yes: #14A28C; --no: #B88014; --present: #7D838B; --seat: #3B414B; --seat-faint: #262A32;
  --aisle: #6F757E; --dem: #8FB2E6; --rep: #EE9C96; --ind: #A9C2A0; --warn-bg: #3A3016; --warn-ink: #F2DC9A;
    --ideo-b5: #619eea; --ideo-b4: #6a8cd4; --ideo-b3: #6f7bbe; --ideo-b2: #726aa8; --ideo-b1: #735993; --ideo-n: #72477f;
    --ideo-r1: #89517d; --ideo-r2: #a05a7b; --ideo-r3: #b86277; --ideo-r4: #d06a72; --ideo-r5: #ea726b;
  --s0: #241D33; --s1: #3F305C; --s2: #634C91; --s3: #8F74C4; --s4: #CBB9F0;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --shadow-pop: 0 18px 50px -12px rgb(0 0 0 / 0.75), 0 2px 6px rgb(0 0 0 / 0.4);
  --header-bg: rgb(14 16 20 / 0.82);
  color-scheme: dark;
}

/* ---- Base ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 64px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--violet-tint); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0 0 12px; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); padding: 10px 14px; border-radius: var(--r-s); }
.skip:focus { left: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Type ------------------------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; }
h1.display { font-size: clamp(40px, 6vw, 70px); }
.title-m { font: 400 clamp(34px, 4.6vw, 54px)/1.04 var(--font-display); letter-spacing: -0.01em; }
.h2 { font: 700 23px/1.25 var(--font-ui); letter-spacing: -0.015em; }
.h3 { font: 650 17px/1.3 var(--font-ui); letter-spacing: -0.005em; }
.eyebrow { font: 600 12px/1.4 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0; }
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: 68ch; font-size: 17px; }
.prose h2 { font: 700 23px/1.3 var(--font-ui); margin: 44px 0 10px; letter-spacing: -0.015em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 650 17px/1.35 var(--font-ui); margin: 24px 0 6px; }
.prose li { margin-block: 6px; }
.prose ul { padding-left: 22px; }

/* ---- Layout ----------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.section { padding-block: 56px; }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 24px; margin-bottom: 22px; }
.section-head p { margin: 6px 0 0; color: var(--muted); max-width: 62ch; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Header ----------------------------------------------------------------------- */
.preview-banner { background: var(--warn-bg); color: var(--warn-ink); font-size: 13.5px; }
.preview-banner .wrap { padding-block: 7px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--rule); }
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; gap: 22px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.brand svg { width: 32px; height: 18px; }
.brand-name { font: 700 17px/1 var(--font-ui); letter-spacing: -0.02em; }
.site-nav { display: flex; gap: 2px; margin-right: auto; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.site-nav a:hover { background: var(--sunk); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--sunk); }
.header-tools { display: flex; align-items: center; gap: 8px; position: relative; }
.search-trigger { display: flex; align-items: center; gap: 10px; min-width: 220px; height: 38px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--muted); font-size: 14px; cursor: pointer; }
.search-trigger:hover { border-color: var(--faint); color: var(--ink-2); }
.search-trigger svg { width: 16px; height: 16px; flex: none; }
.search-trigger kbd { margin-left: auto; font: 500 11px/1 var(--font-mono); padding: 5px 6px; border-radius: 6px; background: var(--sunk); color: var(--muted); }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--violet-line); background: var(--violet-tint); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pill-btn:hover { border-color: var(--violet); }
.pill-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.lang-link { font-size: 14px; font-weight: 550; color: var(--ink-2); text-decoration: none; padding: 7px 10px; border-radius: 999px; }
.lang-link:hover { background: var(--sunk); }
.menu-btn { display: none; }
.nav-lang { display: none !important; }
.site-nav.open .nav-lang { display: block !important; }

/* ---- Buttons and inputs ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--violet); background: var(--violet); color: var(--violet-ink); font-size: 15px; font-weight: 650; letter-spacing: -0.005em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: var(--violet-hover); border-color: var(--violet-hover); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.btn.ghost:hover { border-color: var(--ink-2); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn svg { width: 16px; height: 16px; flex: none; }
input[type="text"], input[type="search"], select {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--r-m); padding: 0 12px; height: 42px; min-width: 0;
}
select { max-width: 100%; padding-right: 34px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; border-color: transparent; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 550; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--violet); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 550; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--faint); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.chip[aria-pressed="true"] .count { color: inherit; }
.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sunk); gap: 2px; }
.segmented button { border: 0; background: transparent; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 550; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .14); }

/* ---- Party label (identity only) --------------------------------------------------------- */
.party { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); white-space: nowrap; }
.party::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.party.D::before { background: var(--dem); }
.party.R::before { background: var(--rep); }
.party.I::before { background: var(--ind); }

/* ---- Surfaces ------------------------------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 24px; min-width: 0; }
.notice { background: var(--sunk); border-radius: var(--r-m); padding: 14px 16px; font-size: 15px; }

/* Member card */
.mcard { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.mcard:hover { border-color: var(--violet-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.mcard .who { font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; }
.mcard .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.mcard .nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.mcard .nums > span { display: grid; gap: 2px; align-content: start; min-width: 0; }
.mcard .nums > span > span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.mcard .nums b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.photo { width: 56px; height: 68px; border-radius: 10px; object-fit: cover; background: var(--sunk); display: grid; place-items: center; font: 700 18px var(--font-ui); color: var(--muted); }
.photo.lg { width: 132px; height: 162px; border-radius: 14px; font-size: 36px; }
.photo.sm { width: 40px; height: 48px; border-radius: 8px; font-size: 14px; }

/* ---- The chamber (signature) -------------------------------------------------------------- */
.chamber { position: relative; }
.chamber svg { display: block; width: 100%; height: auto; overflow: visible; }
.chamber .seat { fill: var(--seat); transition: fill .45s ease, opacity .3s; }
.chamber .seat.yea { fill: var(--yes); }
.chamber .seat.nay { fill: var(--no); }
.chamber .seat.present { fill: var(--present); }
.chamber .seat.not_voting { fill: var(--surface); stroke: var(--seat); stroke-width: 2.5; }
.seat.ideo-b5, .ideo-ramp .ideo-b5 { fill: var(--ideo-b5); background: var(--ideo-b5); }
.seat.ideo-b4, .ideo-ramp .ideo-b4 { fill: var(--ideo-b4); background: var(--ideo-b4); }
.seat.ideo-b3, .ideo-ramp .ideo-b3 { fill: var(--ideo-b3); background: var(--ideo-b3); }
.seat.ideo-b2, .ideo-ramp .ideo-b2 { fill: var(--ideo-b2); background: var(--ideo-b2); }
.seat.ideo-b1, .ideo-ramp .ideo-b1 { fill: var(--ideo-b1); background: var(--ideo-b1); }
.seat.ideo-n, .ideo-ramp .ideo-n { fill: var(--ideo-n); background: var(--ideo-n); }
.seat.ideo-r1, .ideo-ramp .ideo-r1 { fill: var(--ideo-r1); background: var(--ideo-r1); }
.seat.ideo-r2, .ideo-ramp .ideo-r2 { fill: var(--ideo-r2); background: var(--ideo-r2); }
.seat.ideo-r3, .ideo-ramp .ideo-r3 { fill: var(--ideo-r3); background: var(--ideo-r3); }
.seat.ideo-r4, .ideo-ramp .ideo-r4 { fill: var(--ideo-r4); background: var(--ideo-r4); }
.seat.ideo-r5, .ideo-ramp .ideo-r5 { fill: var(--ideo-r5); background: var(--ideo-r5); }
.chamber .seat.mine { fill: var(--violet); }
.chamber .seat.dim { opacity: .25; }
.chamber .ring { fill: none; stroke: var(--violet); stroke-width: 3; pointer-events: none; }
.chamber .ring-halo { fill: none; stroke: var(--paper); stroke-width: 9; pointer-events: none; }
/* Color key for the shaded seats: the same eleven shades, from party-line Democrat through purple to party-line Republican. */
.ideo-ramp { display: flex; gap: 2px; height: 6px; margin-top: 10px; }
.ideo-ramp i { flex: 1; border-radius: 2px; }
/* The key's three labels: party color at each end, purple (crossing party lines) in the middle. */
.ideo-key { margin-top: 12px; }
.ideo-key .ideo-ramp { margin-top: 0; }
.ideo-key-labels { display: flex; gap: 12px; font-size: 13px; line-height: 1.3; color: var(--muted); margin-top: 6px; }
.ideo-key-labels span { flex: 1 1 0; min-width: 0; }
.ideo-key-labels span:nth-child(2) { text-align: center; }
.ideo-key-labels span:last-child { text-align: right; }
.chamber .aisle { stroke: var(--aisle); stroke-width: 2; stroke-linecap: round; }
.chamber .lbl { font: 600 22px var(--font-ui); fill: var(--muted); pointer-events: none; }
.chamber .lbl.count { font: 750 40px var(--font-ui); fill: var(--ink); letter-spacing: -0.02em; }
.chamber .lbl.word { font: 600 21px var(--font-ui); fill: var(--muted); }
.chamber .lbl.me { font: 700 28px var(--font-ui); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 9px; stroke-linejoin: round; }
.mini-chamber .lbl { display: none; }
.chart-note { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; max-width: 72ch; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; margin-bottom: 10px; }
.chart-head h2 { font: 700 18px/1.3 var(--font-ui); }
.chart-head p { margin: 0; color: var(--muted); font-size: 14px; max-width: 70ch; }
.steps-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.steps-key .steps { width: 120px; }
.rankmeter .sentence { font-size: 14.5px; color: var(--ink); }
.embed-panel { border: 1px solid var(--rule); border-radius: var(--r-m); padding: 12px 16px; background: var(--surface); }
.embed-panel summary { cursor: pointer; font-weight: 650; }
.embed-panel[open] summary { margin-bottom: 8px; }
.embed-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.embed-code { width: 100%; font: 500 12.5px/1.5 var(--font-mono, "IBM Plex Mono", monospace); padding: 10px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--sunk); color: var(--ink); resize: vertical; }
.embed-preview { display: block; width: 100%; max-width: 640px; border: 0; }
.expbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; }
.expbox > div { display: grid; gap: 2px; padding: 10px 14px; border-right: 1px solid var(--rule); }
.expbox > div:last-child { border-right: 0; }
.expbox span { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.expbox b { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.expbox .diff { background: var(--violet-tint); }
.expbox .diff b { color: var(--ink); }
@media (max-width: 480px) { .expbox > div { padding: 8px 10px; } .expbox b { font-size: 17px; } }
.exp-chip { justify-self: start; display: inline-block; font-size: 12.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--violet-tint); color: var(--ink); }
.chamber .hit { fill: transparent; cursor: pointer; }
.chamber-axis { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.chamber-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-2); margin-top: 14px; }
.chamber-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chamber-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.chamber-legend i.yea { background: var(--yes); }
.chamber-legend i.nay { background: var(--no); }
.chamber-legend i.present { background: var(--present); }
.chamber-legend i.not_voting { border: 2px solid var(--seat); }
.chamber-legend i.mine { background: var(--violet); }
.chamber-legend i.seat { background: var(--seat); }
@media (prefers-reduced-motion: no-preference) {
  .chamber.animate .seat { animation: seat-in .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 1.3ms); }
  .chamber .ring.pulse { animation: ring-pulse 1.4s ease-out 2; }
}
@keyframes seat-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ring-pulse { 0% { stroke-width: 3; stroke-opacity: 1; } 60% { stroke-width: 12; stroke-opacity: .12; } 100% { stroke-width: 3; stroke-opacity: 1; } }

.tip { position: fixed; z-index: 90; pointer-events: none; background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.45; padding: 8px 11px; border-radius: 9px; max-width: 280px; box-shadow: var(--shadow-pop); }
.tip b { font-weight: 650; }
.tip .t2 { opacity: .72; display: block; }

/* ---- Home --------------------------------------------------------------------------- */
.hero { padding-block: 44px 24px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hero h1 { margin: 14px 0 18px; }
.lookup { margin-top: 28px; display: grid; gap: 10px; max-width: 580px; }
.lookup-box { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); }
.lookup-box:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-tint), var(--shadow); }
.lookup-box > svg { width: 20px; height: 20px; margin-left: 12px; color: var(--muted); flex: none; }
.lookup-box input { flex: 1; border: 0; background: transparent; height: 44px; font-size: 16.5px; padding: 0 6px; }
.lookup-box input:focus-visible { outline: none; }
.lookup-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14.5px; color: var(--muted); padding-left: 18px; }
.linklike { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font-weight: 550; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; }
.linklike svg { width: 15px; height: 15px; }
.lookup-status { min-height: 1.5em; font-size: 14.5px; color: var(--ink-2); padding-left: 18px; margin: 0; }
.lookup-status.error { color: var(--no); }
.zip-choices { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 12px; }
.hero-chamber { margin: 0; }
.hero-chamber .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.hero-chamber figcaption { font-size: 13.5px; color: var(--muted); margin-top: 12px; max-width: 60ch; }
.your-members { padding-block: 8px 24px; }
.your-members .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ym-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.ym-head h2 { margin-right: auto; } /* "Back to the vote" and "Forget" sit together on the right */

.vote-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; }
.vote-card { scroll-snap-align: start; display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.vote-card:hover { border-color: var(--violet-line); box-shadow: var(--shadow); }
.vote-card .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
.vote-card .what { font-weight: 600; font-size: 15px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.1em; }
.vote-card .res { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); }
.mini-chamber svg { display: block; width: 100%; height: auto; }

.breakers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.breakers h3 { margin-bottom: 12px; }
.breaker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.breaker-list a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.breaker-list a:hover { border-color: var(--violet-line); }
.breaker-list .nm { font-weight: 650; }
.breaker-list .gap { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.breaker-list .gap span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.breaker-list .sub { font-size: 13px; color: var(--muted); }

.explain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.explain > div { padding: 18px 22px 6px 0; }
.explain > div + div { padding-left: 22px; border-left: 1px solid var(--rule); }
.explain h3 { margin-bottom: 6px; }
.explain p { font-size: 14.5px; color: var(--ink-2); }

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.map-panel { padding: 16px; }
.map-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.map-svg { width: 100%; height: auto; display: block; touch-action: none; }
.map-svg .district { fill: var(--sunk); stroke: var(--surface); stroke-width: .7; cursor: pointer; vector-effect: non-scaling-stroke; transition: fill .2s; }
.map-svg .district:hover { fill: var(--violet-tint); }
.map-svg .district.selected { fill: var(--violet) !important; }
.map-svg .district.dim { opacity: .35; }
.map-svg .state-outline { fill: none; stroke: var(--faint); stroke-width: .9; pointer-events: none; vector-effect: non-scaling-stroke; }
.map-legend { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.map-legend .ramp { display: inline-flex; gap: 2px; }
.map-legend .ramp span { width: 28px; height: 10px; border-radius: 3px; }
.map-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.map-side { display: grid; gap: 12px; padding: 16px; min-width: 0; }
.map-side ul { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow: auto; }
.map-side li a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-size: 14.5px; border-radius: 6px; }
.map-side li a:hover { background: var(--sunk); }

/* ---- Member page ------------------------------------------------------------------------ */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); padding-top: 24px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.mhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-block: 18px 28px; }
.mhead h1 { margin: 8px 0 12px; }
.mhead .facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: 15px; }
.mhead .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
.glance a { display: grid; gap: 5px; align-content: start; padding: 18px 20px; color: var(--ink); text-decoration: none; border-right: 1px solid var(--rule); transition: background .15s; }
.glance a:last-child { border-right: 0; }
.glance a:hover { background: var(--sunk); }
.glance .label { font-size: 13px; color: var(--muted); font-weight: 550; }
/* Each tile opens its section; the arrow says so on touch screens, where there's no hover. */
.glance .label::after { content: "\00a0\00a0→" / ""; color: var(--faint); transition: color .15s; } /* no-break spaces keep it with the last word */
.glance a:hover .label::after, .glance a:focus-visible .label::after { color: var(--violet); }
.glance .value { font-size: 36px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.05; }
.glance .value small { font-size: 15px; font-weight: 550; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.glance .ctx { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); margin-top: 28px; }
.subnav .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.subnav a { flex: none; padding: 14px 12px 12px; font-size: 14.5px; font-weight: 550; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); border-bottom-color: var(--violet); }

.sit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: start; }
.rankmeter { display: grid; gap: 8px; }
.rankmeter + .rankmeter { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.rankmeter .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rankmeter .scope { font-size: 14px; font-weight: 650; color: var(--ink); }
.rankmeter .pct { font-size: 40px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; }
.rankmeter .pct small { font-size: 14px; font-weight: 550; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.rankmeter .track { position: relative; height: 10px; border-radius: 5px; background: var(--sunk); margin-top: 6px; }
.rankmeter .track::before, .rankmeter .track::after { content: ""; position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--rule-strong); left: 50%; }
.rankmeter .track::after { display: none; }
.rankmeter .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--violet-tint); }
.rankmeter .mk { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--violet); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--violet-line); }
.rankmeter .ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.rankmeter .rank { font-size: 14px; color: var(--ink-2); }
.caveat { font-size: 13.5px; color: var(--muted); border-left: 2px solid var(--rule-strong); padding-left: 12px; margin-top: 22px; }

.score { display: grid; gap: 14px; align-content: start; }
.score-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 16px; }
.score .label { font-size: 15px; font-weight: 650; }
.score .value { font-size: 52px; font-weight: 750; letter-spacing: -0.035em; line-height: 1; margin-top: 8px; }
.score .value small { font-size: 16px; font-weight: 550; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.score .ctx { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.score .facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--muted); }
.score .how { font-size: 13.5px; }
.score .empty { color: var(--muted); }
.spark { flex: none; }
.spark { max-width: 100%; }
.spark svg { display: block; overflow: visible; max-width: 100%; height: auto; }
.spark .line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .end { fill: var(--violet); stroke: var(--surface); stroke-width: 2; }
.spark .cap { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; }
.strip { display: block; width: 100%; height: auto; overflow: visible; }
.strip .ticks { stroke: var(--ink-2); stroke-opacity: .32; stroke-width: 2; }
.strip .axis { stroke: var(--rule-strong); stroke-width: 1; }
.strip .exp { stroke: var(--ink); stroke-width: 3; }
.strip .me { fill: var(--violet); stroke: var(--surface); stroke-width: 3; }
.strip text { font: 500 19px var(--font-ui); fill: var(--muted); }
.strip text.k { fill: var(--ink-2); font-weight: 650; }

.breaks-list { list-style: none; margin: 0; padding: 0; }
.breaks-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px 20px; padding: 16px 4px; border-top: 1px solid var(--rule); align-items: start; }
.breaks-list .when { font-size: 13px; color: var(--muted); line-height: 1.5; }
.breaks-list .when a { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.breaks-list .what a { color: var(--ink); text-decoration: none; font-weight: 550; }
.breaks-list .what a:hover { text-decoration: underline; }
.breaks-list .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vote-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--sunk); white-space: nowrap; }
.vote-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.vote-pill.yea::before { background: var(--yes); }
.vote-pill.nay::before { background: var(--no); }
.vote-pill.present::before { background: var(--present); }
.vote-pill.not_voting::before { border: 2px solid var(--faint); }
.tag { display: inline-block; font: 600 11.5px/1.75 var(--font-ui); letter-spacing: .02em; padding: 0 9px; border-radius: 999px; background: var(--violet-tint); color: var(--link); }
.tag.plain { background: var(--sunk); color: var(--ink-2); }
.reply { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--violet-line); background: var(--sunk); border-radius: 0 8px 8px 0; font-size: 14px; }
.list-foot { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.record-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.record-tools input[type="search"] { width: min(340px, 100%); }
/* A select is as wide as its longest option ("Civil Rights and Liberties, Minority Issues"); keep it on screen at 320px. */
.record-tools .cluster, .record-tools select { max-width: 100%; }
.record-count { font-size: 13.5px; color: var(--muted); }
.record-table td { vertical-align: top; }
.record-table .v-what { min-width: 260px; }
.record-table .v-what a { color: var(--ink); text-decoration: none; }
.record-table .v-what a:hover { text-decoration: underline; }
.record-table .side { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.record-table tr.broke td:first-child { box-shadow: inset 3px 0 0 var(--violet); }

.likes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.likes .pct { font-size: 13px; color: var(--muted); margin-top: 6px; padding-left: 4px; }

.district { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.mini-map { width: 100%; height: auto; display: block; }
.mini-map .district { fill: var(--sunk); stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mini-map .district.me { fill: var(--violet); }
.mini-map .state-outline { fill: none; stroke: var(--faint); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.result-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; margin-block: 12px 8px; }
.result-bar span { display: block; height: 100%; }
.result-bar .h { background: var(--dem); }
.result-bar .t { background: var(--rep); }
.result-legend { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.result-legend span { display: inline-flex; align-items: center; gap: 6px; }
.result-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.issue-summary { font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 68ch; margin: 0 0 16px; }
.issue-key { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; }
.issue-key span { display: inline-flex; align-items: center; gap: 8px; }
.issue-key i.bar { width: 20px; height: 10px; border-radius: 0 3px 3px 0; background: var(--violet); }
.issue-key i.avg { width: 3px; height: 16px; border-radius: 2px; background: var(--ink); }
.ibars { list-style: none; margin: 0; padding: 0; }
.ibars li { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) 150px; gap: 18px; align-items: center; padding-block: 11px; border-top: 1px solid var(--rule); }
.ibar-name { font-size: 15px; font-weight: 550; line-height: 1.3; }
.ibar-track { position: relative; height: 14px; background: var(--sunk); border-radius: 0 4px 4px 0; }
.ibar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--violet); border-radius: 0 4px 4px 0; min-width: 2px; }
.ibar-avg { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.ibar-val { line-height: 1.25; }
.ibar-val b { font-size: 17px; font-weight: 700; }
.ibar-val span { display: block; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ibar-axis { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) 150px; gap: 18px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.ibar-axis .ticks { display: flex; justify-content: space-between; }

.bills { list-style: none; margin: 0; padding: 0; }
.bills li { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 8px 28px; padding: 14px 4px; border-top: 1px solid var(--rule); align-items: center; }
.bills .t a { color: var(--ink); font-weight: 550; text-decoration: none; }
.bills .t a:hover { text-decoration: underline; }
.bills .t .sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.steps span { height: 6px; border-radius: 3px; background: var(--sunk); }
.steps span.on { background: var(--violet); }
.steps-label { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ---- Vote page -------------------------------------------------------------------------- */
.vote-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 52px; align-items: center; padding-block: 18px 40px; }
.vote-hero h1 { margin: 12px 0 18px; font: 400 clamp(30px, 3.6vw, 46px)/1.08 var(--font-display); letter-spacing: -0.01em; }
.result { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); font-weight: 650; }
.result b { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.result .num { font-size: 17px; }
.tally-bars { display: grid; gap: 16px; }
.tally-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 6px 14px; align-items: center; font-size: 14.5px; }
.tally-row .bar { display: flex; gap: 2px; height: 20px; }
.tally-row .bar span { display: block; height: 100%; min-width: 3px; }
.tally-row .bar span:first-child { border-radius: 4px 0 0 4px; }
.tally-row .bar span:last-child { border-radius: 0 4px 4px 0; }
.tally-row .bar span:only-child { border-radius: 4px; }
.tally-row .bar .yea { background: var(--yes); }
.tally-row .bar .nay { background: var(--no); }
.tally-row .bar .present { background: var(--present); }
.tally-row .bar .not_voting { background: var(--seat-faint); }
.tally-row .nums { grid-column: 2; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.position-card { border-left: 3px solid var(--violet); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
/* How the visitor's own members voted, at the top of a vote page */
.yours-vote { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: var(--violet-tint); }
.yours-vote ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.yours-vote li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yours-vote li a { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.yours-vote li a:hover span { text-decoration: underline; }
.yours-vote .vote-pill { background: var(--surface); }
.yours-prompt { margin: 22px 0 0; font-size: 15px; color: var(--ink-2); }

/* ---- Tables ------------------------------------------------------------------------------ */
.table-wrap { overflow: auto; border: 1px solid var(--rule); border-radius: var(--r-l); background: var(--surface); max-height: 78vh; }
.table-wrap.free { max-height: none; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
thead th { position: sticky; top: 0; z-index: 2; font: 600 11.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); white-space: nowrap; box-shadow: inset 0 -1px 0 var(--rule); border-bottom: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--sunk); }
tbody tr.mine td { background: var(--violet-tint); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
th button.sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
th button.sort::after { content: "↕"; opacity: .35; font-size: 11px; }
th[aria-sort="ascending"] button.sort::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] button.sort::after { content: "↓"; opacity: 1; }
td .cellbar { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
td .cellbar i { display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
td .cellbar i b { display: block; height: 100%; background: var(--ink-2); border-radius: 3px; }
.member-cell { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.member-cell a { color: var(--ink); font-weight: 600; text-decoration: none; }
.member-cell a:hover { text-decoration: underline; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; margin-bottom: 16px; }

.swarm { width: 100%; height: auto; display: block; overflow: visible; }
.swarm .dot { fill: var(--ink-2); fill-opacity: .5; cursor: pointer; transition: fill-opacity .15s; }
.swarm .dot:hover, .swarm .dot.hl { fill: var(--violet); fill-opacity: 1; }
.swarm .dot.mine { fill: var(--violet); fill-opacity: 1; stroke: var(--surface); stroke-width: 1.5; }
.swarm .axis line { stroke: var(--rule-strong); }
.swarm .axis text, .swarm .rowlabel { font: 500 12px var(--font-ui); fill: var(--muted); }
.swarm .rowlabel { font-weight: 650; fill: var(--ink-2); }

/* ---- States -------------------------------------------------------------------------------- */
.tiles { width: 100%; height: auto; display: block; }
.tiles .tile rect { stroke: var(--paper); stroke-width: 4; rx: 8; transition: opacity .15s; }
.tiles .tile:hover rect, .tiles .tile:focus rect { opacity: .82; }
.tiles text { font: 700 15px var(--font-ui); pointer-events: none; }
.tiles text.v { font-weight: 500; font-size: 12px; }

/* ---- Compare ------------------------------------------------------------------------------- */
.cmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cmp-col { display: grid; gap: 12px; align-content: start; }
.cmp-start { display: grid; gap: 10px; margin-top: 22px; }
.cmp-start select { max-width: 100%; }
.cmp-slot { display: grid; place-items: center; min-height: 170px; border: 1.5px dashed var(--rule-strong); border-radius: var(--r-l); color: var(--muted); font-size: 14.5px; text-align: center; padding: 16px; }
.cmp-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.cmp-stats b { font-variant-numeric: tabular-nums; }
.agree-big { font: 750 56px/1 var(--font-ui); letter-spacing: -0.035em; }
.split-list { list-style: none; margin: 0; padding: 0; }
.split-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; padding: 12px 4px; border-top: 1px solid var(--rule); align-items: center; font-size: 14.5px; }

/* ---- Command palette, popover, toast ----------------------------------------------------- */
.palette { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding: 12vh 16px 16px; background: rgb(10 12 16 / 0.45); backdrop-filter: blur(3px); }
.palette-box { width: min(640px, 100%); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-pop); overflow: hidden; border: 1px solid var(--rule); }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.palette-input svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.palette-input input { flex: 1; height: 58px; border: 0; background: transparent; font-size: 17px; padding: 0; }
.palette-input input:focus-visible { outline: none; }
.palette-input:focus-within { box-shadow: inset 0 -2px 0 var(--violet); }
.palette-input kbd { font: 500 11px var(--font-mono); padding: 4px 6px; border-radius: 5px; background: var(--sunk); color: var(--muted); }
.palette-list { list-style: none; margin: 0; padding: 8px; max-height: min(60vh, 460px); overflow: auto; }
.palette-list li a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.palette-list li a[aria-selected="true"] { background: var(--violet-tint); }
.palette-list .nm { font-weight: 600; }
.palette-list .kind { font-size: 12.5px; color: var(--muted); }
.palette-list .glyph { width: 40px; height: 40px; border-radius: 9px; background: var(--sunk); display: grid; place-items: center; font: 650 13px var(--font-ui); color: var(--ink-2); overflow: hidden; }
.palette-list .glyph img { width: 40px; height: 48px; object-fit: cover; }
.palette-list .glyph svg { width: 20px; height: 20px; color: var(--violet); }
.palette-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 14.5px; }
.palette-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.popover { position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, 92vw); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); box-shadow: var(--shadow-pop); padding: 14px; z-index: 60; display: grid; gap: 10px; }
.popover .mcard { padding: 10px; }
.popover .mcard .nums { display: none; }
.popover .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 130; background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 550; box-shadow: var(--shadow-pop); }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in .25s ease-out; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- Documents ----------------------------------------------------------------------------- */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 2px; font-size: 14.5px; }
.toc a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-left: 2px solid var(--rule); }
.toc a:hover, .toc a.active { color: var(--ink); border-left-color: var(--violet); }
.page-head { padding-block: 44px 28px; }
.page-head .lede { margin-top: 16px; }

/* ---- Footer -------------------------------------------------------------------------------- */
.site-footer { margin-top: 80px; border-top: 1px solid var(--rule); background: var(--surface); font-size: 14.5px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-block: 44px; }
.site-footer h3, .site-footer .foot-h { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer p { color: var(--muted); max-width: 46ch; }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; margin-bottom: 12px; }
.foot-brand svg { width: 32px; height: 18px; }

/* ---- Responsive ---------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .site-nav a { padding: 7px 8px; font-size: 14px; }
  .search-trigger { min-width: 0; }
  .search-trigger .label, .search-trigger kbd { display: none; }
  .likes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .site-nav { display: none; }
  .site-nav.open { display: grid; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 14px; box-shadow: var(--shadow); }
  .site-nav.open a { padding: 12px 8px; font-size: 16px; border-radius: 8px; }
  .menu-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); cursor: pointer; }
  .menu-btn svg { width: 18px; height: 18px; }
  .brand { margin-right: auto; }
}
@media (max-width: 940px) {
  :root { --gutter: 20px; }
  .hero-grid, .sit, .district, .vote-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .explain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explain > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance a:nth-child(2) { border-right: 0; }
  .glance a:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .site-nav { display: none; }
  .site-nav.open { display: grid; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 14px; box-shadow: var(--shadow); }
  .site-nav.open a { padding: 12px 8px; font-size: 16px; border-radius: 8px; }
  .menu-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); cursor: pointer; }
  .menu-btn svg { width: 18px; height: 18px; }
  .brand { margin-right: auto; }
  .your-members .grid, .cmp-grid, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mhead { grid-template-columns: auto minmax(0, 1fr); }
  .mhead .actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 56px; }
  .section { padding-block: 40px; }
  .mhead { gap: 16px; align-items: start; }
  .photo.lg { width: 84px; height: 103px; font-size: 24px; }
  .glance .value { font-size: 30px; }
  .glance a { padding: 14px; }
  .exp-chip { border-radius: 8px; line-height: 1.4; padding: 3px 8px; } /* wraps to two lines in a half-width tile */
  .preview-banner { font-size: 12.5px; line-height: 1.4; }
  .preview-banner .wrap { padding-block: 6px; }
  .score .value { font-size: 44px; }
  .breaks-list li { grid-template-columns: minmax(0, 1fr); }
  .bills li { grid-template-columns: minmax(0, 1fr); }
  .explain, .breakers, .cols-2, .cols-4, .likes { grid-template-columns: minmax(0, 1fr); }
  .explain > div { padding-left: 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--rule); }
  .ibars li { grid-template-columns: minmax(0, 1fr) 96px; gap: 6px 14px; }
  .ibar-name { grid-column: 1 / -1; }
  .ibar-axis { grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; }
  .ibar-axis > span:first-child { display: none; }
  .lookup-box { border-radius: 20px; flex-wrap: wrap; }
  .lookup-box input { flex-basis: 70%; }
  .lookup-box .btn { width: 100%; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .split-list li { grid-template-columns: minmax(0, 1fr); }
  .tally-row { grid-template-columns: 92px minmax(0, 1fr); }
  .pill-btn .txt { display: none; }
  .search-trigger { width: 38px; padding: 0; justify-content: center; }
  .site-header .wrap { gap: 10px; }
  .header-tools { gap: 6px; }
  .header-tools .lang-link { display: none; }
  .brand-name { font-size: 16px; }
}
@media print {
  .site-header, .site-footer, .subnav, .lookup, .map-layout, .actions { display: none !important; }
  body { background: #fff; }
}

/* Narrowest phones (WCAG 1.4.10 reflow at 320px): tighten the header and let switches fit. */
@media (max-width: 360px) {
  .site-header .wrap { gap: 6px; }
  .header-tools { gap: 4px; }
  .brand { gap: 7px; }
  .brand-name { font-size: 15px; }
  .segmented { max-width: 100%; }
  .segmented button { padding: 0 10px; font-size: 13px; white-space: normal; height: auto; min-height: 32px; line-height: 1.2; }
}

/* Utility classes. They replace inline style attributes so the CSP can drop 'unsafe-inline'.
   !important keeps the precedence the inline styles had. */
.u-m0 { margin: 0 !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mb10 { margin-bottom: 10px !important; }
.u-m0-r6 { margin: 0 6px 0 0 !important; }
.u-mt6 { margin-top: 6px !important; }
.u-mt18 { margin-top: 18px !important; }
.u-mt12 { margin-top: 12px !important; }
.u-mt0 { margin-top: 0 !important; }
.u-mb18 { margin-bottom: 18px !important; }
.u-bg-rep { background: var(--rep) !important; }
.u-bg-dem { background: var(--dem) !important; }
.u-full { width: 100% !important; }
.u-stack10 { display: grid !important; gap: 10px !important; }
.u-pt20 { padding-top: 20px !important; }
.u-pt18 { padding-top: 18px !important; }
.u-w520 { max-width: 520px !important; }
.u-mt20 { margin-top: 20px !important; }
.u-my8 { margin: 8px 0 !important; }
.u-m6-0-0 { margin: 6px 0 0 !important; }
.u-m0-0-14 { margin: 0 0 14px !important; }
.u-w70ch { max-width: 70ch !important; }
.u-m0-0-12 { margin: 0 0 12px !important; }
.u-mt8 { margin-top: 8px !important; }
.u-mt24 { margin-top: 24px !important; }
.u-mt22 { margin-top: 22px !important; }
.u-stack4 { display: grid !important; gap: 4px !important; }
.u-mt16 { margin-top: 16px !important; }
.u-mt14 { margin-top: 14px !important; }
.u-mb40 { margin-bottom: 40px !important; }
.u-mb22 { margin-bottom: 22px !important; }
.u-mb14 { margin-bottom: 14px !important; }
.u-mb12 { margin-bottom: 12px !important; }
.u-between { justify-content: space-between !important; }
.u-gcol8 { grid-auto-flow: column !important; align-items: center !important; gap: 8px !important; }
.u-gap40 { gap: 40px !important; }
.u-gap36 { gap: 36px !important; }
.u-center { align-items: center !important; }
.u-mb28 { margin-bottom: 28px !important; }
.u-flex240 { flex: 1 1 240px !important; }
.u-flex220 { flex: 1 1 220px !important; }
.u-flex200 { flex: 1 1 200px !important; }
.u-stack8 { display: grid !important; gap: 8px !important; }
.u-ink2 { color: var(--ink-2) !important; }
.u-pad-cmp { padding: 6px 18px !important; }
.u-agree-row { display: flex !important; align-items: baseline !important; gap: 16px !important; flex-wrap: wrap !important; margin-top: 8px !important; }
.u-m14-0-0 { margin: 14px 0 0 !important; }
.u-gap6 { gap: 6px !important; }
.u-wrapcell { min-width: 150px !important; white-space: normal !important; }
.u-m8-0-0 { margin: 8px 0 0 !important; }
/* Data-driven sizes, rounded to whole percents (pipeline/site.py: pct_class). */
.w-0 { width: 0%; } .w-1 { width: 1%; } .w-2 { width: 2%; } .w-3 { width: 3%; } .w-4 { width: 4%; } .w-5 { width: 5%; } .w-6 { width: 6%; } .w-7 { width: 7%; } .w-8 { width: 8%; } .w-9 { width: 9%; }
.w-10 { width: 10%; } .w-11 { width: 11%; } .w-12 { width: 12%; } .w-13 { width: 13%; } .w-14 { width: 14%; } .w-15 { width: 15%; } .w-16 { width: 16%; } .w-17 { width: 17%; } .w-18 { width: 18%; } .w-19 { width: 19%; }
.w-20 { width: 20%; } .w-21 { width: 21%; } .w-22 { width: 22%; } .w-23 { width: 23%; } .w-24 { width: 24%; } .w-25 { width: 25%; } .w-26 { width: 26%; } .w-27 { width: 27%; } .w-28 { width: 28%; } .w-29 { width: 29%; }
.w-30 { width: 30%; } .w-31 { width: 31%; } .w-32 { width: 32%; } .w-33 { width: 33%; } .w-34 { width: 34%; } .w-35 { width: 35%; } .w-36 { width: 36%; } .w-37 { width: 37%; } .w-38 { width: 38%; } .w-39 { width: 39%; }
.w-40 { width: 40%; } .w-41 { width: 41%; } .w-42 { width: 42%; } .w-43 { width: 43%; } .w-44 { width: 44%; } .w-45 { width: 45%; } .w-46 { width: 46%; } .w-47 { width: 47%; } .w-48 { width: 48%; } .w-49 { width: 49%; }
.w-50 { width: 50%; } .w-51 { width: 51%; } .w-52 { width: 52%; } .w-53 { width: 53%; } .w-54 { width: 54%; } .w-55 { width: 55%; } .w-56 { width: 56%; } .w-57 { width: 57%; } .w-58 { width: 58%; } .w-59 { width: 59%; }
.w-60 { width: 60%; } .w-61 { width: 61%; } .w-62 { width: 62%; } .w-63 { width: 63%; } .w-64 { width: 64%; } .w-65 { width: 65%; } .w-66 { width: 66%; } .w-67 { width: 67%; } .w-68 { width: 68%; } .w-69 { width: 69%; }
.w-70 { width: 70%; } .w-71 { width: 71%; } .w-72 { width: 72%; } .w-73 { width: 73%; } .w-74 { width: 74%; } .w-75 { width: 75%; } .w-76 { width: 76%; } .w-77 { width: 77%; } .w-78 { width: 78%; } .w-79 { width: 79%; }
.w-80 { width: 80%; } .w-81 { width: 81%; } .w-82 { width: 82%; } .w-83 { width: 83%; } .w-84 { width: 84%; } .w-85 { width: 85%; } .w-86 { width: 86%; } .w-87 { width: 87%; } .w-88 { width: 88%; } .w-89 { width: 89%; }
.w-90 { width: 90%; } .w-91 { width: 91%; } .w-92 { width: 92%; } .w-93 { width: 93%; } .w-94 { width: 94%; } .w-95 { width: 95%; } .w-96 { width: 96%; } .w-97 { width: 97%; } .w-98 { width: 98%; } .w-99 { width: 99%; }
.w-100 { width: 100%; }
.l-0 { left: 0%; } .l-1 { left: 1%; } .l-2 { left: 2%; } .l-3 { left: 3%; } .l-4 { left: 4%; } .l-5 { left: 5%; } .l-6 { left: 6%; } .l-7 { left: 7%; } .l-8 { left: 8%; } .l-9 { left: 9%; }
.l-10 { left: 10%; } .l-11 { left: 11%; } .l-12 { left: 12%; } .l-13 { left: 13%; } .l-14 { left: 14%; } .l-15 { left: 15%; } .l-16 { left: 16%; } .l-17 { left: 17%; } .l-18 { left: 18%; } .l-19 { left: 19%; }
.l-20 { left: 20%; } .l-21 { left: 21%; } .l-22 { left: 22%; } .l-23 { left: 23%; } .l-24 { left: 24%; } .l-25 { left: 25%; } .l-26 { left: 26%; } .l-27 { left: 27%; } .l-28 { left: 28%; } .l-29 { left: 29%; }
.l-30 { left: 30%; } .l-31 { left: 31%; } .l-32 { left: 32%; } .l-33 { left: 33%; } .l-34 { left: 34%; } .l-35 { left: 35%; } .l-36 { left: 36%; } .l-37 { left: 37%; } .l-38 { left: 38%; } .l-39 { left: 39%; }
.l-40 { left: 40%; } .l-41 { left: 41%; } .l-42 { left: 42%; } .l-43 { left: 43%; } .l-44 { left: 44%; } .l-45 { left: 45%; } .l-46 { left: 46%; } .l-47 { left: 47%; } .l-48 { left: 48%; } .l-49 { left: 49%; }
.l-50 { left: 50%; } .l-51 { left: 51%; } .l-52 { left: 52%; } .l-53 { left: 53%; } .l-54 { left: 54%; } .l-55 { left: 55%; } .l-56 { left: 56%; } .l-57 { left: 57%; } .l-58 { left: 58%; } .l-59 { left: 59%; }
.l-60 { left: 60%; } .l-61 { left: 61%; } .l-62 { left: 62%; } .l-63 { left: 63%; } .l-64 { left: 64%; } .l-65 { left: 65%; } .l-66 { left: 66%; } .l-67 { left: 67%; } .l-68 { left: 68%; } .l-69 { left: 69%; }
.l-70 { left: 70%; } .l-71 { left: 71%; } .l-72 { left: 72%; } .l-73 { left: 73%; } .l-74 { left: 74%; } .l-75 { left: 75%; } .l-76 { left: 76%; } .l-77 { left: 77%; } .l-78 { left: 78%; } .l-79 { left: 79%; }
.l-80 { left: 80%; } .l-81 { left: 81%; } .l-82 { left: 82%; } .l-83 { left: 83%; } .l-84 { left: 84%; } .l-85 { left: 85%; } .l-86 { left: 86%; } .l-87 { left: 87%; } .l-88 { left: 88%; } .l-89 { left: 89%; }
.l-90 { left: 90%; } .l-91 { left: 91%; } .l-92 { left: 92%; } .l-93 { left: 93%; } .l-94 { left: 94%; } .l-95 { left: 95%; } .l-96 { left: 96%; } .l-97 { left: 97%; } .l-98 { left: 98%; } .l-99 { left: 99%; }
.l-100 { left: 100%; }
.fill-s0 { background: var(--s0); } .fill-s1 { background: var(--s1); } .fill-s2 { background: var(--s2); } .fill-s3 { background: var(--s3); } .fill-s4 { background: var(--s4); }
.fill-shade-0 { background: var(--shade-0); } .fill-shade-1 { background: var(--shade-1); } .fill-shade-2 { background: var(--shade-2); } .fill-shade-3 { background: var(--shade-3); } .fill-shade-4 { background: var(--shade-4); }