/* ═══════════════════════════════════════════════════════════════════════════
   In the Minutes design system — "Ledger" v1.0 (design/DESIGN_SYSTEM.md is the
   contract; this file implements it). Successor to color_preview.html tokens.
   Per-district theming: a district's theme.css overrides --accent ONLY.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1 Design tokens (verbatim from the contract) ────────────────────────── */
:root, [data-cs-theme="light"] {
  /* neutrals (warm gray) */
  --bg:      #fafaf9;  /* page */
  --surface: #ffffff;  /* cards, header, inputs */
  --line:    #e4e2dc;  /* primary borders */
  --line2:   #efede8;  /* subtle separators */
  --hover:   #f4f3ef;  /* hover fills, quiet strips */
  /* ink hierarchy */
  --ink:  #26251f;  /* primary text */
  --ink2: #55524a;  /* secondary text */
  --ink3: #8b887e;  /* tertiary / labels */
  --faint:#c0bcb0;  /* disabled / de-emphasized */
  /* interactive (per-district override point). Districts set --accent-light
     ONLY (via the injected district-theme style); dark mode derives its accent
     below, so a raw light accent can never land on the dark background. */
  --accent-light: #0d7a5f;  /* default teal */
  --accent:   var(--accent-light);  /* links, active states, primary buttons */
  --onaccent: #ffffff;  /* text on accent */
  /* search-match */
  --match: #a14f00;  /* match counts, current-match emphasis */
  --mark:  #fbe3c8;  /* <mark> highlight fill (text stays --ink) */
  /* document types — Okabe–Ito (CVD-safe). X / Xi = identity / readable-text */
  --tT:#0072B2; --tTi:#005a8e;  /* Transcript */
  --tA:#D55E00; --tAi:#a84a00;  /* Agenda */
  --tM:#009E73; --tMi:#007a59;  /* Minutes */
  --tP:#CC79A7; --tPi:#9c4a76;  /* Policy */
  --tH:#E69F00; --tHi:#8a6100;  /* Handbook */
  --tW:#b91c50; --tWi:#9c1543;  /* Web source (chat citations; design v1.1) */
  /* Summaries have NO type color (v2.3.1): they are a derived view, not a
     searchable artifact — card link + stage chip render monochrome/neutral. */
  /* brand mark */
  --icon-ring: transparent;  /* dark: 1px cream ring around the book mark */
  /* typefaces (2026-07-16 handoff) — vars so district config can override.
     Accepted serif alternates (not defaults): Libre Caslon Text (700 headings),
     Source Serif 4, IBM Plex Serif, Lora, Spectral. Sans: Libre Franklin, Public Sans. */
  --serif: 'Domine', serif;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  color-scheme: light;
}
[data-cs-theme="dark"] {
  --bg:#151619; --surface:#1d1f23; --line:#32343a; --line2:#26282d; --hover:#24262b;
  --ink:#e8e7e2; --ink2:#b3b1a8; --ink3:#8b887e; --faint:#54565c;
  /* dark accent derived per the contract: color-mix(<light accent> 55%, #cfe3f5)
     — for the default teal this computes to the contract's precomputed #64a99f */
  --accent: color-mix(in srgb, var(--accent-light) 55%, #cfe3f5);
  --onaccent:#0c1b17;
  --match:#e8a45e; --mark:#5a3d1e;
  --tT:#4d9fd6; --tTi:#7cc0ef;
  --tA:#e57a33; --tAi:#f0975c;
  --tM:#2fb98e; --tMi:#4ecca4;
  --tP:#d891b8; --tPi:#e0a6c6;
  --tH:#eab04d; --tHi:#ddb066;
  --tW:#e0648c; --tWi:#ec84a5;
  --icon-ring:#c8b89a;
  color-scheme: dark;
}

/* ── §3 Base / reset ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The layout is responsive — never let mobile browsers "font boost" text in
   wide/scrollable blocks (it inflated long table cells on phones). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The hidden attribute must beat display classes (.cs-hero{display:flex} etc.) */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); }
mark { background: var(--mark); color: var(--ink); border-radius: 2px; padding: 0 2px; }
.cs-serif { font-family: var(--serif); }
.cs-mono  { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.cs-micro {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink3);
}

