/* The Vote Files — "The Reading Room" design system. See DESIGN.md (repo law). */

:root {
  --paper: oklch(96.5% 0.012 90);
  --paper-deep: oklch(92.5% 0.018 88);
  --card: oklch(98.4% 0.008 95);
  --ink: oklch(26% 0.025 50);
  --ink-soft: oklch(45% 0.02 55);
  --ink-faint: oklch(60% 0.015 60);
  --rule: oklch(26% 0.025 50 / 0.14);
  --rule-soft: oklch(26% 0.025 50 / 0.08);
  --green: oklch(42% 0.09 165);
  --green-deep: oklch(32% 0.07 168);
  --green-tint: oklch(90% 0.035 165);
  --stamp: oklch(52% 0.19 27);
  --stamp-tint: oklch(93% 0.03 27);
  --brass: oklch(72% 0.08 85);
  --dem: oklch(50% 0.10 255);
  --gop: oklch(46% 0.11 35);
  --ind: oklch(48% 0.09 310);
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono: Consolas, 'SF Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 1px 2px oklch(26% 0.025 50 / 0.08), 0 6px 18px oklch(26% 0.025 50 / 0.07);
  --shell: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.6;
  position: relative;
}
/* paper grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */
.label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label--faint { color: var(--ink-faint); }
.mono { font-family: var(--mono); }
h1, h2, h3 { font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
.display { font-size: clamp(34px, 6vw, 56px); }
.h-lg { font-size: clamp(27px, 4vw, 44px); }
.h-md { font-size: 27px; }
.h-sm { font-size: 21px; }
.lede { font-size: 21px; line-height: 1.45; color: var(--ink-soft); max-width: 34em; }
.measure { max-width: 70ch; }

/* ---------- chrome ---------- */
.topbar {
  background: var(--green);
  color: oklch(97% 0.01 165);
  border-bottom: 3px double oklch(97% 0.01 165 / 0.35);
}
.topbar .shell {
  display: flex; align-items: center; gap: 28px;
  min-height: 62px;
}
.wordmark {
  display: flex; align-items: baseline; gap: 10px;
  text-decoration: none; white-space: nowrap;
}
.wordmark .tvf { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; opacity: 0.8; }
.wordmark .vf { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: 0.01em; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; padding: 8px 12px; border-radius: 3px;
  opacity: 0.85; transition: background 180ms var(--ease), opacity 180ms var(--ease);
}
.nav a:hover { background: oklch(100% 0 0 / 0.12); opacity: 1; }
.nav a[aria-current="page"] { background: oklch(100% 0 0 / 0.16); opacity: 1; }
.mockbadge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  border: 1.5px solid oklch(97% 0.01 165 / 0.6); border-radius: 3px;
  padding: 3px 8px; transform: rotate(-2deg); white-space: nowrap;
}

/* ---------- stamps & chips ---------- */
.stamp {
  display: inline-block;
  font-family: var(--mono); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stamp); border: 2.5px solid var(--stamp);
  border-radius: 4px; padding: 4px 12px;
  transform: rotate(var(--rot, -5deg));
  mix-blend-mode: multiply;
  font-size: 14px;
}
.stamp--green { color: var(--green); border-color: var(--green); }
.stamp--lg { font-size: 19px; padding: 7px 16px; border-width: 3px; }
.stamp--sm { font-size: 11px; padding: 2px 8px; border-width: 2px; letter-spacing: 0.1em; }
/* from-state stays visible so a stamp can never render blank mid-animation */
@keyframes stampIn {
  from { transform: rotate(var(--rot, -5deg)) scale(1.18); opacity: 0.55; }
  to { transform: rotate(var(--rot, -5deg)) scale(1); opacity: 1; }
}
/* .landed is added by JS after two animation frames; if scripting or rAF is
   unavailable the stamp simply renders in place, never invisible */
