/* styles.css — the look of the site.
 *
 * The whole visual language is borrowed from the host project's design system, but
 * with NO logo and NO project/agency name (this is a standalone research site). The
 * rules that matter:
 *   - Every colour, size, and spacing value is a named token defined once in :root.
 *     Nothing below :root uses a raw hex colour — that keeps the palette in one place.
 *   - Headings use a serif display font; everything else uses a clean sans. Body text
 *     is 15px. We never UPPERCASE text or add letter-spacing "tracking" — sentence case
 *     only, because forced capitals read as shouting and hurt scanability.
 *   - Spacing follows a rhythm: tight gaps bind a label to its value, bigger gaps
 *     separate sections. The --space-* scale encodes that.
 */

/* ============================================================================
   1. Design tokens — the single source of truth for colour, type, and spacing.
   ============================================================================ */
:root {
  /* warm "sand" surfaces, light to dark */
  --sand-1: #F5F0E8;
  --sand-2: #EDE6D6;
  --sand-3: #E0D5C0;
  --sand-4: #D4C8AE;

  /* crimson accents + deep burgundy */
  --crimson-1: #8B1A2E;
  --crimson-2: #A82040;
  --crimson-3: #C4385A;
  --burgundy: #6B0F1F;

  /* warm neutrals for text */
  --warm-dark: #2C1810;
  --warm-mid: #6B4C3B;
  --warm-light: #9E7B68;

  /* secondary accents + whites */
  --accent-gold: #C4943A;
  --accent-sage: #6B8C6E;
  --white: #ffffff;
  --bg-white: #fffdf9;

  /* shadow base (R,G,B) used inside rgba() so opacity can vary */
  --shadow-base: 44, 24, 16;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-base), 0.06);
  --shadow-md: 0 2px 8px rgba(var(--shadow-base), 0.08);
  --shadow-card: 0 1px 3px rgba(var(--shadow-base), 0.08), 0 1px 2px rgba(var(--shadow-base), 0.04);
  --shadow-card-hover: 0 6px 18px rgba(var(--shadow-base), 0.14);

  /* fonts */
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body: 'Gabarito', system-ui, 'Segoe UI', Roboto, sans-serif;
  --fw-light: 300; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900;

  /* type scale (px) */
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 15px;
  --fs-xl: 18px; --fs-2xl: 24px; --fs-3xl: 28px; --fs-display: 38px;

  /* badge / pill tones (background / text / border per status) */
  --badge-requested-bg: #FEF3E8; --badge-requested-text: #C4943A; --badge-requested-border: #F0D5A8;
  --badge-review-bg: #EAF0F7;    --badge-review-text: #4A6B8C;    --badge-review-border: #C0D4E8;
  --badge-scheduled-bg: #EEF5EF; --badge-scheduled-text: #6B8C6E; --badge-scheduled-border: #C4D9C6;
  --badge-denied-bg: #F5EEEE;    --badge-denied-text: #8C4A4A;    --badge-denied-border: #D9C4C4;
  --badge-cancelled-bg: #EDE6D6; --badge-cancelled-text: #9E7B68; --badge-cancelled-border: #D4C8AE;

  /* matrix cell tones: required / solicited / mentioned / absent / uncodable */
  --cell-required-bg: #F7E9EC; --cell-required-text: #8B1A2E; --cell-required-border: #E4C4CB;
  --cell-solicited-bg: #FEF3E8; --cell-solicited-text: #B07A1E; --cell-solicited-border: #F0D5A8;
  --cell-mentioned-bg: #F3EEE4; --cell-mentioned-text: #6B4C3B; --cell-mentioned-border: #E0D5C0;
  --cell-absent-bg: #F5F0E8;    --cell-absent-text: #9E7B68;    --cell-absent-border: #E0D5C0;
  --cell-uncodable-bg: #EAF0F7; --cell-uncodable-text: #4A6B8C; --cell-uncodable-border: #C0D4E8;

  /* spacing scale (px) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px;

  /* radii */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;

  /* motion */
  --transition-fast: 120ms ease; --transition-base: 180ms ease; --transition-slow: 280ms ease;

  /* borders + page rhythm */
  --border-thin: 1px; --border-base: 1.5px;
  --page-edge-x: 28px; --page-edge-y: 24px;
  --focus-ring: 0 0 0 4px rgba(139, 26, 46, 0.20);

  /* link colour (on-palette crimson) */
  --link: #A82040;
}