/* Page scaffolding: content max-widths per surface (§3) */
main.cs-main { flex: 1; display: flex; flex-direction: column; width: 100%; }
.cs-screen { padding: 28px clamp(16px, 4vw, 32px) 56px; width: 100%; margin: 0 auto; }
.cs-w-meetings   { max-width: 740px; }
.cs-w-viewer     { max-width: 860px; }
.cs-w-speakers   { max-width: 980px; }
.cs-w-governance { max-width: 1100px; }
.cs-page-title { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
.cs-viewer-title { margin: 0; font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; letter-spacing: -0.015em; }

/* ── §4 Chrome ────────────────────────────────────────────────────────────── */
.cs-disclaimer {
  display: flex; align-items: center; gap: 16px;
  padding: 7px 32px; font-size: 12px; color: var(--ink2);
  background: var(--hover); border-bottom: 1px solid var(--line);
}
.cs-disclaimer strong { font-weight: 600; }

.cs-header {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 32px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.cs-lockup {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.cs-lockup-text { display: flex; flex-direction: column; gap: 1px; }
.cs-lockup-eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3);
}
.cs-lockup-name {
  font-family: var(--serif); font-size: 15.5px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em;
  /* Taller, not wider (HANDOFF_2026-07-19): Domine has no width/optical axis,
     so stretch glyphs vertically. inline-block is mandatory (transforms skip
     inline boxes); the 1px stack gap absorbs the ~1.3px overdraw — no extra
     clearance. District serif overrides may reduce toward 1.08; never exceed
     1.17. Header lockup ONLY — never on titles or other serif use. */
  display: inline-block; transform: scaleY(1.17); transform-origin: left center;
}

.cs-header-search {
  flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--accent); border-radius: 4px; padding: 7px 12px;
  background: var(--surface);
}
/* §4: header search is for NON-home screens. On the home page the hero is the
   search box — the header one stays hidden until the page enters results mode. */
.cs-home-page:not(.cs-mode-results) .cs-header-search { display: none; }
.cs-header-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--ink); font-family: inherit;
}
.cs-search-clear {
  background: none; border: none; color: var(--ink3); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px;
}
.cs-search-clear:hover { color: var(--ink); }

.cs-nav {
  display: flex; align-items: center; gap: 22px;
  font-size: 13.5px; font-weight: 500; margin-left: auto;
}
.cs-nav a { color: var(--ink2); text-decoration: none; padding: 6px 0; box-shadow: inset 0 -3px 0 transparent; }
.cs-nav a:hover { color: var(--accent); }
.cs-nav a.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent); }

/* Chat is the only password-gated surface, and it ships as a beta (v2.3.2):
   every link INTO chat carries the padlock; the beta label rides the two
   entry points that name the surface (nav / More sheet) and its own heading —
   not every inline mention, which would read as nagging. */
.cs-lock {
  flex-shrink: 0; vertical-align: -1px; margin-right: 4px; opacity: .55;
}
/* The padlock is an atomic inline, so a line can break right after it and strand
   it at the end of a line. Every call site wraps the lock + the label's first
   word in this; the rest of the label still wraps normally. */
.cs-nowrap { white-space: nowrap; }
a:hover .cs-lock, button:hover .cs-lock { opacity: .85; }
.cs-beta { font-weight: 500; color: var(--ink3); }
.cs-nav a.active .cs-beta { color: var(--ink2); }
.cs-beta-badge {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-radius: 3px; padding: 2px 6px; vertical-align: 2px; margin-left: 2px;
}

.cs-theme-toggle {
  background: none; border: none; cursor: pointer; color: var(--ink3);
  min-width: 44px; min-height: 40px; margin: -8px -10px -8px -6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: inherit;
}
.cs-theme-toggle:hover { color: var(--ink); }
.cs-theme-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
}

