/* =====================================================================
 * Cocoa Civic — design system
 *
 * Newsroom-neutral, evidence-based. Quiet authority. Reads like a
 * serious longform publication, not a chat app or government portal.
 *
 * Color palette: warm off-white, near-black text, deep civic teal accent
 * Typography:    Charter / serif for body, system sans for UI labels
 * Layout:        single column at narrow widths; modest grid at wide
 * Spacing:       generous; lots of air around headings
 * ===================================================================*/


/* ─── Reset + base ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Color */
  --bg:              #FBF9F4;
  --surface:         #FFFFFF;
  --surface-alt:     #F4F0E7;
  --text:            #1A1A1A;
  --text-secondary:  #5A5A5A;
  /* Accessibility pass 2 (R-72, 2026-09-20): #8A8580 measured 3.2–3.65:1 on the three
     page grounds, below WCAG AA 4.5:1 for the small meta text it colours; #6B6660
     measures 5.0 / 5.4 / 5.7:1 on --surface-alt / --bg / --surface. */
  --text-tertiary:   #6B6660;
  --border:          #E8E2D9;
  --border-strong:   #C8C0B3;
  --accent:          #2C5F70;
  --accent-hover:    #1F4A57;
  --accent-soft:     #DDE9EC;
  --warning:         #B8722C;
  --warning-soft:    #FBEBD3;
  --success:         #3F7A48;
  --success-soft:    #DEEBDC;
  --danger:          #A33B2D;

  /* Typography */
  --font-serif: Charter, "Iowan Old Style", "Apple Garamond", Georgia,
                Cambria, "Times New Roman", Times, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "Roboto Mono", Menlo,
                Consolas, monospace;

  /* Spacing scale (4px base) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Layout */
  --max-read:  720px;
  --max-wide:  1080px;
  --max-full:  1200px;

  /* Radii / shadows */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
}

html {
  font-size: 17px;       /* a touch larger than default for readability */
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* Sticky header is ~64-72px. Anchor jumps (e.g. the meeting
     page's "Transcript" button to `#transcript`) must offset by the
     header height or they land UNDER it — the section heading is
     hidden and the user reads the click as a no-op. P2-8 fix. */
  scroll-padding-top: 84px;
}

/* Belt-and-suspenders: also set scroll-margin-top on the common
   in-page anchor targets so the offset works even if a parent
   container overrides html-level scroll-padding. */
section[id],
h2[id],
h3[id] {
  scroll-margin-top: 84px;
}

@media (max-width: 600px) {
  html { font-size: 16px; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Typography ───────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: var(--s7) 0 var(--s4);
  color: var(--text);
}

h1 {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0;
}
h2 { font-size: 1.7rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; font-weight: 700; }

@media (max-width: 600px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.4rem; }
}

p { margin: 0 0 var(--s4); }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 112, 0.35);
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

strong, b { font-weight: 700; }
em, i     { font-style: italic; }
small     { font-size: 0.85em; color: var(--text-secondary); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--surface-alt);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
pre {
  background: var(--surface-alt);
  padding: var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; border: 0; }

blockquote {
  margin: var(--s5) 0;
  padding: var(--s2) var(--s5);
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s7) 0;
}

/* ─── Layout primitives ────────────────────────────────────────────── */

.container         { max-width: var(--max-full); margin: 0 auto; padding: 0 var(--s5); }
.container-wide    { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--s5); }
.container-read    { max-width: var(--max-read); margin: 0 auto; padding: 0 var(--s5); }

.stack > * + *     { margin-top: var(--s4); }
.stack-lg > * + *  { margin-top: var(--s6); }
.stack-xl > * + *  { margin-top: var(--s8); }

.cluster {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
}
.cluster-end { justify-content: flex-end; }

.grid-2, .grid-3 { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ─── Header / nav ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 244, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  display: flex;
  align-items: baseline;
  gap: var(--s6);
  padding: var(--s4) var(--s5);
  max-width: var(--max-full);
  margin: 0 auto;
}

.brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--accent); }
.brand-civic { color: var(--accent); }   /* source-grounded header: "CocoaCivic" as one word (tester D-30) */
.brand-slash {
  color: var(--accent);
  font-weight: 400;
  margin: 0 0.2em;
}
.brand-sub {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.site-nav {
  display: flex;
  gap: var(--s5);
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.site-nav a {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--s2) 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.site-nav a:hover, .site-nav a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Hamburger toggle — hidden on desktop, the nav shows inline there. */
.nav-toggle-cb { position: absolute; opacity: 0; pointer-events: none; }
/* E1 (Chrome report 2026-09-24): at desktop width the hidden checkbox was an
   invisible tab stop. It is out of the layout AND the tab order at desktop;
   the mobile rule below restores it together with the visible toggle. */
@media (min-width: 701px) { .nav-toggle-cb { display: none; } }
.nav-toggle { display: none; }
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

@media (max-width: 700px) {
  .site-header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
  }
  .brand { flex: 1 1 auto; }
  .brand-sub { display: none; }

  /* Show the hamburger; 44×44 tap target for accessibility. */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 11px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
  }

  /* Nav collapses to a stacked drawer below the brand row; hidden
     until the checkbox is checked. */
  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: var(--s2);
  }
  .nav-toggle-cb:checked ~ .site-nav { display: flex; }
  .site-nav a {
    padding: var(--s3) var(--s2);
    border-bottom: 1px solid var(--border);
  }
  .site-nav a:hover, .site-nav a.active {
    border-bottom-color: var(--accent);
  }
}

/* ─── Hero (home) ──────────────────────────────────────────────────── */

