/* 1751 by TFI — design system (2026-07 UI pass; renamed from TN Bill Predictor 2026-10-09).
   Brand: indigo. Zone palette CVD-validated (dataviz six-checks): worst adjacent pair
   ΔE 16.9 deutan; badges always carry text labels, so identity is never color-alone.
   System font stack (CSP blocks external fonts); numbers use tabular figures. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-soft: #edf1f5;

  --brand: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;

  /* zone hues (solid) — validated set */
  --dont_fight: #dc2626; --danger: #d97706; --action: #059669; --monitor: #2563eb; --certain: #db2777;
  /* Tint of --action, added 2026-08 for the manual-vs-auto whip colouring. There was no green
     background token — only --brand-50 — and reusing that blue tint for the green state is exactly
     how the two states end up looking the same. Declared here rather than inlined so the next
     person finds it. */
  --action-50: #ecfdf5;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .05);
  --shadow: 0 1px 3px rgb(15 23 42 / .07), 0 6px 20px rgb(15 23 42 / .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 14.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
a { color: var(--brand-700); cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── header / nav ─────────────────────────────────────────────────────────── */
header {
  display: flex; align-items: center; gap: 6px;
  padding: 0 20px; height: 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: 14px; white-space: nowrap; color: inherit; cursor: pointer; }
.brand:hover { text-decoration: none; }
.brand:hover .brand-name { color: var(--brand-700); }
.brand-mark {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-800) 100%);
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
#sub { scroll-margin-top: 68px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.brand-session { font-size: 10.5px; font-weight: 500; color: var(--muted); }
header nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-block; padding: 6px 11px; border-radius: 8px;
  color: var(--ink-2); font-weight: 500; font-size: 13.5px; white-space: nowrap;
  border: 0; background: none; cursor: pointer; font-family: inherit; line-height: 1.4;
}
.nav-link:hover { background: var(--line-soft); text-decoration: none; color: var(--ink); }
.nav-link.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.nav-more { position: relative; }
.nav-more-menu {
  display: none; position: absolute; top: 100%; left: 0; padding-top: 6px; z-index: 60;
}
.nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu { display: block; }
.nav-more-menu > div {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; min-width: 185px;
}
.nav-more-menu a { display: block; padding: 7px 11px; border-radius: 7px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.nav-more-menu a:hover { background: var(--brand-50); color: var(--brand-700); text-decoration: none; }
.nav-more-menu a.active { color: var(--brand-700); font-weight: 600; }
/* Bills: the word opens the bill list, the ▾ (and hover) opens the bill tools — one pill, two targets. */
.nav-split { display: inline-flex; align-items: center; border-radius: 8px; }
.nav-split > .nav-link { border-radius: 0; }
.nav-split > .nav-link:first-child { border-radius: 8px 0 0 8px; padding-right: 3px; }
.nav-split > .nav-caret { border-radius: 0 8px 8px 0; padding-left: 4px; padding-right: 9px; font-size: 11px; }
.nav-split:hover > .nav-link { background: var(--line-soft); color: var(--ink); }
.nav-split.active > .nav-link { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
/* Settings' own tabs (General · Calibration · Audit log). */
.subnav { display: flex; gap: 4px; margin: -4px 0 14px; border-bottom: 1px solid var(--line); }
.subnav a { padding: 7px 12px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.active { color: var(--brand-700); border-bottom-color: var(--brand); font-weight: 600; }
/* Summary's top row: data freshness, then the recently opened bills beside it. */
.dash-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; }
.dash-recent { font-size: 13.5px; }
header .spacer { flex: 1; }
header button { white-space: nowrap; }
.user { display: inline-flex; align-items: center; gap: 9px; margin-right: 6px; white-space: nowrap; }
.avatar {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-800);
  font-size: 12px; font-weight: 700;
}
.user-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.user-role { display: block; font-weight: 400; font-size: 11.5px; text-transform: capitalize; }

main { padding: 26px 24px 48px; max-width: 1160px; margin: 0 auto; }

/* ── type scale ───────────────────────────────────────────────────────────── */
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 16px; }
h1 .muted { font-size: 15px; font-weight: 500; letter-spacing: 0; }
h2 { font-size: 15px; font-weight: 650; margin: 0 0 12px; letter-spacing: -.005em; }
h3 { font-size: 13px; font-weight: 650; margin: 16px 0 8px; color: var(--ink-2); }
.muted { color: var(--muted); }

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 200px; }
/* stat-tile rows: equal columns that stay on one line down to ~2-up on phones */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stats > .panel { min-width: 0; margin-bottom: 0; }
.stats { margin-bottom: 16px; }
.stat-tile { cursor: pointer; box-shadow: var(--shadow-sm), 0 1px 0 rgb(15 23 42 / .04);
  transition: box-shadow .14s, border-color .14s, transform .14s; }
.stat-tile:hover { box-shadow: 0 6px 18px rgb(15 23 42 / .10), 0 2px 4px rgb(15 23 42 / .06); border-color: var(--brand-100); transform: translateY(-2px); }
.stat-tile:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* Zones as buttons across the page: count, name, odds. Lift on hover like the tiles above. */
/* The zones count TRACKED bills, so they sit inside a labelled frame that says so. */
.zone-group { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 18px 12px 12px; margin: 4px 0 18px; }
.zone-group-label { position: absolute; top: -9px; left: 14px; padding: 0 8px; background: var(--bg);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zone-row { display: flex; gap: 10px; }
.zone-btn { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding: 9px 14px 9px 16px;
  border-radius: 12px; border: 1px solid rgb(15 23 42 / .06); box-shadow: var(--shadow-sm), 0 1px 0 rgb(15 23 42 / .04);
  cursor: pointer; transition: box-shadow .14s, transform .14s, filter .14s; position: relative; }
.zone-btn::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 3px 3px 0; background: var(--dot); }
.zone-btn:hover { text-decoration: none; transform: translateY(-2px); filter: brightness(.98);
  box-shadow: 0 6px 18px rgb(15 23 42 / .10), 0 2px 4px rgb(15 23 42 / .06); }
