/* The Record — design system
   Premium editorial-app aesthetic: deep navy plane, warm amber accent for
   highlights/CTAs/active states, a muted teal-green reserved for verified/
   primary-source semantics. Dark-only by design (no light theme). Party
   affiliation is intentionally shown as a neutral text badge, not
   color-coded red/blue, per this app's "no campaign aesthetics" principle. */

:root {
  color-scheme: dark;
  --page-plane: #0e1a20;
  --surface: #16252c;
  --surface-raised: #1c2e36;
  --ink: #f4efe4;
  --ink-secondary: #a9b8bc;
  --ink-muted: #79898d;
  --gridline: #23343b;
  --border: rgba(244, 239, 228, 0.09);
  --border-strong: rgba(244, 239, 228, 0.17);

  --accent: #e3a857;
  --accent-ink: #1c1305;
  --accent-soft: rgba(227, 168, 87, 0.14);

  --teal: #55b98a;
  --teal-soft: rgba(85, 185, 138, 0.14);

  --status-good: #55b98a;
  --status-warning: #e3a857;
  --status-serious: #cc7a3d;
  --status-critical: #d1584f;
  --status-muted: #79898d;
  --status-info: #7ea6c4;

  --badge-primary: #55b98a;
  --badge-news: #8ea2a8;
  --badge-expert: #7ea6c4;
  --badge-statement: #e3a857;
  --badge-opinion: #a79a86;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; }
body {
  background: var(--page-plane);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 650; line-height: 1.2; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1, .section-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0 0 1em; color: var(--ink-secondary); }
ul, ol { margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
::selection { background: var(--accent-soft); }

/* ---------- Layout shells ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
#main { min-height: 60vh; }

/* ---------- Data mode banner ---------- */
.data-mode-banner {
  background: var(--accent-soft);
  color: var(--ink-secondary);
  font-size: 13px;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.data-mode-banner a { color: var(--accent); text-decoration: underline; }
.data-mode-banner-live {
  background: color-mix(in srgb, var(--status-good) 14%, transparent);
  color: var(--ink);
}
.data-mode-banner code {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  padding: 1px 5px; border-radius: 4px; font-size: 12px;
}
.data-mode-banner-dismiss {
  background: none; border: none; cursor: pointer; color: var(--ink-muted);
  font-size: 16px; line-height: 1; padding: 2px 6px; flex-shrink: 0;
}
.data-mode-banner.is-hidden { display: none; }

/* ---------- Top brand strip ----------
   Intentionally icon-free: just the wordmark. All real navigation lives in
   the bottom tab bar below, on every screen size — this is identity only. */
.app-topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page-plane) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.app-topbar-inner { display: flex; align-items: center; justify-content: center; height: 44px; }
.app-topbar-brand {
  font-family: var(--font-serif); font-size: 15px; font-weight: 600;
  letter-spacing: .01em; color: var(--ink);
}

/* ---------- Bottom tab bar (primary navigation, all screen sizes) ---------- */
.bottom-nav {
  display: flex;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
  align-items: stretch;
  justify-content: center;
}
/* Five tabs now, so each one gets less room than it did with four. The
   basis drops and labels are allowed to ellipsis rather than wrap or push
   the row wider than the screen — "Government" is the long one and it has
   to survive a 320px phone. */
.bottom-nav-inner { display: flex; width: 100%; max-width: 360px; margin: 0 auto; justify-content: center; gap: 0; }
.bottom-nav-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; flex: 1 1 0; min-width: 0; padding: 6px 2px 4px;
  color: var(--ink-muted); border: none; background: transparent; cursor: pointer;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.bottom-nav-tab svg { flex-shrink: 0; }
/* "Government" is the widest label and it has to fit un-truncated inside a
   fifth of a 320px screen, so the type steps down with the viewport rather
   than ellipsising. Ellipsis is kept as a last-resort backstop only — a tab
   label reading "Governme..." looks broken in a way a slightly smaller one
   doesn't. */
.bottom-nav-tab span { font-size: 10px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 389px) { .bottom-nav-tab span { font-size: 9.5px; } }
@media (max-width: 344px) {
  .bottom-nav-tab span { font-size: 9px; letter-spacing: -0.03em; }
  .bottom-nav-tab { padding-left: 0; padding-right: 0; }
  .bottom-nav { padding-left: 2px; padding-right: 2px; }
}
.bottom-nav-tab-active { color: var(--accent); }

body.has-bottom-nav { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); margin-top: 72px; padding-top: 40px; }
.site-footer-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 24px 32px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
}
.footer-brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 16px; }
.footer-tagline { font-size: 13.5px; max-width: 34ch; margin-top: 6px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--ink-secondary); font-size: 13.5px; }
.footer-links a:hover { color: var(--ink); }
.site-footer-bottom {
  border-top: 1px solid var(--border); padding: 16px 24px; font-size: 12.5px; color: var(--ink-muted);
  max-width: var(--max-width); margin: 0 auto;
}