/* ============================================================================
   2. Base reset + page background.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand-1);
  color: var(--warm-mid);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   3. Typography (the "v4" recipes). Headings are serif; body is sans.
   ============================================================================ */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--warm-dark); margin: 0; }
h1 { font-weight: var(--fw-black); font-size: var(--fs-3xl); line-height: 1.2; }
h2 { font-weight: var(--fw-semibold); font-size: var(--fs-2xl); line-height: 1.25; }
h3 { font-weight: var(--fw-semibold); font-size: var(--fs-xl); line-height: 1.3; }
h4 { font-weight: var(--fw-light); font-size: var(--fs-xl); line-height: 1.3; }
h5, h6 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--warm-dark); line-height: 1.4; margin: 0; }
p { margin: 0; color: var(--warm-mid); }

/* small bold caption that "leads" a value */
.label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--warm-dark); line-height: 1.4; }
.muted { color: var(--warm-light); }
.danger { font-weight: var(--fw-bold); color: var(--crimson-1); }
.big-number { font-family: var(--font-display); font-weight: var(--fw-black); color: var(--crimson-1); line-height: 1; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}

/* ============================================================================
   4. App shell: header, tab bar, content frame.
   ============================================================================ */
.site-header {
  background: var(--bg-white);
  border-bottom: var(--border-thin) solid var(--sand-3);
  padding: var(--space-4) var(--page-edge-x);
}
.site-header .eyebrow { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--crimson-1); }
.site-header h1 { font-size: var(--fs-2xl); margin-top: var(--space-1); }
.site-header p { font-size: var(--fs-base); color: var(--warm-light); margin-top: var(--space-1); max-width: 70ch; }

/* horizontal tab bar: active tab carries a crimson underline */
.tabbar {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  background: var(--bg-white);
  border-bottom: var(--border-thin) solid var(--sand-3);
  padding: 0 var(--page-edge-x);
  position: sticky; top: 0; z-index: 20;
}
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--warm-mid); padding: var(--space-3) var(--space-3);
  border-bottom: 3px solid transparent; transition: color var(--transition-fast);
}
.tab:hover { color: var(--warm-dark); }
.tab.is-active { color: var(--crimson-1); font-weight: var(--fw-bold); border-bottom-color: var(--crimson-1); }

.view { padding: var(--page-edge-y) var(--page-edge-x) var(--space-10); }
.container { max-width: 1100px; margin: 0 auto; }
.prose { max-width: 76ch; }
.prose p + p { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }
.prose ul { margin: var(--space-3) 0; padding-left: var(--space-6); }
.prose li { margin: var(--space-2) 0; }

/* generous vertical rhythm helpers */
.stack > * + * { margin-top: var(--space-4); }
.section { margin-top: var(--space-8); }
.section-tight { margin-top: var(--space-5); }

/* ============================================================================
   5. Hero banner (crimson, white text) — used at the top of the overview.
   ============================================================================ */
.hero {
  background: linear-gradient(135deg, var(--crimson-1), var(--burgundy));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7);
  box-shadow: var(--shadow-md);
}
.hero h1 { color: var(--white); font-size: var(--fs-display); }
.hero p { color: var(--white); opacity: 0.92; font-size: var(--fs-xl); margin-top: var(--space-3); max-width: 62ch; }

/* ============================================================================
   6. Cards / panels — the standard grouping surface.
   ============================================================================ */
.card {
  background: var(--bg-white);
  border: var(--border-thin) solid var(--sand-3);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: var(--space-4); }
a.card { display: block; color: inherit; transition: box-shadow var(--transition-base), transform var(--transition-base); }
a.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); text-decoration: none; }

/* responsive grids */
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* a "stat" block: big number leading a small caption */
.stat { background: var(--bg-white); border: var(--border-thin) solid var(--sand-3); border-radius: var(--radius-lg); padding: var(--space-5); }
.stat .big-number { font-size: var(--fs-display); }
.stat .label { display: block; margin-top: var(--space-2); }
.stat p { font-size: var(--fs-base); margin-top: var(--space-1); }