.cs-banner {
  display: flex; align-items: center; gap: 18px; padding: 9px 32px; font-size: 13px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--surface));
  flex-wrap: wrap;
}
.cs-banner-label {
  font-weight: 700; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.cs-banner-title { color: var(--ink); }
.cs-banner-actions { display: flex; gap: 14px; margin-left: auto; }
.cs-banner-actions a {
  color: var(--accent); font-weight: 500; text-decoration: underline; font-size: 13px;
}

.cs-footer {
  border-top: 1px solid var(--line); padding: 13px 32px;
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 12px; color: var(--ink3); flex-wrap: wrap;
}
.cs-footer a { color: var(--ink3); }
.cs-footer-links { display: flex; gap: 18px; }
/* STASHED — frozen footer on results + viewer pages (tried and unfrozen the
   same day, owner 2026-07-17: not loved after live testing). To revive,
   uncomment; the cs-viewer-page body class on the three viewers still exists
   for scoping. Opaque background so content scrolls beneath when pinned.
.cs-mode-results .cs-footer, .cs-viewer-page .cs-footer {
  position: sticky; bottom: 0; background: var(--bg); z-index: 30;
}
*/

/* Mobile bottom tab bar + More sheet */
.cs-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
.cs-tabbar a, .cs-tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; padding: 8px 0; min-height: 48px; color: var(--ink3);
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.cs-tabbar .active { color: var(--accent); }
.cs-tabbar span { font-size: 10.5px; font-weight: 600; }
.cs-more-sheet {
  position: fixed; left: 0; right: 0; z-index: 90;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,.12);
  display: flex; flex-direction: column; padding: 6px 0;
}
.cs-more-sheet a {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.cs-more-sheet a:hover { background: var(--hover); }
.cs-more-sheet[hidden] { display: none; }

/* Desktop/mobile visibility helpers (breakpoint 760px, §7).
   Each side only ever sets display:none in ITS OWN media query — never
   `revert`/overrides on the visible side, so elements keep their author
   layout (the tab bar stays grid, [hidden] keeps working). */
@media (min-width: 760px) {
  .cs-mobile-only { display: none !important; }
}
@media (max-width: 759.98px) {
  .cs-desktop-only { display: none !important; }
  /* clearance for the fixed tab bar (+ iPhone home-indicator safe area) */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .cs-disclaimer { padding: 6px 16px; font-size: 11px; }
  .cs-header { padding: 12px 16px; justify-content: space-between; gap: 10px; }
  .cs-lockup-eyebrow { font-size: 9px; }
  .cs-lockup-name { font-size: 15px; }
  .cs-banner { padding: 8px 16px; font-size: 12px; gap: 10px; }
  .cs-banner-label { font-size: 10px; }
  .cs-banner-actions { gap: 12px; }
  .cs-banner-actions a { padding: 4px 0; }
  /* Meeting rows keep the desktop shape on mobile — doclinks horizontal
     across the card bottom, .cs-row-side (dur, Summary, Portal) a vertical
     column on the right; tightened gaps make the room. */
  .cs-meeting-row { gap: 12px; }
  .cs-meeting-row .date { width: 64px; }
  .cs-theme-toggle { min-width: 48px; min-height: 44px; margin: -6px -8px -6px 0; }
  /* search boxes are buttonless on mobile — keyboard search key submits */
  .cs-search-submit { display: none !important; }
}

/* ── §5 Components ────────────────────────────────────────────────────────── */

/* Type chips + dots. Type classes: .tT .tA .tM .tP .tH .tW set --x/--xi locally;
   .tN is the neutral (monochrome) variant for non-artifact chips like the
   summary stage pill. */
.tT { --x: var(--tT); --xi: var(--tTi); }
.tA { --x: var(--tA); --xi: var(--tAi); }
.tM { --x: var(--tM); --xi: var(--tMi); }
.tP { --x: var(--tP); --xi: var(--tPi); }
.tH { --x: var(--tH); --xi: var(--tHi); }
.tW { --x: var(--tW); --xi: var(--tWi); }
.tN { --x: var(--ink3); --xi: var(--ink2); }

/* Summary page (v2.3.0): one-line hook under the viewer title */
.cs-summary-headline { margin: 2px 0 0; font-family: var(--serif); font-size: 16px; font-style: italic; color: var(--ink2); line-height: 1.5; }

.cs-chip {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--xi);
  border: 1px solid color-mix(in srgb, var(--x) 45%, var(--surface));
  background: color-mix(in srgb, var(--x) 10%, var(--surface));
  border-radius: 3px; padding: 2px 7px;
}
.cs-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: var(--x, var(--line)); flex-shrink: 0;
}
.cs-dot-sm { width: 8px; height: 8px; }