.zone-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.zone-n { font-size: 20px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.zone-name { font-size: 14px; font-weight: 700; }
.zone-odds { margin-left: auto; font-size: 11.5px; font-weight: 500; opacity: .75; white-space: nowrap; }
.zone-group + .zone-group { margin-top: 0; }
.side-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.side-for { background: var(--action); }
.side-against { background: var(--dont_fight); }
.zone-note { margin: -8px 0 16px 4px; }
.slice-banner { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px;
  background: var(--brand-50); color: var(--brand-800); font-size: 13.5px; }
.slice-banner .btn-quiet { margin-left: auto; }
@media (max-width: 640px) {
  .zone-row { flex-wrap: wrap; gap: 8px; }
  .zone-btn { flex: 1 1 40%; padding: 8px 11px 8px 14px; }
  .zone-n { font-size: 18px; }
  .zone-odds { margin-left: 0; flex-basis: 100%; white-space: normal; }
  /* Action Zone rows become cards on a phone, so the action item is never scrolled off-screen. */
  .action-head { flex-wrap: wrap; gap: 2px 12px; margin: 0 -14px 8px; padding: 7px 14px; }
  .wc-head { margin: 0 -14px 6px; padding: 7px 14px; }
  .wc-note { display: none; }
  .ob-plot { height: 200px; margin-left: 40px; margin-right: 8px; }
  .ob-plot .ob-x-minor { display: none; }   /* phone width: Companion, then every 20 points */
  .ob-zoom { display: none; }
  .strat-head { margin: 0 -14px 8px; padding: 7px 14px; flex-wrap: wrap; gap: 2px 12px; }
  .ob-legend { padding-left: 40px; padding-right: 8px; }
  .ob-key { margin-left: 0; flex-basis: 100%; }
  .work-btns { margin-left: 0; }
  .act { white-space: normal; flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .action-head .fresh-pill { display: none; }
  .action-head h2 { white-space: nowrap; }
  .panel table.work-table, .panel table.work-table tbody { display: block; overflow: visible; }
  .panel table.work-table colgroup, .panel table.work-table thead { display: none; }
  .panel table.work-table tr { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 3px 10px; padding: 10px 6px; border-bottom: 1px solid var(--line-soft); }
  .panel table.work-table td { display: block; padding: 0; border: 0; min-width: 0; }   /* min-width 0: a nowrap title must ellipsize, not widen the row */
  .panel table.work-table td:nth-child(3) { grid-column: 1 / 3; }
  .panel table.work-table td.info-cell { grid-column: 1 / 3; padding-top: 2px; }
  .panel table.work-table td.act-cell { grid-column: 1 / 3; }
  .panel table.work-table td.bill-num { padding-left: 8px; }
}
.stat-red   { background: #fef2f2; border-color: #fecaca; }
.stat-red .score { color: #b91c1c; }
.stat-green { background: #f0fdf4; border-color: #bbf7d0; }
.stat-green .score { color: #15803d; }
.stat-amber { background: #fffbeb; border-color: #fde68a; }
.stat-amber .score { color: #b45309; }
/* position mix inside the Tracked tile: For green / other gray / Against red */
.seg-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin-top: 8px; background: var(--line-soft); }
.seg { display: block; height: 100%; }
.seg-for { background: var(--action); }
.seg-other { background: #cbd5e1; }
.seg-against { background: var(--dont_fight); }
/* the hot queue — Lobby ASAP when leverage is firing */
.panel.hot { background: #fff7ed; border-color: #fdba74; border-left: 4px solid #ea580c; }
.panel.hot h2 { color: #9a3412; }
/* urgency inside the Action Zone table */
tr.urgent { background: #fffbeb; }
tr.urgent:hover { background: #fef3c7; }
.chip-urgent { display: inline-block; background: #fde68a; color: #92400e; border-radius: 999px; padding: 1.5px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
/* Lobby-ASAP rows merged into the Action Zone — the hottest thing on the page */
tr.hot-row { background: #ffedd5; }
tr.hot-row:hover { background: #fed7aa; }
.chip-hot { display: inline-block; background: #ea580c; color: #fff; border-radius: 999px; padding: 1.5px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: help; }
/* whip-state pills in Upcoming Committee Votes */
.pill { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.pill-gray  { background: var(--line-soft); color: var(--muted); }
.pill-amber { background: #fde68a; color: #92400e; }
.pill-green { background: #bbf7d0; color: #15803d; }
/* Action Zone status pills. A vote pill opens that committee's whip; its inner pill is the whip count. */
.pill-cell { line-height: 2; }
.chip-vote { display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px 1px 10px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700); font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid var(--brand-100); }
.chip-vote:hover { text-decoration: none; background: var(--brand-100); }
.chip-vote.soon { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.chip-vote .pill { height: 18px; min-width: 22px; font-size: 11px; padding: 0 6px; }
.chip-muted { display: inline-block; background: var(--line-soft); color: var(--muted); border-radius: 999px; padding: 1.5px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.work-table td { vertical-align: middle; }
/* Fixed layout: the folded "Show N more" rows are a second table, and with auto layout a long title
   there pushed its columns out of line with the first five. */
.work-table { table-layout: fixed; }
/* ACTION ZONE (2026-10-10): the panel that should shout "do something" — a green header band, a
   stronger frame and shadow, and every row's last cell an imperative. */
.panel.action-panel { border: 1.5px solid #6ee7b7; box-shadow: 0 12px 32px rgb(5 150 105 / .13), 0 2px 6px rgb(15 23 42 / .06); padding-top: 0; }
.action-head { display: flex; align-items: center; gap: 12px; margin: 0 -20px 8px; padding: 7px 20px;
  background: linear-gradient(100deg, #047857 0%, #059669 55%, #10b981 100%); border-radius: calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px) 0 0; }
.action-head h2 { margin: 0; color: #fff; font-size: 17px; letter-spacing: -.01em; }
.action-head .fresh-pill summary { padding: 2px 10px; }
/* Work item buttons: Start goes to where the work happens; Done closes an item with nowhere to go;
   Ignore hides one for a week. */
.work-table td.act-cell { text-align: right; white-space: nowrap; }
/* Long titles end in an ellipsis; the full title is the cell's tooltip. */
.work-table .title-cell { overflow: visible; }
.work-table .ellip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-person { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.act-person:hover { color: var(--brand-800); }
.work-btns { white-space: nowrap; }
.work-btns button { padding: 3px 10px; font-size: 12px; margin-left: 4px; line-height: 1.4; }
.work-btns button:first-child { margin-left: 0; }
.btn-start { background: #047857; color: #fff; border-color: #047857; font-weight: 700; }
.btn-start:hover { background: #065f46; border-color: #065f46; }
.btn-done { background: var(--action-50); color: #065f46; border-color: #a7f3d0; font-weight: 700; }
.btn-ignore { background: none; border-color: transparent; color: var(--muted); }
.btn-ignore:hover { color: var(--ink-2); background: var(--line-soft); }
/* What Changed: a light yellow band and the Action Zone's columns; the window is a pill like the Data pill. */
/* ⚠ NO overflow: hidden on these banded panels — it clipped the period menu (and the Data pill's).
   The band rounds its own top corners instead. */
.panel.wc-panel { padding-top: 0; border-color: #fde68a; }
.wc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 -20px 8px; padding: 7px 20px; background: #fef9c3; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.wc-head h2 { margin: 0; font-size: 17px; color: #713f12; letter-spacing: -.01em; }
.wc-pill summary { padding: 2px 10px; background: #fff; color: #854d0e; border-color: #fde68a; }
.wc-pill .fresh-menu { min-width: 170px; padding: 4px; }
.wc-opt { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); border-radius: 6px; }
.wc-opt:hover { background: var(--line-soft); }
.wc-opt.on { font-weight: 700; color: var(--ink); }
.wc-note { margin-left: auto; font-size: 12px; color: #a16207; }
.wc-table td.wc-when { color: var(--muted); font-size: 12.5px; }
/* Our Bills: progress across, chance of passage up; a dot per tracked bill, coloured by our side. */
.ob-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ob-head h2 { margin: 0 0 4px; }
.ob-key { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.ob-dot-k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; }
.ob-plot { position: relative; height: 230px; margin: 14px 14px 30px 46px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ob-band { position: absolute; left: 0; right: 0; background: rgb(16 185 129 / .08); }
/* 0–10: no companion — the dead zone, ended by a red line at "Companion". */
/* ⚠ pointer-events: none — the strip sits under the dots, and a hovered [data-tip] is lifted to
   z-index 95, so a strip with its own tooltip swallowed every dot inside it. The explanation lives on
   the "Companion" tick instead. */
.ob-plot .ob-nocomp { position: absolute; left: 0; top: 0; bottom: 0; background: rgb(220 38 38 / .07); border-right: 1.5px solid #dc2626; pointer-events: none; }
.ob-x-comp { color: #dc2626; font-weight: 700; cursor: help; }
.ob-zoom { color: var(--muted); font-weight: 400; }
.ob-h { position: absolute; left: 0; right: 0; border-top: 1px dashed #e2e8f0; }
.ob-ytick { position: absolute; left: -42px; width: 36px; text-align: right; transform: translateY(50%); font-size: 11px; color: var(--muted); }
.ob-xtick { position: absolute; top: 100%; margin-top: 6px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
/* ⚠ .ob-plot scoping outranks the later generic [data-tip] { position: relative } rule */
.ob-plot .ob-dot { display: block; position: absolute; width: 13px; height: 13px; margin: 0 0 -6.5px -6.5px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgb(15 23 42 / .18); cursor: pointer; transition: transform .1s; }
.ob-plot .ob-dot:hover { transform: scale(1.35); }
/* a bigger target than the dot itself — a finger, not a cursor, on a phone */
.ob-plot .ob-dot::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
/* hollow = odds IF a companion is filed (no companion yet, before the deadline) */
.ob-plot .ob-dot.ob-if { background: var(--panel); border: 2.5px solid; box-shadow: none; }
.ob-plot .ob-dot.ob-if.ob-for { border-color: var(--action); }
.ob-plot .ob-dot.ob-if.ob-against { border-color: #dc2626; }
.ob-plot .ob-dot.ob-if.ob-watch { border-color: #94a3b8; }
/* dead this session */
.ob-plot .ob-dot.ob-gone { background: #1f2937; box-shadow: 0 0 0 1px #111827; }
.ob-if-k { background: var(--panel); border: 2px solid var(--ink-2); width: 9px; height: 9px; box-sizing: border-box; }
.ob-gone-k { background: #1f2937; }
.ob-for { background: var(--action); }
.ob-against { background: #dc2626; }
.ob-watch { background: #94a3b8; }
.ob-panel [data-tip]:hover::after { font-size: 11.5px; line-height: 1.35; padding: 6px 9px; max-width: 300px; }
.ob-legend { display: flex; justify-content: space-between; padding: 0 14px 0 46px; font-size: 12px; color: var(--muted); }
/* Work rows: coloured by our side; Type = what kind of work (outline pill); Info = who, when, how much. */
.work-table tr.pos-row-for td:first-child { box-shadow: inset 4px 0 0 var(--action); }
.work-table tr.pos-row-against td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.work-table tr.pos-row-none td:first-child { box-shadow: inset 4px 0 0 #cbd5e1; }
.work-table tr.pos-row-for { background: rgb(5 150 105 / .035); }
.work-table tr.pos-row-against { background: rgb(220 38 38 / .035); }
.work-table td.bill-num { padding-left: 14px; }
.type-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1.5px solid; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--panel); }
.t-hot { border-color: #ea580c; color: #c2410c; }
.t-urgent { border-color: #d6a92a; color: #8a6116; }
.t-go { border-color: #34d399; color: #047857; }
.t-muted { border-color: #cbd5e1; color: var(--ink-2); }
.t-vote { border-color: #93c5fd; color: var(--brand-700); }
.info-text { font-size: 13px; color: var(--ink-2); }
.person-pill { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-100); font-size: 12px; font-weight: 700; }
.person-pill:hover { background: var(--brand-100); text-decoration: none; }
/* Bill page: why this score, in words */
.why-list { margin: 4px 0 8px; padding-left: 20px; }
.why-list li { margin: 3px 0; }
.why-list li.why-rule { font-weight: 700; color: #b91c1c; }
.why-sub { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
/* Strategy: a light blue band — calmer than the Action Zone's green, one pill style, blue buttons. */
.panel.strat-panel { padding-top: 0; border: 1.5px solid #bfdbfe; }
.strat-head { display: flex; align-items: center; gap: 12px; margin: 0 -20px 8px; padding: 7px 20px;
  background: linear-gradient(100deg, #bfdbfe 0%, #dbeafe 60%, #eff6ff 100%); border-radius: calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px) 0 0; }
.strat-head h2 { margin: 0; color: #1e3a8a; font-size: 17px; letter-spacing: -.01em; }
.strat-sub { color: #1d4ed8; font-size: 13px; font-weight: 600; }
.strat-panel .btn-start { background: #2563eb; border-color: #2563eb; }
.strat-panel .btn-start:hover { background: #1d4ed8; border-color: #1d4ed8; }
.strat-panel .btn-done { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.t-plan { border-color: #93c5fd; color: #1d4ed8; }
.t-bad { border-color: #f87171; color: #b91c1c; }
.action-sub { color: #d1fae5; font-size: 13px; font-weight: 600; }
.work-table .bill-num { font-weight: 600; transition: color .12s; }
.work-table tr:hover .bill-num { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.pos-for { color: #047857; font-weight: 600; }
.pos-against { color: #b91c1c; font-weight: 600; }
.pos-none { color: var(--muted); }
.act { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  white-space: nowrap; line-height: 1.35; border: 1px solid transparent; vertical-align: middle; }
.act em { font-style: normal; font-weight: 600; opacity: .78; }
.act-hot { background: #ea580c; color: #fff; }
.act-urgent { background: #fde68a; color: #92400e; }
.act-go { background: var(--action-50); color: #065f46; border-color: #a7f3d0; }
.act-muted { background: var(--line-soft); color: var(--ink-2); }
.act-vote { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); padding-right: 4px; }
.act-vote:hover { text-decoration: none; background: var(--brand-100); }
.act-vote.soon { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.act-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; line-height: 1; background: #fde68a; color: #92400e; }
.act-count.done { background: #bbf7d0; color: #15803d; }
.act-count.none { background: var(--line-soft); color: var(--muted); }
/* data-freshness pill next to the Summary title */
h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fresh-pill { position: relative; display: inline-block; font-size: 12.5px; font-weight: 600; }
.fresh-pill summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; }
.fresh-pill summary::-webkit-details-marker { display: none; }
.fresh-pill summary::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fresh-pill.ok summary   { background: #d1fae5; color: #065f46; }
.fresh-pill.warn summary { background: #fef3c7; color: #92400e; }
.fresh-pill.bad summary  { background: #fee2e2; color: #991b1b; }
.fresh-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 14px; }
.fresh-menu div { display: flex; justify-content: space-between; gap: 18px; padding: 4px 0; font-weight: 400; color: var(--ink-2); }
.fresh-menu b { font-weight: 650; color: var(--ink); }
/* zone pills are links now — keep them looking like pills, not underlined links */
a.badge:hover { text-decoration: none; filter: brightness(.96); }

/* ── instant styled tooltips (replaces native title=) ─────────────────────── */
[data-tip] { position: relative; }
h2[data-tip], [data-tip].muted { cursor: help; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 7px); z-index: 90;
  width: max-content; max-width: 340px;
  background: #16233a; color: #f1f5f9;
  font-size: 12px; font-weight: 450; line-height: 1.45;
  letter-spacing: 0; text-transform: none; text-align: left;
  padding: 8px 11px; border-radius: 8px; box-shadow: var(--shadow);
  pointer-events: none; white-space: normal;
}
/* headers and top-row cells drop the tip DOWN so it isn't clipped by the table edge */
th[data-tip]:hover::after, .stats [data-tip]:hover::after, .zone-row [data-tip]:hover::after { bottom: auto; top: calc(100% + 6px); }
[data-tip].tip-end:hover::after, [data-tip].tip-end:focus-visible::after { left: auto; right: 0; }
/* A hovered element lifts above its neighbours, or its tooltip can slide under the next card — the
   tiles' hover lift (a transform) makes each one its own stacking layer. */
[data-tip]:hover, [data-tip]:focus-visible { z-index: 95; }
/* anything in the last three table columns anchors its tip to the RIGHT edge so it
   renders on-screen instead of running off the viewport */
th:nth-last-child(-n+3)[data-tip]:hover::after,
td:nth-last-child(-n+3)[data-tip]:hover::after,
td:nth-last-child(-n+3) [data-tip]:hover::after { left: auto; right: 0; }
.panel table { overflow: visible; }
/* checkboxes inside labels stay inline and small (inputs default to width:100%) */
label input[type="checkbox"] { width: auto; margin: 0; }
label.check { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 13.5px; }

/* ── icon buttons (research star/check/queue toggle) ──────────────────────── */
.icon-btn { padding: 3px 9px; font-size: 15px; line-height: 1.3; }
.icon-btn.star-on { color: #f59e0b; border-color: #fcd34d; background: #fffbeb; }
.icon-btn.active { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); }

/* ── month calendar ───────────────────────────────────────────────────────── */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cal-title { font-size: 16px; font-weight: 700; min-width: 150px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; text-align: center; padding: 2px 0; }
.cal-cell { min-height: 86px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 5px 6px; background: var(--panel); font-size: 12px; }
.cal-cell.other { opacity: .4; }
.cal-cell.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-cell .d { font-weight: 650; color: var(--ink-2); }
.cal-chip { display: block; background: var(--brand-50); color: var(--brand-700); border-radius: 5px; padding: 1px 6px; margin-top: 3px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip:hover { background: var(--brand-100); text-decoration: none; }

/* stat tiles: big tabular number over a small uppercase label */
.score {
  font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.score + .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-top: 2px; }

/* ── controls ─────────────────────────────────────────────────────────────── */
button {
  font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink-2); cursor: pointer;
  transition: background .12s, border-color .12s;
}
button:hover { background: var(--line-soft); border-color: #d3dae3; }
button.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
button.primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input, select, textarea {
  font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: 100%; background: var(--panel); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-100); border-color: var(--brand); }
label { display: block; font-size: 12.5px; font-weight: 550; color: var(--ink-2); margin: 10px 0 4px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; align-items: center; }
.toolbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.toolbar select, .toolbar input { width: auto; }

/* ── tables ───────────────────────────────────────────────────────────────── */
table {
  width: 100%; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px;
  overflow: hidden; font-variant-numeric: tabular-nums;
}
.panel table { border: 0; border-radius: 0; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; background: #fafbfc; }
.panel th { background: transparent; border-bottom: 1px solid var(--line); }
tr[data-action] { cursor: pointer; }
tr[data-action]:hover { background: var(--brand-50); }

/* ── badges / chips ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2.5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, currentColor); flex: none; }
/* Zone colours (2026-10-09, David): only Danger and Action get loud colours — they are the ones that
   need someone. Don't Fight is grey (leave it), Monitor a muted yellow, Certain a dim slate. */
.zone-dont_fight { background: #f1f2f4; color: #4b5563; --dot: #9ca3af; }
.zone-danger     { background: #fee2e2; color: #991b1b; --dot: #dc2626; }
.zone-action     { background: #d1fae5; color: #065f46; --dot: var(--action); }
.zone-monitor    { background: #fbf5dc; color: #7a5c12; --dot: #d1a73a; }
.zone-certain    { background: #e8ecf1; color: #475569; --dot: #64748b; }
/* A bill we hold no side on: plain odds words, no judgement colour. */
.badge.zone-plain { background: var(--line-soft); color: var(--ink-2); --dot: #94a3b8; }
.flag {
  display: inline-block; background: #fee2e2; color: #991b1b;
  border-radius: 6px; padding: 1.5px 8px; font-size: 12px; font-weight: 600; margin: 2px 5px 2px 0;
}

/* whip radios read as pills */
.pos-radio { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; cursor: pointer; }
/* ── WHO SAID THIS? BLUE = THE MODEL GUESSED, GREEN = A PERSON DECIDED (David, 2026-08) ──────────
   The auto-whip pre-fills most of a 90-row grid, so at a glance the team cannot tell what they
   actually know from what was assumed for them. Colour carries that, because it survives scanning
   in a way a small "predicted" badge does not.
   ⚠ GREEN MUST WIN. A row starts blue and turns green the moment a human touches it — and any
   position that came back from the database is green by definition, because somebody saved it.
   The failure that matters is a human decision rendered as a guess: it invites someone to
   re-litigate a call that was already made, or to discount a hard-won commitment. */
.pos-radio:has(input:checked) { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.whip-auto .pos-radio:has(input:checked) { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }
.whip-manual .pos-radio:has(input:checked) { border-color: var(--action); background: var(--action-50); color: var(--action); }
/* The legend has to be visible without hovering anything — the colours are meaningless otherwise. */
.whip-key { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; font-size: 12px; }
.whip-key i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; border: 2px solid var(--brand); }
.whip-key.is-manual i { border-color: var(--action); }

/* ── login ────────────────────────────────────────────────────────────────── */
.login { max-width: 360px; margin: 96px auto; box-shadow: var(--shadow); padding: 28px; }
.login h1 { font-size: 20px; margin: 0; }
.login-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.login-head .brand-mark { height: 36px; min-width: 36px; padding: 0 8px; font-size: 13px; border-radius: 10px; }
/* Users (Settings) and My account */
a.user { cursor: pointer; text-decoration: none; color: inherit; border-radius: 999px; padding: 2px 8px 2px 2px; }
a.user:hover { background: var(--line-soft); text-decoration: none; }
.users-table select { width: auto; height: 30px; padding: 2px 8px; font-size: 13px; }
.users-table tr.user-off td { color: var(--muted); }
.users-table td.act-cell { text-align: right; white-space: nowrap; }
.user-add { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.user-add label { margin-top: 0; }
.user-add input, .user-add select { height: 38px; margin: 0; }
.user-note { background: var(--action-50); border-color: #a7f3d0; }
.temp-pw { font-size: 14px; font-weight: 700; padding: 1px 6px; background: #fff; border: 1px solid var(--line); border-radius: 6px; user-select: all; }
.narrow-form { max-width: 360px; }
/* Settings → API keys */
.key-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.key-row input { margin: 0; height: 36px; }
.key-name .small { margin-top: 2px; }
.key-ok { color: #047857; font-weight: 600; }
@media (max-width: 760px) { .user-add, .key-row { grid-template-columns: 1fr; } .users-table td.act-cell { white-space: normal; } }
.error { color: var(--dont_fight); font-size: 13.5px; }

details > summary { cursor: pointer; }


/* ── BILL DETAIL: readability pass (2026-07m) ──────────────────────────────────────────────────
   The header had one h1 carrying "HB0001 — <120 characters of TN legal boilerplate>", which ran to
   four lines at heading size and pushed every live signal below the fold. Underneath it, three
   DIFFERENT kinds of information — a stall warning, a zone definition, and the bill summary — were
   all rendered as identical muted paragraphs, so nothing could be scanned. Fixes: the bill NUMBER
   is the heading (it is what people speak and search), the title is a clamped subtitle, live
   signals are boxed together, and the zone definition moved to a tooltip. */
/* ⚠ `flex: 1 1 auto` lets the long TN title set the flex BASIS, so the main column claimed its
   full content width (655px) and shoved the score block onto its own line at any viewport under
   ~900px — the score has to stay top-right, it is the first thing anyone looks at. `flex: 1 1 0`
   plus min-width:0 makes it shrink properly. nowrap keeps the two columns together until the
   mobile breakpoint deliberately stacks them. */
.bill-head .row { align-items: flex-start; gap: 20px; flex-wrap: nowrap; }
.bill-head-main { min-width: 0; flex: 1 1 0; }
.bill-id { font-size: 30px; line-height: 1.1; margin: 0 0 2px; letter-spacing: -0.01em; }
.bill-title { font-size: 15px; line-height: 1.45; margin: 0 0 8px; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bill-meta { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.bill-meta .sep { margin: 0 7px; opacity: .5; }
.bill-desc { font-size: 14px; line-height: 1.55; margin: 10px 0 0; }

/* Live signals — what CHANGED, grouped and set apart from the static summary. */
.signals { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 10px 0; }
.signals p { margin: 3px 0; font-size: 13px; line-height: 1.45; }
.signals p b { color: var(--ink); }

/* Score block: the number plus what it is a number OF. The page shows two probabilities — this
   bill and the pair — and an unlabelled 47% next to a PAIR 50% is the kind of ambiguity that makes
   people distrust both. */
.bill-score-block { flex: 0 0 130px; width: 130px; text-align: right; }
@media (max-width: 640px) {
  .bill-head .row { flex-wrap: wrap; }
  .bill-score-block { flex: 1 1 100%; width: auto; text-align: left; }
}
.bill-score-block .score-cap { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: -2px 0 6px; }

/* Gate table: numeric columns right-aligned so magnitudes line up, and LEVERAGE as a bar scaled to
   the best gate — 0.0857 against 0.0488 means nothing on sight, twice the bar does. The per-gate
   rationale used to occupy a full-width row under EVERY gate, doubling the table height; now only
   the recommended gate explains itself inline and the rest carry it as a row tooltip. */
.gate-table th.num, .gate-table td.num { text-align: right; white-space: nowrap; }
.gate-table .gate-name { font-weight: 600; }
.gate-table tr[title] { cursor: help; }
.gate-why td { padding-top: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.lev { height: 8px; min-width: 60px; background: var(--line); border-radius: 4px; overflow: hidden; }
.lev span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.hot-row .lev span { background: var(--danger); }

/* The House chain bar was accent-on-line and read as empty at low contrast. */
.pair-chain .bar { background: color-mix(in srgb, var(--line) 70%, transparent); }
.pair-chain-h { display: flex; align-items: center; gap: 6px; }

/* ⚠ THIS STYLESHEET HAS NO --accent OR --warn. The palette is --brand / --brand-700 for accent
   and --danger / --action / --monitor for status; text is --ink / --ink-2. A first pass wrote every
   bar fill as var(--accent), which resolves to NOTHING — so the House chain bar and four of the
   five leverage bars rendered fully transparent and read as empty tracks. Only the two written with
   a literal fallback showed up, which is exactly what made it look like a contrast problem rather
   than a missing variable. Check the :root block before reaching for a token. */

/* Grouped toolbar: labelled bands instead of thirteen equal-weight buttons. */
.toolbar-grouped { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toolbar-grouped .tb-label { font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-right: 2px; }
.toolbar-grouped .tb-div { width: 1px; align-self: stretch; background: var(--line); margin: 2px 8px; }
@media (max-width: 640px) { .toolbar-grouped .tb-div { display: none; }
  .toolbar-grouped .tb-label { flex-basis: 100%; margin-top: 6px; } }


/* ── COMPANION CHAINS (2026-07m) ───────────────────────────────────────────────────────────────
   David: "it's hard to know where I'm looking and see different information. More lines, or boxes,
   or colors, and probably less text." The header was one undifferentiated column of prose. Now it
   reads top-to-bottom as: WHAT it is (number + title) → HOW LIKELY (headline + the two chains that
   produce it) → WHAT CHANGED (signals) → WHAT IT DOES (summary), each band separated by a rule.
   The pair score is the headline because it is the number most indicative of passage; each
   chamber's own score is a subordinate row, so the size hierarchy matches the trust hierarchy. */
.chains { margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.chain-row { display: grid; grid-template-columns: 54px 68px 1fr 44px 64px;
  align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.chain-row + .chain-row { border-top: 1px solid var(--line-soft); }
.chain-ch { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chain-bill { font-weight: 600; text-decoration: none; color: var(--brand); }
.chain-bar { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.chain-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.chain-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.chain-flag { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--danger); text-align: right; }
.is-binding .chain-bar i { background: var(--danger); }
.is-binding .chain-pct { color: var(--danger); }
.chain-missing { opacity: .55; }

/* Bands. Each kind of information gets a rule above it so the eye can find the boundary — the
   single biggest readability win here, and cheaper than adding more boxes. */
.bill-head .signals { border-left: 3px solid var(--danger); background: #fffbf5;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 8px 12px; margin: 12px 0 0; }
.bill-head .bill-desc { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px;
  color: var(--ink-2); }
.flag-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.bill-score-block .score-cap { max-width: 130px; margin-left: auto; }

@media (max-width: 640px) {
  .chain-row { grid-template-columns: 48px 62px 1fr 40px; }
  .chain-flag { display: none; }
}

/* The combined score as a hairline crossing BOTH chamber bars — the pair number located against
   its two inputs, so "the Senate is dragging us" is a glance rather than an arithmetic exercise.
   Extends a couple of px past the bar so it reads as a crossing line, not a bar segment. */
.chain-bar { position: relative; overflow: visible; }
.chain-bar i { position: relative; z-index: 0; }
.chain-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
  background: var(--ink); opacity: .75; border-radius: 1px; z-index: 2; cursor: help; }

/* The crossing line takes the ZONE's colour, so the pair number carries its own verdict: green
   means this is a fight worth having, red means don't. One glance gives position AND judgement. */
.chain-mark.zone-action     { background: var(--action); opacity: 1; }
.chain-mark.zone-danger     { background: #dc2626; opacity: 1; }
.chain-mark.zone-monitor    { background: #d1a73a; opacity: 1; }
.chain-mark.zone-dont_fight { background: #9ca3af; opacity: 1; }
.chain-mark.zone-certain    { background: #64748b; opacity: 1; }

/* ── SCORE DRIVERS ─────────────────────────────────────────────────────────────────────────────
   The factor bars from the original Electron UI, finally real (GBM path attribution).
   ⚠ Bar length is the feature's SHARE of total movement, never a point value — contributions are
   log-odds and converting one in isolation to "points of probability" would be a lie. */
.drivers { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.driver { display: grid; grid-template-columns: 190px 1fr 16px 42px; align-items: center; gap: 10px; font-size: 13px; }
.driver-label { color: var(--ink-2); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-label.plain { text-transform: none; }   /* plain-English labels (reasons.js) are sentences */
.driver-bar { height: 7px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.driver-bar i { display: block; height: 100%; background: var(--action); border-radius: 4px; }
.driver-down .driver-bar i { background: var(--dont_fight); }
.driver-dir { text-align: center; color: var(--action); font-weight: 700; }
.driver-down .driver-dir { color: var(--dont_fight); }
.driver-share { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

/* ── SPONSOR STRATEGY: the three plays, visually separated so they cannot be confused for each
   other. Blocking someone and steering a bill to them are opposite instructions. */
.play { border-left: 3px solid var(--line); padding: 8px 0 8px 12px; margin: 12px 0; }
.play-h { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; }
.play-block   { border-left-color: var(--dont_fight); }
.play-slots   { border-left-color: var(--monitor); }
.play-steer   { border-left-color: var(--danger); }
.play-unknown { border-left-color: var(--line); opacity: .85; }
.play-row { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; flex-wrap: wrap; }
.play-name { font-weight: 600; min-width: 150px; }
/* A play-row that opens something (the bill-page Similar Bills list) — the whole row is the
   target, same as a clickable table row, so it needs to look clickable. */
.play-row[data-action] { cursor: pointer; border-radius: 6px; padding: 5px 6px; margin: 0 -6px; }
.play-row[data-action]:hover { background: var(--line-soft); }
.play-row[data-action] .play-name { color: var(--brand-700); }
.panel-quiet { opacity: .9; }
.chip-good { background: var(--brand-50); color: var(--action); padding: 2px 8px; border-radius: 10px; font-size: 11px; }
/* Bottom cross-party band (<=10%). Deliberately QUIET rather than alarming — it marks a member not
   worth spending the meeting on, which is a reason to look elsewhere, not a warning. Louder than
   .muted so it is findable while scanning a 94-row grid, softer than .chip-urgent so it never reads
   as "danger". Never let this become a red badge: the data does not support an absolute. */
.chip-dead { background: var(--line-soft); color: var(--ink-2); padding: 2px 8px; border-radius: 10px; font-size: 11px; text-decoration: underline dotted; }

/* ── NEXT GATE: an alert about THIS bill, not a static ladder ─────────────────────────────────
   The five-row table was identical on every fresh House bill and ate the best space on the page.
   What varies is which gate is next; the full map moved behind a details toggle. */
.panel-alert { border-left: 4px solid var(--danger); }
.next-gate-lead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.next-gate-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--danger); font-weight: 700; }
.next-gate-name { font-size: 18px; font-weight: 700; }
.next-gate-meta { font-size: 13px; color: var(--muted); }
.gate-more { margin-top: 10px; }
.gate-more summary { cursor: pointer; font-size: 12px; color: var(--muted); }


/* ── POSITION DROPDOWN ─────────────────────────────────────────────────────────────────────────
   Sits between the title block and the score. Every signal in the app is gated on position, so it
   must be reachable without scrolling — but once answered it should take a chip's worth of space,
   not a full-width band. Colour-coded when set so a glance tells you where the org stands. */
.bill-position-slot { flex: 0 0 auto; align-self: flex-start; padding-top: 4px; }
.pos-select { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); cursor: pointer;
  appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.pos-select.pos-none { color: var(--muted); }
.pos-select.pos-support      { background-color: #d1fae5; border-color: #a7f3d0; color: #065f46; }
.pos-select.pos-oppose       { background-color: #fee2e2; border-color: #fecaca; color: #991b1b; }
.pos-select.pos-support_amend{ background-color: #fef3c7; border-color: #fde68a; color: #92400e; }
.pos-select.pos-neutral      { background-color: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.pos-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700); }
.pos-chip.pos-oppose { background: #fee2e2; color: #991b1b; }
.pos-chip.pos-support { background: #d1fae5; color: #065f46; }

/* The description is now the ONLY subtitle — give it room to breathe rather than clamping it to
   two lines the way the legal title needed. */
.bill-title { -webkit-line-clamp: 3; }

/* ── CURRENT STATUS | NEXT MOVEMENT ────────────────────────────────────────────────────────────
   Two different questions — where is this bill now, and where does it go next — that were stacked
   as two full-width bands. Side by side they read as one glance instead of two. The left column is
   narrow because "Severely Stalled" is a label; the right is wide because it carries an action. */
.status-row { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 16px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); align-items: start; }
.status-h { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; margin-bottom: 6px; }
.status-now { border-left: 3px solid var(--danger); padding-left: 10px; }
.status-now p { margin: 2px 0; font-size: 13px; line-height: 1.4; }
.status-next { border-left: 3px solid var(--brand); padding-left: 12px; }
.nm-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--danger); font-weight: 700; }
.nm-name { font-size: 17px; font-weight: 700; line-height: 1.2; }
.nm-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.nm-whip { font-size: 12px; padding: 4px 10px; }
@media (max-width: 720px) { .status-row { grid-template-columns: 1fr; } }

/* An adopted amendment invalidated the stance — the blank "Position" must not read as neglect. */
.repos-flag { display: block; font-size: 11px; font-weight: 700; color: #92400e;
  background: #fef3c7; border-radius: 6px; padding: 3px 8px; margin-bottom: 4px; text-align: center; }
.pos-select.pos-stale { border-color: #fde68a; background-color: #fffbeb; color: #92400e; }

/* ── MEETINGS: the index inverted from bills to people ───────────────────────────────────────── */
/* The member list was 280-360px: two-word names wrapped and the "why now" chip ran past the panel. */
.meet-grid { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 16px; align-items: start; }
.meet-grid .chip-hot, .meet-grid .chip-urgent { white-space: normal; }
.contact-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contact-row { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.contact-row:last-child { border-bottom: 0; }
.rel-gavel { font-weight: 700; color: var(--danger); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.rel-sponsor { font-weight: 600; color: var(--brand-700); font-size: 12px; }
.rel-cosponsor, .rel-whipped { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .meet-grid { grid-template-columns: minmax(0, 1fr); } }
/* grid items default to min-width:auto, so a wide table inside widened the whole page on phones */
.meet-grid > *, .lab-grid > * { min-width: 0; }

/* ── BUILD-A-BILL: the pre-filing scratchpad ─────────────────────────────────────────────────── */
.lab-grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 16px; align-items: start; }
.lab-form { display: flex; flex-direction: column; gap: 10px; }
.lab-form button { align-self: flex-start; }
.lab-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lab-form input, .lab-form select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (max-width: 900px) { .lab-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── INTERIM BOARD ───────────────────────────────────────────────────────────────────────────── */
.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; min-width: 130px; box-shadow: var(--shadow-sm); }
.tile-n { font-size: 26px; font-weight: 800; line-height: 1.1; }
.tile-l { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile-warn { border-color: #fde68a; background: #fffbeb; }
.tile-warn .tile-n { color: #92400e; }
.lab-check { flex-direction: row !important; align-items: center; gap: 6px; }

/* Provenance on a whip position: who said so and when. A stance that moved carries a marker, since
   an automatic update from a logged contact is exactly the case someone will want to question. */
.prov { cursor: help; border-bottom: 1px dotted var(--line); }
.prov-moved { color: var(--danger); font-weight: 700; }

/* Rows that navigate should say so. These were already clickable via data-action; nothing about
   them looked interactive, so nobody clicked. */
.row-link { cursor: pointer; }
.row-link:hover { background: var(--brand-50); }
.leg-link { color: var(--brand); text-decoration: none; font-weight: 600; }
.row-link:hover .leg-link { text-decoration: underline; }
/* TCA column: numeric, compact, never the thing that wraps a row. */
/* ⚠ nowrap WITHOUT a width cap let a long reference list ("39·17, 43·27, 4…") run under the Status
   column. Cap it and ellipsize; the cell's title attribute carries the full list. */
.tca-cell { white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }

/* Bills list column sizing. Auto-layout gave Subject and TCA near-equal width and pushed Zone and
   Position off the right edge — the two columns a lobbyist scans for. Subject gets the room; TCA is
   a compact numeric reference that should never wrap. */
.bills-table { table-layout: fixed; width: 100%; }
.bills-table th:nth-child(1), .bills-table td:nth-child(1) { width: 92px; }        /* Bill */
.bills-table th:nth-child(2), .bills-table td:nth-child(2) { width: auto; }        /* Subject — takes the slack */
.bills-table th:nth-child(3), .bills-table td:nth-child(3) { width: 84px; }        /* TCA */
.bills-table th:nth-child(4), .bills-table td:nth-child(4) { width: 86px; }        /* Status */
.bills-table th:nth-child(5), .bills-table td:nth-child(5) { width: 70px; }        /* Score */
.bills-table th:nth-child(6), .bills-table td:nth-child(6) { width: 104px; }       /* Zone */
.bills-table th:nth-child(7), .bills-table td:nth-child(7) { width: 96px; }        /* Position */
.bills-table td:nth-child(2) { white-space: normal; }
@media (max-width: 900px) {
  .bills-table th:nth-child(3), .bills-table td:nth-child(3) { display: none; }    /* TCA first to go */
}

/* IMPROVE THIS BILL'S ODDS — the cosponsor ask queue. A numbered worklist, not a data table:
   three names in order, each with the two buttons that advance it. `.pos-btn` is reused for the
   buttons because it already exists and already matches the position control's affordance —
   inventing a `.btn-sm` here would render an UNSTYLED button, the same trap as `--accent` and
   `pill-muted` elsewhere in this file's history. */
.ask-list { margin: .4rem 0 .2rem; padding-left: 1.3rem; }
.ask-list li { margin: .35rem 0; line-height: 1.5; }
.ask-list .pos-btn { margin-left: .35rem; }

/* A leadership title is relationship context, not a score input — styled as a standing badge, with
   former posts visibly de-emphasised rather than hidden. */
.lead-tag { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px;
  border-radius: 999px; background: var(--brand-50); color: var(--brand-700); vertical-align: middle; }
.lead-tag.lead-former { background: var(--line-soft); color: var(--muted); font-weight: 600; }

/* The member's current post in their career ladder — the row that is true today. */
tr.lead-now td { background: var(--brand-50); font-weight: 600; }

/* Lobbying registry — size bands are ORDINAL (disclosed compensation is a capped band, not a figure). */
.size-major   { font-weight: 700; color: var(--brand-700); }
.size-mid     { font-weight: 600; color: var(--ink); }
.size-small   { color: var(--ink-2); }
.size-unknown { color: var(--muted); font-style: italic; }
.lob-size { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.lob-table td { vertical-align: middle; }
.lob-toggles { white-space: nowrap; text-align: right; }
/* Segmented toggles: one joined control per question instead of five free-floating buttons a row
   (a 25-row panel carried 125 full-size buttons). Unselected options are quiet; the mark the team
   actually made is the only filled segment. */
.seg-ctl { display: inline-flex; vertical-align: middle; }
.seg-ctl + .seg-ctl { margin-left: 8px; }
.lob-toggles .seg-ctl .pos-btn { margin: 0; padding: 3px 10px; font-size: 12px; font-weight: 500; border-radius: 0;
  background: transparent; color: var(--muted); }
.lob-toggles .seg-ctl .pos-btn + .pos-btn { margin-left: -1px; }
.lob-toggles .seg-ctl .pos-btn:first-child { border-radius: 999px 0 0 999px; }
.lob-toggles .seg-ctl .pos-btn:last-child { border-radius: 0 999px 999px 0; }
.lob-toggles .seg-ctl .pos-btn:hover { color: var(--ink); background: var(--line-soft); }
.lob-toggles .seg-ctl .pos-btn.lob-on { position: relative; z-index: 1; color: var(--action); }
.lob-table td { padding-top: 7px; padding-bottom: 7px; }
.lob-fold > summary { list-style: none; }
.lob-fold > summary::-webkit-details-marker { display: none; }
.lob-fold > summary .lob-size::after { content: ' — show'; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--brand-700); }
.lob-fold[open] > summary .lob-size::after { content: ' — hide'; }
/* A mark the team has actually made must not look like a guess — same rule as the whip grid. */
.pos-btn.lob-on { background: var(--action-50); border-color: var(--action); font-weight: 700; }

/* Remove-tag affordance inside a pill. Our topics are pill-green; the state's are pill-gray, and
   the two must stay visually distinct — one is editable, the other is the published record. */
.pill-x { border: 0; background: none; cursor: pointer; padding: 0 0 0 4px; font-weight: 700;
  color: inherit; opacity: .55; line-height: 1; }
.pill-x:hover { opacity: 1; }

/* ── Intervention log (2026-08) — the two-click treatment ledger ── */
.ivn-btn { border: 1px solid var(--border, #ccc3); background: transparent; border-radius: 6px;
  cursor: pointer; padding: 1px 6px; font-size: 0.9em; opacity: 0.55; transition: all .15s; }
.ivn-btn:hover { opacity: 1; transform: scale(1.12); }
.ivn-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 6px;
  background: #8881_; background: rgba(128,128,128,0.06); border-radius: 8px; }
.ivn-lbl { font-size: 0.75em; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-left: 4px; }
.ivn-chip { border: 1px solid rgba(128,128,128,0.35); background: transparent; border-radius: 999px;
  padding: 3px 10px; cursor: pointer; font-size: 0.85em; transition: all .12s; }
.ivn-chip:hover { border-color: rgba(128,128,128,0.7); }
.ivn-chip.ivn-on { background: #4f83e3; border-color: #4f83e3; color: #fff; }
.ivn-chip.ivn-good.ivn-on { background: #2e9e5b; border-color: #2e9e5b; }
.ivn-chip.ivn-bad.ivn-on { background: #c0392b; border-color: #c0392b; }
.ivn-chip.ivn-pulse { animation: ivnpulse .5s 2; }
@keyframes ivnpulse { 50% { box-shadow: 0 0 0 4px rgba(79,131,227,0.35); } }
.ivn-note { flex: 1; min-width: 180px; border: 1px solid rgba(128,128,128,0.3); border-radius: 6px; padding: 4px 8px; font-size: 0.85em; }
.ivn-save { padding: 4px 14px; }
.ivn-flash { color: #2e9e5b; font-weight: 600; animation: ivnfade .4s; }
@keyframes ivnfade { from { opacity: 0; transform: translateY(3px); } }
.ivn-item { position: relative; padding: 6px 0 6px 22px; border-left: 2px solid rgba(128,128,128,0.2); margin-left: 7px; }
.ivn-dot { position: absolute; left: -7px; top: 11px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(128,128,128,0.3); }
.ivn-dot-good { background: #2e9e5b; } .ivn-dot-bad { background: #c0392b; }
.ivn-dot-held { background: #b9b9b9; } .ivn-dot-none { background: transparent; }
.ivn-arrow { font-size: 0.85em; padding: 1px 8px; border-radius: 999px; background: rgba(128,128,128,0.12); }
.ivn-quote { font-style: italic; opacity: .8; margin: 2px 0; }
.ivn-moved { color: #2e9e5b; }
.small { font-size: 0.85em; }

/* Voting-position tags on the committee whip grid (app.js idealTagsHtml). Quiet by design: they are
   context for a conversation, not a call — the loud colours belong to the prediction column. */
.pos-tags { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.pos-tag { display: inline-block; font-size: 10.5px; line-height: 1.5; padding: 0 6px; border-radius: 9px;
           border: 1px solid var(--line); color: var(--ink-2); background: transparent; white-space: nowrap;
           font-variant-numeric: tabular-nums; cursor: help; }
.pos-tag-rebel { border-color: var(--danger); color: #92400e; }
.pos-tag-independent { border-color: #f3c98b; color: #92400e; }
.pos-tag-leadership { border-color: var(--action); color: var(--action); }
.pos-tag-drift { border-style: dashed; }
/* A new member's provisional position (position-words.js provisionalChip): dashed = an estimate, not a measurement. */
.pos-tag-new { border-style: dashed; border-color: #94a3b8; color: var(--muted); font-weight: 500; }
h2 .pos-tag-new { font-size: 11px; vertical-align: 2px; }
/* Funder context (app.js fundTagHtml). A side colour only when the team marked one; an unmarked
   interest stays as quiet as the position tags. */
.fund-favor { border-color: var(--action); color: #047857; background: var(--action-50); }
.fund-against { border-color: var(--dont_fight); color: #b91c1c; background: #fef2f2; }
.fund-split { border-color: var(--brand); color: var(--brand-700); background: var(--brand-50); }
.fund-summary { margin-top: 12px; }
.fund-summary > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.fund-summary .pos-tag { cursor: default; }

/* Floor-vote projection panel (app.js projectionPanelHtml). Two chamber columns; the bar is the
   summary, the ordered list is the action, the full roster stays folded. */
.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 4px; }
.proj-col { min-width: 0; }
.proj-col h3 { margin: 0 0 4px; }
.proj-col h4 { margin: 14px 0 6px; font-size: 13px; }
.proj-head { margin: 0 0 8px; }
.proj-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line-soft); gap: 2px; }
.proj-seg { display: block; min-width: 4px; flex-basis: 0; cursor: help; }
/* the zone palette's own hues (CVD-validated, see :root) — yes/persuadable/no read the same app-wide */
.proj-yes { background: var(--action); }
.proj-mid { background: var(--danger); }
.proj-no { background: var(--dont_fight); }
.proj-none { background: #cbd5e1; }
.proj-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; color: var(--ink-2); }
.proj-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -0.5px; }
.proj-asks { margin: 0; padding-left: 20px; }
.proj-asks li { margin-bottom: 8px; }
.proj-ask { display: flex; align-items: baseline; gap: 6px; }
.proj-p { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; cursor: help; }
.proj-all { margin-top: 10px; }
.proj-all summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
.proj-all table { margin-top: 6px; }
@media (max-width: 760px) { .proj-grid { grid-template-columns: minmax(0, 1fr); } }
.proj-all td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proj-early { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: #fffbeb; color: #78350f; font-size: 13px; }

/* ── 2026-10 polish pass ───────────────────────────────────────────────────────────────────────── */
/* Reference buttons (lookups) are quieter than the work buttons beside them. */
button.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); font-weight: 500; padding: 7px 10px; }
button.btn-quiet:hover { background: var(--line-soft); border-color: var(--line); }
/* A link that is an action (Export CSV) looks like a small button, not like more of the heading. */
a.btn-link { display: inline-block; font-size: 13px; font-weight: 550; letter-spacing: 0; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink-2); }
a.btn-link:hover { background: var(--line-soft); text-decoration: none; }
/* Bill header facts wrap between facts, never inside one. */
.bill-meta .meta-item { white-space: nowrap; }
.proj-sub { margin: -2px 0 6px; }

/* ── Phones ──────────────────────────────────────────────────────────────────────────────────────
   The header was a single nowrap row (brand + six nav items + user + Log out ≈ 850px), so on a phone
   the browser zoomed the whole app out to fit it. Now it wraps: brand and Log out on top, nav below. */
.nav-more-menu a.phone-only { display: none; }
@media (max-width: 760px) {
  header { flex-wrap: wrap; height: auto; padding: 8px 12px 6px; row-gap: 2px; }
  /* One nav row on a phone: Calendar and Legislators move into More, and the data pill goes. */
  header nav .nav-link.desk-only { display: none; }
  .nav-more-menu a.phone-only { display: block; }
  .dash-top .fresh-pill { display: none; }
  header nav { order: 3; flex: 1 1 100%; flex-wrap: wrap; margin-left: -6px; }
  .nav-link { padding: 6px 9px; }
  .user-name { display: none; }
  .brand { margin-right: 6px; }
  #sub { scroll-margin-top: 104px; }
  main { padding: 18px 14px 40px; }
  h1 { font-size: 21px; }
  .panel { padding: 14px 14px; }
  /* Wide tables scroll inside their panel instead of widening the page. */
  .panel table, main > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel table th, .panel table td, main > table th, main > table td { padding: 8px 9px; }
}
@media (max-width: 640px) {
  /* Bill header: number and title get the full width; the position chip drops beneath them. */
  .bill-head-main { flex: 1 1 100%; }
  .bill-position-slot { padding-top: 0; }
  .bill-id { font-size: 26px; }
  .bill-score-block .score-cap { margin-left: 0; }
}

/* ── Money map + organisation money panels (2026-10 polish) ─────────────────────────────────────── */
.money-table { table-layout: fixed; width: 100%; }
/* break-word, not anywhere: "anywhere" lets the browser split ordinary words to shrink a column
   ("Republic|an"); break-word only breaks a word that cannot fit on a line by itself. */
.money-table td { vertical-align: middle; overflow-wrap: break-word; }
.money-table td:last-child { white-space: nowrap; }
.money-table td.num, .money-table th.num { text-align: right; white-space: nowrap; }
.money-table tr[data-action] { cursor: pointer; }
.mbar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--line-soft);
  vertical-align: middle; margin-right: 8px; overflow: hidden; }
.mbar i { display: block; height: 100%; border-radius: 3px; }
.mbar-camp i { background: var(--action); }
.mbar-lob i { background: var(--brand); }
.mval { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-note { margin: -4px 2px 16px; }
.money-sub { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.money-sub:first-of-type { margin-top: 4px; }
.money-sub .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.table-fold > summary { margin-top: 8px; font-size: 13px; color: var(--brand-700); list-style: none; }
.table-fold > summary::-webkit-details-marker { display: none; }
.table-fold > summary::before { content: '▸ '; }
.table-fold[open] > summary::before { content: '▾ '; }
.table-fold[open] > summary { margin-bottom: 0; }
.subj-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.subj-row:last-child { border-bottom: 0; }
.subj-row > div { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 760px) {
  .money-table { table-layout: auto; }
  .money-table .mbar { display: none; }
  .stats .score { font-size: 24px; }
  .subj-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* "Add topic": the picker takes the room, the button stays button-sized (.row stretched both to 50%). */
.tag-row { gap: 8px; align-items: center; margin-top: 8px; flex-wrap: nowrap; }
.tag-row > select { flex: 0 1 360px; min-width: 0; }
.tag-row > button { flex: 0 0 auto; min-width: 0; }

/* ── BILL PAGE (2026-10-10 rework) ────────────────────────────────────────────────────────────────
   Colour carries meaning, not decoration: our position (green For · red Against · amber For if
   amended · blue Watching), the odds read through our side, and signals tinted by whether they
   help us. Everything else stays quiet so those stand out. */
.bp-head-row { display: flex; gap: 20px; align-items: flex-start; }
.bp-head-main { flex: 1 1 0; min-width: 0; }
h1.bp-title { display: block; font-size: 26px; line-height: 1.2; margin: 0 0 6px; }
.bp-ids, .bp-sponsors { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.bp-num { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bp-ids .sep, .bp-sponsors .sep { margin: 0 8px; color: #cbd5e1; }
.bp-desc { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.bp-alert { color: #b91c1c; font-weight: 600; }
.bp-score-block { flex: none; text-align: right; cursor: help; }
.bp-score { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bp-z-action { color: var(--action); }
.bp-z-danger { color: var(--danger); }
.bp-z-monitor { color: var(--monitor); }
.bp-z-certain { color: #64748b; }
.bp-score-cap { font-size: 12px; color: var(--muted); margin: 4px 0 6px; }
.bp-head .chain-flag { color: var(--danger); font-weight: 700; }

.bp-status { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bp-h { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.bp-h-bad { color: #b91c1c; }
.bp-h-good { color: #047857; }
.bp-st { list-style: none; margin: 0; padding: 0; }
.bp-st li { margin: 0 0 5px; padding-left: 15px; position: relative; font-size: 14px; color: var(--ink-2); }
.bp-st li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.bp-st li.bp-st-good::before { background: var(--action); }
.bp-st li.bp-st-warn::before { background: var(--danger); }
.bp-st li.bp-st-bad::before { background: #dc2626; }
.bp-st li.bp-st-hot { color: #9a3412; }
.bp-st li.bp-st-hot::before { background: #ea580c; }
.bp-status-next { background: var(--brand-50); border-radius: var(--radius-sm); padding: 10px 14px; }
.bp-next-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-700); }
.bp-next-name { font-size: 17px; font-weight: 700; margin: 2px 0; }
.bp-next-meta { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.bp-next-btn { margin: 0 8px 4px 0; }

/* the action bar: position = tracking */
.bp-act { border-left: 5px solid #cbd5e1; }
.bp-act-support { border-left-color: var(--action); }
.bp-act-oppose { border-left-color: #dc2626; }
.bp-act-support_amend { border-left-color: var(--danger); }
.bp-act-monitor { border-left-color: var(--monitor); }
.bp-act-none { border-left-color: #f59e0b; background: #fffbeb; border-color: #fde68a; }
.bp-act-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.bp-pos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bp-pos .bp-h { margin: 0; }
.bp-seg { display: inline-flex; flex-wrap: wrap; }
.bp-pos-btn { border-radius: 0; margin: 0; font-weight: 600; padding: 7px 14px; background: var(--panel); }
.bp-pos-btn + .bp-pos-btn { margin-left: -1px; }
.bp-pos-btn:first-child { border-radius: 999px 0 0 999px; }
.bp-pos-btn:last-child { border-radius: 0 999px 999px 0; }
.bp-pos-btn.on { position: relative; z-index: 1; color: #fff; }
.bp-pos-support.on { background: var(--action); border-color: var(--action); }
.bp-pos-oppose.on { background: #dc2626; border-color: #dc2626; }
.bp-pos-support_amend.on { background: var(--danger); border-color: var(--danger); }
.bp-pos-monitor.on { background: var(--monitor); border-color: var(--monitor); }
.bp-pos-support:not(.on):hover { color: #047857; background: var(--action-50); }
.bp-pos-oppose:not(.on):hover { color: #b91c1c; background: #fef2f2; }
.bp-pos-support_amend:not(.on):hover { color: #92400e; background: #fffbeb; }
.bp-pos-monitor:not(.on):hover { color: #1d4ed8; background: #eff6ff; }
.bp-link { background: none; border: 0; color: var(--muted); padding: 4px; font-size: 13px; text-decoration: underline; }
.bp-link:hover { background: none; color: #b91c1c; }
.bp-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bp-owner label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.bp-owner select { width: auto; }
.bp-saved { font-size: 12px; color: #047857; font-weight: 700; min-width: 44px; }
.bp-untracked { margin: 10px 0 0; color: #92400e; font-weight: 600; }
.bp-repos { margin: 10px 0 0; color: #b91c1c; font-weight: 600; }
.bp-todo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bp-todo ul { list-style: none; margin: 0; padding: 0; }
.bp-todo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; }
.bp-todo-item + .bp-todo-item { border-top: 1px solid var(--line-soft); }
.bp-todo-info { flex: 1 1 220px; font-size: 14px; }
.bp-act-more { justify-content: flex-start; margin-top: 12px; }
.bp-drop > summary, .bp-more > summary { list-style: none; display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; font-size: 13.5px; background: var(--panel); cursor: pointer; }
.bp-drop > summary::-webkit-details-marker, .bp-more > summary::-webkit-details-marker { display: none; }
.bp-drop > summary::after, .bp-more > summary::after { content: ' ▾'; color: var(--muted); }
.bp-drop[open] > summary, .bp-more[open] > summary { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.bp-drop[open] { flex-basis: 100%; }
.bp-drop-body { margin-top: 10px; }
.bp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); vertical-align: middle; }

/* tools */
.bp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; align-items: center; }
.bp-tool { color: var(--brand-700); border-color: var(--brand-100); font-weight: 600; }
.bp-tool:hover { background: var(--brand-50); border-color: var(--brand); }
.bp-more { position: relative; }
.bp-menu { position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; min-width: 230px; }
.bp-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; width: 100%; font-weight: 500; }
.bp-menu button:hover { background: var(--line-soft); }
.bp-menu a:hover { text-decoration: none; }

/* signals */
.bp-sigs { padding-top: 10px; padding-bottom: 10px; }
.bp-sig { margin: 4px 0; padding: 7px 12px; border-left: 4px solid var(--line); border-radius: 0 6px 6px 0; font-size: 14px; background: var(--bg); }
.bp-sig[data-tip] { cursor: help; }
.bp-sig-warn { border-left-color: var(--danger); background: #fffbeb; }
.bp-sig-good { border-left-color: var(--action); background: var(--action-50); }

/* why this score */
.bp-why-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }
.bp-why-list { margin: 0 0 6px; padding-left: 18px; }
.bp-why-list li { margin: 3px 0; }
.bp-why-bad li::marker { color: #dc2626; }
.bp-why-good li::marker { color: var(--action); }
.bp-why-rule { font-weight: 700; color: #b91c1c; }
.bp-weights { margin-top: 10px; }
.bp-weights > summary { color: var(--brand-700); font-size: 13px; font-weight: 600; }

/* folded sections */
.bp-fold { padding-top: 0; padding-bottom: 0; }
.bp-fold > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 15px 0; cursor: pointer; }
.bp-fold > summary::-webkit-details-marker { display: none; }
.bp-fold > summary::before { content: '▸'; color: var(--muted); font-size: 13px; display: inline-block; transition: transform .15s; }
.bp-fold[open] > summary::before { transform: rotate(90deg); }
.bp-fold > summary h2 { margin: 0; }
.bp-fold-meta { color: var(--muted); font-size: 13px; }
.bp-fold-body { padding-bottom: 18px; }

/* round 2 (2026-10-10, David): back link in the header, Track by the odds, Our bill, per-chamber
   next votes with the whip button beside them, Notes/Log as one-at-a-time panels, cosponsor asks. */
.bp-back { font-weight: 600; color: var(--brand-700); white-space: nowrap; }
.bp-back:hover { text-decoration: none; color: var(--brand); }
.bp-score-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.bp-track-row { display: flex; align-items: center; gap: 8px; }
.bp-track { font-weight: 700; padding: 7px 18px; border-radius: 999px; }
.bp-track-off { color: var(--muted); background: var(--panel); font-weight: 600; padding: 5px 12px; font-size: 13px; }
.bp-track-off:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
.bp-tracked { font-size: 13px; font-weight: 700; color: #047857; }
.bp-ours { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; padding: 2px 10px; }
h1.bp-title .bp-ours { position: relative; top: -3px; }
.bp-ours-sm { padding: 0 6px; font-size: 11px; }
.bp-ours-btn { font-weight: 700; border-radius: 999px; padding: 6px 14px; color: #92400e; border-color: #fcd34d; background: var(--panel); }
.bp-ours-btn:hover { background: #fffbeb; }
.bp-ours-btn.on { background: #fef3c7; border-color: #f59e0b; }
.bp-act-neutral { border-left-color: #64748b; }
.bp-pos-neutral.on { background: #64748b; border-color: #64748b; }
.bp-pos-neutral:not(.on):hover { color: #334155; background: #f1f5f9; }
.bp-watching { margin: 10px 0 0; color: #1d4ed8; font-weight: 600; }
.bp-status-solo { grid-template-columns: 1fr; }
.bp-h-sub { margin-top: 12px; }
.bp-recent { list-style: none; margin: 0; padding: 0; }
.bp-recent li { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; color: var(--ink-2); padding: 3px 0; }
.bp-recent-d { flex: none; width: 50px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bp-recent-ch { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 1px 5px; background: var(--line-soft); color: var(--muted); }
.bp-recent-a { min-width: 0; }
.bp-next-gate { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bp-next-gate + .bp-next-gate { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--brand-100); }
.bp-next-text { min-width: 0; }
.bp-next-gate .bp-next-meta { margin-bottom: 0; }
.bp-next-gate .bp-next-btn { flex: none; margin: 0; }
.bp-next-kind { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.bp-next-none { margin: 4px 0 0; color: var(--ink-2); }
.bp-status-next .gate-more { margin-top: 10px; }
.bp-drops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bp-drop-btn { font-weight: 600; font-size: 13.5px; padding: 6px 14px; }
.bp-drop-btn::after { content: ' ▾'; color: var(--muted); }
.bp-drop-btn.on { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.bp-drop-btn.on::after { content: ' ▴'; }
.bp-drop-panel { margin-top: 4px; }
.ask-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.ask-who { min-width: 0; }
.ask-btns { display: inline-flex; gap: 6px; }
.ask-btn { padding: 4px 12px; font-size: 13px; font-weight: 600; border-radius: 999px; }
.ask-yes { color: #047857; border-color: #6ee7b7; }
.ask-yes:hover { background: var(--action-50); }
.ask-state { font-size: 13px; color: #1d4ed8; font-weight: 600; }
.ask-list li { margin: 6px 0; }
.ask-wins { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.ask-wins ul { margin: 0; padding-left: 18px; }
.bl-track { text-align: right; white-space: nowrap; width: 1%; }
.bl-track-btn { padding: 3px 12px; font-size: 12.5px; font-weight: 600; border-radius: 999px; }
.bl-track-on { color: #047857; border-color: #6ee7b7; background: var(--action-50); }
.bl-track-on:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }

/* round 3 (2026-10-10, David): Track LEFT of the odds; the page in five blocks — Main info · Our
   position · To-Do · Lobby · Research — each holding its own buttons, folds and opened panes. */
.bp-score-side { flex-direction: row; align-items: center; gap: 16px; }
.bp-track-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bp-block-h { font-size: 18px; margin: 0 0 10px; }
.bp-pos .bp-block-h { margin: 0; font-size: 15px; letter-spacing: .02em; }
.bp-block-h-big { font-size: 24px; margin-bottom: 12px; }
.bp-block .bp-tools { margin: 0 0 4px; }
.bp-tool-link { display: inline-flex; }
.bp-tool-link:hover { text-decoration: none; }
.bp-todo-block { border-top: 4px solid var(--brand); }
.bp-todo-list { list-style: none; margin: 0; padding: 0; }
.bp-todo-list .bp-todo-item { padding: 9px 0; font-size: 15px; }
.bp-todo-none { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.bp-todo-sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bp-todo-sub h3 { margin: 0 0 4px; font-size: 15px; }
.bp-log { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding: 12px; background: var(--bg); border-radius: var(--radius-sm); }
.bp-log-h { font-weight: 700; font-size: 14px; }
.bp-log select { width: auto; }
.bp-log input { flex: 1 1 260px; min-width: 0; width: auto; }
.bp-sub:empty { display: none; }
.bp-sub { margin-top: 12px; }
.bp-sub > .panel { margin-bottom: 0; }
.bp-fold-inner { border-top: 1px solid var(--line); }
.bp-fold-inner > summary { padding: 12px 0; }
.bp-fold-inner > summary h3 { margin: 0; font-size: 15px; }
.bp-fold-inner .bp-fold-body { padding-bottom: 12px; }
.bp-fold-inner .bp-fold-body > .panel { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.bp-fold-inner .bp-fold-body > .panel > h2:first-child { display: none; }
.bp-block .bp-sigs { margin-top: 12px; }
.bp-ai { margin-top: 12px; padding: 10px 14px; background: var(--bg); border-radius: var(--radius-sm); }
.bp-ai p { margin: 4px 0; }
.bp-next-btns { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.bp-next-btn-2 { margin: 0; background: var(--panel); color: var(--brand-700); border-color: var(--brand-100); font-weight: 600; }

@media (max-width: 640px) {
  .bp-score-side { align-items: flex-start; flex-direction: column; gap: 8px; }
  .bp-track-col { order: 2; flex-direction: row; gap: 10px; }
  .bp-next-btns { flex-direction: row; flex-wrap: wrap; }
  .bp-next-gate { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bp-head-row { flex-direction: column; gap: 8px; }
  .bp-score-block { text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .bp-score { font-size: 36px; }
  h1.bp-title { font-size: 22px; }
  .bp-status { grid-template-columns: 1fr; }
  .bp-seg { gap: 6px; }
  .bp-pos-btn, .bp-pos-btn:first-child, .bp-pos-btn:last-child { border-radius: 999px; padding: 6px 12px; }
  .bp-pos-btn + .bp-pos-btn { margin-left: 0; }
}

/* ── Bill text (bill page Text section) and Search text (2026-10-10) ── */
.bt-doc { border: 1px solid var(--line-soft); border-radius: 8px; margin: 8px 0; background: var(--panel); }
.bt-doc > summary { cursor: pointer; padding: 8px 12px; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.bt-doc > summary::-webkit-details-marker { display: none; }
.bt-doc > summary::before { content: '▸'; color: var(--muted); }
.bt-doc[open] > summary::before { content: '▾'; }
.bt-pdf { margin-left: auto; }
.bt-text { white-space: pre-wrap; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.55; color: var(--ink);
  max-height: 70vh; overflow: auto; padding: 10px 16px 14px; border-top: 1px solid var(--line-soft); }
.bt-text mark, .ts-snip mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
.ts-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.ts-form input { flex: 1 1 320px; margin: 0; height: 40px; }
.ts-form select { width: auto; margin: 0; height: 40px; }
.ts-count { font-weight: 650; margin: 0 0 6px; }
.ts-hit { padding: 10px 6px 10px 14px; border-bottom: 1px solid var(--line-soft); box-shadow: inset 4px 0 0 #cbd5e1; }
.ts-hit.pos-row-for { box-shadow: inset 4px 0 0 var(--action); }
.ts-hit.pos-row-against { box-shadow: inset 4px 0 0 #dc2626; }
.ts-head { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ts-head:hover .bill-num { color: var(--brand-700); text-decoration: underline; }
.ts-n { margin-left: auto; }
.ts-doc { cursor: pointer; margin: 6px 0 0; padding: 6px 10px; border-radius: 6px; background: var(--line-soft); font-size: 13.5px; line-height: 1.45; }
.ts-doc:hover { background: var(--brand-50); }
.ts-kind { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-right: 6px; text-transform: uppercase; letter-spacing: .03em; }
/* Persuasion plan (2026-10-10) */
.pp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-head h2 { margin: 0 0 4px; }
.pp-count { font-size: 15px; margin: 6px 0 12px; }
.pp-gap { color: #b45309; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pp-card { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; background: var(--panel); border-top: 3px solid #cbd5e1; }
.pp-card p { margin: 2px 0 8px; }
.pp-amend { border-top-color: #2563eb; }
.pp-work { border-top-color: #059669; }
.pp-skip { border-top-color: #94a3b8; opacity: .9; }
.pp-card-h { display: flex; align-items: center; gap: 8px; }
.pp-n { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--line-soft); font-size: 12px; font-weight: 700; text-align: center; }
.pp-list { display: flex; flex-direction: column; gap: 4px; }
.pp-m { display: flex; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--line-soft); color: inherit; font-size: 13.5px; text-decoration: none; cursor: pointer; }
.pp-m:hover { background: var(--brand-50); text-decoration: none; }
.pp-read { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pp-m.pp-against .pp-read { color: #b91c1c; }
.pp-m.pp-with .pp-read { color: #047857; }
.pp-watch { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; }
.pp-watch .pp-list { flex-direction: row; flex-wrap: wrap; margin-top: 6px; }
.pp-safe { margin-top: 10px; }
.pp-safe > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.pp-safe .pp-list { flex-direction: row; flex-wrap: wrap; margin-top: 6px; }
.pp-foot { margin-top: 12px; }
.pp-more > summary { cursor: pointer; color: var(--brand-700); font-size: 13px; margin-top: 6px; }
.pp-more .pp-list { margin-top: 4px; }
@media (max-width: 760px) { .bt-text { font-size: 13.5px; padding: 8px 10px; } .ts-n { margin-left: 0; flex-basis: 100%; } }