/* ============================================================================
   7. Buttons.
   ============================================================================ */
.btn {
  appearance: none; cursor: pointer; font-family: var(--font-body);
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  border: var(--border-base) solid transparent; transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary { background: var(--crimson-1); color: var(--white); }
.btn-primary:hover { background: var(--crimson-2); }
.btn-secondary { background: var(--bg-white); color: var(--crimson-1); border-color: var(--sand-4); }
.btn-secondary:hover { border-color: var(--crimson-1); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================================================================
   8. Pills / badges.
   ============================================================================ */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  padding: 2px var(--space-3); border-radius: var(--radius-full);
  border: var(--border-thin) solid transparent; white-space: nowrap;
}
.pill-requested { background: var(--badge-requested-bg); color: var(--badge-requested-text); border-color: var(--badge-requested-border); }
.pill-review { background: var(--badge-review-bg); color: var(--badge-review-text); border-color: var(--badge-review-border); }
.pill-scheduled { background: var(--badge-scheduled-bg); color: var(--badge-scheduled-text); border-color: var(--badge-scheduled-border); }
.pill-denied { background: var(--badge-denied-bg); color: var(--badge-denied-text); border-color: var(--badge-denied-border); }
.pill-neutral { background: var(--badge-cancelled-bg); color: var(--badge-cancelled-text); border-color: var(--badge-cancelled-border); }

/* ============================================================================
   9. The (i) info marker + tooltip. Pure CSS: the bubble shows on hover and on
      keyboard focus (the marker is focusable), so it works on touch screens too.
   ============================================================================ */
.info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: var(--space-1);
  border-radius: var(--radius-full); border: var(--border-thin) solid var(--warm-light);
  color: var(--warm-light); background: var(--bg-white);
  font-family: var(--font-body); font-style: normal; font-weight: var(--fw-bold);
  font-size: 10px; line-height: 1; cursor: help; vertical-align: middle; flex: none;
}
.info:hover, .info:focus-visible { color: var(--crimson-1); border-color: var(--crimson-1); }
.info .info-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 280px; text-align: left;
  background: var(--warm-dark); color: var(--white);
  font-weight: var(--fw-medium); font-size: var(--fs-md); line-height: 1.45;
  padding: var(--space-3) var(--space-3); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); white-space: normal;
  opacity: 0; visibility: hidden; transition: opacity var(--transition-fast); z-index: 40; pointer-events: none;
}
.info .info-pop::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--warm-dark);
}
.info:hover .info-pop, .info:focus-visible .info-pop { opacity: 1; visibility: visible; }
/* near the right edge the bubble would overflow; this modifier right-aligns it */
.info.info-right .info-pop { left: auto; right: 0; transform: none; }
.info.info-right .info-pop::after { left: auto; right: 5px; transform: none; }

/* ============================================================================
   10. The matrix table. First column is sticky so the document id stays visible
       while the 18 feature columns scroll horizontally.
   ============================================================================ */
.table-scroll { overflow-x: auto; border: var(--border-thin) solid var(--sand-3); border-radius: var(--radius-lg); background: var(--bg-white); }
table.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-md); }
table.matrix th, table.matrix td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: var(--border-thin) solid var(--sand-2); white-space: nowrap; }
table.matrix thead th {
  position: sticky; top: 0; z-index: 2; background: var(--sand-2); color: var(--warm-dark);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); vertical-align: bottom;
}
/* the feature-column headers are tall and narrow: rotate the label to save width */
table.matrix thead th.feat { height: 150px; padding: var(--space-2); }
table.matrix thead th.feat .feat-label {
  display: inline-flex; align-items: center; gap: var(--space-1);
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
}
table.matrix thead th.feat .info { writing-mode: horizontal-tb; transform: rotate(0deg); }
/* sticky first column (document id + agency) */
table.matrix th.rowhead, table.matrix td.rowhead {
  position: sticky; left: 0; z-index: 1; background: var(--bg-white);
  border-right: var(--border-thin) solid var(--sand-3); white-space: normal; min-width: 200px; max-width: 260px;
}
table.matrix thead th.rowhead { z-index: 3; background: var(--sand-2); }
table.matrix tbody tr:hover td { background: var(--sand-1); }
table.matrix tbody tr:hover td.rowhead { background: var(--sand-1); }
table.matrix td.rowhead .doc-id { font-weight: var(--fw-bold); color: var(--crimson-1); }
table.matrix td.rowhead .doc-agency { display: block; font-size: var(--fs-sm); color: var(--warm-mid); white-space: normal; }

