/* 162 Bill Tracker — Counsel (light) + Midnight (dark) design system.
   Every color flows from these tokens; component rules never hardcode hex.
   Light is the default on :root. Dark applies via an explicit data-theme set
   before first paint (index.html) or the L/D/A toggle, and falls back to the
   OS preference when no data-theme is present (JS disabled). */
:root {
  --bg: #f3f3ee;             /* paper */
  --surface: #ffffff;
  --surface-2: #f4f5f1;
  --text: #16203a;           /* deep navy ink */
  --muted: #5a6478;
  --border: #e3e4dd;
  --border-strong: #d3d5cc;

  --accent: #0e7a5c;         /* emerald */
  --accent-deep: #0b5e47;
  --accent-bright: #12916e;
  --accent-soft: #e7f1ec;
  --accent-soft-ink: #0c5c46;
  --accent-ring: rgba(14, 122, 92, 0.20);
  --btn-ink: #ffffff;        /* text/icons on an accent fill */

  --danger: #c0452f;         /* brick */
  --danger-tint: #f7e7e2;
  --danger-border: #edcabf;
  --ok: #12916e;             /* success / money */
  --ok-tint: #e3f2ec;
  --ok-ink: #0c5c46;
  --ok-border: #bfe0d2;

  --gold: #b0832a;
  --gold-ink: #92610f;
  --gold-tint: #f6ecd6;
  --gold-border: #ead9b0;
  --gold-star: #cf9b1e;

  --lean-ink: #1a56c4;
  --lean-bg: #e8f0fc;
  --lean-border: #c7dbf6;
  --undec-ink: #8a6d00;
  --undec-bg: #fdf4dc;
  --undec-border: #f0e0a8;

  --fail-fill: #b8b3bd;
  --navy: #1d4e88;
  --card-alt: #eef4ee;
  --glass: rgba(255, 255, 255, 0.82);

  /* party colors: Democrat blue, Republican red, Independent purple */
  --dem: #1a56c4;
  --rep: #cc3b2f;
  --ind: #7a4bc0;

  --shadow-sm: 0 1px 2px rgba(20, 27, 46, 0.06), 0 1px 3px rgba(20, 27, 46, 0.05);
  --shadow-md: 0 6px 20px rgba(20, 27, 46, 0.08);
  --shadow-accent: 0 6px 18px rgba(14, 122, 92, 0.24);
  --shadow-panel: 0 -8px 30px rgba(20, 27, 46, 0.16);

  --radius: 16px;
  --radius-sm: 11px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  color-scheme: light;
}

/* ---- Midnight (dark): the same tokens, re-tuned. Luminous lavender accent
   with near-black text on it; cyan for money, brighter role colors. ---- */
:root[data-theme="dark"] {
  --bg: #12141c;
  --surface: #1b1e29;
  --surface-2: #232733;
  --text: #e9ebf4;
  --muted: #969bb0;
  --border: #2a2e3d;
  --border-strong: #3a3f52;

  --accent: #8f7ff2;         /* luminous lavender */
  --accent-deep: #b3a6ff;    /* lighter — for text/links on dark */
  --accent-bright: #b3a6ff;
  --accent-soft: #262247;
  --accent-soft-ink: #c9beff;
  --accent-ring: rgba(143, 127, 242, 0.38);
  --btn-ink: #14161f;        /* near-black text on the light accent */

  --danger: #ff6b78;
  --danger-tint: #3a2027;
  --danger-border: #5a2b32;
  --ok: #37e0c8;             /* cyan money */
  --ok-tint: #12312c;
  --ok-ink: #6ff0dc;
  --ok-border: #1f5049;

  --gold: #e0b24d;
  --gold-ink: #e6c375;
  --gold-tint: #322a14;
  --gold-border: #574a24;
  --gold-star: #e0b24d;

  --lean-ink: #7ba7ff;
  --lean-bg: #172642;
  --lean-border: #274063;
  --undec-ink: #e0b24d;
  --undec-bg: #322a14;
  --undec-border: #574a24;

  --fail-fill: #4a4f60;
  --navy: #6ea8e6;
  --card-alt: #1c2230;
  --glass: rgba(18, 20, 28, 0.82);

  --dem: #6fa0ff;
  --rep: #ff7a70;
  --ind: #b3a6ff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.42);
  --shadow-accent: 0 6px 18px rgba(0, 0, 0, 0.50);
  --shadow-panel: 0 -10px 30px rgba(0, 0, 0, 0.50);

  color-scheme: dark;
}

/* No-JS fallback: honor the OS preference only when nothing stamped data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #12141c; --surface: #1b1e29; --surface-2: #232733;
    --text: #e9ebf4; --muted: #969bb0; --border: #2a2e3d; --border-strong: #3a3f52;
    --accent: #8f7ff2; --accent-deep: #b3a6ff; --accent-bright: #b3a6ff;
    --accent-soft: #262247; --accent-soft-ink: #c9beff;
    --accent-ring: rgba(143, 127, 242, 0.38); --btn-ink: #14161f;
    --danger: #ff6b78; --danger-tint: #3a2027; --danger-border: #5a2b32;
    --ok: #37e0c8; --ok-tint: #12312c; --ok-ink: #6ff0dc; --ok-border: #1f5049;
    --gold: #e0b24d; --gold-ink: #e6c375; --gold-tint: #322a14; --gold-border: #574a24; --gold-star: #e0b24d;
    --lean-ink: #7ba7ff; --lean-bg: #172642; --lean-border: #274063;
    --undec-ink: #e0b24d; --undec-bg: #322a14; --undec-border: #574a24;
    --fail-fill: #4a4f60; --navy: #6ea8e6; --card-alt: #1c2230; --glass: rgba(18, 20, 28, 0.82);
    --dem: #6fa0ff; --rep: #ff7a70; --ind: #b3a6ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.42);
    --shadow-accent: 0 6px 18px rgba(0, 0, 0, 0.50);
    --shadow-panel: 0 -10px 30px rgba(0, 0, 0, 0.50);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* Ensure the `hidden` attribute wins over component display rules (e.g. .row). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }

/* ---------- support / oppose / neutral position ---------- */
.card.pos-support { border-left: 4px solid var(--ok); }
.card.pos-oppose { border-left: 4px solid var(--rep); }
.pos-seg { display: inline-flex; gap: 0; margin: 8px 0 4px; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.pos-seg button {
  cursor: pointer; border: none; background: none; color: var(--muted);
  font-size: 12px; font-weight: 750; padding: 5px 13px; border-right: 1px solid var(--border);
}
.pos-seg button:last-child { border-right: none; }
.pos-seg button.on[data-pos="support"] { background: var(--ok); color: #fff; }
.pos-seg button.on[data-pos="oppose"] { background: var(--rep); color: #fff; }
.pos-seg button.on[data-pos="neutral"] { background: var(--border-strong); color: var(--text); }
.pos-seg-lg button { font-size: 14px; padding: 9px 20px; }

/* ---------- login gate ---------- */
.login-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg);
}
.login-card {
  width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 28px 24px;
}
.login-logo { height: 56px; width: auto; margin-bottom: 14px; }
.login-title { font-size: 18px; font-weight: 800; color: var(--accent-deep); }
.login-sub { font-size: 13px; color: var(--muted); margin: 4px 0 16px; text-align: center; }
.login-input {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; margin-bottom: 12px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); box-sizing: border-box;
}
.login-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.login-btn { width: 100%; }
.login-err { font-size: 13px; color: var(--danger); margin-top: 10px; min-height: 1em; text-align: center; }

/* ---- break-glass PIN keypad (secondary login; only shown if SSO fails) ---- */
.pin-dots { display: flex; gap: 9px; margin: 6px 0 20px; }
.login-card.pin-card, .pin-pad { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pin-pad.busy ~ .login-err, .pin-pad.busy { cursor: progress; }
.pin-dots.bad { animation: pinshake .35s; }
@keyframes pinshake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
.pin-dots i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: transparent; transition: all 0.12s;
}
.pin-dots i.on { background: var(--accent); border-color: var(--accent); transform: scale(1.05); }
.pin-pad { --k: clamp(56px, min(22vw, 9vh), 84px); display: grid; grid-template-columns: repeat(3, var(--k)); justify-content: center; gap: 12px; }
.pin-pad.busy { opacity: 0.5; pointer-events: none; }
.pin-key {
  height: var(--k); padding: 0; font-size: 28px; font-weight: 700; cursor: pointer; touch-action: manipulation;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 50%;
  transition: background 0.12s, transform 0.06s; -webkit-tap-highlight-color: transparent;
}
.pin-key:hover { background: var(--accent-soft); }
.pin-key:active { transform: scale(0.94); background: var(--accent); color: var(--btn-ink); }
.pin-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-del { font-size: 20px; color: var(--muted); background: transparent; border-color: transparent; }
.pin-del:hover { background: var(--surface-2); }
.pin-blank { visibility: hidden; }
.signout-row { display: flex; justify-content: center; margin: 18px 0 4px; }