/* ---------- Back link (subpages only — main tabs never show one) ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-secondary); margin-bottom: 10px; }
.back-link:hover { color: var(--ink); }

/* ---------- Hero / Page headers ---------- */
.page-hero { padding: 40px 0 8px; }
.page-hero h1 { font-size: 32px; }
.page-hero .lede { font-size: 16px; max-width: 62ch; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; margin-bottom: 10px; display: block; }

/* ---------- Sections ---------- */
.page-section { padding: 36px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.section-title { font-size: 21px; }
.section-subtitle { font-size: 14px; color: var(--ink-muted); margin: 2px 0 0; }
.section-link { font-size: 13.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
a.card:hover, .card.card-hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); }
.card-flush { padding: 0; overflow: hidden; }

.story-card { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.story-card .story-eyebrow { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-muted); position: relative; z-index: 2; }
.story-card h3 { font-size: 17px; }
.story-card h3 a { color: var(--ink); }
.story-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* stretched link: makes the whole card clickable without nesting <a> in <a> */
.story-card p { font-size: 14px; margin: 0; }
.story-card .story-meta { margin-top: auto; font-size: 12.5px; color: var(--ink-muted); display: flex; align-items: center; gap: 10px; padding-top: 6px; position: relative; z-index: 2; pointer-events: none; }

.card-featured { grid-column: span 2; }
@media (max-width: 900px) { .card-featured { grid-column: span 2; } }
@media (max-width: 620px) { .card-featured { grid-column: span 1; } }
.card-featured h3 { font-size: 22px; }

/* ---------- Badges / tags ---------- */
.source-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--ink-secondary); white-space: nowrap;
}
.source-badge:hover { border-color: var(--border-strong); }
.source-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.source-badge-name { color: var(--ink-muted); font-weight: 500; }
.badge-primary .source-badge-dot { background: var(--badge-primary); }
.badge-news .source-badge-dot { background: var(--badge-news); }
.badge-expert .source-badge-dot { background: var(--badge-expert); }
.badge-statement .source-badge-dot { background: var(--badge-statement); }
.badge-opinion .source-badge-dot { background: var(--badge-opinion); }

.party-tag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--border-strong); color: var(--ink-secondary); background: var(--border);
}

.verdict-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.verdict-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.verdict-supported { background: color-mix(in srgb, var(--status-good) 14%, transparent); color: var(--status-good); }
.verdict-supported::before { background: var(--status-good); }
.verdict-mostly-supported { background: color-mix(in srgb, var(--status-info) 14%, transparent); color: var(--status-info); }
.verdict-mostly-supported::before { background: var(--status-info); }
.verdict-misleading { background: color-mix(in srgb, var(--status-warning) 16%, transparent); color: var(--status-warning); }
.verdict-misleading::before { background: var(--status-warning); }
.verdict-unsupported { background: color-mix(in srgb, var(--status-serious) 16%, transparent); color: var(--status-serious); }
.verdict-unsupported::before { background: var(--status-serious); }
.verdict-false { background: color-mix(in srgb, var(--status-critical) 14%, transparent); color: var(--status-critical); }
.verdict-false::before { background: var(--status-critical); }
.verdict-unverifiable { background: var(--border); color: var(--ink-muted); }
.verdict-unverifiable::before { background: var(--ink-muted); }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-secondary); }
.pill-branch { background: var(--surface-raised); }

/* ---------- Buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.btn:hover { background: var(--border); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--page-plane); border-color: var(--ink); }
.btn-primary:hover { opacity: .88; background: var(--ink); }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-accent:hover { opacity: .9; background: var(--accent); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--border); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

input[type="text"], input[type="search"], textarea, select {
  /* iOS Safari auto-zooms the page on focus for any form field under 16px —
     that's the unwanted "zoom in when you tap anything" behavior. Keeping
     every field at >=16px stops that without touching the viewport's own
     zoom/scale settings, so pinch-to-zoom still works whenever the user
     actually wants it. */
  font-family: inherit; font-size: 16px; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input:focus, textarea:focus, select:focus, .btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