/* the Y / M / N / ? cells */
.cell {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 1px var(--space-2); border-radius: var(--radius-sm);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); border: var(--border-thin) solid transparent;
}
.cell-required { background: var(--cell-required-bg); color: var(--cell-required-text); border-color: var(--cell-required-border); }
.cell-solicited { background: var(--cell-solicited-bg); color: var(--cell-solicited-text); border-color: var(--cell-solicited-border); }
.cell-mentioned { background: var(--cell-mentioned-bg); color: var(--cell-mentioned-text); border-color: var(--cell-mentioned-border); }
.cell-absent { background: var(--cell-absent-bg); color: var(--cell-absent-text); border-color: var(--cell-absent-border); }
.cell-uncodable { background: var(--cell-uncodable-bg); color: var(--cell-uncodable-text); border-color: var(--cell-uncodable-border); }
a.cell:hover { text-decoration: none; box-shadow: var(--shadow-sm); }
td.cellcol { text-align: center; }

/* legend row of swatches */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.legend .key { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); }

/* ============================================================================
   11. Filter bar (search pill + toggle chips), used above the matrix + lists.
   ============================================================================ */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.search {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--bg-white); border: var(--border-base) solid var(--sand-4);
  border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); min-width: 240px;
}
.search input { appearance: none; border: none; outline: none; background: none; font-family: var(--font-body); font-size: var(--fs-base); color: var(--warm-dark); width: 100%; }
.chip {
  appearance: none; cursor: pointer; background: var(--bg-white);
  border: var(--border-thin) solid var(--sand-4); border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--warm-mid); padding: var(--space-2) var(--space-4); transition: all var(--transition-fast);
}
.chip:hover { border-color: var(--crimson-1); color: var(--warm-dark); }
.chip.is-active { background: var(--crimson-1); color: var(--white); border-color: var(--crimson-1); }

/* ============================================================================
   12. Prevalence bar: a stacked horizontal bar of required/solicited/mentioned/absent.
   ============================================================================ */
.prev-row { padding: var(--space-4) 0; border-bottom: var(--border-thin) solid var(--sand-2); }
.prev-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.prev-head h3 { display: inline-flex; align-items: center; }
.prev-head .req-share { font-family: var(--font-display); font-weight: var(--fw-black); color: var(--crimson-1); font-size: var(--fs-xl); }
.prev-concept { font-size: var(--fs-base); color: var(--warm-light); margin-top: var(--space-1); max-width: 80ch; }
.bar { display: flex; height: 22px; border-radius: var(--radius-sm); overflow: hidden; margin-top: var(--space-3); background: var(--sand-2); }
.bar .seg { height: 100%; }
.bar .seg-required { background: var(--cell-required-text); }
.bar .seg-solicited { background: var(--cell-solicited-text); }
.bar .seg-mentioned { background: var(--cell-mentioned-text); }
.bar .seg-absent { background: var(--cell-absent-border); }
.bar-key { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--warm-mid); }
.bar-key .k { display: inline-flex; align-items: center; gap: var(--space-2); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch-required { background: var(--cell-required-text); }
.swatch-solicited { background: var(--cell-solicited-text); }
.swatch-mentioned { background: var(--cell-mentioned-text); }
.swatch-absent { background: var(--cell-absent-border); }

/* ============================================================================
   13. Key/value detail lists (per-document + per-feature pages).
   ============================================================================ */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); align-items: baseline; }
.kv dt { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--warm-dark); }
.kv dd { margin: 0; color: var(--warm-mid); }