/* keyboard focus visibility (accessibility) — only for keyboard nav, not mouse */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tabbar a:focus-visible { outline-offset: -3px; border-radius: 8px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: calc(64px + var(--safe-bottom));
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar: white, logo + burgundy accent line ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(11px + var(--safe-top)) 18px 11px;
  background: var(--surface);
  border-bottom: 2.5px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-logo { height: 40px; width: auto; display: block; flex-shrink: 0; }
.brand-app {
  font-size: 16px; font-weight: 750; color: var(--accent-deep);
  letter-spacing: -0.01em; padding-left: 13px;
  border-left: 1.5px solid var(--border-strong); white-space: nowrap;
}
.icon-btn {
  background: var(--accent-soft); border: none; color: var(--accent);
  font-size: 18px; cursor: pointer; padding: 9px 12px; border-radius: 11px;
  transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
.icon-btn:hover { background: var(--accent); color: var(--btn-ink); }
.icon-btn.spinning { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#layout { display: block; }
#view, #detail-pane { padding: 16px; }

/* iPad / desktop: two-pane */
@media (min-width: 768px) {
  #layout { display: flex; height: calc(100vh - 120px); }
  #view { width: 40%; min-width: 340px; overflow-y: auto; border-right: 1px solid var(--border); }
  #detail-pane { flex: 1; overflow-y: auto; background: var(--surface-2); }
  #detail-pane[hidden] { display: block !important; }

  /* Home dashboard: single full-width pane (no empty detail pane). */
  #layout.dash { display: block; height: auto; }
  #layout.dash #view { width: 100%; min-width: 0; border-right: none; }
  #layout.dash #detail-pane { display: none !important; }
}

/* ---------- bottom tab bar ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex;
  /* Solid background (no backdrop-filter): on iOS, -webkit-backdrop-filter on a
     position:fixed element breaks the pinning and it scrolls with content. */
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -1px 3px rgba(26, 20, 22, 0.06);
  padding-bottom: var(--safe-bottom);
}
.tabbar a {
  flex: 1; text-align: center; padding: 13px 1px 11px;
  color: var(--muted); text-decoration: none; font-weight: 700;
  /* Fluid size so all 7 tabs fit from iPhone SE (320) up to large phones. */
  font-size: clamp(9.5px, 2.8vw, 11.5px); letter-spacing: -0.01em;
  position: relative; transition: color 0.15s; white-space: nowrap;
}
.tabbar a.active { color: var(--accent); }
.tabbar a.active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent);
}
.badge {
  background: var(--accent); color: var(--btn-ink); border-radius: 9px;
  font-size: 11px; font-weight: 700; padding: 1px 6px; margin-left: 3px; vertical-align: top;
  box-shadow: var(--shadow-sm);
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); }
.card:active { transform: translateY(0); }
.card h3 { margin: 2px 0 8px; font-size: 16.5px; line-height: 1.32; font-weight: 750; letter-spacing: -0.01em; }
.card .meta { color: var(--muted); font-size: 13px; line-height: 1.55; }
.card .meta b { color: var(--text); font-weight: 650; }

.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.01em;
  background: var(--accent-soft); color: var(--accent-deep);
}
.chip.prognosis { background: var(--accent-soft); color: var(--accent-deep); }
.chip.unread { background: var(--accent); color: var(--btn-ink); box-shadow: var(--shadow-sm); }
.chip.tag { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.party-D { color: var(--dem); font-weight: 800; }
.party-R { color: var(--rep); font-weight: 800; }
.party-I, .party-ID, .party-L { color: var(--ind); font-weight: 800; }
.chip.chamber { background: var(--surface-2); color: var(--accent-deep); border: 1px solid var(--border-strong); }
/* topic chip uses the brand orange from the 162 Strategies logo */
.chip.topic { background: var(--gold-tint); color: var(--gold-ink); border: 1px solid var(--gold-border); }

/* ---------- topic filter + selector ---------- */
.topic-filter { margin-bottom: 14px; }
.topic-box select, .topic-box input {
  font-size: 16px; padding: 11px 13px; flex: 1; min-width: 140px;
  border: 1.5px solid var(--border-strong); border-radius: 11px;
  background: var(--surface); color: var(--text);
}
.topic-box select:focus, .topic-box input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring);
}

/* ---------- companion bill pairs ---------- */
.pair {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: 11px 11px 3px;
  margin-bottom: 14px;
}
.pair-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-deep); padding: 1px 4px 9px;
}
.pair .card { box-shadow: var(--shadow-sm); }
.companion-card { border-color: var(--accent); }
.companion-picker select {
  width: 100%; font-size: 16px; padding: 11px 13px;
  border: 1.5px solid var(--border-strong); border-radius: 11px;
  background: var(--surface); color: var(--text);
}
.companion-picker select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }

/* ---------- status stage progress ---------- */
.stage { display: flex; gap: 4px; margin: 11px 0 5px; }
.stage span {
  height: 6px; flex: 1; border-radius: 999px; background: var(--border-strong);
  transition: background 0.2s;
}
.stage span.done { background: linear-gradient(90deg, var(--accent-bright), var(--accent)); }
.stage span.failed { background: var(--fail-fill); }
.stage-label { font-size: 12px; color: var(--muted); font-weight: 650; }

h2.section {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent); font-weight: 800; margin: 24px 0 10px;
}

/* ---------- home dashboard ---------- */
/* Fill the browser width (per house rule: no fixed column stranded in empty
   margin). A high cap only reins in ultra-wide monitors; every common PC window
   (<=1800) uses the full width. */
.home { width: 100%; max-width: 2200px; margin: 0 auto; }
.home-cols { display: grid; grid-template-columns: 1fr; gap: 0 26px; }
/* min-width:0 lets grid tracks shrink below their content's intrinsic width. */
.home-col { min-width: 0; }
/* Two columns ONLY when the dashboard owns the full width (its own #/home tab).
   When a bill is open the dashboard sits in a ~half-width pane (#layout loses
   .dash) — a viewport-based media query would still force 2 columns into that
   narrow pane and overflow, so gate on .dash, not just the viewport. The status
   column (Where they stand + Needs your attention) stays a comfortable width;
   the movers column takes the rest and flows into as many card columns as fit. */
@media (min-width: 900px) {
  #layout.dash .home-cols { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: start; }
  #layout.dash .home-cols .home-col > h2.section:first-child { margin-top: 6px; }
}
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 2px 14px; }
.home-headings { min-width: 0; }
.home-hello { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-deep); }
.home-date { font-size: 13px; color: var(--muted); font-weight: 600; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 12px; }
.stat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 6px; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform 0.1s, box-shadow 0.15s;
}
.stat-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.stat-num { font-size: 25px; font-weight: 820; color: var(--text); line-height: 1; letter-spacing: -0.02em; }
.stat-lbl { font-size: 11px; font-weight: 650; color: var(--muted); text-align: center; line-height: 1.2; }
.stat-tile.warn .stat-num { color: var(--accent); }
.stat-tile.hot .stat-num { color: var(--gold-ink); }

.pos-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 6px; box-shadow: var(--shadow-sm); }
.pos-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--border); }
.pos-bar-seg { display: block; transition: filter 0.15s; }
.pos-bar-seg:hover { filter: brightness(1.15); }
.pos-bar-seg.support { background: var(--ok); }
.pos-bar-seg.neutral { background: var(--border-strong); }
.pos-bar-seg.oppose { background: var(--rep); }
.pos-legend { display: flex; gap: 14px; margin-top: 9px; font-size: 12px; color: var(--muted); font-weight: 600; flex-wrap: wrap; }
.pos-legend a { color: inherit; text-decoration: none; }
.pos-legend a:hover { color: var(--text); text-decoration: underline; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; background: var(--border-strong); }
.dot.support { background: var(--ok); }
.dot.oppose { background: var(--rep); }
.dot.neutral { background: var(--border-strong); }
.pos-legend .dot { margin-right: 5px; }