/* Count tabs (results) + year tabs (meetings) */
.cs-count-tabs {
  display: flex; gap: 2px; align-items: flex-end; flex-wrap: wrap;  /* NEVER h-scroll */
}
.cs-count-tabs button, .cs-year-tabs button {
  font-size: 13.5px; font-weight: 500; color: var(--ink2);
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 12px 14px; min-height: 44px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.cs-count-tabs button:hover, .cs-year-tabs button:hover { border-bottom-color: var(--line); }
.cs-count-tabs button.active, .cs-year-tabs button.active {
  font-weight: 600; color: var(--ink); border-bottom-color: var(--accent);
}
.cs-count-tabs button .n { font-weight: 500; color: var(--ink3); }
.cs-count-tabs .zero {
  color: var(--faint); cursor: default; pointer-events: none;
}
.cs-count-tabs .zero .cs-dot { background: var(--line); }
.cs-tab-hint {
  margin-left: auto; font-size: 12.5px; color: var(--ink3);
  padding: 10px 0; white-space: nowrap; display: none;
}
@media (min-width: 1150px) { .cs-tab-hint { display: block; } }
.cs-year-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }  /* §7: wrap, never overflow */
.cs-year-tabs button { padding: 11px 16px; }

/* Result card */
.cs-result-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.cs-result-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line2); flex-wrap: wrap;
}
.cs-result-title {
  font-family: var(--serif); font-size: 15.5px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
.cs-result-title:hover { color: var(--accent); }
.cs-match-count { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--match); }
.cs-result-body { display: flex; flex-direction: column; padding: 10px 18px 14px; gap: 8px; }
.cs-snippet {
  display: flex; gap: 14px; text-decoration: none; color: inherit;
  font-size: 13.5px; line-height: 1.55; border-radius: 4px;
}
.cs-snippet:hover { background: var(--hover); }
.cs-snippet .loc {
  flex-shrink: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px; color: var(--ink3); min-width: 56px; padding-top: 2px;
}
.cs-snippet .txt {
  color: var(--ink2);
  /* Cards show a preview, not the document — clamp long utterances/paragraphs */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-snippet .txt strong { font-weight: 600; color: var(--ink); }
.cs-more-link { font-size: 12.5px; color: var(--accent); text-decoration: none; font-weight: 500; }
.cs-more-link:hover { text-decoration: underline; }

/* Match-nav bar (viewers, arrived from search/chat) */
.cs-matchnav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 14px; margin-top: 16px; font-size: 13px; flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cs-matchnav .count { color: var(--ink2); }
.cs-matchnav .count b { color: var(--match); }
.cs-matchnav .count .q { color: var(--ink); font-weight: 600; }
.cs-matchnav-btns { display: flex; gap: 6px; margin-left: auto; }
.cs-matchnav-btns button {
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--accent);
  cursor: pointer; font-family: inherit;
}
.cs-matchnav-btns button:hover { border-color: var(--accent); }
.cs-matchnav-btns .quiet {
  background: none; border: none; padding: 5px 8px; color: var(--ink3); font-weight: 400;
}
.cs-matchnav-btns .quiet:hover { color: var(--ink); border: none; }
/* current match emphasis */
.cs-current-match { background: color-mix(in srgb, var(--match) 45%, var(--surface)) !important; }
.cs-current-block {
  border: 1px solid color-mix(in srgb, var(--match) 45%, var(--surface));
  background: color-mix(in srgb, var(--match) 12%, var(--surface));
  border-radius: 6px; padding: 10px 14px; margin: -1px -15px;
}

/* Citation ovals + inline citations + source cards (chat) */
.cs-oval {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid color-mix(in srgb, var(--x) 55%, var(--surface));
  background: color-mix(in srgb, var(--x) 10%, var(--surface));
  border-radius: 999px; padding: 2px 8px 2px 3px; text-decoration: none;
}
.cs-oval .num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--x) 24%, var(--surface));
  font-size: 9.5px; font-weight: 700; color: var(--xi); padding: 0 3px;
}
.cs-oval .loc {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 500; color: var(--xi);
}
.cs-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; text-decoration: none; padding: 0 3px;
  color: var(--xi);
  border: 1px solid color-mix(in srgb, var(--x) 55%, var(--surface));
  background: color-mix(in srgb, var(--x) 10%, var(--surface));
  vertical-align: text-bottom;
}
.cs-source-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px;
}
.cs-source-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
  background: var(--bg); text-decoration: none;
}
.cs-source-card:hover { border-color: var(--accent); }
.cs-source-card .doc { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--xi); }
.cs-source-card .cites { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }

/* Chat bubbles + composer */
.cs-bubble-user {
  align-self: flex-end; max-width: 85%;
  background: var(--accent); color: var(--onaccent);
  border-radius: 10px 10px 2px 10px; padding: 10px 16px;
  font-size: 14px; line-height: 1.55;
}
.cs-bubble-assistant {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 2px 10px 10px 10px; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.cs-answer {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.65; color: var(--ink); word-break: break-word;
}
.cs-copy-row {
  border-top: 1px solid var(--line2); padding-top: 8px;
  display: flex; justify-content: flex-end;
}
.cs-copy-row button {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--ink3);
  background: none; border: none; padding: 2px 0; cursor: pointer; font-family: inherit;
}
.cs-copy-row button:hover { color: var(--ink2); }
.cs-model-note { font-size: 12px; color: var(--ink3); }

.cs-composer {
  display: flex; gap: 10px; align-items: flex-end;
  border: 1.5px solid var(--line); border-radius: 6px; padding: 10px 12px;
  background: var(--surface); margin-top: auto;
  position: sticky; bottom: 12px; z-index: 20;
  box-shadow: 0 -4px 16px rgba(0,0,0,.05);
}
@media (max-width: 759.98px) {
  .cs-composer { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* §7: ≥44px touch targets — the 44×40 desktop Send grows to 44×44.
     min-height (not height): it must win regardless of source order vs. the
     base .cs-send { height: 40px } rule below. */
  .cs-send, .cs-search-submit { min-height: 44px; }
}
.cs-composer textarea {
  flex: 1; min-width: 0; border: none; outline: none; resize: none;
  background: transparent; font-size: 16px; line-height: 1.5; color: var(--ink);
  max-height: 360px; overflow-y: hidden; font-family: inherit;
}
.cs-send {
  background: var(--accent); color: var(--onaccent); border: none; border-radius: 4px;
  width: 44px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; flex-shrink: 0;
}
.cs-send:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.cs-composer-note {
  display: flex; gap: 16px; justify-content: center; padding-top: 10px;
  font-size: 11.5px; color: var(--faint);
}
.cs-composer-note a { color: var(--faint); text-decoration: underline; }

/* Buttons */
.cs-btn-primary {
  background: var(--accent); color: var(--onaccent); border: none; border-radius: 3px;
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
}
.cs-btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.cs-btn { /* secondary / launch */
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 16px;
  background: var(--surface); cursor: pointer; font-family: inherit;
}
.cs-btn:hover { border-color: var(--accent); color: var(--accent); }
.cs-search-submit {
  background: var(--accent); color: var(--onaccent); border: none; border-radius: 3px;
  width: 44px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; flex-shrink: 0; margin: -4px -6px -4px 0;
}

/* Search boxes (§5 Forms) */
.cs-search-box {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--accent); border-radius: 4px; padding: 11px 14px;
  background: var(--surface);
}
.cs-search-box input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--ink); font-family: inherit;
}
.cs-filter-input {
  border: 1px solid var(--line); border-radius: 4px; padding: 9px 12px;
  font-size: 16px; background: var(--surface); color: var(--ink);
  outline: none; font-family: inherit;
}

/* Meeting rows (meetings page) */
.cs-meeting-row {
  display: flex; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.cs-meeting-row .date {
  flex-shrink: 0; width: 76px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink3);
}
.cs-meeting-row .title {
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.cs-meeting-row .title:hover { color: var(--accent); }
.cs-meeting-row .doclinks { display: flex; gap: 16px; font-size: 13px; flex-wrap: wrap; }
.cs-meeting-row .doclinks a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); text-decoration: underline;
}
.cs-meeting-row .pending { color: var(--faint); }
.cs-meeting-row .dur { flex-shrink: 0; font-size: 12px; color: var(--ink3); }
/* Right-hand utility column: duration on top, then monochrome launchers
   (Summary, Portal). Desktop stacks right-aligned; mobile (media block)
   re-lays it as a full-width footer line under the doclinks. */
.cs-row-side {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px; text-align: right;
}
.cs-row-side a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink2); text-decoration: none; white-space: nowrap;
}
.cs-row-side a:hover { color: var(--accent); }
.cs-pill-upcoming {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 9px;
}
.cs-month-h {
  margin: 0 0 2px; font-family: var(--serif);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink2);
}