label { font-size: 13px; font-weight: 600; color: var(--ink-secondary); display: block; margin-bottom: 6px; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--gridline); }
.timeline li { position: relative; padding: 0 0 22px 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.timeline-date { font-size: 12px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.timeline-event { font-size: 14.5px; color: var(--ink); margin-top: 2px; }

/* ---------- Stage tracker (bill lifecycle) ---------- */
.stage-tracker { list-style: none; display: flex; align-items: center; margin: 18px 0; flex-wrap: wrap; gap: 0; }
.stage { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.stage:not(:last-child)::after { content: ""; width: 22px; height: 1px; background: var(--gridline); margin: 0 8px; }
.stage-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--gridline); background: var(--surface); flex-shrink: 0; }
.stage-done { color: var(--ink); }
.stage-done .stage-dot { border-color: var(--status-good); background: var(--status-good); }
.stage-current { color: var(--accent); }
.stage-current .stage-dot { border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 700px) { .stage-tracker { flex-direction: column; align-items: flex-start; gap: 10px; } .stage:not(:last-child)::after { display: none; } }

/* ---------- Vote bar ---------- */
.vote-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--gridline); }
.vote-bar-yea { background: var(--status-good); }
.vote-bar-nay { background: var(--status-critical); }
.vote-bar-other { background: var(--ink-muted); }
.vote-legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--ink-secondary); margin-top: 8px; flex-wrap: wrap; }
.vote-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vote-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ---------- Stat tiles ---------- */
.stat-tile { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; background: var(--surface); }
.stat-tile .stat-label { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-tile .stat-value { font-size: 26px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-tile .stat-asof { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; }

/* ---------- Disputed / Who's saying what ---------- */
.dispute-block { border-left: 3px solid var(--status-warning); padding: 4px 0 4px 16px; margin-bottom: 18px; }
.dispute-topic { font-weight: 650; font-size: 14.5px; margin-bottom: 10px; }
.position-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gridline); }
.position-row:first-of-type { border-top: none; }
.position-holder { font-weight: 650; font-size: 13.5px; min-width: 160px; flex-shrink: 0; }
.position-text { font-size: 13.5px; color: var(--ink-secondary); }

/* ---------- "What Both Sides Are Saying" (party-grouped voices) ----------
   Intentionally no red/blue color coding — see the "no campaign aesthetics"
   note at the top of this file. Columns are distinguished by a plain text
   label only. */
.voices-col-title { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 10px; }

.statement-card { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--gridline); }
.statement-card:first-child { border-top: none; padding-top: 0; }
.statement-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--border); color: var(--ink-secondary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.statement-quote { font-size: 15px; color: var(--ink); margin: 2px 0 6px; }
.statement-quote.is-summary::before { content: "Summary — not a direct quote: "; font-weight: 700; color: var(--status-warning); }
.statement-meta { font-size: 12.5px; color: var(--ink-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Tables ---------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); padding: 8px 12px; border-bottom: 1px solid var(--border-strong); }
table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--gridline); vertical-align: top; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--border); }

/* ---------- Fact check ---------- */
.factcheck-form { display: flex; gap: 10px; }
.factcheck-form textarea { min-height: 84px; resize: vertical; }
.evidence-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gridline); }
.evidence-row:first-child { border-top: none; }
.evidence-icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.evidence-for { background: color-mix(in srgb, var(--status-good) 16%, transparent); color: var(--status-good); }
.evidence-against { background: color-mix(in srgb, var(--status-critical) 14%, transparent); color: var(--status-critical); }
.evidence-context { background: var(--border); color: var(--ink-secondary); }