.attn-list { display: flex; flex-direction: column; gap: 8px; }
.attn-item {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 11px 13px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm);
}
a.attn-item:hover { box-shadow: var(--shadow-md); }
.attn-ico { font-size: 17px; line-height: 1.35; flex: 0 0 auto; }
.attn-item b { font-weight: 720; font-size: 14px; }
.attn-title { font-size: 13px; color: var(--text); font-weight: 600; line-height: 1.35; margin-top: 2px; }
.attn-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.attn-item a { color: var(--accent); text-decoration: none; font-weight: 700; }
.attn-item.cal { border-left-color: var(--accent); }
.attn-item.threat { border-left-color: var(--rep); }
.attn-item.review { border-left-color: var(--gold-ink); }
.attn-item.stall { border-left-color: var(--border-strong); }
.all-clear { display: flex; gap: 10px; align-items: center; cursor: default; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.all-clear .attn-ico { font-size: 18px; }

/* Movers flow into as many card columns as the width allows, so a wide
   dashboard fills with columns instead of one sparse column of long rows. */
.mover-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start; }
.mover-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); transition: background 0.12s, box-shadow 0.15s, transform 0.1s;
}
.mover-row:hover { background: var(--surface-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mover-row .dot { margin-top: 5px; flex: 0 0 auto; }
.mover-main { min-width: 0; flex: 1; }
.mover-top { display: flex; align-items: center; gap: 7px; font-size: 14px; flex-wrap: wrap; }
.mover-top b { font-weight: 720; }
/* Titles wrap to two lines — never truncated out of view. */
.mover-title { font-size: 13px; color: var(--text); line-height: 1.35; margin: 2px 0 3px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mover-act { font-size: 12px; color: var(--muted); font-weight: 600; }

.home-foot { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 2px 4px; }
.home-foot a { color: var(--accent); text-decoration: none; font-weight: 700; font-size: 13.5px; }

/* portfolio "where they stand" stage breakdown */
.stage-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; box-shadow: var(--shadow-sm); margin-bottom: 8px; }
.mini-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 800; margin-bottom: 9px; }
.stage-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 4px; margin: 0 -4px;
  border-radius: 8px; color: inherit; text-decoration: none; transition: background 0.15s;
}
.stage-row:hover { background: var(--surface-2); }
.stage-name { flex: 0 0 120px; font-size: 12.5px; color: var(--text); font-weight: 600; }
.stage-track { flex: 1; height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.stage-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-bright), var(--accent)); border-radius: 999px; }
.stage-n { flex: 0 0 auto; min-width: 18px; text-align: right; font-size: 13px; font-weight: 750; color: var(--text); }

/* ---------- home dashboard, v2: fill the window, most urgent first ----------
   Three things drive the layout:
   - the .home container's own width (container queries, so the dashboard also
     works in the half-width pane it gets when a bill is open),
   - the viewport (only a roomy window is pinned to the screen; the panels then
     scroll INSIDE themselves and the page never does),
   - narrow screens simply stack, trimmed, and the page scrolls. */
.home { container: home / inline-size; }
.home-in { display: flex; flex-direction: column; gap: 10px; }

/* quick-report bar: pinned to the very top of Home so it never has to be hunted
   for. Tinted to read as a persistent action bar, not another data panel. */
.qr-bar { background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--radius-sm); padding: 9px 13px 10px; box-shadow: var(--shadow-sm); }
.qr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qr-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--accent-soft-ink); white-space: nowrap; }
.qr-select {
  flex: 1 1 170px; min-width: 130px; max-width: 320px; padding: 6px 9px;
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 13.5px; font-weight: 650;
}
.qr-bar .cl-report { margin-top: 8px; padding-top: 8px; }
.qr-bar .meta a { color: var(--accent); font-weight: 700; text-decoration: none; }
.qr-bar .meta a:hover { text-decoration: underline; }

/* Wide window: the whole bar is ONE row (client, bill count, full-text checkbox,
   Generate, Email) instead of three stacked rows with empty space beside them.
   The shared report block keeps its markup; display:contents on its header lets its
   pieces line up with the checkbox. The email box and the "Report ready" bar still
   drop to their own row when they appear. */
@container home (min-width: 1080px) {
  /* flex-start + a fixed first-row height: when the email box or the Report-ready bar opens, the
     bar grows DOWNWARD and the client picker stays on row one instead of drifting to the middle. */
  .qr-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 18px; padding: 7px 13px; }
  .qr-top { flex: none; min-height: 32px; }
  #qr-block { flex: 1 1 0; min-width: 0; }
  .qr-bar .cl-report { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; padding: 0; border-top: none; }
  .qr-bar .cl-report-head { display: contents; }
  .qr-bar .cl-report-n { order: 1; }
  .qr-bar .cr-opt { order: 2; margin: 0; }
  .qr-bar .cl-report .wl-actions { order: 3; margin-left: auto; flex-wrap: nowrap; align-items: center; }
  .qr-bar .cr-email-form { order: 4; flex: 1 1 100%; margin: 2px 0 0; }
  .qr-bar .cr-ready { order: 5; flex: 1 1 100%; margin: 4px 0 0; }
}

/* vitals strip */
.hv { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.hv-title { grid-column: 1 / span 3; grid-row: 1; align-self: center; min-width: 0; }
.hv-tools { grid-column: 4; grid-row: 1; justify-self: end; align-self: center; display: flex; align-items: center; gap: 12px; }
.hv-link { color: var(--accent); text-decoration: none; font-weight: 700; font-size: 13px; }
.hv-link:hover { text-decoration: underline; }
.hv-kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 6px; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform 0.1s, box-shadow 0.15s;
}
.hv-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.hv-num { font-size: 24px; font-weight: 820; color: var(--text); line-height: 1; letter-spacing: -0.02em; }
.hv-lbl { font-size: 11px; font-weight: 650; color: var(--muted); text-align: center; line-height: 1.2; }
.hv-kpi.warn .hv-num { color: var(--accent); }
.hv-kpi.hot .hv-num { color: var(--gold-ink); }
.hv-bar { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px 9px; box-shadow: var(--shadow-sm); min-width: 0; }
.hv-bar-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 800; margin-bottom: 5px; }
.hv-bar .pos-legend { margin-top: 6px; gap: 4px 12px; }
/* stage segments: one hue, light to dark with progress */
.pos-bar-seg { min-width: 5px; }
.sg-introduced { background: var(--accent); opacity: 0.32; }
.sg-committee { background: var(--accent); opacity: 0.58; }
.sg-floor { background: var(--accent); opacity: 0.78; }
.sg-passed_chamber { background: var(--accent); opacity: 0.86; }
.sg-passed_congress { background: var(--accent); opacity: 0.94; }
.sg-to_president { background: var(--accent); }
.sg-law { background: var(--accent-deep); }
.sg-failed { background: var(--fail-fill); }
.dot.sg-introduced, .dot.sg-committee, .dot.sg-floor, .dot.sg-passed_chamber, .dot.sg-passed_congress, .dot.sg-to_president, .dot.sg-law, .dot.sg-failed { vertical-align: baseline; }

@container home (min-width: 700px) {
  .hv-bar { grid-column: span 2; }
}
@container home (min-width: 900px) {
  .hv { grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto; }
  .hv-title { grid-column: 1; grid-row: 1; }
  .hv-tools { grid-column: 6; grid-row: 1; }
  .hv-bar { grid-column: span 3; }
  .hv-kpi { flex-direction: row; justify-content: flex-start; gap: 9px; padding: 8px 12px; }
  .hv-num { font-size: 26px; }
  .hv-lbl { text-align: left; font-size: 11.5px; }
}
@container home (min-width: 1360px) {
  .hv { grid-template-columns: auto repeat(4, minmax(112px, 150px)) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .hv-title, .hv-tools { grid-column: auto; grid-row: auto; }
  .hv-bar { grid-column: auto; }
}

/* panels */
.hm { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.hp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.hp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--border); flex: none; }
.hp-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--muted); white-space: nowrap; }
.hp-count { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 1px 8px; }
.hp-count.alert { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-border); }
.hp-act { margin-left: auto; color: var(--accent); text-decoration: none; font-weight: 700; font-size: 12.5px; }
.hp-act:hover { text-decoration: underline; }
.hp-act-btn { margin-left: auto; }
.hp-head .exec-tools { margin-left: auto; }
.hp-head .exec-tag { margin-left: 0; }
.hp-head .radar-tag { margin-left: 0; }
.hp-body { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 7px; min-height: 0; overscroll-behavior: contain; }
.hp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.4; background: var(--surface-2); }
.hp-rail { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }

/* attention items */
.ai { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 9px; padding: 8px 11px; }
a.ai:hover { background: var(--surface-2); }
.ai-ico { font-size: 16px; line-height: 1.35; flex: none; }
.ai-main { min-width: 0; }
.ai-top { font-size: 13.5px; line-height: 1.35; }
.ai-top b { font-weight: 760; }
.ai-top a { color: var(--accent); text-decoration: none; font-weight: 700; }
.ai-flag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--danger); margin-left: 4px; }
.ai-title { font-size: 12.5px; line-height: 1.35; color: var(--text); font-weight: 600; margin-top: 1px; }
.ai-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ai.cal { border-left-color: var(--accent); }
.ai.threat { border-left-color: var(--rep); background: var(--danger-tint); border-color: var(--danger-border); border-left-color: var(--rep); }
a.ai.threat:hover { background: var(--danger-tint); filter: brightness(0.98); }
.ai.review { border-left-color: var(--gold-ink); }
.ai.stall { border-left-color: var(--border-strong); }
.hp .all-clear { border: none; box-shadow: none; padding: 6px 2px; }
/* the expandable "which ones have stalled" item */
details.ai.stall { display: block; padding: 0; }
details.ai.stall > summary { display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px; cursor: pointer; list-style: none; }
details.ai.stall > summary::-webkit-details-marker { display: none; }
.ai-caret { margin-left: auto; color: var(--muted); font-size: 12px; line-height: 1.6; transition: transform 0.15s; }
details.ai.stall[open] .ai-caret { transform: rotate(90deg); }
.stall-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.stall-row { display: block; text-decoration: none; color: var(--text); padding: 7px 11px 7px 37px; border-bottom: 1px solid var(--border); }
.stall-row:hover { background: var(--surface-2); }
.stall-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }
.stall-when { font-size: 11.5px; color: var(--muted); font-weight: 650; white-space: nowrap; }
.stall-title { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 1px; }
.stall-more { display: block; padding: 7px 11px 8px 37px; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }

/* movers: rows, flowing into as many columns as the panel is wide */
.mv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); align-content: start; gap: 7px; }
.mv { display: flex; gap: 9px; align-items: flex-start; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; min-width: 0; }
.mv:hover { background: var(--surface-2); }
.mv .dot { margin-top: 6px; flex: none; }
.mv-main { min-width: 0; flex: 1; }
.mv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; font-size: 13.5px; }
.mv-top b { font-weight: 760; }
.mv-when { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 650; white-space: nowrap; }
.mv-title { font-size: 12.5px; line-height: 1.35; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* rail panels reuse the radar and summary content styles; tighten their chrome */
.hp-radar { border-left: 3px solid var(--navy, #1d4e88); }
.hp-exec { border-left: 3px solid var(--accent-deep); }
.hp-radar .radar-section:first-child { margin-top: 2px; }
.hp-exec .exec-body p, .hp-exec .exec-body li { font-size: 13.5px; line-height: 1.55; }
.hp-exec .exec-meta { margin: 0 0 4px; }
.hp-exec .exec-body p { margin-bottom: 8px; }
.hp-exec .exec-h { margin: 10px 0 3px; }
.hp-exec.collapsed .hp-head { border-bottom: none; }
.hp-more { display: none; }
.hp-exec .exec-head, .hp-exec .exec-body, .hp-exec .exec-empty, .hp-radar .radar-section, .hp-radar .radar-foot { max-width: 640px; }

/* ---- phone width: everything stacks, the page scrolls, long panels are trimmed ---- */
@container home (max-width: 639px) {
  /* tighter vitals so the first thing under them, the threats, lands on the first screen */
  .hv { gap: 6px; }
  .hv-kpi { padding: 7px 4px; }
  .hv-num { font-size: 22px; }
  .hv-bar { padding: 6px 12px 7px; }
  .hv-bar-lbl { margin-bottom: 3px; }
  .hv-bar .pos-legend { margin-top: 4px; font-size: 11.5px; }
  .mv:nth-child(n+7) { display: none; }
  .hp-exec:not(.open):not(.collapsed) .hp-body { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .hp-exec:not(.collapsed) .hp-more { display: block; margin: 0 12px 10px; align-self: flex-start; background: none; border: none; padding: 4px 0; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--accent); }
}

/* ---- tablet width: two panels side by side, the rail underneath ---- */
@container home (min-width: 640px) {
  .hm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hp-rail { grid-column: 1 / -1; }
}
/* ---- wide: three panels side by side ---- */
@container home (min-width: 900px) {
  .hm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .hp-rail { grid-column: auto; }
}
/* ---- big desktop window: rebalance. The attention list needs the least width, Latest
   movers needs ~610px to flow into two columns (one column of 14 rows always scrolled),
   and the executive summary is the longest text so it takes the rest. ---- */
@container home (min-width: 1360px) {
  .hm { grid-template-columns: minmax(0, .75fr) minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---- roomy window: pin the dashboard to the screen, panels scroll inside ----
   The tab bar and header are the only fixed chrome. Below 600px tall (a phone on
   its side, a tiny window) it falls back to normal page scrolling instead. */
@media (min-width: 680px) and (min-height: 600px) {
  body:has(#layout.fit) { padding-bottom: var(--tabbar-h, calc(64px + var(--safe-bottom))); }
  #layout.fit { height: calc(100dvh - var(--topbar-h, 64px) - var(--tabbar-h, calc(64px + var(--safe-bottom)))); overflow: hidden; }
  #layout.fit #view { height: 100%; overflow: hidden; padding: 10px 16px 12px; display: flex; flex-direction: column; }
  #layout.fit .home { flex: 1; min-height: 0; }
  #layout.fit .home-in { height: 100%; }
  #layout.fit .hm { flex: 1; min-height: 0; }
  #layout.fit .hp-body { overflow-y: auto; flex: 1; }
  #layout.fit .hp-radar { flex: 0 1 auto; max-height: 52%; }
  #layout.fit .hp-exec { flex: 1 1 0; }
  #layout.fit .hp-exec.collapsed { flex: 0 0 auto; }
  /* the floating Ask AI button sits over the bottom-right corner; let the summary scroll clear of it */
  #layout.fit .hp-exec .hp-body::after { content: ""; flex: none; height: 46px; }
  /* two-column (tablet) version: top row gets the lists, the rail gets the rest */
  @container home (min-width: 640px) and (max-width: 899px) {
    #layout.fit .hm { grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }
    #layout.fit .hp-rail { flex-direction: row; }
    #layout.fit .hp-rail > .hp { flex: 1 1 0; min-width: 0; }
    #layout.fit .hp-radar { max-height: none; }
  }
}

/* ---------- Tracked tab: transient drill-down chip (from Home's position bar /
   "Where they stand") ---------- */
.active-filter-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: var(--radius-sm);
  padding: 9px 12px; margin-bottom: 10px; font-size: 13px; color: var(--accent-soft-ink);
}
.active-filter-chip b { color: var(--accent-deep); }
.active-filter-chip button {
  background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 700;
  color: var(--accent-deep); padding: 3px 6px; border-radius: 6px; -webkit-tap-highlight-color: transparent;
}
.active-filter-chip button:hover { background: var(--surface); }

/* momentum badges: gaining (brand orange) vs stalled (muted) */
.chip.mover { background: var(--gold-tint); color: var(--gold-ink); border: 1px solid var(--gold-border); }
/* cosponsors who withdrew: red, since it is the clearest sign a bill is losing ground.
   On a bill you OPPOSE the same fact is good news, so it turns green there. */
.chip.lost { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger-border); font-weight: 800; }
.chip.lost.good { background: var(--ok-tint); color: var(--ok-ink); border-color: var(--ok-border); }
.mv.lost { background: var(--danger-tint); border-color: var(--danger-border); border-left: 3px solid var(--rep); }
.mv.lost:hover { background: var(--danger-tint); filter: brightness(0.98); }
.chip.stalled { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); font-weight: 600; }
.sort-toggle { margin-bottom: 8px; }

/* weekly cosponsor sparkline + "+N this week" */
.trend-line { display: flex; align-items: center; gap: 7px; margin: 3px 0 2px; }
.spark { display: block; }
.trend-label { font-size: 11.5px; color: var(--muted); font-weight: 650; }
.trend-label.fresh { color: var(--gold-ink); }

/* "Updated <date>" line on tracked cards — shows the sort key (latest activity) */
.activity-line { font-size: 12px; color: var(--muted); font-weight: 600; margin: 5px 0 2px; }
.activity-line.fresh { color: var(--accent); }
.activity-line.fresh::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle;
}

/* ---------- buttons ---------- */
button.btn {
  background: var(--accent); color: var(--btn-ink); border: none; border-radius: 11px;
  font-size: 14.5px; font-weight: 700; padding: 11px 18px; cursor: pointer;
  box-shadow: var(--shadow-accent); transition: filter 0.15s, transform 0.1s;
}
button.btn:hover { filter: brightness(1.08); }
button.btn:active { transform: scale(0.97); }
button.btn.secondary { background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; }
button.btn.danger { background: var(--surface); color: var(--danger); border: 1.5px solid var(--danger); box-shadow: none; }
button.btn.small { font-size: 13px; padding: 7px 13px; border-radius: 9px; }
button.btn:disabled { opacity: 0.5; box-shadow: none; }

/* ---------- forms ---------- */
form.lookup { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
form.lookup label { font-size: 12.5px; font-weight: 700; color: var(--muted); display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em; }
form.lookup select, form.lookup input, .note-edit textarea, .note-edit input, .wl-form input {
  width: 100%; font-size: 16px; padding: 12px 14px;
  border: 1.5px solid var(--border-strong); border-radius: 11px;
  background: var(--surface); color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
form.lookup select:focus, form.lookup input:focus, .note-edit textarea:focus,
.note-edit input:focus, .wl-form input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring);
}

/* manual bill display-name row, under the title on a tracked bill's detail page */
.bn-row { margin-top: 6px; }
.rename-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); }
.rename-link:hover { text-decoration: underline; }
.bn-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bn-form input {
  flex: 1 1 220px; min-width: 160px; padding: 8px 11px; font-size: 14px;
  border: 1.5px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.bn-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------- cosponsor table ---------- */
/* ---------- cosponsors: total + two party columns ---------- */
.cosp-total { font-size: 13.5px; margin-bottom: 12px; line-height: 1.5; }
.cosp-total b { font-weight: 800; }
.cosp-sub { color: var(--muted); }
.cosp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cosp-col ul { list-style: none; margin: 0; padding: 0; }
.cosp-colhead {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 2px solid currentColor;
}
.cosp-recent { font-size: 12.5px; margin: -4px 0 12px; color: var(--text); }
.cosp-recent b { font-weight: 800; }
.cosp { font-size: 12.5px; line-height: 1.35; padding: 5px 0; border-bottom: 1px solid var(--border); }
.cosp-loc { color: var(--muted); font-size: 11px; margin-left: 5px; white-space: nowrap; }
.cosp-date { display: block; color: var(--muted); font-size: 10.5px; margin-top: 1px; }
/* newest added cosponsor(s): pinned to top of the column, bolded, highlighted */
.cosp-new {
  font-weight: 700; background: var(--surface-2);
  border-radius: 8px; border-bottom-color: transparent;
  padding-left: 7px; padding-right: 7px;
}
.cosp-new .cosp-date { color: var(--text); font-weight: 600; }
.cosp-newtag {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 5px; padding: 1px 4px; margin-left: 5px; vertical-align: middle;
}
.cosp .orig {
  font-size: 9px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft);
  border-radius: 5px; padding: 1px 4px; margin-left: 5px; vertical-align: middle;
}
.cosp.withdrawn { color: var(--muted); }
.cosp.withdrawn b { text-decoration: line-through; }
.cosp .wd { display: block; color: var(--muted); font-size: 10px; }
.cosp-none { font-size: 12px; color: var(--muted); padding: 5px 0; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
.timeline .date { color: var(--muted); font-size: 12px; display: block; margin-bottom: 3px; font-weight: 600; }

.attribution { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.attribution a { color: var(--accent); font-weight: 600; }

.empty { color: var(--muted); text-align: center; padding: 48px 18px; font-size: 14.5px; line-height: 1.6; }
.empty a { color: var(--accent); font-weight: 700; }
.error-box {
  background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent-deep); border-radius: 12px; padding: 12px 14px;
  font-size: 13.5px; margin-bottom: 12px; font-weight: 600;
}

/* ---------- detail view ---------- */
.detail-header h2 { font-size: 21px; margin: 6px 0 10px; line-height: 1.25; font-weight: 800; letter-spacing: -0.015em; }
.back-link {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--accent); text-decoration: none; font-size: 14.5px; font-weight: 700;
  background: none; border: none; cursor: pointer; padding: 6px 8px 6px 0; margin: 0;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.back-link:active { opacity: 0.6; }
.ext-links { display: flex; gap: 16px; margin: 18px 0; font-size: 14px; }
.ext-links a { color: var(--accent); font-weight: 700; }

.text-reader {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-top: 10px; overflow-x: auto;
}
.text-reader pre { white-space: pre-wrap; font-size: var(--reader-size, 13px); font-family: ui-monospace, Menlo, monospace; line-height: 1.55; }
.reader-controls { display: flex; gap: 8px; margin: 8px 0; }

/* ---------- segmented filters ---------- */
.seg { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0; }
.seg button {
  background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--muted);
  border-radius: 999px; font-size: 12.5px; font-weight: 650; padding: 6px 14px; cursor: pointer;
  transition: all 0.15s;
}
.seg button:hover { border-color: var(--accent); color: var(--accent); }
.seg button.on { background: var(--accent); color: var(--btn-ink); border-color: var(--accent); box-shadow: var(--shadow-sm); }