/* Governance block-and-launch cards */
.cs-gov-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 20px;
  background: var(--surface); display: flex; align-items: center; gap: 18px;
}
.cs-gov-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cs-gov-card .name { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cs-gov-card .meta { font-size: 13px; color: var(--ink3); line-height: 1.5; }

/* Rail cards (results sidebar) */
.cs-rail-card {
  border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px;
  background: var(--surface); display: flex; flex-direction: column; gap: 8px;
}
.cs-rail-card .label {
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink3);
}
.cs-rail-card .text { font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.cs-rail-card .action { font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cs-rail-card .action:hover { text-decoration: underline; }
.cs-planned {
  font-size: 12px; color: var(--faint); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}

/* Viewer header block */
.cs-viewer-head {
  display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 18px;
}
.cs-viewer-head .toprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-backlink { font-size: 12.5px; color: var(--accent); text-decoration: none; }
.cs-backlink:hover { text-decoration: underline; }
.cs-viewer-meta {
  display: flex; gap: 14px; font-size: 13px; color: var(--ink3);
  flex-wrap: wrap; align-items: center;
}
.cs-viewer-meta a {
  color: var(--accent); text-decoration: underline;
  display: inline-flex; align-items: center; gap: 5px;
}

/* Transcript utterances */
.cs-utterance { display: flex; flex-direction: column; gap: 4px; }
.cs-utterance .who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cs-utterance .speaker { font-size: 13px; font-weight: 700; }
.cs-timestamp {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--accent); text-decoration: none;
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 9px;
}
.cs-timestamp:hover { border-color: var(--accent); }
.cs-utterance p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink2); overflow-wrap: anywhere; }

/* Document paragraphs */
.cs-para { display: flex; gap: 14px; }
.cs-para .page {
  flex-shrink: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--ink3); min-width: 40px; padding-top: 3px;
}
.cs-para p {
  margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink2);
  min-width: 0; overflow-wrap: anywhere;  /* long URLs/tokens in agenda text */
}
.cs-para p strong { color: var(--ink); }

/* Speakers table */
.cs-speakers-table { margin-top: 18px; border-top: 2px solid var(--ink); }
.cs-sp-row {
  display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; align-items: baseline;
}
.cs-sp-head {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink3); padding: 10px 0;
}
.cs-sp-name { flex: 1.4; font-weight: 600; color: var(--ink); }
.cs-sp-count { width: 74px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink2); }
.cs-sp-last { width: 96px; color: var(--ink3); font-size: 12.5px; }
.cs-sp-actions { width: 180px; display: flex; gap: 12px; }
.cs-sp-actions a { color: var(--accent); text-decoration: underline; font-size: 12.5px; }

/* Role sections (#46): board members and public comment are separate tables.
   The board table's second column carries a tenure label ("Dec 2024 – present")
   rather than a count, so it needs room and reads left-aligned. */