/* ---------- AI Assistant chat ---------- */
.ai-shell { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.ai-sidebar { position: sticky; top: 76px; }
/* Below 850px the two columns stack into one (sidebar above chat). A sticky
   sidebar only makes sense side-by-side — stacked, it scrolls out of its own
   row and floats on top of the chat panel below it, silently intercepting
   clicks on the message list and the Ask button. That's what looked like a
   "won't scroll properly" glitch. Switching it to normal static flow on
   narrow screens removes the overlap entirely. */
@media (max-width: 850px) {
  .ai-shell { grid-template-columns: 1fr; }
  .ai-sidebar { position: static; top: auto; }
}
.ai-chat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; height: 70vh; min-height: 480px; }
.ai-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ai-msg { max-width: 82%; padding: 12px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; }
.ai-msg p:last-child { margin-bottom: 0; }
.ai-msg-user { align-self: flex-end; background: var(--ink); color: var(--page-plane); border-bottom-right-radius: 4px; }
.ai-msg-assistant { align-self: flex-start; background: var(--border); color: var(--ink); border-bottom-left-radius: 4px; }
.ai-msg-assistant a { color: var(--accent); text-decoration: underline; }
.ai-mode-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ink-muted); margin-bottom: 6px; display: block; }
.ai-input-row { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); }
.ai-input-row textarea { min-height: 46px; max-height: 140px; resize: none; }
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; }
.ai-suggestion-btn { text-align: left; font-size: 13px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--ink-secondary); }
.ai-suggestion-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); animation: blink 1.2s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Follow / save buttons ---------- */
.follow-btn, .save-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-secondary); cursor: pointer;
}
.follow-btn[data-active="true"], .save-btn[data-active="true"] { background: var(--ink); color: var(--page-plane); border-color: var(--ink); }

/* ---------- Empty state ---------- */
.empty-state { padding: 40px 20px; text-align: center; color: var(--ink-muted); font-size: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }

/* ---------- Search ---------- */
.search-hero { padding: 48px 0 8px; }
.search-input-lg { font-size: 18px; padding: 16px 18px; }
.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--gridline); }
.result-row:first-child { border-top: none; }
.result-type { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-weight: 700; }

/* ---------- Solid accent card (Daily Brief teaser, Desk persona card) ---------- */
.card-accent {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
}
.card-accent .eyebrow, .card-accent h2, .card-accent h3 { color: var(--accent-ink); }
.card-accent p { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }
.card-accent .section-link, .card-accent .text-link { color: var(--accent-ink); font-weight: 700; text-decoration: underline; }
.text-link { font-size: 13.5px; font-weight: 700; color: var(--accent); }

/* ---------- Search bar (News page) ---------- */
.search-bar-wrap { position: relative; margin: 18px 0; }
.search-bar-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.search-bar-wrap input[type="search"] { padding-left: 42px; font-size: 16px; }

/* ---------- Tool / list rows (Desk page) ---------- */
.tool-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 4px;
  border-top: 1px solid var(--gridline);
}
.tool-row:first-child { border-top: none; }
.tool-row-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-soft); color: var(--teal);
}
.tool-row-body { flex: 1; min-width: 0; }
.tool-row-title { font-weight: 650; font-size: 14.5px; color: var(--ink); }
.tool-row-sub { font-size: 13px; color: var(--ink-muted); margin-top: 1px; }
.tool-row-chevron { color: var(--ink-muted); flex-shrink: 0; }

/* ---------- Hub entry cards (Government) ---------- */
.entry-card { display: flex; flex-direction: column; gap: 4px; }
.entry-card .eyebrow { margin-bottom: 2px; }

/* ---------- Utility ---------- */
.muted { color: var(--ink-muted); }
.mt-0 { margin-top: 0; }
.text-sm { font-size: 13.5px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.divider { height: 1px; background: var(--gridline); margin: 24px 0; border: none; }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.sticky-col { position: sticky; top: 76px; }
.prose p { color: var(--ink); font-size: 15.5px; }
.prose h3 { font-size: 16.5px; margin-top: 24px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-secondary); background: var(--surface); font-family: inherit; cursor: pointer; }
.skeleton { animation: pulse 1.4s ease-in-out infinite; background: var(--border); border-radius: var(--radius-sm); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Chip active state ----------
   Used by the roll-call chamber filter and the Voices side filter. Active is
   marked with the amber accent, matching every other active state in the app. */
.chip-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 650; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--border-strong); }

/* ---------- Roll call votes ----------
   Deliberately plain. A roll call is a list of names and how each one voted;
   the only color used is the same yea/nay pair the vote bar already uses, and
   it is applied to the column heading rather than to members' names — no
   member is ever tinted by party or by how they voted. */