.stamp.landed { animation: stampIn 260ms var(--ease) both; animation-delay: 60ms; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 3px 10px; background: var(--card); white-space: nowrap;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip--D .dot { background: var(--dem); }
.chip--R .dot { background: var(--gop); }
.chip--I .dot { background: var(--ind); }
.pos { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  border-radius: 3px; padding: 2px 8px; }
.pos--YEA { color: var(--green-deep); background: var(--green-tint); }
.pos--NAY { color: var(--stamp); background: var(--stamp-tint); }
.pos--NV { color: var(--ink-faint); background: var(--paper-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--green); color: oklch(97% 0.01 165);
  border: none; border-radius: 3px; padding: 13px 22px;
  text-decoration: none; cursor: pointer;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { background: var(--green-deep); transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: var(--green);
  border: 1.5px solid var(--green);
}
.btn--ghost:hover { background: var(--green-tint); }
.btn--paper { background: var(--card); color: var(--green-deep); }
.btn--paper:hover { background: var(--paper); }

/* ---------- folder ---------- */
.folder { position: relative; }
.folder-tab {
  display: inline-block;
  background: var(--card);
  clip-path: polygon(0 100%, 10px 0, calc(100% - 10px) 0, 100% 100%);
  padding: 7px 26px 5px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  position: relative; top: 1px;
}
.folder-sheet {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0 6px 6px 6px;
  box-shadow: var(--shadow);
}

/* ---------- ledger ---------- */
.ledger { border-top: 2px solid var(--ink); }
.ledger-row {
  display: grid; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--rule);
  padding: 13px 4px;
  text-decoration: none;
  transition: background 180ms var(--ease);
}
a.ledger-row:hover { background: var(--card); }
.ledger-head {
  border-bottom: 1px solid var(--rule);
  padding: 8px 4px;
  display: grid; gap: 16px;
}

/* ---------- receipt ---------- */
.receipt {
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: 13px;
  padding: 22px 22px 16px;
  position: relative;
  transform: rotate(-0.6deg);
}
.receipt::before, .receipt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px;
  background-image: linear-gradient(45deg, var(--paper) 25%, transparent 25%),
    linear-gradient(-45deg, var(--paper) 25%, transparent 25%);
  background-size: 14px 14px;
}
.receipt::before { top: -1px; background-position: 0 -7px, 0 -7px; }
.receipt::after { bottom: -1px; transform: scaleY(-1); background-position: 0 -7px, 0 -7px; }
.receipt h4 { font-size: 13px; letter-spacing: 0.14em; text-align: center; margin-bottom: 12px; }
.receipt .r-line { display: flex; justify-content: space-between; gap: 12px; padding: 3.5px 0; }
.receipt .r-rule { border-top: 1.5px dashed var(--rule); margin: 10px 0; }
.receipt .r-big { font-size: 17px; font-weight: 700; }
.receipt .barcode {
  height: 34px; margin-top: 14px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 11px,
    var(--ink) 11px 14px, transparent 14px 17px);
  opacity: 0.82;
}
.receipt .r-foot { text-align: center; font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-faint); margin-top: 6px; }

/* ---------- portraits ---------- */
.portrait {
  aspect-ratio: 9 / 11;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  overflow: hidden; position: relative;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.14) contrast(1.03) saturate(0.92);
  position: relative; z-index: 1; }
.portrait .fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700;
  font-size: 44px; color: var(--green-deep);
  background: var(--green-tint);
}

/* ---------- sections ---------- */
.section { padding: 72px 0; }
.section--tight { padding: 44px 0; }
.section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.section-head .rule { flex: 1; border-top: 1px solid var(--rule); position: relative; top: -4px; }
.kicker { display: block; margin-bottom: 10px; }

/* ---------- footer ---------- */
.footer {
  background: var(--green-deep);
  color: oklch(93% 0.02 165);
  margin-top: 96px;
  padding: 44px 0 34px;
}
.footer .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.footer .fm { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; line-height: 2; opacity: 0.85; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid oklch(93% 0.02 165 / 0.25);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; opacity: 0.7; }

/* ---------- viz containers ---------- */
.viz { width: 100%; }
.viz svg { width: 100%; height: auto; display: block; }
.viz-note { margin-top: 8px; }

/* ---------- home hero ---------- */
.hero { position: relative; padding: 96px 0 84px; overflow: hidden; }
.hero .ledger-lines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 42px, var(--rule-soft) 42px 43px);
  mask-image: linear-gradient(180deg, transparent 0%, oklch(0% 0 0) 30%, transparent 95%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; }
.hero .display { max-width: 11em; }
.hero .est { margin: 26px 0 34px; }
.searchbox {
  display: flex; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden;
  background: var(--card); max-width: 560px; box-shadow: var(--shadow);
}
.searchbox input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--mono); font-size: 15px; padding: 15px 16px; color: var(--ink);
}
.searchbox input::placeholder { color: var(--ink-faint); }
.searchbox button { border-radius: 0; }