.cs-sp-section {
  margin: 30px 0 0; font-size: 15px; font-weight: 650; color: var(--ink);
  display: flex; align-items: baseline; gap: 9px;
}
.cs-sp-section-n {
  font-size: 11.5px; font-weight: 600; color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.cs-speakers-table--board .cs-sp-count {
  width: 152px; text-align: left; font-variant-numeric: normal;
}
/* Crossover note: someone who spoke at public comment and was later elected. */
.cs-sp-note {
  display: block; margin-top: 3px; font-size: 12px; font-weight: 400;
  color: var(--ink3);
}
@media (max-width: 759.98px) {
  .cs-sp-last, .cs-sp-actions { display: none; }  /* §7: drop last-heard + actions */
  .cs-speakers-table--board .cs-sp-count { width: 118px; font-size: 12.5px; }
}

/* Welcome / suggestion buttons (chat) */
.cs-suggestion {
  font-size: 13.5px; color: var(--accent); background: var(--surface);
  border: 1px solid var(--line); border-radius: 5px; padding: 13px 16px;
  cursor: pointer; text-align: left; min-height: 44px; font-family: inherit;
}
.cs-suggestion:hover { border-color: var(--accent); }

/* Deep-link flash (arrival from a chat citation anchor) */
@keyframes cs-flash { 0%,60% { background: var(--mark); } 100% { background: transparent; } }
.cs-deep-flash { animation: cs-flash 2s ease-out 1; border-radius: 4px; }

/* ── Page: home / results ─────────────────────────────────────────────────── */
.cs-hero {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: clamp(48px, 10vh, 110px) clamp(16px, 4vw, 32px) 48px;
}
.cs-hero-heading { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 720px; }
.cs-hero-heading h1, .cs-hero-heading h2 {
  margin: 0; font-family: var(--serif);
  font-size: clamp(20px, 3.2vw, 28px); font-weight: 600;
  letter-spacing: -0.022em; line-height: 1.35; text-wrap: pretty;
}
.cs-hero-location {
  margin: 6px 0 0; font-size: 12.5px; color: var(--ink3); letter-spacing: .02em;
}
.cs-hero .cs-search-box { width: 100%; max-width: 680px; }
.cs-hero-blurb {
  margin: 0; font-size: 13px; color: var(--ink3);
  text-align: center; max-width: 560px; line-height: 1.6;
}
.cs-quicklinks {
  display: flex; gap: 26px; flex-wrap: wrap; justify-content: center;
  font-size: 13.5px; font-weight: 500; margin-top: 8px;
}
.cs-quicklinks a { color: var(--accent); text-decoration: none; }
.cs-quicklinks a:hover { text-decoration: underline; }
.cs-quicklinks a.quiet { color: var(--ink3); }
.cs-quicklinks a.quiet:hover { color: var(--accent); }

.cs-tabs-strip {
  padding: 0 clamp(16px, 4vw, 32px);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.cs-results-wrap {
  display: flex; flex-wrap: wrap; gap: 32px;
  padding: 24px clamp(16px, 4vw, 32px) 56px; align-items: flex-start;
}
.cs-results-col { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cs-rail { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 759.98px) { .cs-rail { max-width: none; } }
.cs-mobile-searchbox { margin: 14px 16px 2px; padding: 8px 12px; }
.cs-empty-state { font-size: 13.5px; color: var(--ink3); padding: 40px 0; text-align: center; }

/* ── Policy cross-refs — "Discussed in meetings" (#10) ────────────────────── */
.cs-xrefs { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 720px; }
.cs-xrefs h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cs-xrefs .note { margin: 0 0 10px; font-size: 12.5px; color: var(--ink3); }
.cs-xref-row { display: flex; align-items: baseline; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line2); font-size: 13.5px; }
.cs-xref-row:last-child { border-bottom: 0; }
.cs-xref-row .date { color: var(--ink); font-weight: 500; min-width: 104px; }
.cs-xref-row .doclinks { display: flex; gap: 16px; font-size: 13px; flex-wrap: wrap; }
.cs-xref-row .doclinks a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); text-decoration: none; }
.cs-xref-row .doclinks a:hover { color: var(--accent); }

/* ── Page: reports (profiles flag) — self-styled light documents ──────────── */
.cs-report-body {
  background: #fff; color: #26251f;  /* stays light in dark theme (see template) */
  border: 1px solid var(--line); border-radius: 8px;
  padding: 28px 32px; margin-top: 22px;
}
@media (max-width: 759.98px) { .cs-report-body { padding: 18px 16px; border-radius: 6px; } }

/* ── Page: governance ─────────────────────────────────────────────────────── */
.cs-gov-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 26px; }
.cs-gov-cell { flex: 1 1 340px; max-width: 460px; }
.cs-gov-note { margin: 18px 0 0; font-size: 12.5px; color: var(--ink3); max-width: 620px; line-height: 1.6; }
.cs-page-intro { margin: 6px 0 0; font-size: 13.5px; color: var(--ink2); max-width: 620px; line-height: 1.6; }

/* ── Page: prose (privacy / about / for-ai-agents) ────────────────────────── */
.cs-prose { max-width: 720px; }
.cs-prose h2 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
.cs-prose p, .cs-prose li { font-size: 14.5px; line-height: 1.7; color: var(--ink2); }
.cs-prose strong { color: var(--ink); }
.cs-prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cs-prose th, .cs-prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.cs-prose th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cs-prose code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; background: var(--hover); border-radius: 3px; padding: 1px 5px; }

/* ── Page: login ──────────────────────────────────────────────────────────── */
.cs-login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.cs-login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 26px 28px; width: min(360px, 100%);
  display: flex; flex-direction: column; gap: 12px;
}
.cs-login-card input[type="password"] {
  width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 10px 13px;
  font-size: 16px; background: var(--bg); color: var(--ink); outline: none; font-family: inherit;
}
.cs-login-card input[type="password"]:focus { border-color: var(--accent); }
.cs-login-card .cs-btn-primary { min-height: 44px; }  /* §7 touch target */
.cs-login-err { font-size: 12.5px; color: var(--match); display: none; }
.cs-login-version { font-size: 10.5px; letter-spacing: .08em; color: var(--faint); text-align: right; }