.event-type {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 6px;
}

/* ---------- leaderboard ---------- */
.lb-intro { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.lb-topic-filter { margin-bottom: 6px; }
.lb-section-head {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  margin: 18px 0 6px; padding-bottom: 5px; border-bottom: 2px solid currentColor;
}
.lb-secount { font-weight: 600; opacity: 0.7; }
.lb-row {
  display: flex; align-items: baseline; gap: 11px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.lb-count {
  font-weight: 800; font-size: 15px; min-width: 24px; text-align: right;
  color: var(--text); flex-shrink: 0;
}
.lb-name { flex: 1; line-height: 1.3; }
.lb-meta { color: var(--muted); font-size: 11.5px; }

/* legislator links: keep their existing color, add a subtle underline cue */
a.mlink {
  color: inherit; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset: 2px;
}
a.mlink:hover { text-decoration-color: currentColor; }

/* ---------- alert preferences ---------- */
.alerts-card { padding: 16px; }
.alerts-head { font-size: 15px; font-weight: 800; color: var(--text); }
.alerts-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 4px; line-height: 1.5; }
.alerts-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); margin: 14px 0 3px;
}

/* ---------- AI weekly digest ---------- */
.digest-card {
  padding: 16px;
  border-left: 4px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 64px);
}
.digest-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.digest-title { font-size: 15px; font-weight: 800; color: var(--text); }
.digest-tag {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-deep); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 2px 8px;
}
.digest-btn {
  flex: none; cursor: pointer; font-weight: 750; font-size: 12.5px;
  color: var(--btn-ink); background: var(--accent); border: none;
  border-radius: var(--radius-sm); padding: 7px 13px; box-shadow: var(--shadow-accent);
}
.digest-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.digest-btn.secondary { background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; }
.digest-tools { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.digest-meta { font-size: 11.5px; color: var(--muted); font-weight: 650; margin-bottom: 8px; }
.digest-body p { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 10px; }
.digest-body p:last-child { margin-bottom: 0; }
.digest-empty { font-size: 13px; color: var(--muted); line-height: 1.55; }
.digest-empty code {
  font-size: 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 5px;
}

/* shared list styling for AI prose (digest) */
.digest-body ul { margin: 0 0 10px; padding-left: 20px; }
.digest-body li { font-size: 14px; line-height: 1.55; color: var(--text); margin-bottom: 4px; }
.digest-body ul:last-child { margin-bottom: 0; }

/* ---------- Activity tab: collapsible settings & data-sources accordion ----------
   Push/alerts/appearance/branding/data-sources/sign-out are config & reference,
   not activity — collapsed by default (state persisted) so the timeline is
   reachable without scrolling past ~1,700px of settings every visit. */
.settings-acc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.settings-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 14px 16px; font-size: 14.5px; font-weight: 750; color: var(--text);
}
.settings-acc-head:hover { background: var(--surface-2); }
.settings-acc-chev { color: var(--muted); font-size: 13px; flex: none; }
.settings-acc-body { display: none; }
.settings-acc.open .settings-acc-body { display: flex; flex-direction: column; padding: 0 12px 12px; }
.settings-acc-body > * { margin: 0 0 12px; }
.settings-acc-body > *:last-child { margin-bottom: 0; }

/* ---------- activity feed header / scope toggle ---------- */
.activity-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 6px 2px 10px;
}
.activity-title { font-size: 15px; font-weight: 800; color: var(--text); }
.activity-scope { flex: none; }