/* ---------- drawer (home members) ---------- */
.drawer { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: end; }
.drawer .folder { text-decoration: none; transition: transform 200ms var(--ease); }
.drawer .folder:nth-child(2n) { transform: rotate(0.5deg); }
.drawer .folder:nth-child(3n) { transform: rotate(-0.6deg); }
.drawer .folder:hover { transform: translateY(-6px); }
.drawer .folder-sheet { padding: 10px 10px 12px; }
.drawer .folder-tab { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; padding: 5px 14px 4px; }
.drawer .name { font-weight: 700; font-size: 15.5px; line-height: 1.2; margin: 9px 2px 3px; }
.drawer .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin: 0 2px; }

/* ---------- home floor table ---------- */
.floor .ledger-row { grid-template-columns: 110px 1fr 190px 110px; }
.floor .ledger-head { grid-template-columns: 110px 1fr 190px 110px; }
.tugbar { height: 10px; border-radius: 2px; background: var(--paper-deep); overflow: hidden; display: flex; }
.tugbar .yea { background: var(--green); height: 100%; }
.tugbar .nay { background: var(--stamp); height: 100%; margin-left: auto; }
.floor .count { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }

/* ---------- support band ---------- */
.band {
  background: var(--green); color: oklch(97% 0.01 165);
  padding: 64px 0;
}
.band .inner { display: flex; gap: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.band .h-lg { max-width: 15em; }
.band p { opacity: 0.85; max-width: 36em; }

/* ---------- browse ---------- */
.browse-row { grid-template-columns: 56px 1.4fr 1fr 120px 90px 110px; }
.browse-head { grid-template-columns: 56px 1.4fr 1fr 120px 90px 110px; }
.browse-row .thumb { width: 46px; }
.minispec { height: 22px; }

/* ---------- file page ---------- */
.file-masthead { display: grid; grid-template-columns: 240px 1fr auto; gap: 40px; align-items: start; }
.file-masthead .portrait { width: 240px; box-shadow: var(--shadow); transform: rotate(-1deg); }
.statline { display: flex; flex-wrap: wrap; gap: 0 44px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 14px 0; margin-top: 30px; }
.statline .stat { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.statline .num { font-family: var(--mono); font-weight: 700; font-size: 21px; }
.file-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
.votes-table .ledger-row { grid-template-columns: 96px 1fr 76px 110px; cursor: pointer; }
.votes-table .ledger-head { grid-template-columns: 96px 1fr 76px 110px; }
.votes-table .ledger-row.active { background: var(--green-tint); }
.punch-legend { display: flex; gap: 22px; margin-top: 8px; }

/* ---------- bill page ---------- */
.bill-masthead { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.bill-no { font-family: var(--mono); font-weight: 700; font-size: clamp(27px, 4vw, 40px); letter-spacing: 0.02em; }
.splitbars .row { display: grid; grid-template-columns: 90px 1fr 90px; gap: 14px; align-items: center; padding: 7px 0; }
.splitbars .bar { height: 12px; border-radius: 2px; background: var(--paper-deep); display: flex; overflow: hidden; }
.rollcall .ledger-row { grid-template-columns: 52px 1fr 130px 90px; }

/* ---------- compare ---------- */
.compare-pick { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 18px; align-items: center; margin-bottom: 40px; }
.compare-pick select {
  width: 100%; font-family: var(--mono); font-size: 14px; color: var(--ink);
  padding: 12px; border: 2px solid var(--ink); border-radius: 4px; background: var(--card);
}
.vsmark { text-align: center; font-family: var(--serif); font-weight: 700; font-size: 27px; color: var(--ink-faint); }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.compare-grid .folder-sheet { padding: 24px; }
.cmp-stat { display: flex; justify-content: space-between; border-bottom: 1px solid var(--rule); padding: 9px 2px; }
.agree-row { grid-template-columns: 1fr 120px 120px 120px; }

/* ---------- support page ---------- */
.tiers { display: flex; gap: 14px; flex-wrap: wrap; }
.tier {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--card);
  padding: 14px 22px; cursor: pointer;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.tier:hover, .tier.on { background: var(--green-tint); transform: translateY(-2px); }
.support-checkout {
  margin-top: 28px; padding: 24px; background: var(--card);
  border: 1px solid var(--rule); box-shadow: 0 10px 28px oklch(26% 0.025 50 / 0.08);
}
.support-alert { margin-top: 20px; border-left: 4px solid var(--stamp); }
.support-periods { border: 0; padding: 0; margin: 0 0 24px; }
.support-periods legend { margin-bottom: 10px; }
.support-periods label { display: inline-block; margin: 0 10px 10px 0; cursor: pointer; }
.support-periods input { position: absolute; opacity: 0; pointer-events: none; }
.support-periods span {
  display: inline-block; padding: 11px 16px; border: 2px solid var(--ink); border-radius: 4px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--card);
}
.support-periods input:checked + span { background: var(--green-tint); border-color: var(--green-deep); }
.support-periods input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 3px; }
.support-amounts > .label { display: block; margin-bottom: 10px; }
.support-custom {
  display: flex; align-items: center; min-height: 51px; border: 2px solid var(--ink);
  border-radius: 4px; background: var(--card); font-family: var(--mono); font-weight: 700;
}
.support-custom span { padding-left: 14px; white-space: nowrap; }
.support-custom input {
  width: 92px; min-height: 47px; border: 0; background: transparent; padding: 8px 12px 8px 5px;
  color: var(--ink); font: inherit;
}
.support-custom:focus-within { outline: 3px solid var(--brass); outline-offset: 3px; }
.support-custom input:focus { outline: 0; }
.support-cadence { margin: 18px 0; color: var(--ink-soft); }
.support-paypal { min-width: 230px; }
.support-paypal:disabled { opacity: 0.5; cursor: not-allowed; }
.support-legal { margin-top: 14px; max-width: 62ch; line-height: 1.55; }
.merch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.merch .item { text-align: center; }
.merch .canvas {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--paper-deep); border: 1px solid var(--rule); margin-bottom: 12px;
  overflow: hidden;
}
.merch .mini-receipt { width: 118%; flex: none; transform: scale(0.62) rotate(-3deg); }