.party-total-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.party-total-table th, .party-total-table td { text-align: right; padding: 7px 8px; border-top: 1px solid var(--gridline); }
.party-total-table thead th { text-align: right; color: var(--ink-muted); font-weight: 600; font-size: 12.5px; border-top: none; }
.party-total-table th[scope="row"], .party-total-table thead th:first-child { text-align: left; color: var(--ink-secondary); }

.rollcall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .rollcall-grid { grid-template-columns: 1fr; } }
.rollcall-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; }
.rollcall-group-title { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.rollcall-yea { color: var(--status-good); }
.rollcall-nay { color: var(--status-critical); }
.rollcall-other { color: var(--ink-muted); }
.rollcall-count { color: var(--ink-muted); font-weight: 600; letter-spacing: 0; }
.rollcall-list { list-style: none; margin: 0; padding: 0; }
.rollcall-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--gridline); font-size: 13.5px; }
.rollcall-row:first-child { border-top: none; }
.rollcall-row a { font-weight: 600; }

/* ---------- A member's own voting record ---------- */
.voting-record-list { list-style: none; margin: 0; padding: 0; }
.voting-record-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--gridline); }
.voting-record-row:first-child { border-top: none; }
.voting-record-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voting-record-main a { font-weight: 600; font-size: 14px; }
.vote-position { flex: none; min-width: 78px; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid transparent; }
.vote-position-yea { color: var(--status-good); background: var(--teal-soft); }
.vote-position-nay { color: var(--status-critical); background: rgba(209, 88, 79, 0.14); }
.vote-position-present, .vote-position-not-voting { color: var(--ink-muted); background: var(--surface-raised); }

/* ---------- Voices ---------- */
.voice-card { display: flex; gap: 14px; align-items: center; }
.voice-card-name { display: block; font-weight: 650; font-size: 14.5px; }
.voice-card-lean { display: block; margin-bottom: 2px; }
.voice-item-list { list-style: none; margin: 0; padding: 18px 20px; display: flex; flex-direction: column; }
.voice-item { padding: 13px 0; border-top: 1px solid var(--gridline); }
.voice-item:first-child { border-top: none; padding-top: 0; }
.voice-item-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.voice-item-title { display: block; font-weight: 650; font-size: 14.5px; line-height: 1.4; }
.voice-item-who { display: block; margin-top: 2px; }
.voice-item-excerpt { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-secondary); }
.pill-kind { background: var(--surface-raised); font-size: 11.5px; padding: 3px 9px; }


/* ---------- Affiliation markers on Voices ----------
   The word does the work; the tint is only a scanning aid, so these are
   readable with colour vision differences and in a screenshot. Both tones
   sit deliberately away from the palette's semantic colours (teal means
   verified/primary source, amber means interactive) and away from literal
   campaign red and blue — this marks which side a commentator is commonly
   placed on, it isn't a party rosette. */
.lean-mark {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid transparent;
  vertical-align: middle; white-space: nowrap;
}
.lean-mark-right { color: #d9955f; background: rgba(217, 149, 95, 0.14); border-color: rgba(217, 149, 95, 0.34); }
.lean-mark-left { color: #7fa8d4; background: rgba(127, 168, 212, 0.14); border-color: rgba(127, 168, 212, 0.34); }
.voice-card-name .lean-mark { margin-left: 4px; }

/* ---------- "Show all" toggle for long lists ---------- */
.collapse-toggle {
  display: block; margin: 10px 0 0; padding: 8px 14px;
  font-family: inherit; font-size: 13px; font-weight: 650;
  color: var(--accent); background: transparent;
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.collapse-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }
.collapse-toggle[hidden] { display: none; }
.rollcall-group .collapse-toggle { margin-top: 12px; }


/* ---------- Executive actions (Federal Register) ---------- */
.exec-action-list { list-style: none; margin: 0; padding: 18px 20px; }
.exec-action { padding: 13px 0; border-top: 1px solid var(--gridline); }
.exec-action:first-child { border-top: none; padding-top: 0; }
.exec-action-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.exec-action-title { display: block; font-weight: 650; font-size: 14.5px; line-height: 1.4; }
.exec-action-title:hover { color: var(--accent); }
/* The Federal Register's own note on what a document does to earlier ones
   (revokes, amends, supersedes). Quoted verbatim, never paraphrased. */
.exec-action-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-muted); font-style: italic; }