/* evidence excerpt block */
.evidence { margin-top: var(--space-3); }
.excerpt {
  background: var(--sand-1); border-left: 3px solid var(--sand-4);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base); color: var(--warm-dark); line-height: 1.55;
}
.excerpt + .excerpt { margin-top: var(--space-2); }
.excerpt .src { display: block; margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--warm-light); }
.feat-block { padding: var(--space-4) 0; border-bottom: var(--border-thin) solid var(--sand-2); }
.feat-block h4 { display: inline-flex; align-items: center; }

/* breadcrumb / back link */
.crumb { font-size: var(--fs-md); margin-bottom: var(--space-3); }

/* ============================================================================
   14. Scanner (paste-text) view.
   ============================================================================ */
.scan-input {
  width: 100%; min-height: 220px; resize: vertical;
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.55; color: var(--warm-dark);
  background: var(--bg-white); border: var(--border-base) solid var(--sand-4); border-radius: var(--radius-md);
  padding: var(--space-4);
}
.scan-summary { font-size: var(--fs-base); color: var(--warm-mid); margin: var(--space-4) 0; }
.scan-summary strong { color: var(--warm-dark); }

/* ============================================================================
   14b. "Make an ad" generator view.
   ============================================================================ */
/* The topic field and the model dropdown sit on one row, wrapping on narrow screens.
   align-items:flex-end keeps their bottoms level even though the labels differ. */
.gen-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.gen-field { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 320px; }
.gen-field-model { flex: 0 1 260px; }
.gen-input {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-base); color: var(--warm-dark);
  background: var(--bg-white); border: var(--border-base) solid var(--sand-4); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

/* A native <select> styled to match the inputs. We strip the OS chrome (appearance:none)
   and draw our own little chevron with the ::after pseudo-element on the wrapper. */
.select { position: relative; display: block; }
.select select {
  appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--warm-dark);
  background: var(--bg-white); border: var(--border-base) solid var(--sand-4); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
}
.select::after {
  content: ''; position: absolute; right: var(--space-4); top: 50%;
  width: 8px; height: 8px; border-right: 2px solid var(--warm-light); border-bottom: 2px solid var(--warm-light);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* The "composing…" strip, with a small spinning ring. */
.gen-loading { display: flex; align-items: center; gap: var(--space-3); color: var(--warm-mid); }
.spinner {
  width: 18px; height: 18px; flex: none; display: inline-block; border-radius: var(--radius-full);
  border: 2px solid var(--sand-4); border-top-color: var(--crimson-1); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* The generated ad, framed like a little advertisement. The body keeps the model's own
   line breaks (white-space:pre-wrap) and its own capitalisation — that text is generated
   content, not our interface, so its headline shouting is part of the parody. */
.gen-ad {
  background: var(--bg-white); border: var(--border-base) solid var(--crimson-1);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card);
}
.gen-ad-tag { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--crimson-1); margin-bottom: var(--space-3); }
.gen-ad-body { white-space: pre-wrap; color: var(--warm-dark); font-size: var(--fs-base); line-height: 1.65; }
.gen-scan { margin-top: var(--space-4); }
.gen-scan-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* An error / "this only runs on Pages" notice, in the same crimson family as a required cell. */
.gen-error {
  background: var(--cell-required-bg); border: var(--border-thin) solid var(--cell-required-border);
  color: var(--cell-required-text); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.gen-error strong { color: var(--cell-required-text); }

/* ============================================================================
   15. Empty / loading states + footer.
   ============================================================================ */
.empty { text-align: center; color: var(--warm-light); padding: var(--space-8); font-size: var(--fs-base); }
.site-footer { border-top: var(--border-thin) solid var(--sand-3); padding: var(--space-6) var(--page-edge-x); color: var(--warm-light); font-size: var(--fs-md); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }

/* ============================================================================
   16. Small responsive tweaks for narrow screens.
   ============================================================================ */
@media (max-width: 640px) {
  :root { --page-edge-x: 16px; }
  .hero { padding: var(--space-6) var(--space-5); }
  .hero h1 { font-size: var(--fs-3xl); }
  .kv { grid-template-columns: 1fr; gap: var(--space-1); }
  .kv dd { margin-bottom: var(--space-2); }
}