/* ---------- misc ---------- */
.notice {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-soft); background: var(--paper-deep);
  border: 1px solid var(--rule); border-radius: 3px; padding: 10px 14px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .topbar .shell { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 8px 16px; }
  .wordmark { order: 1; }
  .mockbadge { order: 2; margin-left: auto; }
  .nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .nav a { padding-inline: 8px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .drawer { grid-template-columns: repeat(3, 1fr); }
  .file-masthead { grid-template-columns: 150px 1fr; }
  .file-masthead .stampcol { grid-column: 1 / -1; }
  .file-grid { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .merch { grid-template-columns: 1fr; }
  .support-checkout { padding: 18px; }
  .support-periods label { display: block; margin-right: 0; }
  .support-periods span { width: 100%; text-align: center; }
  .tiers .tier { flex: 1 1 calc(50% - 8px); }
  .support-custom { flex: 1 1 100%; }
  .support-custom input { flex: 1; }
  .support-paypal { width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .browse-row, .browse-head { grid-template-columns: 46px 1.3fr 1fr 90px; }
  .browse-row .col-hide, .browse-head .col-hide { display: none; }
}
@media (max-width: 720px) {
  .topbar .shell { gap: 10px 16px; }
  .nav { justify-content: flex-start; overflow-x: auto; }
  .section { padding: 48px 0; }
  .hero { padding: 64px 0 56px; }
  .drawer { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 12px; }
  .drawer .folder { min-width: 150px; }
  .floor .ledger-row, .floor .ledger-head { grid-template-columns: 84px 1fr 90px; }
  .floor .col-tug { display: none; }
  .file-masthead { grid-template-columns: 1fr; }
  .file-masthead .portrait { width: 170px; }
  .votes-table .ledger-row, .votes-table .ledger-head { grid-template-columns: 84px 1fr 64px; }
  .votes-table .col-result { display: none; }
  .rollcall .ledger-row { grid-template-columns: 44px 1fr 90px; }
  .rollcall .col-state { display: none; }
  .browse-row, .browse-head { grid-template-columns: 46px 1fr 96px; }
  .browse-row .col-party, .browse-head .col-party { display: none; }
  .compare-pick { grid-template-columns: 1fr; }
  .vsmark { display: none; }
  .agree-row { grid-template-columns: 1fr 62px 62px 70px; gap: 8px; }
  .agree-row .pos { font-size: 10.5px; padding: 2px 5px; }
  .agree-row .stamp--sm { font-size: 9.5px; padding: 2px 5px; letter-spacing: 0.06em; }
  .statline { gap: 0 26px; }
}

/* ---------- open-files tab strip ---------- */
.tabstrip { background: var(--paper-deep); border-bottom: 1.5px solid var(--rule); position: sticky; top: 0; z-index: 50; display: none; }
.tabstrip.has-tabs { display: block; }
.tabstrip .strip { max-width: var(--shell); margin: 0 auto; padding: 9px 24px 0; display: flex; gap: 4px; align-items: flex-end; overflow-x: auto; scrollbar-width: thin; }
.ftab {
  flex: none; display: inline-flex; align-items: center; gap: 9px; max-width: 250px;
  background: oklch(89.5% 0.02 88);
  clip-path: polygon(0 100%, 9px 0, calc(100% - 9px) 0, 100% 100%);
  padding: 8px 18px 7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer; text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.ftab:hover { background: var(--card); }
.ftab.on { background: var(--card); color: var(--ink); font-weight: 700; }
.ftab .kind { color: var(--ink-faint); font-size: 9.5px; letter-spacing: 0.14em; }
.ftab.on .kind { color: var(--green-deep); }
.ftab .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftab .x { border: 0; background: none; font-family: var(--mono); font-size: 15px; color: var(--ink-faint); cursor: pointer; padding: 0 2px; line-height: 1; }
.ftab .x:hover { color: var(--stamp); }

/* ---------- record controls, pager ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; align-items: center; }
.controls select, .controls input {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--rule); border-radius: 3px; padding: 8px 10px;
}
.controls input { min-width: 210px; }
.controls select:focus, .controls input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.controls .count-note { margin-left: auto; }
.pager { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.pager button {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--card); color: var(--green-deep); border: 1.5px solid var(--rule);
  border-radius: 3px; padding: 7px 12px; cursor: pointer;
}
.pager button:hover:not(:disabled) { background: var(--green-tint); }
.pager button:disabled { opacity: 0.4; cursor: default; }

/* ---------- full record table ---------- */
.record-table .ledger-row { grid-template-columns: 92px 1fr 82px 88px 118px 46px; cursor: pointer; }
.record-table .ledger-head { grid-template-columns: 92px 1fr 82px 88px 118px 46px; }
.record-table .ledger-row.active { background: var(--green-tint); }
.record-table .m-line { line-height: 1.35; }
.record-table .m-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.breakmark { color: var(--stamp); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; }
.rbtn {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-soft);
  border-radius: 3px; padding: 3px 6px; cursor: pointer;
}
.rbtn:hover { background: var(--green-tint); color: var(--green-deep); }

/* ---------- cast chips (lowercase semantic variants) ---------- */
.pos--yea { color: var(--green-deep); background: var(--green-tint); }
.pos--nay { color: var(--stamp); background: var(--stamp-tint); }
.pos--present { color: var(--ink-soft); background: var(--paper-deep); }
.pos--nv { color: var(--ink-faint); background: var(--paper-deep); }
.chip--O .dot { background: var(--brass); }
.chip--P .dot { background: var(--ink-faint); }

/* ---------- measure pane ---------- */
.cite-box { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 16px 18px; max-width: 640px; }
.cite-box .label { display: block; margin-bottom: 8px; }
.cite-box ul { list-style: none; }
.cite-box li { padding: 3.5px 0; font-size: 15px; }
.cite-box a { color: var(--green-deep); }
.billtext { max-width: 74ch; max-height: 580px; overflow-y: auto; background: var(--card); border: 1px solid var(--rule); padding: 26px 30px; box-shadow: var(--shadow); }
.billtext p { margin-bottom: 12px; }
.related-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.voterledger .ledger-row { grid-template-columns: 1.25fr 170px 64px 92px; padding: 9px 4px; }
.voterledger .ledger-head { grid-template-columns: 1.25fr 170px 64px 92px; }
a.member-link { text-decoration: none; font-weight: 700; }
a.member-link:hover { text-decoration: underline; color: var(--green-deep); }
.loadnote { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); padding: 18px 0; }

@media (max-width: 980px) {
  .record-table .ledger-row, .record-table .ledger-head { grid-template-columns: 84px 1fr 70px 46px; }
  .record-table .col-tally, .record-table .col-outcome { display: none; }
  .voterledger .ledger-row, .voterledger .ledger-head { grid-template-columns: 1fr 64px; }
  .voterledger .col-party, .voterledger .col-state { display: none; }
}
@media (max-width: 720px) {
  .controls input { min-width: 130px; flex: 1; }
  .record-table .ledger-row, .record-table .ledger-head { grid-template-columns: 74px 1fr 60px; }
  .record-table .col-rbtn { display: none; }
}

/* ---------- executive orders ---------- */
.eos-table .ledger-row { grid-template-columns: 92px 100px 1fr 128px; }
.eos-table .ledger-head { grid-template-columns: 92px 100px 1fr 128px; }
.eos-table .eo-num { font-size: 14px; font-weight: 700; }
.eos-table .col-eocite { text-align: right; font-size: 12px; color: var(--ink-soft); }
.eos-table .eo-title { line-height: 1.35; }
.eos-table .eo-sub {
  display: block; font-family: var(--mono); font-size: 11px;
  color: var(--ink-faint); letter-spacing: 0.04em; margin-top: 2px;
}
.eo-monly { display: none; }
.eochip {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; border-radius: 3px;
  padding: 1px 6px; margin-left: 8px; vertical-align: 2px; white-space: nowrap;
}
.eochip--rev { color: var(--stamp); border: 1.5px solid var(--stamp); background: var(--stamp-tint); }
.eochip--amd { color: var(--ink); border: 1.5px solid var(--rule); background: var(--paper-deep); }

/* disposition ledger on the order file */
.dispo .ledger-row { grid-template-columns: 170px 1fr; align-items: baseline; }
.dispo a { color: var(--green-deep); }

/* document-type toggle on the record page */
.doctoggle {
  display: inline-flex; border: 2px solid var(--ink); border-radius: 4px;
  overflow: hidden; margin-bottom: 22px;
}
.doctoggle button {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--card); color: var(--ink-soft); border: none; padding: 10px 18px; cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.doctoggle button + button { border-left: 1.5px solid var(--rule); }
.doctoggle button:hover { background: var(--green-tint); color: var(--green-deep); }
.doctoggle button[aria-pressed="true"] { background: var(--green); color: oklch(97% 0.01 165); }

@media (max-width: 980px) {
  .eos-table .ledger-row, .eos-table .ledger-head { grid-template-columns: 84px 96px 1fr; }
  .eos-table .col-eocite { display: none; }
}
@media (max-width: 720px) {
  .eos-table .ledger-row, .eos-table .ledger-head { grid-template-columns: 64px 1fr; gap: 10px; }
  .eos-table .col-eodate { display: none; }
  .eo-monly { display: inline; }
  .dispo .ledger-row { grid-template-columns: 1fr; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Press coverage (measure and, later, member files) --------------------
   Three columns by outlet position. Lists are ledgers, per DESIGN.md, so each
   column is a hairline-ruled ledger rather than a card grid. */
.press { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 6px; }
.press-col > .label { margin-bottom: 8px; }
.press-none { padding: 10px 0; }
.press-ledger { border-top: 2px solid var(--ink); }
.press-row {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ink-faint) 25%, transparent);
  text-decoration: none;
  color: inherit;
  transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.press-row:hover { background: var(--card); }
.press-head { display: block; font-size: 16.5px; line-height: 1.4; }
.press-row:hover .press-head { text-decoration: underline; text-underline-offset: 3px; }
.press-cite { display: block; margin-top: 5px; }
@media (max-width: 900px) {
  .press { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .press-row { transition: none; }
}
.press-more { padding: 9px 0 0; }

/* ---------- the desk ----------
   A desk folder carries more than a drawer folder: the file, the newest headline about it,
   and the citation. Four across so the headline has room to be readable. */
.drawer.desk { grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.desk-item { display: flex; flex-direction: column; }
.desk-item .folder { text-decoration: none; transition: transform 200ms var(--ease); }
.desk-item:nth-child(2n) .folder { transform: rotate(0.4deg); }
.desk-item:nth-child(3n) .folder { transform: rotate(-0.5deg); }
.desk-item .folder:hover { transform: translateY(-6px); }
.desk .folder-sheet { padding: 12px 12px 14px; height: 100%; }
.desk-rule {
  height: 1px; margin: 11px 2px 10px;
  background: color-mix(in oklch, var(--ink-faint) 30%, transparent);
}
.desk-head { font-size: 14.5px; line-height: 1.35; margin: 0 2px 6px; }
.desk-cite { font-size: 10.5px; }
.desk-source {
  display: inline-block; margin: 9px 2px 0; color: var(--green-deep);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.desk-source:hover { border-bottom-color: var(--green-deep); }
.desk-why { display: block; margin: 6px 2px 0; }
@media (max-width: 900px) {
  .drawer.desk { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .drawer.desk { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .desk-item .folder { transform: none; }
}
.desk-note { margin-top: 5px; font-style: italic; opacity: 0.85; }

/* ---------- the status rail: where a bill has got to ---------- */
/* Seven rungs of the legislative ladder. The rung a measure stands on is ringed in stamp
   red the way a subject is ringed everywhere else on the site; rungs behind it are green.
   It shows position, never likelihood, and never approval. */
.rail { display: flex; align-items: center; gap: 0; margin-top: 16px; }
.rail-step { flex: 1; display: flex; align-items: center; }
.rail-step::before { content: ""; flex: 1; height: 2px; background: var(--rule); }
.rail-step:first-child::before { visibility: hidden; }
.rail-step i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); flex: none; display: block; }
.rail-step.done::before, .rail-step.done i, .rail-step.now::before { background: var(--green); }
.rail-step.now i { width: 15px; height: 15px; background: var(--paper); border: 3.5px solid var(--stamp); }
.rail-label { margin-top: 8px; font-size: 11.5px; }
.desk-social { margin-top: 5px; font-size: 11px; }
.desk-social--shape { color: var(--ink-faint); }

/* ---------- the docket (courts.php) ---------- */
.court-row  { grid-template-columns: 92px 1fr 220px; align-items: start; }
.court-head { grid-template-columns: 92px 1fr 220px; }
.court-tag { line-height: 1.35; }
.court-tag strong { font-size: 13px; letter-spacing: 0.06em; }
/* The clerk's own words. Mono because it is a record, not prose, and never rewritten. */
.court-entry { font-size: 12px; color: var(--ink-soft); }
.court-meta  { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.court-reason { color: var(--ink-soft); align-self: center; }
.court-eos { display: inline-block; margin-top: 5px; }
/* Executive-order chips carry the ledger green: this is a citation, not a status. */
.court-eos .eochip {
  color: var(--green-deep); border: 1.5px solid var(--green); background: var(--green-tint);
  margin: 0 6px 0 0; text-decoration: none;
}
.court-eos .eochip:hover { background: var(--green); color: var(--paper); }
@media (max-width: 720px) {
  .court-row, .court-head { grid-template-columns: 68px 1fr; }
  .court-head span:last-child, .court-row .court-reason { display: none; }
}
/* The row is a div, not an anchor, because it holds several links. See courts.php. */
.court-row:hover { background: var(--card); }
.court-caption { text-decoration: none; color: var(--ink); }
.court-caption:hover strong { text-decoration: underline; text-underline-offset: 2px; }
/* What the court did, quoted. Stamp red is semantic here: this is the ruling, not decoration. */
.court-ruled { display: inline-block; margin-top: 6px; }
.court-ruled-tag {
  display: inline-block; color: var(--stamp); border: 1.5px solid var(--stamp);
  background: var(--stamp-tint); border-radius: 3px; padding: 1px 6px; margin-right: 8px;
  vertical-align: 1px;
}
.court-ruled q { font-style: italic; color: var(--ink); }

/* Cases naming an office held, on a member file. Same ledger as the Docket, one column
   narrower: the member page has no need for a court-level filter, so the region sits under
   the court code instead of in a column of its own. */
.presc-row  { grid-template-columns: 92px 1fr 200px; align-items: start; }
.presc-head { grid-template-columns: 92px 1fr 200px; }
@media (max-width: 720px) {
  .presc-row, .presc-head { grid-template-columns: 68px 1fr; }
  .presc-head span:last-child, .presc-row .court-reason { display: none; }
}
/* ---------- lookups sparkbars ---------- */
/* Daily Wikipedia lookups. Hand-rolled SVG per DESIGN.md; the bar for the busiest day is
   stamp red, which is how the site marks the subject of a chart everywhere else. */
.pv-wrap { max-width: 640px; }
.pv-spark { display: block; width: 100%; height: 72px; }
/* The "most since" line: the one claim on the page that needs the whole series. */
.pv-hook { font-family: var(--serif); font-size: 21px; line-height: 1.35; margin-top: 16px; color: var(--ink); }

/* ---------- Project 2025 (project2025.php) ---------- */
/* The four counts at the top, which double as the way into the table. Buttons rather than
   links: they set a filter on this page, they do not navigate anywhere. */
.p25-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.p25-tile {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-left-width: 4px;
  border-radius: 4px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background 180ms var(--ease);
}
.p25-tile:hover { background: var(--paper-deep); }
.p25-tile:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.p25-n { font-family: var(--mono); font-size: 30px; line-height: 1.1; color: var(--ink); }
/* Status colour is carried by the border, and repeated on the chips in the table below, so the
   two read as one scheme. Green for done, brass for under way, stamp red for a court block —
   the same three the rest of the site already uses for finished, pending and ruling. */
.p25-tile--done  { border-left-color: var(--green); }
.p25-tile--going { border-left-color: var(--brass); }
.p25-tile--court { border-left-color: var(--stamp); }
.p25-tile--none  { border-left-color: var(--rule); }

/* The link to the document itself. Deliberately prominent: a reader who wants the source rather
   than our reading of it should not have to hunt for it. */
.p25-doc {
  display: inline-flex; flex-direction: column; gap: 3px; max-width: 560px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 14px 18px; text-decoration: none;
  transition: background 180ms var(--ease);
}
.p25-doc:hover { background: var(--paper-deep); }
.p25-doc strong { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }

.p25-row  { grid-template-columns: 150px 1fr 130px; align-items: start; }
.p25-head { grid-template-columns: 150px 1fr 130px; }
.p25-row:hover { background: var(--card); }
.p25-summary { font-size: 16px; line-height: 1.45; font-weight: 600; }
.p25-meta { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.p25-tracker { color: var(--ink-soft); align-self: center; }

.p25-status {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 3px; padding: 2px 7px; border: 1.5px solid;
}
.p25-status--done  { color: var(--green-deep); border-color: var(--green); background: var(--green-tint); }
.p25-status--going { color: var(--ink);        border-color: var(--brass); background: oklch(94% 0.04 85); }
.p25-status--court { color: var(--stamp);      border-color: var(--stamp); background: var(--stamp-tint); }
.p25-status--none  { color: var(--ink-faint);  border-color: var(--rule);  background: transparent; }
/* The litigation note, in the Observer's own words. Stamp red for the same reason .court-ruled
   is: it is a court's action, not a label we applied. */
.p25-court { font-family: var(--mono); font-size: 11px; color: var(--stamp); }

/* What actually happened. One line per action the tracker recorded, strongest first. */
.p25-ev { list-style: none; margin-top: 7px; }
.p25-ev li { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); padding: 2px 0 2px 12px; position: relative; }
.p25-ev li::before { content: "\2014"; position: absolute; left: 0; color: var(--ink-faint); }
.p25-ev a { color: var(--green-deep); text-underline-offset: 2px; }
/* A citation the tracker named but did not link. Visibly not a link, because it is not one. */
.p25-ev-nolink { color: var(--ink-soft); border-bottom: 1px dotted var(--ink-faint); }
.p25-ev-kind { text-transform: uppercase; margin-right: 4px; }

.p25-flag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stamp); border: 1px solid var(--stamp); border-radius: 3px;
  padding: 0 5px; vertical-align: 2px; white-space: nowrap;
}

.p25-method { max-width: 42em; }
.p25-method h3 { font-size: 19px; margin: 26px 0 8px; }
.p25-method h3:first-child { margin-top: 0; }
.p25-method p { margin-bottom: 10px; }
.p25-sources { list-style: none; margin-top: 10px; }
.p25-sources li { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.p25-sources a { color: var(--green-deep); }

@media (max-width: 900px) {
  .p25-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .p25-row, .p25-head { grid-template-columns: 96px 1fr; gap: 10px; }
  .p25-summary { font-size: 15px; }
  .p25-head span:last-child, .p25-row .p25-tracker { display: none; }
}
.vf-watch-dock{position:fixed;z-index:70;right:18px;bottom:18px;display:grid;grid-template-columns:auto auto;gap:4px 13px;align-items:center;padding:12px 14px;border:1px solid #73899a;background:rgba(3,14,24,.96);box-shadow:0 9px 28px rgba(0,0,0,.3);color:#fff;font:13px/1.2 Arial,sans-serif}.vf-watch-dock span{grid-column:1/-1;color:#95a8b7;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.vf-watch-dock button{min-height:36px;padding:0 13px;border:1px solid #ed3341;background:#bd111e;color:#fff;font-weight:850;cursor:pointer}.vf-watch-dock button[aria-pressed="true"]{border-color:#4e8ed4;background:#12375a}.vf-watch-dock a{color:#a9d2ff;font-weight:750;text-decoration:none}@media(max-width:600px){.vf-watch-dock{right:10px;bottom:10px;left:10px;grid-template-columns:1fr auto}.vf-watch-dock span{display:none}}