.hero {
  padding: var(--s8) 0 var(--s7);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)),
    var(--bg);
}
.hero-inner {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 0 var(--s5);
  text-align: center;
}
.hero h1 {
  font-size: 2.8rem;
  margin-bottom: var(--s4);
}
.hero-tagline {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto var(--s7);
  font-style: italic;
}
.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s6);
  margin-top: var(--s5);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-tertiary);
}
.hero-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: var(--s1);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .hero { padding: var(--s7) 0 var(--s6); }
  .hero h1 { font-size: 2rem; }
}

/* ─── Search input ─────────────────────────────────────────────────── */

.search-form {
  max-width: 620px;
  margin: 0 auto;
}
.search-input-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms, box-shadow 120ms;
}
.search-input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-input {
  flex: 1;
  min-width: 0; /* R2 mobile: let the field shrink so the button stays on screen at 375px */
  border: 0;
  padding: var(--s4) var(--s5);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  background: transparent;
  color: var(--text);
  outline: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.search-input::placeholder { color: var(--text-tertiary); font-style: italic; }
.search-submit {
  flex-shrink: 0;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  padding: 0 var(--s5);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  cursor: pointer;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: background 120ms;
}
.search-submit:hover { background: var(--accent-soft); }

.search-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  margin-top: var(--s5);
  font-family: var(--font-sans);
  font-size: 0.84rem;
}
.search-example {
  display: inline-block;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 120ms;
}
.search-example:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

/* ─── Section headings ─────────────────────────────────────────────── */

.section {
  padding: var(--s8) 0;
  border-bottom: 1px solid var(--border);
}
.section:last-child { border-bottom: 0; }

.section-eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--s2);
}
.section-title {
  font-size: 1.6rem;
  margin: 0 0 var(--s3);
}
.section-lede {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: var(--s6);
  max-width: 600px;
}

/* ─── Cards ────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s5);
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { color: inherit; }

.card-meta {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-tertiary);
  margin-bottom: var(--s2);
  letter-spacing: 0.02em;
}
.card-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 var(--s2);
  line-height: 1.3;
  color: var(--text);
}
.card-body {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.card-footer {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

/* Meeting row — entire row is a clickable link to the detail page */
.meeting-row-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.meeting-row-link:hover { color: inherit; text-decoration: none; }
.meeting-row-link:hover .meeting-row {
  background: var(--surface-alt);
}
.meeting-row-link:hover .title {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 112, 0.35);
  text-underline-offset: 3px;
}
.meeting-row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

.meeting-row {
  padding: var(--s4);
  margin: 0 calc(var(--s4) * -1);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 5em 1fr auto;
  gap: var(--s4);
  align-items: baseline;
  transition: background 100ms;
}
.meeting-row-link:first-of-type .meeting-row {
  border-top: 1px solid var(--border);
}