/* ---------- general AI chat (floating) ---------- */
.chat-fab {
  position: fixed; right: 14px; z-index: 60;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--accent); color: var(--btn-ink); border: none; cursor: pointer;
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
  border-radius: 999px; padding: 11px 16px; box-shadow: var(--shadow-accent);
}
.chat-fab.on { background: var(--accent-deep); }
.chat-panel {
  position: fixed; z-index: 61; left: 0; right: 0; bottom: 0;
  height: min(78vh, 620px); display: flex; flex-direction: column;
  background: var(--surface); border-top: 2px solid var(--accent);
  border-radius: 18px 18px 0 0; box-shadow: var(--shadow-panel);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 640px) {
  .chat-panel { left: auto; right: 16px; bottom: 16px; width: 420px; border-radius: 16px; border: 1.5px solid var(--accent); }
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 800; color: var(--text);
}
.chat-x { background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-hint { font-size: 13px; color: var(--muted); line-height: 1.6; }
.chat-msg { max-width: 86%; font-size: 14px; line-height: 1.5; padding: 9px 12px; border-radius: 14px; }
.chat-msg.user { align-self: flex-end; background: var(--accent); color: var(--btn-ink); border-bottom-right-radius: 4px; }
.chat-msg.assistant { align-self: flex-start; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg.assistant p { margin: 0 0 8px; }
.chat-msg.assistant p:last-child { margin-bottom: 0; }
.chat-msg.assistant ul { margin: 4px 0; padding-left: 18px; }
.chat-msg.chat-think { color: var(--muted); letter-spacing: 2px; }
.chat-sources { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 11px; color: var(--muted); }
.chat-src {
  font-size: 11px; font-weight: 700; color: var(--accent); text-decoration: none;
  background: var(--accent-soft); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-src:hover { background: var(--accent); color: var(--btn-ink); }
.chat-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.chat-in {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.chat-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.chat-send { flex: none; cursor: pointer; font-weight: 750; color: var(--btn-ink); background: var(--accent); border: none; border-radius: var(--radius-sm); padding: 0 16px; }

/* ---------- AI executive summary ---------- */
.exec-card { padding: 16px; border-left: 4px solid var(--accent-deep); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 60px); }
.exec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exec-title { font-size: 15px; font-weight: 800; color: var(--text); }
.exec-tag { display: inline-block; margin-left: 6px; vertical-align: middle; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-deep); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 8px; }
.exec-tools { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.exec-link { background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); padding: 0; }
.exec-btn { flex: none; cursor: pointer; font-weight: 750; font-size: 12.5px; color: var(--btn-ink); background: var(--accent); border: none; border-radius: var(--radius-sm); padding: 7px 13px; box-shadow: var(--shadow-accent); }
.exec-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.exec-meta { font-size: 11.5px; color: var(--muted); font-weight: 650; margin: 6px 0 8px; }
.exec-body p { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 10px; }
.exec-body p:last-child { margin-bottom: 0; }
.exec-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin: 12px 0 4px; }
.exec-h:first-child { margin-top: 0; }
.exec-body ul { margin: 0 0 10px; padding-left: 20px; }
.exec-body li { font-size: 14px; line-height: 1.55; color: var(--text); margin-bottom: 4px; }
.exec-empty { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 8px; }
.exec-empty code { font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; }

/* These two AI cards sit full-width below the dashboard's two columns, so on a
   wide monitor their prose would run to ~1800px. Cap the content (header +
   body) to a comfortable reading column while the card background keeps filling
   the width. max-width is a no-op on narrow screens (stays 100%). */
.exec-head, .exec-meta, .exec-body, .exec-empty,
.radar-head, .radar-section, .radar-empty, .radar-foot { max-width: 640px; }

/* ---------- hearing & markup radar ---------- */
.radar-card { padding: 16px; border-left: 4px solid var(--navy, #1d4e88); }
.radar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.radar-cardtitle { font-size: 15px; font-weight: 800; color: var(--text); }
.radar-tag {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 2px 8px;
}
.radar-section {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); margin: 12px 0 5px;
}
.radar-item { padding: 7px 0; border-top: 1px solid var(--border); }
.radar-item.on-tracked { border-left: 3px solid var(--accent); padding-left: 9px; margin-left: -9px; background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.radar-when { font-size: 12px; color: var(--muted); font-weight: 650; margin-bottom: 2px; }
.radar-type {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 5px; padding: 0 5px;
}
.radar-type.markup { color: var(--btn-ink); background: var(--accent); border-color: var(--accent); }
.radar-status { color: var(--danger); font-weight: 700; }
.radar-title { font-size: 13.5px; line-height: 1.4; color: var(--text); font-weight: 600; }
.radar-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.radar-bill { font-weight: 700; color: var(--accent-deep); text-decoration: underline; }
.radar-billtitle { color: var(--muted); font-weight: 600; }
.radar-mems { font-size: 12px; margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.radar-mems-l { color: var(--muted); font-weight: 600; }
.rc-mem {
  font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.rc-mem.party-D { color: var(--dem); } .rc-mem.party-I { color: var(--ind); } .rc-mem.party-R { color: var(--rep); }
.rc-mem i { font-style: normal; font-weight: 800; opacity: 0.85; }
.rc-more { font-size: 11px; color: var(--muted); font-weight: 600; }
.radar-empty { font-size: 13px; color: var(--muted); line-height: 1.55; }
.radar-foot { font-size: 11px; color: var(--muted); margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); line-height: 1.45; }

/* ---------- clients ---------- */
.cl-intro { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.cl-card .cl-desc { margin-top: 4px; line-height: 1.5; }
.cl-logoflag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ok); margin-left: 4px; }
.cl-defaultflag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--btn-ink); background: var(--accent); border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.cl-default-l { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); margin: 12px 0 2px; line-height: 1.4; }
.cl-default-l input { flex: none; width: 16px; height: 16px; }
.cl-form { padding: 16px; }
.cl-formhead { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
@media (max-width: 520px) { .cl-grid { grid-template-columns: 1fr; } }
.cl-logo-row { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.cl-logo-preview {
  width: 96px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden;
}
.cl-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- advocacy one-pager ---------- */
.op-card { padding: 16px; }
.op-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.op-l { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin: 10px 0 3px; }
.op-f { width: 100%; font: inherit; font-size: 13.5px; padding: 9px 11px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; line-height: 1.45; }
.op-f:focus, .op-audience:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.op-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.op-audience { font: inherit; font-size: 13px; padding: 6px 8px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.op-output { margin-top: 14px; }
.op-output.thinking { font-size: 13px; color: var(--muted); }
.op-output.error { font-size: 13px; color: var(--danger); }
.op-doc { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.op-doc p { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0 0 9px; }
.op-doc p:last-child { margin-bottom: 0; }
.op-title { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
.op-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin: 12px 0 4px; }
.op-tools { margin-top: 8px; }

/* ---------- member CRM (Leaders tab) ---------- */
.lb-view { margin-bottom: 8px; }
.lb-member { border-bottom: 1px solid var(--border); }
.lb-member .lb-row { display: flex; align-items: center; gap: 8px; }
.lb-member .lb-name { flex: 1; min-width: 0; }
.crm-summary { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-left: 2px; }
.crm-status {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  border-radius: 5px; padding: 1px 6px; border: 1px solid transparent;
}
.crm-status.s-ally { color: var(--ok-ink); background: var(--ok-tint); border-color: var(--ok-border); }
.crm-status.s-leaning { color: var(--lean-ink); background: var(--lean-bg); border-color: var(--lean-border); }
.crm-status.s-undecided { color: var(--undec-ink); background: var(--undec-bg); border-color: var(--undec-border); }
.crm-status.s-opposed { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-border); }
.crm-contacted { font-size: 11px; color: var(--muted); }
.crm-hasnotes { font-size: 12px; color: var(--accent); }
.crm-star {
  flex: none; cursor: pointer; background: none; border: none; padding: 2px 4px;
  font-size: 18px; line-height: 1; color: var(--border-strong);
}
.crm-star.on { color: var(--gold-star); }
.crm-edit {
  flex: none; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--accent-deep);
  background: var(--accent-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}
.crm-editor { padding: 4px 2px 12px; }
.crm-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.crm-f-status { font: inherit; font-size: 13px; padding: 6px 8px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.crm-date-l { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.crm-f-date { font: inherit; font-size: 13px; padding: 5px 8px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.crm-f-notes { width: 100%; font: inherit; font-size: 13.5px; padding: 9px 11px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; line-height: 1.45; }
.crm-f-notes:focus, .crm-f-status:focus, .crm-f-date:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* member directory: photo, committees, contact (free congress-legislators data) */
.lb-avatar {
  flex: none; position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--muted);
}
.lb-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-comms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lb-comm {
  font-size: 10.5px; font-weight: 650; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.lb-comm i { font-style: normal; font-weight: 800; color: var(--accent-deep); }
.lb-comm.rel { background: var(--gold-tint); color: var(--gold-ink); border-color: var(--gold-border); }
.lb-comm.rel i { color: var(--gold-ink); }
.lb-comm.more { color: var(--muted); background: none; border-style: dashed; }
.crm-contact {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 8px 0 10px; margin-bottom: 4px; border-bottom: 1px dashed var(--border);
}
.crm-contact a { font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.crm-contact a.crm-call { font-size: 13.5px; }
.crm-office { font-size: 11.5px; color: var(--muted); }
.lb-dir-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; margin: 8px 0 4px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
}
.lb-dir-bar.unsynced { background: var(--accent-soft); border-color: var(--accent-ring); }
.lb-dir-note { font-size: 12.5px; color: var(--muted); }
.lb-dir-bar.unsynced .lb-dir-note { color: var(--accent-deep); font-weight: 600; }

/* ---------- watchlist tuning ---------- */
.wl-query { font-style: italic; }
.wl-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; flex: none; }
.wl-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.wl-edit input { display: block; width: 100%; margin-bottom: 7px; }
.wl-form-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.wl-help { margin-top: 8px; line-height: 1.55; }
.wl-help code {
  font-size: 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 5px;
}
.wl-test-out {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border);
}
.wl-test-out.thinking { color: var(--muted); }
.wl-test-out.ok { border-color: var(--ok); background: var(--ok-tint); }
.wl-test-out.broad { border-color: var(--accent); background: var(--accent-soft); }
.wl-test-out.zero, .wl-test-out.error { color: var(--danger); border-color: var(--danger); background: var(--danger-tint); }
.wl-samples { margin: 7px 0 0; padding-left: 18px; }
.wl-samples li { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-bottom: 3px; }

/* ---------- bill detail: "what it does" AI summary ---------- */
.ai-desc-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ai-desc-text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }

/* ---------- legislator report ---------- */
.leg-card .leg-head { font-size: 15px; font-weight: 800; color: var(--accent-deep); }
.leg-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.leg-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 4px 0 10px; }
.leg-field-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 8px 0 6px; }
.leg-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.leg-topic-chip {
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 7px 14px;
}
.leg-topic-chip.on { background: var(--accent); color: var(--btn-ink); border-color: var(--accent); }
.leg-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.leg-ac-wrap { position: relative; flex: 1; min-width: 160px; }
.leg-ac-input { width: 100%; }
.leg-ac-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 264px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.leg-ac-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 11px 12px; font-size: 14px; color: var(--text);
}
.leg-ac-item:last-child { border-bottom: none; }
.leg-ac-item:hover, .leg-ac-item:active { background: var(--accent-soft); }
.leg-ac-empty { padding: 11px 12px; font-size: 13px; color: var(--muted); }
.leg-select { flex: 1; min-width: 150px; font-size: 16px; padding: 10px 11px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.leg-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.leg-form .btn { flex: 0 0 auto; }
.leg-result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.leg-result-member { font-size: 16px; font-weight: 800; color: var(--text); }
.leg-result-meta { font-size: 12.5px; color: var(--muted); margin: 2px 0 12px; }
.leg-result-meta b { color: var(--text); }
.leg-bill { padding: 10px 0; border-top: 1px solid var(--border); }
.leg-bill-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.leg-stance { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 5px; padding: 2px 7px; color: #fff; }
.leg-st-on { background: var(--ok); }
.leg-st-withdrawn { background: #9a6a08; }
.leg-st-none { background: var(--muted); }
.leg-bill-link { font-weight: 800; color: var(--accent-deep); text-decoration: none; }
.leg-bill-title { font-size: 13.5px; font-weight: 650; margin: 3px 0 2px; line-height: 1.35; }
.leg-bill-sum { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.leg-share { margin-top: 0; }
.leg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.leg-email-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.leg-email-form input { flex: 1; min-width: 170px; }

/* whip / cosponsor-gap list */
.wm-legend { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; }
.wm-member { padding: 9px 0; border-top: 1px solid var(--border); }
.wm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wm-name { font-size: 14px; font-weight: 750; }
.wm-loc { font-weight: 600; color: var(--muted); font-size: 12px; }
.wm-all { font-size: 10px; font-weight: 800; color: var(--ok); letter-spacing: 0.04em; }
.wm-partial { font-size: 11px; font-weight: 800; color: var(--accent); }
.wm-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.wm-chip { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 2px 7px; border: 1px solid var(--border); }
.wm-chip.wm-on { background: var(--ok-tint); color: var(--ok-ink); border-color: var(--ok-border); }
.wm-chip.wm-off { background: var(--surface-2); color: var(--muted); border-style: dashed; }

/* ---------- iPhone / touch optimizations ---------- */
html { -webkit-text-size-adjust: 100%; }

/* Brand-tinted tap feedback instead of the default gray flash. */
a, button, .stat-tile, .mover-row, .attn-item, .lb-member, .radar-item, .card[data-bill], .timeline li {
  -webkit-tap-highlight-color: var(--accent-ring);
}

/* Momentum scrolling in inner scroll areas. */
.chat-log, #detail-pane, #view { -webkit-overflow-scrolling: touch; }

/* Touch ergonomics — phones AND iPads (any orientation), plus any coarse-pointer
   device, but NOT a mouse-driven desktop. Covers input zoom + comfortable tap
   targets. The width arm keeps this verifiable at tablet sizes; the pointer arm
   catches large iPad Pros (>1024). */
@media (max-width: 1024px), (pointer: coarse) {
  /* iOS zooms the whole page when a focused field is < 16px — pin form controls to
     16px. Class-selectored fields must be listed explicitly (a bare `textarea`
     element rule loses to their class specificity): the one-pager editor
     (.op-f / .op-audience) and the CRM/watchlist fields. */
  input, textarea, select,
  .chat-in, .crm-f-status, .crm-f-date, .crm-f-notes, .wl-edit input,
  .op-f, .op-audience { font-size: 16px; }

  /* Roomier tap targets on the most-used compact controls (toward Apple's ~44px). */
  button.btn.small, .digest-btn, .exec-btn { padding: 9px 15px; min-height: 42px; }
  .seg button, .pos-seg button, .leg-topic-chip, .ci-chip, .wm-chip { padding: 8px 15px; min-height: 40px; }
  .lda-btn { min-height: 38px; }
  .crm-edit { padding: 8px 13px; }
  .crm-star { padding: 5px 8px; font-size: 20px; }

  /* Lift the smallest status micro-labels to the 11px readability floor. */
  .leg-stance, .crm-status, .radar-tag, .radar-type, .exec-tag { font-size: 11px; }

  /* Slightly larger top action chips on the bill detail. */
  .detail-header .row .btn.small { padding: 10px 16px; }
}

/* advocacy materials (bill brief editor) */
.op-adv { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.op-adv-label { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.op-adv-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* hearing prep brief + calendar (radar) */
.radar-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 7px; }
.radar-prep-out { margin-top: 8px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.radar-prep-out.thinking { color: var(--muted); font-style: italic; }
.radar-prep-out.error { color: var(--danger); background: var(--danger-tint); border-color: var(--danger); }
.radar-prep-out p { margin: 0 0 7px; }

/* SSO sign-out row */
.sso-note { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-right: 10px; }
.signout-row { align-items: center; }

/* Data & sources (settings) */
.sys-card { }
.sys-head { font-size: 15px; font-weight: 800; color: var(--accent-deep); }
.sys-updated { font-size: 13px; color: var(--text); margin: 3px 0 12px; }
.sys-src { padding: 9px 0; border-top: 1px solid var(--border); }
.sys-src:first-of-type { border-top: none; }
.sys-src-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sys-src-top b { font-size: 13.5px; font-weight: 750; }
.sys-src-when { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); }
.sys-src-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.sys-src-freq { font-size: 11.5px; color: var(--accent-deep); font-weight: 650; margin-top: 3px; }
.sys-foot { margin-top: 12px; padding-top: 9px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); }

/* one-tap copy buttons on contact data (§5) */
.cc-item { display: inline-flex; align-items: center; gap: 3px; margin-right: 12px; }
.copy-btn {
  background: none; border: none; cursor: pointer; padding: 3px 5px; margin: 0;
  font-size: 12px; line-height: 1; opacity: 0.55; border-radius: 6px;
  -webkit-tap-highlight-color: transparent; vertical-align: middle;
}
.copy-btn:hover { opacity: 1; background: var(--surface-2); }
.copy-btn:active { opacity: 1; }
.copy-btn.copied { opacity: 1; color: var(--ok); font-weight: 800; }
.crm-office { display: inline-flex; align-items: center; gap: 3px; }
.sys-usage { color: var(--accent); text-decoration: none; font-weight: 700; }
.sys-emailin { margin-top: 10px; padding: 10px 12px; background: var(--card-alt, #f5f8ff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; font-size: 13px; line-height: 1.5; }
.sys-emailin b { color: var(--accent); }
.sys-emailin a { font-weight: 700; }

/* ---------- client interest (bill detail) ---------- */
.ci-help { line-height: 1.5; margin-bottom: 8px; }
.ci-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ci-chip {
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; transition: all 0.15s;
}
.ci-chip:hover { border-color: var(--accent); color: var(--accent); }
.ci-chip.on { background: var(--accent); color: var(--btn-ink); border-color: var(--accent); }
.ci-status { margin-top: 8px; font-weight: 600; }

/* ---------- client filter (Tracked tab) ---------- */
.cl-filter-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 8px 0 12px; }
.cl-filter-bar label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cl-filter-bar select {
  font: inherit; font-size: 15px; padding: 8px 10px; flex: 1; min-width: 160px; max-width: 300px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.cl-filter-bar select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------- client interest report (Clients tab) ---------- */
.cl-report { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); }
.cl-report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cl-report-n { font-size: 13px; color: var(--muted); }
.cl-report-n b { color: var(--text); }
.cr-opt { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cr-opt input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.cr-email-form { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.cr-email-form input {
  flex: 1; min-width: 170px; font: inherit; font-size: 16px; padding: 9px 11px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.cr-email-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.cr-ready {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
}
.cr-ready-msg { font-size: 13px; color: var(--accent-soft-ink); }
.cr-ready-msg b { color: var(--accent-deep); }
.cr-ready-note { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
/* What the last View/Share/Download tap did. Same ink as the "Report ready" label, so it
   carries that pair's already-checked contrast in both themes. */
.cr-ready-status { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--accent-deep); overflow-wrap: anywhere; }
.cr-history { margin-top: 10px; }
.cr-histhead { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 5px; }
.cr-keep { font-weight: 600; text-transform: none; letter-spacing: 0; }
.cr-none { font-size: 12.5px; }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.cr-list li:first-child { border-top: none; }
.cr-when { font-size: 13px; color: var(--text); display: flex; flex-direction: column; }
.cr-sub { font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* ---------- Clients tab: custom legislative update bill picker ---------- */
.cr-pick-list {
  max-height: 340px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 8px;
}
.cr-pick-topic {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: 10px 0 4px;
}
.cr-pick-topic:first-child { margin-top: 6px; }
.cr-pick-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.cr-pick-row:hover { background: var(--surface-2); }
.cr-pick-row input { flex: none; width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.cr-pick-label { flex: 1; font-size: 12.5px; color: var(--text); line-height: 1.35; }
.cr-pick-label b { margin-right: 5px; }
.cr-pick-stage { flex: none; font-size: 10.5px; color: var(--muted); white-space: nowrap; }

/* ---------- L / D / A appearance toggle (dashboard header) ---------- */
.lda { display: inline-flex; flex: none; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.lda-btn { cursor: pointer; border: none; background: none; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; width: 34px; padding: 6px 0; border-right: 1px solid var(--border); transition: background 0.15s, color 0.15s; }
.lda-btn:last-child { border-right: none; }
.lda-btn.on { background: var(--accent); color: var(--btn-ink); }
.lda-btn:not(.on):hover { color: var(--accent); }

/* ---------- appearance settings card (Activity → Appearance) ---------- */
.ap-mode { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ap-sched { margin-top: 13px; display: flex; flex-direction: column; gap: 9px; transition: opacity 0.2s; }
.ap-sched.dim { opacity: 0.45; }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-row label { font-size: 13px; color: var(--muted); font-weight: 600; }
.ap-row input[type="time"], .ap-row select {
  font: inherit; font-size: 14px; padding: 7px 10px; color: var(--text);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
}
.ap-row input[type="time"]:focus, .ap-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------- ⌘K command palette ---------- */
.cmdk-back { position: fixed; inset: 0; z-index: 300; background: rgba(9, 11, 18, 0.44); display: flex; align-items: flex-start; justify-content: center; padding: 13vh 16px 16px; }
.cmdk { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden; }
.cmdk-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 14px 16px; border: none; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); }
.cmdk-in:focus { outline: none; }
.cmdk-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: none; border: none; color: var(--text); font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 9px; }
.cmdk-item .cmdk-hint { font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.cmdk-item.sel, .cmdk-item:hover { background: var(--accent-soft); color: var(--accent-deep); }
.cmdk-item.sel .cmdk-hint, .cmdk-item:hover .cmdk-hint { color: var(--accent-deep); }
.cmdk-empty { padding: 16px; font-size: 13px; color: var(--muted); text-align: center; }

/* Recovery controls inside a dashboard error box (wedged service worker etc.) */
.err-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.err-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* ---------- header actions + Settings screen ---------- */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
/* Tiny build number in the header corner (see APP_VERSION in app.js). Muted text
   measures 5.95:1 on the light surface and 6.02:1 on the dark one. */
/* Pinned in the header's bottom-right corner, inside its 11px bottom padding under
   the gear, so it never competes with the brand for row width on a 320px phone. */
.app-ver {
  position: absolute; right: 18px; bottom: 1px;
  font-size: 9.5px; line-height: 1; font-weight: 650; color: var(--muted);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.app-ver.mismatch { color: var(--danger); }
/* index.html adds .fail when app.js did not load. Brick measures 5.08:1 on the light
   surface, rose 6.03:1 on the dark one. */
.app-ver.fail { color: var(--danger); }
/* Copy of the badge on the PIN overlay, which covers the header. Top-right inside the
   safe area, on the overlay's page background: muted 5.35:1 light (#f3f3ee), 6.66:1
   dark (#12141c); the danger color 4.56:1 / 6.67:1 there. */
.app-ver.login-ver {
  position: fixed; bottom: auto;
  top: calc(var(--safe-top) + 4px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
}
/* The gear is an <a>, not a <button>: needs the link underline removed and
   inline-flex so its padding renders identically to the refresh button. */
#settings-btn { text-decoration: none; font-size: 19px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
/* .icon-btn sets border:none, so signal "you are here" with fill, matching hover. */
#settings-btn.active { background: var(--accent); color: var(--btn-ink); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 12px; }
/* Data & sources leads this screen, so give it room to breathe. */
.settings-head + .sys-card { margin-bottom: 12px; }

/* ---------- Search tab (2026-10-01) ----------
   Only existing tokens, so both themes keep the contrast already measured for them:
   text on surface, muted on surface, and the chip's accent-deep on accent-soft. */
.bsearch { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 860px; min-width: 0;
  /* the floating Ask AI button sits over the bottom-right corner; let the last row scroll clear of it */
  padding-bottom: 84px; }
.bs-box {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 48px;
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 14px; color: var(--muted);
}
.bs-box:focus-within { border-color: var(--accent); }
.bs-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 16px; /* 16px stops iOS zooming the page on focus */ padding: 12px 0;
}
.bs-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 10px 2px 2px;
  font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text);
}
.bs-head span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.bs-head .linkbtn { margin-left: auto; }
.linkbtn {
  border: 0; background: none; padding: 6px 2px; min-height: 32px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px;
}
.bs-row {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); text-decoration: none; overflow-wrap: anywhere;
}
.bs-row:hover { border-color: var(--border-strong); }
.bs-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.bs-title { font-size: 15px; font-weight: 650; line-height: 1.35; }
.bs-meta { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.bs-note { font-size: 14px; color: var(--muted); padding: 6px 2px; }
.bs-note.busy::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: bs-spin 0.8s linear infinite; vertical-align: -1px; }
@keyframes bs-spin { to { transform: rotate(360deg); } }
.bs-note.err { color: var(--text); font-weight: 650; }
.bs-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-examples .chip { border: 0; cursor: pointer; min-height: 32px; font-size: 13px; padding: 6px 12px; }
.bs-lookup { margin-top: 14px; }
.bs-lookup summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--accent-deep); padding: 8px 2px; min-height: 36px; }
.bs-lookup form.lookup { margin-top: 10px; }