.meeting-row .date {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.meeting-row .board {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.meeting-row .title {
  font-weight: 500;
  color: var(--text);
}
.meeting-row .flags {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Artifact-flag chips — show what content is available for this meeting */
.meeting-row .artifact-flags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-left: var(--s3);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-weight: 400;
}
.meeting-row .artifact-flags span {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .meeting-row {
    grid-template-columns: minmax(0, 1fr);   /* 2026-10-19 (tester D-19): a nowrap chip made the single column 412 px wide at 375 */
    gap: var(--s1);
  }
  .meeting-row .flags { font-size: 0.78rem; white-space: normal; }
  .meeting-row .flags .pill { white-space: normal; }
  .meeting-row .artifact-flags {
    margin-left: 0;
    margin-top: var(--s2);
    display: flex;
  }
}

/* ─── Pipeline-state pills ─────────────────────────────────────────── */

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid;
}
.pill-processed { color: var(--success); border-color: var(--success-soft); background: var(--success-soft); }
.pill-recorded  { color: var(--accent);  border-color: var(--accent-soft);  background: var(--accent-soft); }
.pill-agenda    { color: var(--warning); border-color: var(--warning-soft); background: var(--warning-soft); }
/* Tester D-26 (2026-10-19), source-grounded pages only (body.sga): the two colours above measured 4.16:1 (processed) and
   3.27:1 (agenda) on their pills; these measure 5.25:1 and 5.59:1. Same hues, darker. */
.sga .pill-processed { color: #2F6A38; }
.sga .pill-agenda    { color: #8A4F14; }
.pill-upcoming  { color: var(--text-tertiary); border-color: var(--border); background: var(--surface-alt); }

/* ─── Tabs ─────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: var(--s5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s5);
  font-family: var(--font-sans);
}
.tab {
  padding: var(--s3) 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
}
.tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab:hover { color: var(--text); }

/* ─── Filters bar ──────────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  padding: var(--s4) 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
}
.filters select, .filters input[type="text"] {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--text);
}
.filters label {
  color: var(--text-secondary);
}

/* ─── Buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: var(--s3) var(--s5);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
  border: 1px solid;
  cursor: pointer;
  transition: all 120ms;
  background: transparent;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Footer ───────────────────────────────────────────────────────── */

.site-footer {
  margin-top: var(--s9);
  padding: var(--s7) 0 var(--s8);
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.site-footer a { color: var(--accent); }
.site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s7);
  max-width: var(--max-full);
  margin: 0 auto;
  padding: 0 var(--s5);
}
@media (max-width: 800px) {
  .site-footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
}
.site-footer h4, .site-footer .footer-heading {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  margin: 0 0 var(--s3);
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li { margin-bottom: var(--s2); }
.disclaimer {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-tertiary);
  max-width: var(--max-read);
}

/* ─── Source-grounded launch: contrast and tap targets (testers D-26, D-27, D-22; 2026-10-19) ───────────────────────
   Scoped to body.sga (set only in source-grounded mode). Contrast figures are WCAG ratios of the colour on its ground. */
.sga .vote-state-passed     { color: #2F6A38 !important; }   /* was var(--success) on var(--success-soft): 4.16:1 -> 5.25:1 */
.sga .vote-state-unresolved { color: #8A4F14 !important; }   /* was var(--warning) on var(--warning-soft): 3.27:1 -> 5.59:1 */
/* footer links: a 44 px high tap target (they were 17 px) */
.sga .site-footer li { margin-bottom: 0; }
.sga .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.15rem; }
.sga .site-footer .disclaimer a, .sga .site-footer p a { display: inline; min-height: 0; padding: 0; }
/* radio buttons and check boxes: a larger control inside a 44 px high label (the control was 13 px) */
.sga input[type="radio"], .sga input[type="checkbox"] { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; margin: 0 0.5rem 0 0; accent-color: var(--accent); }
.sga label:has(> input[type="radio"]), .sga label:has(> input[type="checkbox"]) { display: flex !important; align-items: center; min-height: 44px; }   /* !important: the labels carry an inline display */
/* a tapped glossary term (static/js/glossary-tap.js) */
.sga abbr[title]:active::after { content: none; }   /* the press-and-hold bubble gives way to the tap box */
.gloss-tip { position: absolute; z-index: 1100; background: var(--surface, #fff); color: var(--text, #1a1a1a); border: 1px solid var(--border-strong, #c8c0b3);
  border-radius: var(--r-sm, 4px); box-shadow: var(--shadow-md); padding: 0.6rem 0.8rem; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.45; }

/* ─── Article (long-form: summaries, topic timelines, methodology) ── */

.article {
  font-size: 1.08rem;
  line-height: 1.7;
}
.article h1, .article h2 { margin-top: var(--s8); }
.article h3 { margin-top: var(--s6); }
.article h2:first-child, .article h1:first-child { margin-top: 0; }

.article ul, .article ol {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
}
.article li { margin-bottom: var(--s2); }

.article table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s5) 0;
  font-size: 0.95rem;
}
.article th, .article td {
  padding: var(--s3);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.article th {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text);
  background: var(--surface-alt);
}

.article img { max-width: 100%; height: auto; border-radius: var(--r-md); }


/* ─── Search results page ──────────────────────────────────────────── */

.search-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--s7);
  align-items: start;
}
@media (max-width: 900px) {
  .search-results-layout { grid-template-columns: 1fr; }
}
.search-results-single { grid-template-columns: minmax(0, 1fr); }
.search-answer {
  min-height: 200px;
}
.search-answer-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.search-answer-q {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.search-answer-q::before { content: "“"; color: var(--text-tertiary); }
.search-answer-q::after  { content: "”"; color: var(--text-tertiary); }

.live-progress {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: var(--s3) var(--s4);
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--s4);
}
.live-progress.done { border-left-color: var(--success); background: var(--success-soft); }
.live-progress.error { border-left-color: var(--danger); background: #f8e6e3; }
/* Live "Still working" indicator — a thorough answer can take minutes, so the
   page shows continuous motion (pulsing dot + ticking clock) rather than a
   static line that reads as frozen. */
.live-progress.working-note {
  border-left-color: var(--accent, #1565c0);
  background: var(--info-soft, #eef4fb);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.working-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent, #1565c0);
  flex: 0 0 auto;
  animation: working-pulse 1.4s ease-in-out infinite;
}
@keyframes working-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .working-dot { animation: none; opacity: 0.9; }
}

/* EV2-11: stall reassurance — calm/informational, never alarming. */
.live-progress.stall-note {
  border-left-color: var(--accent, #1565c0);
  background: var(--info-soft, #eef4fb);
  font-style: italic;
  color: var(--muted, #555);
}

.live-answer {
  white-space: pre-wrap;
  font-size: 1.05rem;
  line-height: 1.65;
}

.preview-hits {
  font-family: var(--font-sans);
  font-size: 0.86rem;
}
.preview-hit {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}
.preview-hit:last-child { border-bottom: 0; }
.preview-hit-title {
  display: block;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 2px;
}
.preview-hit-title:hover { color: var(--accent); }
.preview-hit-meta {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-bottom: var(--s2);
}
.preview-hit-snippet {
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ─── Detail panels ────────────────────────────────────────────────── */

.detail-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s5);
  margin-bottom: var(--s6);
}
.detail-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: var(--s2);
}
.detail-meta {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-top: var(--s3);
}
.detail-meta dl {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: var(--s2) var(--s4);
  margin: 0;
}
.detail-meta dt {
  color: var(--text-tertiary);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.detail-meta dd { margin: 0; color: var(--text); }

/* ─── Disclosure / banner ─────────────────────────────────────────── */

.banner {
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  border-left: 3px solid;
  margin-bottom: var(--s5);
}
.banner-info    { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.banner-warning { background: var(--warning-soft); border-color: var(--warning); }
.banner-success { background: var(--success-soft); border-color: var(--success); }
.banner strong { font-weight: 700; }

.ai-disclosure {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ─── Topic / person index grids ───────────────────────────────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s4);
}
/* 2026-10-23: four home cards (with Articles) as two rows of two, not three and a lone fourth */
@media (min-width: 600px) {
  .tile-grid.tile-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cluster cards on /topics — visually distinct from single-stub
   topics so readers can tell "this card collapses N threads" at a
   glance. Subtle accent edge + small badge in the card-meta slot. */
.card-cluster {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}

/* Inline ⚠ marker for roster-unverified speakers (R3-P1-5). Wraps each
   occurrence of a flagged name in the prose body so a skimming reader
   can't take a hallucinated name at face value. Links to the page's
   warning banner (#summary anchor). */
.unverified-marker {
  font-size: 0.75em;
  line-height: 0;
  vertical-align: super;
  color: #b85700;
  margin-left: 0.1em;
}
.unverified-marker a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}
.unverified-marker a:hover {
  color: #802000;
}

/* LAUNCH-3: ↻ marker inline next to names the canonical-roster
   validator AUTO-CORRECTED. The tooltip identifies what the name was
   corrected FROM. A muted green so it reads as "good catch" rather
   than "warning". */
.corrected-marker {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
  color: #6a7060;
  margin-left: 0.05em;
}
.corrected-marker a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}
.corrected-marker a:hover {
  color: #2d5016;
}

/* LAUNCH-11: rotate the historical-roster chevron when the seat
   is expanded so the affordance reads as a real disclosure widget. */
.roster-history[open] > summary .roster-chevron {
  transform: rotate(90deg);
}
.roster-history > summary::-webkit-details-marker { display: none; }
.roster-history > summary::marker                  { display: none; content: ""; }
.roster-history > summary:hover { color: var(--accent); }

/* The "warn" variant of the AI-disclosure badge (P0 round 2 #1, #3).
   Used on meeting summaries whose roster audit flagged unverified
   speaker names — the page must NOT claim "cross-checked against
   primary sources" when a name failed verification. */
.ai-disclosure-warn {
  background: #fff7e6 !important;
  color: #8a5a00 !important;
  border-color: #f0c97f !important;
}

/* ─── "Cite this" button (P3-10) ─────────────────────────────────────
   Small unobtrusive button that copies a formatted citation +
   permalink to the clipboard. Surfaces on /search answers,
   /people/<slug>, and /topics/<slug>.                                 */
.cite-this {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  margin: 0.25rem 0;
}
.cite-this:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cite-this:disabled {
  cursor: default;
  opacity: 0.85;
}
.card-cluster:hover {
  background: var(--accent-soft);
}
.cluster-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Cross-link styling — canonical roster names automatically linkified
   in topic-timeline prose (P3-11). Subtle dotted underline so the
   roster names read as inline links without making the prose look
   over-marked-up. */
.roster-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.roster-link:hover {
  border-bottom-style: solid;
}

/* ─── Record lists (per-person motions, commitments, action items, etc.) ── */

.record-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s5);
  border-top: 1px solid var(--border);
}
.record-item {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--border);
}
.record-date {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: 600;
}
.record-body { min-width: 0; }
.record-text {
  color: var(--text);
  margin-bottom: var(--s2);
  line-height: 1.55;
}
.record-meta {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.record-meta a { color: var(--accent); }
.record-meta strong { color: var(--text); }

@media (max-width: 700px) {
  .record-item {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
  .record-date {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
  }
}

/* details/summary for long lists */
details summary {
  cursor: pointer;
  padding: var(--s3) 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--accent);
  font-weight: 600;
  user-select: none;
}
details summary:hover { color: var(--accent-hover); }
details[open] summary { margin-bottom: var(--s3); }

/* ─── Active backfill banner (home + about) ────────────────────────── */

.activity-banner {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: var(--s3) var(--s5);
  background: var(--accent-soft);
  border-radius: var(--r-md);
  margin: var(--s5) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
}
.activity-banner .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

/* ─── Error pages ──────────────────────────────────────────────────── */

.error-page {
  text-align: center;
  padding: var(--s9) var(--s5);
  max-width: var(--max-read);
  margin: 0 auto;
}
.error-code {
  font-family: var(--font-serif);
  font-size: 6rem;
  font-weight: 700;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1;
}

/* ─── /search page additions ───────────────────────────────────────────
   Worked-example block, board-tile discovery grid, alt-section background,
   inline citation + unverified-flag markers, and example-list spacing.
   Added 2026-05-14 to fill the dead band between the search form and
   the footer with engagement-driving content. ───────────────────────── */

.section-alt {
  background: var(--surface-alt, #F4F1E8);
}

.example-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

/* Worked example — the embedded sample Q&A that shows what an answer
   actually looks like. Three vertical regions: question prompt,
   composed answer (with .cite superscripts + .flag-unverified inline),
   and a CTA to run the real search. */
.worked-example {
  background: var(--surface, #FFF);
  border: 1px solid var(--border, #E5DCC9);
  border-radius: var(--r-md, 8px);
  padding: 1.75rem 2rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.worked-example-q {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border, #E5DCC9);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.worked-example-q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--accent, #B45A2C);
  color: white;
  font-weight: 700;
  border-radius: 50%;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.worked-example-a {
  padding-top: 1.25rem;
}
.worked-example-a p {
  margin: 0 0 0.85rem 0;
}
.worked-example-a sup.cite {
  color: var(--accent, #B45A2C);
  font-weight: 600;
  font-size: 0.72rem;
  font-family: var(--font-sans);
  padding: 0 0.15em;
  cursor: help;
}
.worked-example-sources {
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
.worked-example-sources ol {
  margin: 0.5rem 0 0 0;
  padding-left: 1.25rem;
}
.worked-example-sources li {
  margin-bottom: 0.4rem;
  color: var(--text-secondary);
}
.worked-example-cta {
  margin-top: 1.5rem;
  text-align: center;
}

/* Inline "this number couldn't be fully verified" marker. Distinct
   from regular emphasis so a reader can spot it while skimming. */
.flag-unverified {
  background: rgba(212, 159, 78, 0.18);
  padding: 0.05em 0.35em;
  border-radius: 3px;
  border-bottom: 1px dotted var(--accent, #B45A2C);
  font-style: normal;
  font-size: 0.95em;
}

/* Board-tile grid — discovery module under /search. Smaller card
   variant than the home page's .tile-grid (more boards per row at
   the same viewport). */
.board-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.board-tile {
  display: block;
  padding: 1.1rem 1.25rem;
}
.board-tile .card-title {
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
}
.board-tile .card-body {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

@media (max-width: 700px) {
  .worked-example { padding: 1.25rem 1.25rem; }
  .board-tile-grid { grid-template-columns: 1fr; }
}

/* ─── Utility ──────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.muted { color: var(--text-secondary); }
.tertiary { color: var(--text-tertiary); }
.tabular { font-variant-numeric: tabular-nums; }
.smallcaps { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
.hidden { display: none !important; }
/* The HTML5 `hidden` attribute must beat content rules like
   `a.card { display: block }`. Without this !important rule, JS that
   sets `el.hidden = true` looks like a no-op for elements with their
   own display rule (specificity 0,1,1 beats the UA `[hidden]` rule). */
[hidden] { display: none !important; }
/* Wrap wide tables (budget figures, vote matrices) so they scroll
   sideways on narrow screens instead of blowing out the page width. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Inline source citations (AI-synthesized answers) ────────────────────
 *
 * The research agent appends parenthesized source markers — e.g.
 * `(2024-09-24 CRA Board)`, `(profile_pblake)`, `(Canonical Roster)`. The
 * citation linkifier wraps each in `<sup class="citation">` so it reads
 * as a footnote mark rather than running prose. `cite-link` is added
 * when the citation resolves to a real URL (e.g. /people/<slug>).
 */
.citation {
  font-family: var(--font-sans);
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
  color: var(--text-tertiary);
  margin: 0 0.05em;
  letter-spacing: 0.01em;
  font-weight: 600;
  /* Subtle bracket frame to read as a citation, not random text. */
}
.citation a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.citation a:hover {
  text-decoration: none;
  border-bottom-color: currentColor;
}
.citation.cite-link {
  /* Linked citations get the accent color treatment so readers can spot
     the clickable ones at a glance. */
  color: var(--accent);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Print */
/* ─── Transcript lexical-cleanup flags ──────────────────────────────────
   Whisper produces phonetically-plausible-but-contextually-wrong words
   ("implication" instead of "invocation", "Pocco" instead of "Cocoa").
   cocoa_transcript_cleanup.py marks medium-confidence AI corrections as
   *[replacement]* and uncorrectable words as *[unclear]*. Python-Markdown
   renders *X* as <em>X</em>, so a flagged correction becomes
   <em>[replacement]</em> in the published HTML. The .lexical-flag class
   styles those spans with a dotted underline + native title-tooltip
   (added by a markdown post-processor that knows about the
   transcript_corrections.json sidecar).

   Visual reading: bracketed italic = "AI inferred this word from
   context". Click/hover to see the original Whisper output + the AI's
   reasoning. See /about/methodology for the full audit-trail policy.
   ────────────────────────────────────────────────────────────────────── */

em.lexical-flag,
.lexical-flag {
  font-style: italic;
  background: rgba(212, 159, 78, 0.10);
  border-bottom: 1px dotted var(--accent, #B45A2C);
  padding: 0 0.15em;
  border-radius: 2px;
  cursor: help;
}
em.lexical-flag-unclear,
.lexical-flag-unclear {
  font-style: italic;
  color: var(--text-tertiary);
  background: rgba(180, 90, 44, 0.06);
  border-bottom: 1px dotted var(--text-tertiary);
  padding: 0 0.15em;
  border-radius: 2px;
  cursor: help;
}
/* Slightly heavier on hover to confirm the tooltip will fire */
em.lexical-flag:hover,
em.lexical-flag-unclear:hover,
.lexical-flag:hover,
.lexical-flag-unclear:hover {
  background: rgba(212, 159, 78, 0.20);
}

/* ─── Jargon tooltips (RB-11 / EV2-10 acronym glossary) ─────────────────
   annotate_acronyms() wraps the first occurrence of each known acronym
   or jargon term in <abbr title="…">. Desktop readers get the native
   hover tooltip; the dotted underline + help cursor signal it's there.
   Touch devices never fire native title tooltips, so on hover-less
   devices a press (:active) reveals the definition in a CSS-only
   bubble — no JS. */

abbr[title] {
  position: relative;
  text-decoration: underline dotted var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: help;
}

@media (hover: none) {
  abbr[title]:active::after {
    content: attr(title);
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: var(--s1);
    z-index: 10;
    width: max-content;
    max-width: min(72vw, 38ch);
    background: var(--text);
    color: var(--bg);
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
  }
}

@media print {
  .site-header, .site-footer, .filters, .tabs { display: none; }
  body { background: white; color: black; font-size: 11pt; }
  a { color: black; text-decoration: underline; }
  /* In print, replace the visual flag with a footnote-style superscript */
  em.lexical-flag::after { content: "*"; vertical-align: super; font-size: 0.7em; }
  em.lexical-flag-unclear::after { content: "?"; vertical-align: super; font-size: 0.7em; }
}

/* R-73 (2026-09-22): htmx request-indicator rules, formerly injected by
   htmx as an inline <style> that the CSP blocked (includeIndicatorStyles
   is now off in base.html). Same rules htmx would have added. */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

/* R9 (2026-09-24, Chrome report E3/E5): wide tables in model-written
   summaries scroll inside their own labelled region instead of widening
   the page; all columns stay available. */
.table-scroll { max-width: 100%; }
.article .table-scroll { margin: 1rem 0; }
.article .table-scroll > table { margin: 0; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.not-in-recording a { color: var(--danger, #b3261e); font-weight: 700; text-decoration: none; }

/* E1 (2026-09-24): the subscribe address field needs a visible boundary and
   focus indicator in both themes. */
.subscribe-email { border: 1px solid var(--border-strong, var(--text-muted, #6b6b6b)); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; background: var(--surface, #fff); color: var(--text); }
.subscribe-email:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* A8 (2026-09-24): vote / motion anchors land clear of the sticky header. */
.vote-anchor { display: block; position: relative; top: -5rem; visibility: hidden; height: 0; }

/* R2 mobile (2026-09-24): a long unbroken token in a summary (e.g. the plain-text
   video address on cc_1334) widened the page to 459px at a 375px viewport. */
.article p, .article li, .article blockquote { overflow-wrap: break-word; }

/* Usable transcript (2026-10-06): passages with local uncertainty */
.ut .ut-p { padding: 0.45rem 0.6rem; border-radius: var(--r-sm); margin: 0.15rem 0; scroll-margin-top: 6.5rem; overflow-wrap: anywhere; }
/* 2026-10-19 (tester D-19): a recognizer run with no spaces (an 880-character Cyrillic run made cc_1290 8,496 px wide)
   breaks anywhere instead of widening the page; the banners above the passages quote such text too. */
#transcript .banner { overflow-wrap: anywhere; }
.ut-recording { scroll-margin-top: 6.5rem; }
.ut-play-status { position: sticky; top: 5.25rem; z-index: 5; margin: 0.5rem 0; padding: 0.25rem 0.25rem 0.25rem 0.75rem; border-radius: var(--r-sm); background: var(--surface-alt); border: 1px solid var(--border, #d7ddd8); font-family: var(--font-sans); font-size: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; opacity: 1; transition: opacity 0.4s; }
.ut-play-status:not(.on) { opacity: 0; visibility: hidden; max-height: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
.ut-play-dismiss, .ut-copy { font: inherit; background: none; border: 0; cursor: pointer; color: var(--text-muted, #5c6a63); }
.ut-play-dismiss { min-width: 44px; min-height: 44px; font-size: 1.3rem; line-height: 1; }
.ut .ut-copy { font-size: 0.75rem; text-decoration: underline; padding: 0; margin-left: 0.4rem; }
.ut .ut-playbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 0.6rem; margin-left: 0.4rem; border: 1px solid var(--border-strong, var(--text-muted, #6b6b6b)); border-radius: var(--r-sm); font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.ut-copy-field { width: 100%; box-sizing: border-box; margin: 0 0 0.5rem; font: inherit; font-size: 0.85rem; padding: 0.4rem; }
.ut .ut-p:target { outline: 2px solid var(--accent); }
.ut .ut-who { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-muted, #5c6a63); font-variant-numeric: tabular-nums; }
.ut .ut-speaker { font-weight: 600; }
.ut .ut-suspect { background: var(--warning-soft); border-left: 4px solid var(--warning); }
.ut .ut-rerecognized { background: var(--accent-soft); border-left: 4px solid var(--accent); }
.ut .ut-tag { font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.ut .ut-flag { font-size: 0.82rem; margin-top: 0.25rem; }
.ut .ut-prop { border: 1px dashed var(--border, #d7ddd8); border-radius: var(--r-sm); padding: 0.5rem 0.65rem; margin: 0.4rem 0 0.1rem; font-size: 0.95rem; }
.ut-pill { display: inline-block; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.6rem; border-radius: 999px; border: 1px solid var(--border, #d7ddd8); vertical-align: middle; }
.ut-pill.ut-partial { border-color: var(--warning); }

/* Evidence search (2026-10-06) */
.ev-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; }
.ev-item { border: 1px solid var(--border, #d7ddd8); border-radius: var(--r-sm); padding: 0.7rem 0.85rem; }
.ev-meta { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-muted, #5c6a63); }
.ev-text { margin: 0.35rem 0; }
.ev-prewrap { white-space: pre-line; overflow-wrap: anywhere; }
.ev-filters { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; margin: 0 0 0.75rem; padding: 0; font-family: var(--font-sans); font-size: 0.9rem; }
.ev-dym { font-family: var(--font-sans); font-size: 0.95rem; }
.ev-group { margin: 1.5rem 0; }
.ev-group h2 { margin-bottom: 0.2rem; }
.ev-count { font-size: 0.8em; font-weight: 400; color: var(--text-muted, #5c6a63); }
.ev-group-note { font-size: 0.85rem; margin: 0 0 0.6rem; }
.ev-more > summary { cursor: pointer; margin: 0.6rem 0; font-family: var(--font-sans); font-size: 0.9rem; }
.ev-suspect { background: var(--warning-soft); border-left: 4px solid var(--warning); }
.ev-warn { font-family: var(--font-sans); font-size: 0.85rem; margin-top: 0.3rem; }

.ut .ut-corrected { border-left: 4px solid var(--accent); }
.ut .ut-report { font: inherit; font-size: 0.75rem; background: none; border: 0; padding: 0; margin-left: 0.6rem; color: var(--text-muted, #5c6a63); text-decoration: underline; cursor: pointer; opacity: 0; }
.ut .ut-p:hover .ut-report, .ut .ut-report:focus-visible { opacity: 1; }
/* 2026-10-19 (tester D-13): on a touch screen there is no hover, so "report a problem" is always visible and is a
   44 px target. */
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .ut .ut-report, .ut .ut-copy { opacity: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 0.4rem; margin-left: 0.2rem; }
}
.ea-box { border: 1px solid var(--border, #d7ddd8); border-radius: var(--r-sm); padding: 0.9rem 1rem; margin: 0 0 1.25rem; }
.ea-box h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.ea-cites { margin: 0.5rem 0 0; padding-left: 1.1rem; font-family: var(--font-sans); font-size: 0.85rem; }

.ut .ut-unc, .banner .ut-unc { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; }
.ut .ut-unc:focus-visible::after, .ut .ut-unc:hover::after { content: " [or: " attr(data-alt) "]"; font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-muted, #5c6a63); }

/* Search that answers what voters type (tester D, 2026-10-19): results-page search box, spelling offer, fixed cards, dated results */
.vs-searchbox { margin: 0 0 1rem; }
.vs-searchbox .vs-label { display: block; font-family: var(--font-sans); font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: 0.25rem; }
.vs-dym { font-family: var(--font-sans); margin: 0 0 1rem; }
.vs-card { border: 1px solid var(--border-strong); border-left: 4px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-alt); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.vs-card-head { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.vs-card-title { font-size: 1.15rem; font-weight: 600; margin: 0.15rem 0; }
.vs-card-text { margin: 0.2rem 0; }
.vs-card-links { margin: 0.4rem 0 0; font-family: var(--font-sans); font-size: 0.92rem; }
.vs-when, .ev-when { font-family: var(--font-sans); font-size: 0.9rem; margin-bottom: 0.15rem; }
.vs-age, .ev-age { font-size: 0.78rem; color: var(--text-tertiary); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 0.45rem; white-space: nowrap; }
.ea-window { font-family: var(--font-sans); font-size: 0.9rem; margin: 0.4rem 0; }
.ea-window .ea-all-years { font: inherit; background: none; border: 0; padding: 0.25rem 0; color: var(--accent); text-decoration: underline; cursor: pointer; min-height: 24px; }

/* The local AI answer agent in the answer box (2026-10-20): the server-rendered answer, the busy / fallback notice, the saved-answer line */
.ea-agent { font-size: 1rem; line-height: 1.5; }
.ea-agent p { margin: 0.4rem 0; }
.ea-agent ul { margin: 0.3rem 0 0.6rem; padding-left: 1.2rem; }
.ea-agent li { margin: 0.25rem 0; }
.ea-agent > p:first-child { font-family: var(--font-sans); font-size: 0.88rem; color: var(--text-tertiary); }
.ea-agent .ea-saved { font-family: var(--font-sans); font-size: 0.85rem; }
.ea-notice { font-family: var(--font-sans); font-size: 0.95rem; margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-left: 4px solid var(--accent); background: var(--surface-alt); border-radius: var(--r-sm); }
.ea-notice .ea-try-ai { margin-top: 0.4rem; min-height: 44px; }
/* Answer box v2 (2026-10-26): the records list under the answer box, the waiting line (queue, stage, seconds) */
.ea-records-list { margin: 1.2rem 0 0; }
.ea-records-head { font-size: 1.15rem; margin: 0 0 0.3rem; }
.ea-records-note { font-family: var(--font-sans); font-size: 0.85rem; margin: 0 0 0.8rem; }
/* The written answer (2026-10-20): the Answer first and large, the label under it, then Key facts, notes and the Sources with the exact wording folded away. */
.ea-written .ea-answer { font-size: 1.2rem; line-height: 1.55; margin: 0.1rem 0 0.35rem; }
.ea-written .ea-answer p { margin: 0 0 0.5rem; }
/* Footnote markers (synthesized answers, 2026-10-20): the superscript number after a sentence jumps to its entry in Sources. */
.ea-written .ea-answer a[href^="#ea-src-"] { font-family: var(--font-sans); font-weight: 600; color: var(--accent); text-decoration: none; padding: 0.15em 0.14em; margin-left: 0.02em; border-radius: var(--r-sm); }
.ea-written .ea-answer a[href^="#ea-src-"]:hover, .ea-written .ea-answer a[href^="#ea-src-"]:focus-visible { background: var(--accent-soft); text-decoration: underline; }
.ea-written .ea-source-list li:target { background: var(--accent-soft); border-radius: var(--r-sm); }
.ea-written .ea-label { font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-tertiary); margin: 0 0 0.9rem; }
.ea-written h3 { font-family: var(--font-sans); font-size: 0.95rem; margin: 0.9rem 0 0.3rem; }
.ea-written .ea-facts ul { margin: 0.2rem 0 0.4rem; padding-left: 1.2rem; font-size: 1rem; }
.ea-written .ea-written-notes { font-family: var(--font-sans); font-size: 0.85rem; margin: 0.5rem 0; }
.ea-written .ea-written-notes p { margin: 0.2rem 0; }
.ea-written .ea-source-list { margin: 0.2rem 0 0.5rem; padding-left: 1.3rem; font-family: var(--font-sans); font-size: 0.88rem; }
.ea-written details.ea-exact { margin: 0.4rem 0 0; font-family: var(--font-sans); font-size: 0.88rem; }
.ea-written details.ea-exact summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent); }
.ea-written details.ea-exact ol { margin: 0.3rem 0 0; padding-left: 1.3rem; }
.ea-written details.ea-exact li { margin: 0.35rem 0; }
/* The answer card (2026-10-23, owner: simple and clear; citations as footnotes beneath the complete answer). */
.ea-written .ea-answer ul { margin: 0.2rem 0 0.4rem; padding-left: 1.2rem; font-size: 1.05rem; line-height: 1.5; }
.ea-written .ea-answer li { margin: 0.2rem 0; }
.ea-written .ea-answer strong { font-weight: 650; }
.ea-written .ea-answer a[href^="#ea-src-"] { font-size: 0.72em; vertical-align: super; line-height: 0; }
.ea-written .ea-note { font-family: var(--font-sans); font-size: 0.85rem; color: var(--text-secondary, #4a554f); margin: 0.2rem 0 0.4rem; }
.ea-written .ea-footnotes { list-style: none; margin: 0.4rem 0 0.2rem; padding: 0.5rem 0 0; border-top: 1px solid var(--border, #d7ddd8); font-family: var(--font-sans); font-size: 0.85rem; }
.ea-written .ea-footnotes li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.ea-written blockquote.ea-excerpt { margin: 0.2rem 0 0.5rem 1.1rem; padding: 0 0 0 0.6rem; border-left: 3px solid var(--border, #E8E2D9); color: var(--text-secondary, #5A5A5A); font-size: 0.82rem; line-height: 1.45; }
.ea-written .ea-fn-n { font-size: 0.75em; margin-right: 0.3em; font-weight: 600; }
.ea-written details.ea-records { margin: 0.4rem 0 0; font-family: var(--font-sans); font-size: 0.88rem; }
.ea-written details.ea-records summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent); }
.ea-written details.ea-records ol { margin: 0.3rem 0 0; padding-left: 1.3rem; overflow-wrap: anywhere; }
.ea-written details.ea-records li { margin: 0.35rem 0; }
.ea-written .ea-label { margin: 0.5rem 0 0; }
.ea-more-matches > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--font-sans); font-size: 0.95rem; color: var(--accent); }
.ea-box { overflow-wrap: anywhere; }


/* Articles (2026-10-22): the required statement in a box above the text, a one-line repeat below it; nothing here may widen the page at phone width */
.article-page { overflow-wrap: anywhere; min-width: 0; }
.article-byline { font-family: var(--font-sans); font-size: 0.9rem; margin: var(--s3) 0 0; }
.article-statement { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin: 0 0 var(--s6); font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.5; }
.article-statement p { margin: 0; }
.article-body { font-size: 1.05rem; line-height: 1.65; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { margin: 1.6rem 0 0.5rem; line-height: 1.25; }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote { margin: 0 0 1rem; }
.article-body blockquote { border-left: 3px solid var(--border-strong); padding: 0.1rem 0 0.1rem var(--s4); color: var(--text-secondary); }
.article-body pre { overflow-x: auto; max-width: 100%; }
.article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.article-body th, .article-body td { padding: 0.3rem 0.6rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.article-statement-repeat { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-secondary); border-top: 1px solid var(--border); margin: var(--s6) 0 var(--s3); padding-top: var(--s3); }
.article-back { font-family: var(--font-sans); font-size: 0.9rem; margin: 0; }
.article-list { list-style: none; margin: 0; padding: 0; }
.article-item { border-bottom: 1px solid var(--border); padding: var(--s4) 0; overflow-wrap: anywhere; }
.article-kind { font-family: var(--font-sans); font-size: 0.78rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.article-item-title { font-size: 1.2rem; font-weight: 600; }
.article-item-summary { margin: var(--s2) 0; }
.article-item-meta { font-family: var(--font-sans); font-size: 0.82rem; }

/* Article body classes (2026-10-22): the presentational classes an article may carry, all prefixed art- (app/services/articles.py ARTICLE_CLASSES) */
.article-body .art-dek { font-size: 1.15rem; color: var(--text-secondary); }
.article-body .art-scope { font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); }
.article-body .art-flag { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; color: var(--warning); background: var(--warning-soft); padding: 0.1rem 0.4rem; border-radius: var(--r-sm); }
.article-body .art-cites { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.4; color: var(--text-tertiary); }
.article-body .art-cites a { color: var(--text-tertiary); text-decoration-color: var(--border-strong); }
.article-body .art-cites a:hover { color: var(--accent); }
.article-body .art-box { background: var(--surface-alt); border-left: 3px solid var(--accent); padding: var(--s4) var(--s5); margin: var(--s6) 0; font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.6; }
.article-body .art-box.art-warn { border-left-color: var(--warning); }
.article-body .art-box h3 { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.5rem; color: var(--accent); }
.article-body .art-box.art-warn h3 { color: var(--warning); }
.article-body .art-box ul { margin: 0; padding-left: 1.1rem; }
.article-body .art-box li { margin: 0 0 0.5rem; }
.article-body .art-box p { margin: 0 0 0.5rem; }
.article-body .art-about, .article-body .art-notes { font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); border-top: 1px solid var(--border); margin-top: var(--s7); padding-top: var(--s3); }
.article-body .art-about ul, .article-body .art-notes ol { padding-left: 1.3rem; }
.article-body .art-notes li { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.article-body .art-yr { display: block; font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--accent); }
.article-body .art-jump { font-family: var(--font-sans); font-size: 0.9rem; }
.article-body sup { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; }
.article-body sup a { text-decoration: none; }
.article-body .art-wrap { overflow-x: auto; max-width: 100%; }
.article-body details { margin: 0.4rem 0; }
.article-body summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.article-body :target { background: var(--accent-soft); }
.article-body [id] { scroll-margin-top: 6.5rem; }