/* =========================================================================
   Research Rail — application design layer

   Loaded after styles.css. It rebrands the shared token layer (warm green
   knowledge base -> cool ink research instrument) and adds the application
   styles for the Search, Report, Library and Entity views. The original
   article pages inherit the rebrand automatically because they read the same
   tokens.

   Voice: paper surfaces, ink accent, monospace for anything a researcher would
   cite or verify — source ids, dates, counts, sample sizes.
   ========================================================================= */

:root {
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --rail-w: 1px;
}

/* ---- Palette override: light ---- */
:root,
[data-theme="light"] {
  --color-bg: #f4f3ef;
  --color-surface: #fbfaf7;
  --color-surface-2: #ffffff;
  --color-surface-offset: #eae9e3;
  --color-divider: #e2e0d8;
  --color-border: #d5d3ca;

  --color-text: #17181c;
  /* Muted and faint both carry real sentences (section notes, empty states, source
     metadata), so both are held above 4.5:1 on --color-bg rather than treated as
     decoration. Measured: muted 6.1:1, faint 4.5:1. */
  --color-text-muted: #575c67;
  --color-text-faint: #6a6f7b;
  --color-text-inverse: #fbfaf7;

  --color-primary: #1f4a7a;
  --color-primary-hover: #163a61;
  --color-primary-active: #102a48;
  --color-primary-highlight: #e1e8f0;

  --ev-high: #1b6e46;         --ev-high-bg: #e2eee8;
  --ev-moderate: #146f6b;     --ev-moderate-bg: #e0eeed;
  --ev-limited: #7f5d13;      --ev-limited-bg: #f2ebda;
  --ev-preliminary: #545c69;  --ev-preliminary-bg: #e8e9ec;
  --ev-anecdotal: #8f4f1d;    --ev-anecdotal-bg: #f5e9df;

  /* Runtime-safety fail-closed state. Distinct from every evidence tier so a
     degraded (sources-only) report can never read as a mere evidence-strength
     label. Measured: 6.71:1 on its bg, 7.71:1 on --color-surface. */
  --rr-critical: #8f2f2a;     --rr-critical-bg: #f7e7e4;
}

/* ---- Palette override: dark ---- */
[data-theme="dark"] {
  --color-bg: #0f1116;
  --color-surface: #161920;
  --color-surface-2: #1b1f28;
  --color-surface-offset: #1a1e26;
  --color-divider: #262b35;
  --color-border: #323845;

  --color-text: #dee2ea;
  /* Measured on --color-bg #0f1116: muted 6.2:1, faint 4.6:1. */
  --color-text-muted: #8b93a2;
  --color-text-faint: #767d8c;
  --color-text-inverse: #0f1116;

  --color-primary: #7aabe2;
  --color-primary-hover: #94bced;
  --color-primary-active: #a9caf3;
  --color-primary-highlight: #1a2432;

  --ev-high: #6dc793;         --ev-high-bg: #14251c;
  --ev-moderate: #5fc4bf;     --ev-moderate-bg: #10241f;
  --ev-limited: #d9ad50;      --ev-limited-bg: #251f11;
  --ev-preliminary: #9aa4b4;  --ev-preliminary-bg: #1c1f26;
  --ev-anecdotal: #dd975c;    --ev-anecdotal-bg: #271a11;

  --rr-critical: #e08579;     --rr-critical-bg: #2a1714;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f1116;
    --color-surface: #161920;
    --color-surface-2: #1b1f28;
    --color-surface-offset: #1a1e26;
    --color-divider: #262b35;
    --color-border: #323845;
    --color-text: #dee2ea;
    --color-text-muted: #8b93a2;
    --color-text-faint: #5d6472;
    --color-text-inverse: #0f1116;
    --color-primary: #7aabe2;
    --color-primary-hover: #94bced;
    --color-primary-active: #a9caf3;
    --color-primary-highlight: #1a2432;
    --ev-high: #6dc793;         --ev-high-bg: #14251c;
    --ev-moderate: #5fc4bf;     --ev-moderate-bg: #10241f;
    --ev-limited: #d9ad50;      --ev-limited-bg: #251f11;
    --ev-preliminary: #9aa4b4;  --ev-preliminary-bg: #1c1f26;
    --ev-anecdotal: #dd975c;    --ev-anecdotal-bg: #271a11;
    --rr-critical: #e08579;     --rr-critical-bg: #2a1714;
  }
}

/* =========================================================================
   Shell
   ========================================================================= */
.rr-body { display: flex; flex-direction: column; min-height: 100vh; }

.rr-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.rr-header-inner {
  max-width: var(--content-wide); margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
}
.rr-brand {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: var(--color-text); flex-shrink: 0;
}
.rr-brand svg { display: block; color: var(--color-primary); }
/* The mark is line art, so it needs a hair more optical weight than the wordmark
   at small sizes. Nothing else — no fill, no plate, no hover animation. */
.rr-mark { color: var(--color-primary); overflow: visible; flex: none; }
/* The global img { height:auto } rule would otherwise blow the mark up to its
   intrinsic size on narrow viewports. Pin an explicit height per context. */
.rr-brand .rr-mark { height: 26px; width: auto; }
.rr-brand:hover .rr-mark { color: var(--color-text); }
@media (prefers-reduced-motion: no-preference) {
  .rr-mark { transition: color 140ms ease; }
}
/* Restrained brand presence in the two states where the interface is otherwise
   blank. The research content stays the visual focus everywhere else. */
.rr-mark-empty { color: var(--color-line); margin: 0 auto var(--space-4); }
.rr-progress-brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-text-faint);
  padding-bottom: var(--space-3); margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-line);
}
.rr-progress-brand .rr-mark { color: var(--color-primary); flex: none; height: 22px; width: auto; }

/* Print lockup: hidden on screen, shown once at the top of a printed page. */
.rr-print-brand { display: none; }
.rr-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.rr-brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.02em;
}
.rr-brand-sub {
  font-family: var(--font-mono); font-size: 0.5625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint);
}

.rr-tabs { display: flex; gap: var(--space-1); margin-left: var(--space-2); }
.rr-tab {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  color: var(--color-text-muted); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full); border: 1px solid transparent;
  transition: var(--transition); white-space: nowrap;
}
.rr-tab:hover { color: var(--color-text); background: var(--color-surface-offset); }
.rr-tab[aria-current="page"] {
  color: var(--color-primary); border-color: var(--color-border);
  background: var(--color-surface);
}
.rr-header-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.rr-auth { display: flex; align-items: center; min-height: 28px; }
.rr-auth:empty { display: none; }

/* Narrow-viewport navigation: hidden wherever the desktop tabs are visible.
   The button keeps a compact footprint inside the header but extends its hit
   area via the ::after pad so it still meets the 44px touch-target floor. */
.rr-menu-btn {
  display: none; position: relative; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--color-text-muted); background: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  transition: var(--transition);
}
.rr-menu-btn::after { content: ''; position: absolute; inset: -6px; }
.rr-menu-btn:hover { color: var(--color-text); background: var(--color-surface-offset); }

/* Disclosure panel anchored under the header's right cluster. The JS toggles
   data-open; desktop never shows it because the button itself is hidden. */
.rr-menu {
  display: none; position: absolute; top: calc(100% + var(--space-2)); right: 0;
  min-width: 200px; flex-direction: column; gap: var(--space-1);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2); z-index: 70;
}
.rr-menu[data-open="true"] { display: flex; }
.rr-menu-link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--space-3); text-decoration: none;
  color: var(--color-text); font-size: 0.9375rem; font-weight: 500;
  border-radius: var(--radius-sm);
}
.rr-menu-link:hover { background: var(--color-surface-offset); }
.rr-menu-link[aria-current="page"] { color: var(--color-primary); }

/* Search input limit notice + live counter (the limit itself is the input's
   real maxlength — this only surfaces it). */
.rr-input-hint {
  margin: var(--space-2) 0 0; font-size: 0.75rem; line-height: 1.5;
  color: var(--color-text-muted);
  display: flex; justify-content: space-between; gap: var(--space-3);
}
.rr-input-hint .rr-input-count {
  font-family: var(--font-mono); color: var(--color-text-faint); white-space: nowrap;
}
/* Over-limit paste state — visible truncation feedback, kept accessible in
   both themes (light #964219 / dark #e39a6e both exceed 4.5:1 on their hint
   backgrounds). */
.rr-input-hint .rr-input-count.rr-input-count-over { color: #964219; font-weight: 600; }
[data-theme="dark"] .rr-input-hint .rr-input-count.rr-input-count-over { color: #e39a6e; }
/* Explanatory limit warning: SEPARATE element from the compact counter so it
   can wrap on narrow screens instead of overflowing the nowrap count span.
   role=status (set in the markup) announces it politely; it only occupies
   space when there is a warning to show. Light #964219 6.1:1 / dark #e39a6e
   8.2:1 on their surfaces — both pass 4.5:1. */
.rr-input-status { margin: 0; font-size: 0.75rem; line-height: 1.5; }
.rr-input-status:empty { display: none; }
.rr-input-status[data-open="true"] { color: #964219; }
[data-theme="dark"] .rr-input-status[data-open="true"] { color: #e39a6e; }

.rr-icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer; transition: var(--transition);
}
.rr-icon-btn:hover { color: var(--color-text); border-color: var(--color-text-faint); }

.rr-main { width: 100%; flex: 1 0 auto; display: flex; flex-direction: column; }
.rr-wrap { max-width: var(--content-wide); margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-12); }
.rr-wrap-narrow { max-width: 900px; }

/* =========================================================================
   Footer
   ========================================================================= */
.rr-footer {
  --rr-navy: #0B2545;
  --rr-blue: #2F80ED;
  --rr-teal: #14B8A6;
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-12) var(--space-6) 0;
}
[data-theme="dark"] .rr-footer { --rr-navy: #d6e0ee; }

.rr-footer-top {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 3fr;
  gap: var(--space-12);
  align-items: start;
  padding-bottom: var(--space-10);
}
.rr-footer-brand { display: flex; flex-direction: column; gap: var(--space-3); }
.rr-footer-mark { height: 26px; width: auto; flex: none; align-self: flex-start; object-fit: contain; display: block; }
.rr-footer-brand-text { display: flex; flex-direction: column; }
.rr-footer-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  color: var(--rr-navy);
  margin: 0;
}
.rr-footer-brand-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0;
}
.rr-footer-tagline {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 30ch;
  margin: 0;
}
.rr-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.rr-footer-col { min-width: 0; }
.rr-footer-col-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* faint measures 4.26:1 on the dark footer surface — use muted (5.69:1). */
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.rr-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rr-footer-col a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.1em 0;
  border-radius: 3px;
  transition: color 140ms ease;
}
/* Component-scoped: use --rr-blue-deep in light mode so hovered footer links
   keep 4.5:1 on the light footer surface (plain #2F80ED measures 3.97:1 there).
   Dark mode keeps --rr-blue (4.60:1 measured). */
.rr-footer-col a:hover { color: var(--rr-blue-deep, var(--rr-blue)); }
[data-theme="light"] .rr-footer-col a:hover { color: #1f4a7a; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .rr-footer-col a:hover { color: #1f4a7a; }
}
.rr-footer-col a:focus-visible { outline: 2px solid var(--rr-blue); outline-offset: 2px; border-radius: 3px; }

.rr-footer-disclaimer {
  max-width: var(--content-wide);
  margin: 0 auto;
  font-size: var(--text-xs);
  line-height: 1.6;
  /* faint measures 4.26:1 on the dark footer surface — use muted (5.69:1). */
  color: var(--color-text-muted);
  max-width: 72ch;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-divider);
}

.rr-footer-bottom {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0 var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.rr-footer-copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
/* Copyright + theme toggle grouped on the left: the toggle reads as part of
   the colophon line instead of a floating orphan at the row's right edge. */
.rr-footer-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rr-footer-theme { width: 30px; height: 30px; flex: 0 0 auto; position: relative; }
/* 30px visual, 44px touch target: the ::after pad extends the hit area the
   same way the mobile Menu button does, without growing the layout. */
.rr-footer-theme::after { content: ''; position: absolute; inset: -7px; }
.rr-footer-signature {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--rr-navy);
  margin: 0;
}

/* Placeholder pages (Pricing, About, Privacy, etc.) — centered, on-brand. */
.rr-placeholder { max-width: var(--content-narrow); }
.rr-placeholder .rr-h1 { margin-bottom: var(--space-3); }
.rr-placeholder-back { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

@media (max-width: 1020px) {
  .rr-footer-top { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 720px) {
  .rr-footer { padding: var(--space-8) var(--space-4) 0; }
  .rr-footer-top { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-6); }
  .rr-footer-nav { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .rr-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0 var(--space-6); }
  .rr-footer-signature { margin-left: auto; }
}

/* =========================================================================
   Primitives
   ========================================================================= */
.rr-eyebrow {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-text-faint); margin: 0 0 var(--space-3);
}
.rr-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  letter-spacing: -0.025em; line-height: 1.1; margin: 0;
}
.rr-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; letter-spacing: -0.015em; margin: 0;
}
.rr-lede { font-size: var(--text-base); color: var(--color-text-muted); max-width: 68ch; line-height: 1.65; }
.rr-mono { font-family: var(--font-mono); }

.rr-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer; transition: var(--transition);
  text-decoration: none; line-height: 1.2;
}
.rr-btn:hover:not(:disabled) { border-color: var(--color-text-faint); background: var(--color-surface-offset); }
.rr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rr-btn-primary {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.rr-btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.rr-btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.rr-btn.is-on { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-highlight); }
.rr-btn-danger {
  color: #8a1f1f;
  border-color: #d7b0b0;
  background: #f8eeee;
}
.rr-btn-danger:hover:not(:disabled) {
  color: #6d1515;
  border-color: #c48a8a;
  background: #f3e0e0;
}
.rr-confirm-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(23, 24, 28, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.rr-confirm {
  width: min(32rem, 100%);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: 0 12px 40px rgba(23, 24, 28, 0.18);
}
.rr-confirm-identity {
  font-weight: 600; margin: var(--space-3) 0;
}
.rr-confirm-status {
  color: #8a1f1f; margin: var(--space-3) 0 0;
}
.rr-confirm-actions {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Evidence badges. Anecdotal is deliberately dashed and warm so it can never be
   mistaken at a glance for a clinical grade. */
.ev {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: var(--radius-sm);
  border: 1px solid currentColor; white-space: nowrap; flex-shrink: 0;
}
.ev-high { color: var(--ev-high); background: var(--ev-high-bg); }
.ev-moderate { color: var(--ev-moderate); background: var(--ev-moderate-bg); }
.ev-limited { color: var(--ev-limited); background: var(--ev-limited-bg); }
.ev-preliminary { color: var(--ev-preliminary); background: var(--ev-preliminary-bg); }
.ev-anecdotal { color: var(--ev-anecdotal); background: var(--ev-anecdotal-bg); border-style: dashed; }
.ev-nonclinical { color: var(--ev-anecdotal); background: var(--ev-anecdotal-bg); border-style: solid; }

.rr-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider); color: var(--color-text-muted);
  background: var(--color-surface); white-space: nowrap;
}

/* Source reference. Clicking one opens the source drawer — this is the
   mechanism that lets any claim be traced to its underlying record. */
.src-ref {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  padding: 0.1rem 0.35rem; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface-offset);
  color: var(--color-primary); transition: var(--transition); vertical-align: 1px;
}
.src-ref:hover { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.src-ref-row { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.src-ref-label {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); margin-right: var(--space-1);
}
/* Inline citation chips injected into model prose by linkifyCites(). Same look
   as the Sources row chip, sized to sit on the text baseline without breaking line height. */
.src-ref-inline { white-space: normal; }
.src-ref--inline { vertical-align: 1px; margin: 0 1px; white-space: nowrap; }

.rr-card {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.rr-grid { display: grid; gap: var(--space-4); }
.rr-grid-2 { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.rr-grid-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.rr-empty {
  text-align: center; padding: var(--space-16) var(--space-6);
  color: var(--color-text-muted); font-size: var(--text-sm);
  border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
}
.rr-empty strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-2); }

.rr-notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--ev-limited); background: var(--ev-limited-bg);
  color: var(--ev-limited); font-size: var(--text-xs); line-height: 1.6;
}
.rr-notice + .rr-notice { margin-top: var(--space-2); }

/* Report-level evidence-verification banner — rendered exactly once at the
   head of section 01 when decision-critical claims were withheld. Distinct
   from a retrieval-degradation notice (rr-notice): this is a claim
   verification state, not a coverage state. */
.rr-ev-banner {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--ev-limited); background: var(--ev-limited-bg);
  margin: 0 0 var(--space-4);
}
.rr-ev-banner strong {
  display: block; font-size: var(--text-xs); letter-spacing: 0.08em;
  color: var(--ev-limited); margin-bottom: var(--space-1);
}
.rr-ev-banner p { font-size: var(--text-sm); line-height: 1.6; margin: 0; color: var(--color-text); }
.rr-ev-banner p + p { margin-top: var(--space-1); color: var(--color-text-muted); }

/* =========================================================================
   Runtime safety status (structured safetyEvents — see server.js)
   Four tiers: critical (sources-only banner), partial (amber note),
   repaired (collapsed green disclosure). Codes render as monospace chips
   one level down, so internal identifiers never lead the UI.
   ========================================================================= */
.rr-safety-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }

.rr-safety {
  border-radius: var(--radius-md);
  border: 1px solid;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.6;
}

/* --- Critical: report degraded to sources-only --- */
.rr-safety-critical {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border-color: var(--rr-critical);
  background: var(--rr-critical-bg);
}
.rr-safety-critical > .rr-safety-icon { color: var(--rr-critical); flex-shrink: 0; margin-top: 2px; }
.rr-safety-main { min-width: 0; }
.rr-safety-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--rr-critical);
}
.rr-safety-text { margin: 0; color: var(--color-text); }

/* --- Partial: unresolved, non-material --- */
.rr-safety-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border-color: var(--ev-limited);
  background: var(--ev-limited-bg);
  color: var(--ev-limited);
}

/* --- Repaired: verification disclosure, collapsed by default --- */
.rr-safety-ok {
  border-color: var(--ev-high);
  background: var(--ev-high-bg);
}
.rr-safety-ok > summary {
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; list-style: none;
  color: var(--ev-high);
  font-weight: 500;
}
.rr-safety-ok > summary::-webkit-details-marker { display: none; }
.rr-safety-ok > summary:focus-visible {
  outline: 2px solid var(--ev-high);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.rr-safety-ok-label { flex: 1 1 auto; min-width: 0; }
.rr-safety-chev { flex-shrink: 0; transition: transform 0.15s ease; color: var(--ev-high); }
.rr-safety-ok[open] .rr-safety-chev { transform: rotate(180deg); }

/* --- Shared detail list + code chips --- */
.rr-safety-detail { margin-top: var(--space-2); }
.rr-safety-detail > summary {
  cursor: pointer; color: var(--color-text-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.rr-safety-list {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--color-text);
}
/* The UL is the grid and each li is display:contents, so every row shares the
   same column track — code chips form one clean right-aligned column on wide
   viewports instead of a staggered per-row offset. Narrow viewports keep a
   single column: description row, meta row beneath it. */
.rr-safety-list li { display: contents; }
@media (min-width: 640px) {
  .rr-safety-list { grid-template-columns: minmax(0, 1fr) max-content; column-gap: var(--space-4); }
}
.rr-safety-desc, .rr-safety-meta { min-width: 0; justify-self: start; }
.rr-safety-meta { display: inline-flex; align-items: baseline; gap: var(--space-2); overflow-wrap: anywhere; }
.rr-safety-count { font-family: var(--font-mono); color: var(--color-text-faint); }
.rr-safety-paths { font-family: var(--font-mono); color: var(--color-text-faint); overflow-wrap: anywhere; }
.rr-safety-list code {
  /* A bare <code> in the audit list is a direct grid child; without this it
     blockifies and stretches to fill its track instead of hugging its text. */
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  /* Audit codes are long single tokens (ASSERTED_CAUSAL_DEESCALATED); let the
     chip wrap at any character so it can never push the layout wide. */
  overflow-wrap: anywhere;
}

/* Customer-facing review banners (consistency / quote correction). */
.rr-review-banners { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.rr-review-banner {
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-width: 0;
  max-width: 100%;
}
.rr-review-title { margin: 0 0 var(--space-2); font-weight: 650; font-size: var(--text-sm); }
.rr-review-body { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text); overflow-wrap: anywhere; }
.rr-tech {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  padding-inline-start: 0;
  min-width: 0;
  max-width: 100%;
}
.rr-flag .rr-tech { margin-top: var(--space-2); }
.rr-tech > summary { cursor: pointer; color: var(--color-text-muted); }
.rr-tech-panel {
  margin: var(--space-2) 0 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}
.rr-tech-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.rr-tech-codes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  max-width: 100%;
}
.rr-tech-codes code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  overflow-wrap: anywhere;
  max-width: 100%;
}

.rr-flag { margin: var(--space-3) 0; font-size: var(--text-sm); }
.rr-flag > summary { cursor: pointer; font-weight: 600; }
.rr-flag p { margin: var(--space-2) 0 0; }

.rr-glossary {
  margin: 0 0 var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  max-width: 100%;
  min-width: 0;
}
.rr-glossary > summary {
  cursor: pointer;
  font-weight: 650;
  font-size: var(--text-sm);
}
.rr-glossary-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}
.rr-glossary-item { min-width: 0; max-width: 100%; }
.rr-glossary-item dt {
  font-weight: 650;
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
.rr-glossary-item dd {
  margin: 0.15rem 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .rr-glossary, .rr-review-banner, .rr-flag, .rr-tech { overflow-wrap: anywhere; }
}

/* Skeleton */
@keyframes rr-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
.rr-skel { background: var(--color-surface-offset); border-radius: var(--radius-sm); animation: rr-pulse 1.4s ease-in-out infinite; }

/* =========================================================================
   Search view
   ========================================================================= */
.rr-search-hero { padding: var(--space-6) 0 var(--space-4); max-width: 760px; }
.rr-search-hero .rr-h1 { margin-bottom: var(--space-2); }

.rr-searchbar {
  display: flex; gap: var(--space-2); margin-top: var(--space-8);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-2); padding: var(--space-2);
  transition: var(--transition);
}
.rr-searchbar:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); }
.rr-searchbar input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); padding: var(--space-3) var(--space-4);
  min-width: 0;
}
/* Placeholder: faint measures 3.99:1 on the dark input surface — muted passes
   (6.7:1 light / 5.3:1 dark) and stays clearly subordinate to input text.
   No opacity reduction: at 0.85 the dark-mode effective ratio falls to ~4.24:1
   (below the 4.5:1 target), so the colour itself carries the subordination. */
.rr-searchbar input::placeholder { color: var(--color-text-muted); }

.rr-examples { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.rr-example {
  font-size: var(--text-xs); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer; transition: var(--transition); text-align: left;
}
.rr-example:hover { color: var(--color-primary); border-color: var(--color-primary); }

.rr-method { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--space-16); }
.rr-method-item { border-top: 2px solid var(--color-primary); padding-top: var(--space-4); }
.rr-method-item h3 { font-family: var(--font-display); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.rr-method-item p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.65; margin: 0; }
.rr-method-num { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint); letter-spacing: 0.1em; }

.rr-report-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-surface);
  text-decoration: none; color: inherit; transition: var(--transition);
}
.rr-report-row:hover { border-color: var(--color-primary); transform: translateX(2px); }
.rr-report-row .q { font-weight: 500; font-size: var(--text-sm); flex: 1; min-width: 0; }
.rr-report-row .meta { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint); white-space: nowrap; }

/* My Library cards only. Global .rr-report-row meta stays 0.625rem nowrap for
   entity/report-page lists. Library metadata needs 12–13px and wraps under the
   title so status/visibility remain readable at phone widths. */
#lib-regions .rr-report-row {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
#lib-regions .rr-report-row .meta {
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.rr-lib-reference {
  margin-top: var(--space-12);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
}
.rr-lib-reference > summary {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: revert;
}

/* =========================================================================
   Report: progress
   ========================================================================= */
.rr-progress { display: grid; gap: var(--space-3); margin: var(--space-8) 0; }
.rr-step {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-surface);
  font-size: var(--text-sm); transition: var(--transition);
}
.rr-step-mark {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--color-border); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint);
}
.rr-step .label { flex: 1; }
.rr-step .hint { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint); }
.rr-step[data-state="active"] { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.rr-step[data-state="active"] .rr-step-mark { border-color: var(--color-primary); color: var(--color-primary); animation: rr-pulse 1.2s ease-in-out infinite; }
.rr-step[data-state="done"] .rr-step-mark { background: var(--ev-high); border-color: var(--ev-high); color: var(--color-text-inverse); }
.rr-step[data-state="done"] .label { color: var(--color-text-muted); }
.rr-step[data-state="failed"] .rr-step-mark { background: var(--ev-limited); border-color: var(--ev-limited); color: var(--color-text-inverse); }

/* =========================================================================
   Report: header + toolbar
   ========================================================================= */
.rr-report-head { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-6); margin-bottom: var(--space-6); }
.rr-report-head .rr-h1 { margin-bottom: var(--space-3); }
.rr-metrics { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.rr-metric { display: flex; flex-direction: column; gap: 2px; }
.rr-metric b { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 500; color: var(--color-text); }
.rr-metric span { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.rr-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

.rr-toolbar {
  position: sticky; top: 57px; z-index: 40;
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-3) 0; margin-bottom: var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}
.rr-toolbar-search {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: 0 var(--space-3); min-width: 200px; flex: 1 1 200px;
}
.rr-toolbar-search input {
  border: 0; background: transparent; outline: none; flex: 1; min-width: 0;
  font-size: var(--text-xs); color: var(--color-text); padding: var(--space-2) 0;
}
.rr-filters { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.rr-filter {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.3rem 0.55rem; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted); transition: var(--transition);
}
.rr-filter:hover { border-color: var(--color-text-faint); color: var(--color-text); }
.rr-filter[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.rr-select {
  font-family: var(--font-mono); font-size: 0.625rem; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}

/* =========================================================================
   Report: the rail
   ========================================================================= */
.rr-report-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.rr-report-layout > * { min-width: 0; }
/* Long intervention names must wrap inside the fixed-layout evidence map
   rather than forcing the table — and the page — wider than the viewport. */
.rr-table-map .rr-chip { white-space: normal; overflow-wrap: anywhere; text-align: left; }
/* Publisher/journal names can be very long (e.g. "Physical therapy in sport : official
   journal of the Association of Chartered Physiotherapists"). Without wrapping, a
   nowrap chip forces the source card — and the whole page — wider than the mobile
   viewport, which Safari then zooms out. */
.rr-source-meta .rr-chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.rr-rail { position: sticky; top: 120px; }
.rr-rail-list { list-style: none; margin: 0; padding: 0; border-left: var(--rail-w) solid var(--color-divider); }
.rr-rail-list a {
  display: flex; gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) var(--space-3); text-decoration: none;
  color: var(--color-text-muted); font-size: var(--text-xs);
  border-left: 2px solid transparent; margin-left: -1px; transition: var(--transition);
}
.rr-rail-list a:hover { color: var(--color-text); background: var(--color-surface); }
.rr-rail-list a.is-active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 500; }
.rr-rail-list a.is-empty { opacity: 0.4; }
.rr-rail-num { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--color-text-faint); flex-shrink: 0; }
.rr-rail-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.5625rem; color: var(--color-text-faint); }

/* =========================================================================
   Report: sections
   ========================================================================= */
.rr-section { scroll-margin-top: 130px; margin-bottom: var(--space-12); }
.rr-section-h { margin: 0; font: inherit; }
.rr-section-head {
  display: flex; align-items: baseline; gap: var(--space-4);
  width: 100%; background: none; border: 0; padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-5);
  cursor: pointer; text-align: left; color: inherit;
}
.rr-section-num {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  color: var(--color-primary); flex-shrink: 0;
}
/* The title must be allowed to shrink inside the flex header so it never
   pushes the count/caret controls off the right edge on narrow viewports.
   `min-width: 0` overrides the default `min-width: auto` on flex items. */
.rr-section-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.015em; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rr-section-meta { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint); flex-shrink: 0; }
.rr-section-caret { color: var(--color-text-faint); transition: transform var(--transition); flex-shrink: 0; }
.rr-section[data-open="false"] .rr-section-caret { transform: rotate(-90deg); }
.rr-section[data-open="false"] .rr-section-body { display: none; }
.rr-section-note {
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin: 0 0 var(--space-5); line-height: 1.65; max-width: 72ch;
}

/* REPORT-SIMPLIFICATION-1 — subordinate disclosures inside a primary section.
   Quieter than a section header on purpose: a block is depth available on
   request, and must not compete with the evidence above it. */
.rr-block { margin: var(--space-6) 0 0; border-top: 1px solid var(--color-divider); }
/* The toolbar closes with its own rule, so the first block below it would
   draw a second one across an empty band. */
.rr-toolbar + .rr-block { margin-top: 0; border-top: 0; }
.rr-block-h { margin: 0; font: inherit; }
.rr-block-head {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; background: none; border: 0; text-align: left; color: inherit;
  padding: var(--space-4) 0; cursor: pointer;
  /* 44px minimum target height on touch, without a visual box. */
  min-height: 44px;
}
.rr-block-head:hover .rr-block-title { color: var(--color-primary); }
.rr-block-title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-text); flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere;
  transition: var(--transition);
}
.rr-block-hint {
  font-size: var(--text-xs); color: var(--color-text-faint);
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.rr-block-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--color-text-faint); flex-shrink: 0;
}
.rr-block .rr-section-caret { transform: rotate(0deg); }
.rr-block[data-open="false"] .rr-section-caret { transform: rotate(-90deg); }
.rr-block[data-open="false"] .rr-block-body { display: none; }
.rr-block-body { padding-bottom: var(--space-4); }
.rr-block-lead {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  margin: var(--space-8) 0 var(--space-3); color: var(--color-text);
}
.rr-section-body > .rr-block-lead:first-child { margin-top: 0; }
.rr-block-lead + .rr-section-note { margin-bottom: var(--space-5); }
.rr-entities-block { margin-top: var(--space-8); }

/* An active filter or search hides retrieved evidence. The controls moved into
   Inspect the Evidence, so the report says at the top when it is showing less
   than everything, and offers one click back to the whole report. */
.rr-filter-state {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6); font-size: var(--text-xs);
  color: var(--color-text-muted); line-height: 1.6;
}
.rr-filter-state > span { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.rr-filter-state b { color: var(--color-text); }

/* Incomplete retrieval is part of the answer: surfaced with the report head,
   detailed in Coverage & Methods. */
.rr-coverage-alert {
  /* Same accent the coverage panel gives a partial or failed layer, so the
     alert and the row it points at read as one statement. */
  border: 1px solid var(--color-border); border-left: 3px solid var(--ev-limited);
  border-radius: var(--radius-md); background: var(--color-surface);
  padding: var(--space-4) var(--space-5); margin-top: var(--space-5);
}
.rr-coverage-alert p {
  margin: 0 0 var(--space-2); font-size: var(--text-xs);
  color: var(--color-text-muted); line-height: 1.65; max-width: 74ch;
}
.rr-coverage-alert b { color: var(--color-text); }

/* COMMUNITY-SUMMARY-1A — Section 06 compact community snapshot */
.rr-community-summary {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
}
.rr-community-lead { margin: 0 0 var(--space-5); max-width: 72ch; }
.rr-community-scope {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em;
  color: var(--color-text-muted); margin: 0 0 var(--space-2); overflow-wrap: anywhere;
}
.rr-community-frame {
  font-size: var(--text-xs); line-height: 1.65; color: var(--color-text-muted);
  margin: 0; max-width: 72ch;
}
.rr-community-block + .rr-community-block { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.rr-community-block > :is(h3, h4) {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); margin: 0 0 var(--space-3);
}
.rr-community-theme, .rr-community-note {
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-surface-offset); padding: var(--space-4);
}
.rr-community-theme + .rr-community-theme,
.rr-community-note + .rr-community-note { margin-top: var(--space-3); }
.rr-community-theme :is(h4, h5) {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  margin: 0 0 var(--space-2); line-height: 1.4; overflow-wrap: anywhere;
}
.rr-community-theme .rr-finding-top { margin-bottom: var(--space-2); }
.rr-community-theme p, .rr-community-note p {
  font-size: var(--text-xs); line-height: 1.65; margin: 0 0 var(--space-3); color: var(--color-text);
}
.rr-community-trace {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-1);
}
.rr-community-count {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.04em;
  color: var(--color-text-faint); margin: 0 !important;
}
.rr-community-count:not(:last-child)::after {
  content: "·"; margin-left: var(--space-2); color: var(--color-text-faint);
}
.rr-community-trace .src-ref { overflow-wrap: anywhere; }
.rr-community-inspect {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.rr-community-inspect > summary {
  cursor: pointer; font-size: var(--text-sm); font-weight: 500;
  list-style: none; padding: var(--space-2) 0;
}
.rr-community-inspect > summary::-webkit-details-marker { display: none; }
.rr-community-inspect[open] > summary { margin-bottom: var(--space-3); }

/* Executive summary */
.rr-framing { font-size: var(--text-base); line-height: 1.7; margin: 0 0 var(--space-6); max-width: 72ch; }
.rr-summary-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rr-summary-block { border-top: 2px solid var(--color-border); padding-top: var(--space-3); }
.rr-summary-block :is(h3, h4) {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); margin: 0 0 var(--space-3);
}
.rr-summary-block ul { margin: 0; padding-left: var(--space-4); }
.rr-summary-block li { font-size: var(--text-xs); line-height: 1.65; margin-bottom: var(--space-2); color: var(--color-text); }
.rr-summary-block.tone-supported { border-top-color: var(--ev-high); }
.rr-summary-block.tone-promising { border-top-color: var(--ev-moderate); }
.rr-summary-block.tone-uncertain { border-top-color: var(--ev-limited); }
.rr-summary-block.tone-disagree { border-top-color: var(--ev-anecdotal); }

/* Finding cards */
.rr-finding { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-5); }
.rr-finding + .rr-finding { margin-top: var(--space-3); }
.rr-finding-top { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.rr-finding-id { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint); }
.rr-finding h4 { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.35; margin: 0 0 var(--space-2); }
.rr-finding p { font-size: var(--text-sm); line-height: 1.7; margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.rr-finding-conf {
  font-size: var(--text-xs); line-height: 1.6; padding: var(--space-3);
  border-left: 2px solid var(--color-border); background: var(--color-surface-offset);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}
.rr-finding-conf b { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); display: block; margin-bottom: var(--space-1); }
.rr-finding-superseded { font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); margin: var(--space-2) 0 0; }

/* Study cards */
.rr-study { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.rr-study + .rr-study { margin-top: var(--space-3); }
.rr-study-head {
  display: flex; gap: var(--space-3); align-items: flex-start; width: 100%;
  padding: var(--space-4) var(--space-5); background: none; border: 0;
  cursor: pointer; text-align: left; color: inherit;
}
.rr-study-head:hover { background: var(--color-surface-offset); }
.rr-study-head h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); line-height: 1.45; margin: 0 0 var(--space-2); }
.rr-study-byline { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint); line-height: 1.6; }
.rr-study-body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.rr-study[data-open="false"] .rr-study-body { display: none; }
.rr-fields { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: var(--space-4); }
.rr-field span {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); display: block; margin-bottom: 3px;
}
.rr-field p { font-size: var(--text-xs); line-height: 1.6; margin: 0; }
.rr-limit { font-size: var(--text-xs); line-height: 1.6; color: var(--ev-limited); background: var(--ev-limited-bg); border: 1px solid var(--ev-limited); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); }
.rr-limit b { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: var(--space-1); }
.rr-outlink { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 500; color: var(--color-primary); text-decoration: none; }
.rr-outlink:hover { text-decoration: underline; }
/* Passive "this report is saved" status shown in the report toolbar. Reports
   auto-persist on generation, so this is a status label, not a save action. */
.rr-saved-pill { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--color-text-faint); }
.rr-saved-pill::before { content: '\2713'; color: var(--color-primary); font-weight: 700; }

/* Interventions: the split between measured and merely reported */
.rr-split { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rr-split-col { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; }
.rr-split-head { padding: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.rr-split-head h4 { font-family: var(--font-display); font-size: var(--text-sm); margin: 0 0 var(--space-1); }
.rr-split-head p { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; line-height: 1.55; }
.rr-split-col.is-evidence .rr-split-head { background: var(--ev-high-bg); border-bottom-color: var(--ev-high); }
.rr-split-col.is-evidence .rr-split-head h4 { color: var(--ev-high); }
.rr-split-col.is-reported .rr-split-head { background: var(--ev-anecdotal-bg); border-bottom-color: var(--ev-anecdotal); }
.rr-split-col.is-reported .rr-split-head h4 { color: var(--ev-anecdotal); }
.rr-iv { padding: var(--space-4); }
.rr-iv + .rr-iv { border-top: 1px solid var(--color-divider); }
.rr-iv-top { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.rr-iv h5 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); margin: 0 0 var(--space-2); line-height: 1.4; }
.rr-iv-flow { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-2); }
.rr-iv-flow i { color: var(--color-text-faint); font-style: normal; padding: 0 var(--space-1); }
.rr-iv p { font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.rr-iv p.rr-iv-note { color: var(--color-text); border-left: 2px solid var(--color-divider); padding-left: var(--space-2); }
.rr-iv-frame { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.02em; padding: 0.1rem 0.4rem; border-radius: 999px; border: 1px solid var(--color-divider); color: var(--color-text); }
.rr-iv-frame.is-null { background: var(--color-surface); }
.rr-iv-frame.is-harm { background: var(--ev-anecdotal-bg); border-color: var(--ev-anecdotal); color: var(--ev-anecdotal); }

/* Mechanism chain */
.rr-mech { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-4); }
.rr-mech + .rr-mech { margin-top: var(--space-3); }
.rr-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.rr-chain-node {
  font-family: var(--font-mono); font-size: 0.625rem; padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
}
.rr-chain-arrow { color: var(--color-text-faint); font-size: 0.75rem; }
.rr-mech p { font-size: var(--text-xs); line-height: 1.65; margin: 0 0 var(--space-2); color: var(--color-text-muted); }

/* Community */
.rr-anecdote-banner {
  border: 1px dashed var(--ev-anecdotal); background: var(--ev-anecdotal-bg);
  color: var(--ev-anecdotal); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-5);
}
.rr-anecdote-banner h4 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 var(--space-2); }
.rr-anecdote-banner p { font-size: var(--text-xs); line-height: 1.65; margin: 0; }

/* Contradictions */
.rr-contra { border-left: 2px solid var(--ev-limited); padding: var(--space-1) 0 var(--space-1) var(--space-4); }
.rr-contra + .rr-contra { margin-top: var(--space-5); }
.rr-contra :is(h3, h4) { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); margin: 0 0 var(--space-2); line-height: 1.4; }
.rr-contra p { font-size: var(--text-xs); line-height: 1.65; color: var(--color-text-muted); margin: 0 0 var(--space-2); }

/* Tables */
.rr-table-wrap { overflow-x: auto; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }
.rr-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.rr-table th {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); text-align: left;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-offset); white-space: nowrap;
}
.rr-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); vertical-align: top; line-height: 1.55; }
.rr-table tr:last-child td { border-bottom: 0; }
.rr-table tbody tr:hover { background: var(--color-surface); }
.rr-table .nowrap { white-space: nowrap; }

/* Source registry rows */
.rr-source { display: flex; gap: var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.rr-source:last-child { border-bottom: 0; }
.rr-source:target, .rr-source.is-flash { background: var(--color-primary-highlight); }
.rr-source-id { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint); padding-top: 2px; flex-shrink: 0; width: 30px; }
.rr-source-main { flex: 1; min-width: 0; }
/* Source titles are model- or publisher-supplied and are frequently a raw URL
   (e.g. "https://www.nccih.nih.gov/health/turmeric"), which contains no break
   opportunity. Without this the heading refuses to wrap and pushes the whole
   document wider than the viewport on phones. `overflow-wrap: anywhere` keeps
   normal prose titles breaking at word boundaries and only breaks mid-token
   when a single unbreakable run genuinely cannot fit — unlike `word-break:
   break-all`, which would chop ordinary titles mid-word. */
.rr-source-main h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); margin: 0 0 var(--space-2); line-height: 1.45; overflow-wrap: anywhere; }
.rr-source-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.rr-source-excerpt { font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.rr-source-caveat { font-size: 0.6875rem; line-height: 1.6; color: var(--color-text-faint); font-style: italic; margin: 0 0 var(--space-2); }
.rr-source-url { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-primary); text-decoration: none; word-break: break-all; }
.rr-source-url:hover { text-decoration: underline; }

/* Conclusion */
.rr-bottomline {
  border: 1px solid var(--color-primary); background: var(--color-primary-highlight);
  border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-6);
}
.rr-bottomline h4 { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 var(--space-3); }
.rr-bottomline p { font-size: var(--text-sm); line-height: 1.7; margin: 0; }

/* 01 — Bottom Line lead block. The framing orients the reader; the honest
   position is the single most important sentence in the report, so it gets the
   largest type in the body and a tinted panel that draws the eye first. */
.rr-bl-framing { font-size: var(--text-base); line-height: 1.7; margin: 0 0 var(--space-4); max-width: 72ch; color: var(--color-text-muted); }
.rr-bl-answer {
  font-size: var(--text-lg); line-height: 1.6; font-weight: 500; margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-primary);
  background: var(--color-primary-highlight); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 72ch;
}
.rr-bl-answer .src-ref--inline { vertical-align: 2px; }
.rr-bl-certainty {
  font-size: var(--text-base); line-height: 1.65; margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  max-width: 72ch; color: var(--color-text-muted);
}
.rr-bl-more { margin: 0; max-width: 72ch; font-size: var(--text-sm); line-height: 1.65; }

/* Evidence at a glance — the strength column pairs the badge with a plain label. */
.rr-glance-rank { display: block; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); margin-top: 2px; }
.rr-glance-group { font-family: var(--font-display); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.rr-glance-reported { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.rr-glance-reported h4 { margin-bottom: var(--space-2); }

/* Evidence connections — small labels distinguish a measured association
   (condition) from a proposed function and an observed outcome within each cell. */
.rr-cell-label { display: inline-block; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 4px; }
.rr-table-map td br + * { display: inline; }

/* =========================================================================
   Source drawer
   ========================================================================= */
.rr-drawer {
  position: fixed; inset: 0; z-index: 100; display: none;
}
.rr-drawer[data-open="true"] { display: block; }
.rr-drawer-scrim { position: absolute; inset: 0; background: oklch(0.15 0.01 260 / 0.45); }
.rr-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  overflow-y: auto; padding: var(--space-6);
  animation: rr-slide var(--transition);
}
@keyframes rr-slide { from { transform: translateX(20px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.rr-drawer-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.rr-drawer-top .rr-eyebrow { margin: 0; flex: 1; }
.rr-trail { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.rr-trail li { font-size: var(--text-xs); padding: var(--space-2) 0 var(--space-2) var(--space-4); border-left: 1px solid var(--color-divider); position: relative; color: var(--color-text-muted); line-height: 1.6; }
.rr-trail li::before { content: ""; position: absolute; left: -3px; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }

/* =========================================================================
   Library
   ========================================================================= */
.rr-stats-strip {
  display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: var(--space-5); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); background: var(--color-surface); margin-bottom: var(--space-10);
}
.rr-stats-strip .rr-stat b { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; display: block; }
.rr-stats-strip .rr-stat span { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }

.rr-cat {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-surface);
  text-decoration: none; color: inherit; transition: var(--transition);
}
.rr-cat:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.rr-cat.is-empty { opacity: 0.45; pointer-events: none; }
.rr-cat-count { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; color: var(--color-primary); line-height: 1; }
.rr-cat-label { font-size: var(--text-xs); font-weight: 500; line-height: 1.35; }
.rr-cat-new { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ev-moderate); }

.rr-ent {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-surface);
  text-decoration: none; color: inherit; transition: var(--transition);
}
.rr-ent:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.rr-ent-top { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.rr-ent h3 { font-family: var(--font-display); font-size: var(--text-sm); margin: 0; line-height: 1.3; }
.rr-ent p { font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rr-ent-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); font-family: var(--font-mono); font-size: 0.5625rem; color: var(--color-text-faint); letter-spacing: 0.04em; }

/* Stage C: lightweight entity rows (Library Home "Recently updated" + category
   lists). Same visual language as .rr-report-row — detail loads on demand when
   the entity is opened, so these rows carry no overview prose. */
.rr-ent-row {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-surface);
  text-decoration: none; color: inherit; transition: var(--transition);
}
.rr-ent-row:hover { border-color: var(--color-primary); transform: translateX(2px); }
.rr-ent-row .n { font-weight: 500; font-size: var(--text-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-ent-row .meta { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-faint); white-space: nowrap; }
.rr-loadmore { display: block; width: 100%; text-align: center; margin-top: var(--space-5); }
.rr-region { display: grid; gap: var(--space-4); }
.rr-region-err { font-size: var(--text-xs); color: var(--color-text-muted); }
.rr-library-search {
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface);
  max-width: 560px; margin: var(--space-8) auto var(--space-12);
}
.rr-library-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font: inherit; font-size: var(--text-sm); color: var(--color-text); padding: var(--space-2) 0;
}
.rr-library-search:focus-within { border-color: var(--color-primary); }
@media (max-width: 640px) {
  .rr-library-search { max-width: none; }
  /* Stage C: entity rows stack — the meta string must not starve the name
     (at 390px the nowrap meta squeezed names to ~60px). */
  .rr-ent-row { flex-wrap: nowrap; align-items: baseline; }
  .rr-ent-row .n { white-space: normal; overflow: visible; text-overflow: clip; }
  .rr-ent-row .meta { white-space: normal; font-size: 0.5625rem; }
}

/* Entity profile */
.rr-ent-head { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-6); margin-bottom: var(--space-8); }
.rr-ent-head .rr-h1 { margin-bottom: var(--space-4); }
.rr-ent-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.rr-ent-overview { font-size: var(--text-base); line-height: 1.7; max-width: 72ch; margin: var(--space-4) 0 0; }
.rr-relgroup { margin-bottom: var(--space-6); }
.rr-relgroup h4 { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin: 0 0 var(--space-3); }
.rr-rellist { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rr-rel {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-divider);
  border-radius: var(--radius-full); background: var(--color-surface);
  text-decoration: none; color: var(--color-text); font-size: var(--text-xs);
  transition: var(--transition);
}
.rr-rel:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rr-rel em { font-family: var(--font-mono); font-size: 0.5625rem; font-style: normal; color: var(--color-text-faint); letter-spacing: 0.04em; }

.rr-note { padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.rr-note + .rr-note { margin-top: var(--space-2); }
.rr-note p { font-size: var(--text-xs); line-height: 1.65; margin: 0 0 var(--space-2); }
.rr-note time { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--color-text-faint); }
.rr-noteform { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.rr-noteform textarea {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.6;
  padding: var(--space-3); resize: vertical; min-height: 72px; outline: none;
}
.rr-noteform textarea:focus { border-color: var(--color-primary); }
.rr-noteform .row { display: flex; gap: var(--space-2); align-items: center; }

/* Toast */
.rr-toast {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: var(--color-bg);
  font-size: var(--text-xs); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full); z-index: 200; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.rr-toast.is-on { opacity: 1; }

/* Utility */
.rr-hidden { display: none !important; }
.rr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rr-stack-4 > * + * { margin-top: var(--space-4); }
.rr-stack-6 > * + * { margin-top: var(--space-6); }
.rr-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.rr-spacer { flex: 1; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1020px) {
  .rr-report-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .rr-rail { position: static; min-width: 0; overflow: hidden; }
  .rr-rail-list { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-left: 0; border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-1); }
  .rr-rail-list::-webkit-scrollbar { display: none; }
  .rr-rail-list a { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; margin-left: 0; white-space: nowrap; }
  .rr-rail-list a.is-active { border-bottom-color: var(--color-primary); }
  .rr-rail-count { display: none; }
}

/* One row, always: a two-row header breaks the sticky toolbar's offset
   assumption (see .rr-toolbar below) and reads as a layout fault. The
   wordmark collapses to the monogram below 360px so brand + Sign in +
   Menu fit even at 320px; the link's aria-label keeps the full name for
   assistive tech, so nothing is lost. */
@media (max-width: 359px) {
  .rr-brand .rr-brand-text { display: none; }
  .rr-brand .rr-mark { height: 30px; }
}

@media (max-width: 720px) {
  .rr-header-inner { padding: var(--space-3) var(--space-4); gap: var(--space-3); flex-wrap: nowrap; }
  .rr-brand-sub { display: none; }
  .rr-brand-name { display: block; font-size: 0.9375rem; }
  .rr-brand { gap: var(--space-2); }
  .rr-wrap { padding: var(--space-6) var(--space-4) var(--space-10); }
  .rr-search-hero { padding: var(--space-2) 0 var(--space-1); }
  /* The tabs move into the Menu disclosure below 720px. */
  .rr-tabs { display: none; }
  .rr-menu-btn { display: inline-flex; }
  .rr-header-right { position: relative; }
  /* The support sentence now stays visible on mobile — compacted rather than
     hidden, so the first screen still explains what the product does. */
  .rr-search-hero .rr-lede { font-size: 0.9375rem; color: var(--color-text-muted); }
  .rr-input-hint { font-size: 0.75rem; flex-direction: column; gap: 0; }
  .rr-input-hint .rr-input-count { order: -1; }
  /* Measured one-row header height at this breakpoint (60.6px) + 1px. Was 53px,
     which predated the Menu button and hid the toolbar's first 7.6px — and far
     more whenever the header wrapped to two rows (now prevented above). */
  .rr-toolbar { top: 61px; }
  .rr-searchbar { flex-direction: column; }
  .rr-searchbar .rr-btn { justify-content: center; }
  .rr-drawer-panel { width: 100%; padding: var(--space-5) var(--space-4); }
  .rr-split { grid-template-columns: 1fr; }
  .rr-metrics { gap: var(--space-2) var(--space-4); }
  /* Report rows: on mobile the nowrap meta squeezes the title into an ugly
     narrow column. Stack title over meta instead. */
  .rr-report-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .rr-report-row .meta { white-space: normal; }
}

/* The new RR monogram is landscape, so at 26px tall it's wider than the old
   square mark and pushes Sign in onto a second row on small screens. Shrink it
   below 480px so the wordmark + tabs + Sign in stay on one row — no other
   compaction, the rest of the header keeps its original sizing. */
@media (max-width: 480px) {
  .rr-brand { --rr-logo-h: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto !important; }
  .rr-report-row:hover { transform: none; }
}

/* Both report tables are six dense columns. Fixed proportional widths stop the
   right-hand outcome column being clipped at the report width, and the
   min-width keeps them legible (scrolling instead of crushing) at tablet
   widths. Below the container-query threshold both are re-laid as stacked
   card lists — see the block below. */
.rr-table-map { table-layout: fixed; min-width: 660px; }
.rr-table-map td { word-break: break-word; overflow-wrap: anywhere; }
.rr-table-glance { min-width: 760px; }
/* NOTE: `break-word`, not `anywhere`. Unlike .rr-table-map (which pins its
   columns with table-layout:fixed + a <colgroup>), this table uses auto
   layout, so its column widths are derived from content min-content sizes.
   `overflow-wrap: anywhere` participates in that intrinsic sizing and lets
   columns collapse far below their natural width, which splits ordinary
   words on desktop ("Pharmaceuti / cal"). `break-word` gives the same
   last-resort wrapping for genuinely unbreakable runs without shrinking the
   intrinsic width. Inside the stacked-card block below, cards are full-width
   so `anywhere` is safe and is used there instead. */
.rr-table-glance td { vertical-align: top; overflow-wrap: break-word; }
.rr-table-wrap { position: relative; }

/* =========================================================================
   Report tables — stacked-card presentation on narrow containers

   When a table's containing column is narrower than the point where its
   six-column desktop layout is comfortably readable, the table re-lays as a
   vertical stack of cards, one per row, with each cell becoming a labelled
   field. The section HTML is unchanged; only presentation flips. This fixes:

     1. Long uppercase <th> labels colliding with each other (nowrap <th>s
        plus a fixed min-width forced into a 320–430px viewport).
     2. The right-hand columns (evidence badge, source trace) being pushed
        outside the viewport — the parent .rr-table-wrap scrolls horizontally,
        so those columns are visually clipped rather than reachable.
     3. Chips splitting into visually disconnected bordered pieces when
        squeezed into a ~64px cell at 320px.
     4. Column crowding at container widths where the label text is wider
        than its assigned column and collides with its neighbour.

   We use a container query on .rr-table-wrap so the trigger is the actual
   column width — the same table looks fine on a 1024px viewport with the
   rail collapsed (wrap ≈ 970px) and crushed on a 1024px viewport with the
   rail present (wrap ≈ 745px). A viewport media query cannot distinguish
   these two cases. A viewport fallback below covers browsers without
   container-query support.
   ========================================================================= */
.rr-table-wrap:has(> .rr-table-map),
.rr-table-wrap:has(> .rr-table-glance) {
  container-type: inline-size;
  container-name: rr-tablewrap;
}

@container rr-tablewrap (max-width: 900px) {
  /* Neutralise the horizontal-scroll wrap: cards flow inside the report column. */
  .rr-table-wrap:has(> .rr-table-map),
  .rr-table-wrap:has(> .rr-table-glance) { overflow: visible; border: 0; border-radius: 0; }

  /* Turn the table itself into a block so intrinsic table sizing (which is what
     was forcing the min-width via <colgroup>) no longer applies. */
  .rr-table-map, .rr-table-map thead, .rr-table-map tbody, .rr-table-map tr, .rr-table-map td,
  .rr-table-glance, .rr-table-glance thead, .rr-table-glance tbody, .rr-table-glance tr, .rr-table-glance td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .rr-table-map,
  .rr-table-glance { min-width: 0; table-layout: auto; }
  .rr-table-map colgroup,
  .rr-table-glance colgroup { display: none; }

  /* The <thead> is redundant here because each cell surfaces its own field
     label. Hide it accessibly rather than removing it — screen readers still
     see the column semantics in DOM order. */
  .rr-table-map thead,
  .rr-table-glance thead {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Each row is a card. Reinstate the border/radius that .rr-table-wrap used
     to provide on desktop, and space cards apart. */
  .rr-table-map tbody tr,
  .rr-table-glance tbody tr {
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
  }
  .rr-table-map tbody tr:last-child,
  .rr-table-glance tbody tr:last-child { margin-bottom: 0; }
  .rr-table-map tbody tr:hover,
  .rr-table-glance tbody tr:hover { background: var(--color-surface); }

  /* Each cell is a stacked field. Reset desktop table-cell padding/borders. */
  .rr-table-map td,
  .rr-table-glance td {
    padding: 0;
    border: 0;
    border-bottom: 0;
    line-height: 1.55;
  }
  .rr-table-map td + td,
  .rr-table-glance td + td { margin-top: var(--space-3); }

  /* Safe here: cards are full-width blocks, so intrinsic table sizing no
     longer drives column widths and `anywhere` only breaks runs that truly
     cannot fit (long URLs, hyphenless compound terms). */
  .rr-table-glance td { overflow-wrap: anywhere; }

  /* Undo the desktop "inline the <br> + *" collapse so the label sits above
     its value on its own line. */
  .rr-table-map .rr-cell-label {
    display: block;
    margin-bottom: var(--space-1);
  }
  .rr-table-map td br + * { display: inline; } /* keep inline citations inline */

  /* Shared field-label typography for labels injected via ::before. */
  .rr-table-map tbody tr td.nowrap:nth-of-type(4)::before,
  .rr-table-map tbody tr td.nowrap:nth-of-type(6)::before,
  .rr-table-glance tbody tr td::before {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    display: block;
    margin-bottom: var(--space-1);
  }

  /* Evidence Connections: the Evidence and Trace <td>s don't emit a
     .rr-cell-label in the HTML (on desktop their <th> supplies the column
     heading). The <thead> is hidden here, so inject those two labels to keep
     every stacked field labelled without touching the DOM. Cells are matched
     by their existing .nowrap class — only these two cells carry it. */
  .rr-table-map tbody tr td.nowrap:nth-of-type(4)::before { content: "Evidence"; }
  .rr-table-map tbody tr td.nowrap:nth-of-type(6)::before { content: "Trace"; }

  /* Evidence at a Glance: this table emits no .rr-cell-label spans at all, so
     all six labels are injected here. They mirror the <th> text exactly, in
     the same column order the renderer emits (see the 'glance' case in
     public/app.js). */
  .rr-table-glance tbody tr td:nth-of-type(1)::before { content: "Intervention"; }
  .rr-table-glance tbody tr td:nth-of-type(2)::before { content: "Category"; }
  .rr-table-glance tbody tr td:nth-of-type(3)::before { content: "Target"; }
  .rr-table-glance tbody tr td:nth-of-type(4)::before { content: "Strength"; }
  .rr-table-glance tbody tr td:nth-of-type(5)::before { content: "Reported outcome"; }
  .rr-table-glance tbody tr td:nth-of-type(6)::before { content: "Sources"; }

  /* Drop .nowrap so those cells wrap into the card's width instead of
     overflowing. The evidence badge is itself inline-flex so it stays one
     visual unit; only the containing <td>'s whitespace rule changes. */
  .rr-table-map td.nowrap,
  .rr-table-glance td.nowrap { white-space: normal; }

  /* Chips: keep each one as ONE coherent bordered component. inline-flex +
     max-width:100% guarantees the border wraps the whole (possibly
     multi-line) chip rather than splitting into two boxes. `overflow-wrap:
     anywhere` handles genuinely narrow widths without the ugly mid-word
     `word-break: break-word` split ("Hydrogen-\nrich water"). Short names sit
     on one line whenever the card is wide enough. */
  .rr-table-map .rr-chip,
  .rr-table-glance .rr-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    width: fit-content;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    text-align: left;
  }

  /* Evidence badge stays fully visible inside its card row. */
  .rr-table-map .ev,
  .rr-table-glance .ev { white-space: normal; max-width: 100%; }
}

/* Viewport-media safety net for browsers that don't yet support CSS
   Container Queries (< Safari 16 / < Chrome 105 / < Firefox 110, i.e. pre-
   September 2022). At <=720px viewport width the container is definitely
   also <=900px, so the trigger is safe. We only remove the intrinsic-width
   overflow here — the styled card layout above still applies to any modern
   browser. */
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .rr-table-wrap:has(.rr-table-map),
    .rr-table-wrap:has(.rr-table-glance) { overflow: visible; }
    .rr-table-map,
    .rr-table-glance { min-width: 0; table-layout: auto; }
    .rr-table-map th, .rr-table-glance th { white-space: normal; }
    .rr-table-map .nowrap, .rr-table-glance .nowrap { white-space: normal; }
    .rr-table-map .rr-chip,
    .rr-table-glance .rr-chip { display: inline-flex; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  }
}

/* =========================================================================
   Search → Library matching
   ========================================================================= */
.rr-suggest { display: none; margin-top: var(--space-5); }
.rr-suggest[data-open="true"] { display: block; }
.rr-suggest-group { margin-top: var(--space-5); }
.rr-suggest-group .rr-eyebrow { margin-bottom: var(--space-3); }

.rr-suggest-exact {
  border: 1px solid var(--color-primary);
  background: var(--color-primary-highlight);
  border-radius: 3px;
  padding: var(--space-5);
}
.rr-suggest-q {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  margin: var(--space-2) 0 var(--space-1);
  line-height: 1.3;
}
.rr-suggest-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* =========================================================================
   Report provenance, staleness and retrieval coverage
   ========================================================================= */
.rr-provenance {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-5);
  letter-spacing: 0.01em;
}

.rr-stale {
  margin-top: var(--space-5);
  border: 1px solid var(--ev-limited);
  border-left-width: 3px;
  background: var(--ev-limited-bg);
  border-radius: 3px;
  padding: var(--space-4) var(--space-5);
}
.rr-stale p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  max-width: 76ch;
}
.rr-stale b { color: var(--ev-limited); font-weight: 600; }

.rr-coverage {
  margin-top: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: 3px;
  background: var(--color-surface);
}
.rr-coverage > summary,
.rr-coverage-tech > summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  list-style: none;
}
.rr-coverage > summary::-webkit-details-marker,
.rr-coverage-tech > summary::-webkit-details-marker { display: none; }
.rr-coverage > summary::before,
.rr-coverage-tech > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-2);
  transition: transform 0.15s ease;
}
.rr-coverage[open] > summary::before,
.rr-coverage-tech[open] > summary::before { transform: rotate(90deg); }
.rr-coverage[open] > summary { border-bottom: 1px solid var(--color-divider); }
.rr-coverage > summary:focus-visible,
.rr-coverage-tech > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.rr-coverage .rr-section-note { padding: var(--space-4) var(--space-5) 0; margin: 0; max-width: 74ch; }

.rr-coverage-list { list-style: none; margin: 0; padding: var(--space-4) var(--space-5) var(--space-4); }
.rr-coverage-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 1fr);
  column-gap: var(--space-6);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.rr-coverage-list li:last-child { border-bottom: 0; }
.rr-cov-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}
.rr-cov-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 0.45em;
  background: var(--color-text-faint);
}
li[data-status="ok"] .rr-cov-dot { background: var(--ev-high); }
li[data-status="empty"] .rr-cov-dot { background: transparent; border: 1.5px solid var(--color-text-faint); }
li[data-status="failed"] .rr-cov-dot { background: var(--ev-limited); }
li[data-status="partial"] .rr-cov-dot { background: var(--ev-limited); }
li[data-status="skipped"] .rr-cov-dot { background: transparent; border: 1.5px dashed var(--color-border); }

.rr-cov-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-cov-main b {
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: break-word;
}
.rr-cov-main em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  overflow-wrap: break-word;
}
.rr-cov-state {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.rr-cov-status {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: break-word;
}
.rr-cov-explain {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}
li[data-status="empty"] .rr-cov-status,
li[data-status="skipped"] .rr-cov-status { color: var(--color-text-muted); font-weight: 500; }
li[data-status="failed"] .rr-cov-status,
li[data-status="partial"] .rr-cov-status { color: var(--ev-limited); }

.rr-coverage-tech {
  border-top: 1px solid var(--color-divider);
  margin: 0;
}
.rr-coverage-tech > summary {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}
.rr-coverage-tech-body {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .rr-coverage-list li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    grid-template-columns: none;
  }
  .rr-cov-state,
  .rr-cov-status,
  .rr-cov-explain { text-align: left; }
  .rr-cov-status { font-size: var(--text-sm); }
  .rr-cov-explain { font-size: var(--text-sm); max-width: 100%; }
}

/* "What changed" summary shown after a refresh. Mirrors the coverage panel's
   details styling so the two read as one family, but leads with the new-evidence
   count because that is the figure a returning reader most wants. */
.rr-diff {
  margin-top: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: 3px;
  background: var(--color-surface);
}
.rr-diff > summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  list-style: none;
}
.rr-diff > summary::-webkit-details-marker { display: none; }
.rr-diff > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-2);
  transition: transform 0.15s ease;
}
.rr-diff[open] > summary::before { transform: rotate(90deg); }
.rr-diff[open] > summary { border-bottom: 1px solid var(--color-divider); }
.rr-diff .rr-section-note { padding: var(--space-4) var(--space-5) 0; margin: 0; max-width: 74ch; }
.rr-diff-list { list-style: none; margin: 0; max-width: 74ch; padding: var(--space-3) var(--space-5) var(--space-5); }
.rr-diff-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.rr-diff-list li:last-child { border-bottom: 0; }
.rr-diff-list em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-faint); margin-left: var(--space-2); }

/* =========================================================================
   Collapsed study preview
   ========================================================================= */
.rr-study-peek {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2);
}
.rr-study[data-open="true"] .rr-study-peek { display: none; }
.rr-study-peek-type {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.rr-study-peek-result {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================================
   Research next
   ========================================================================= */
.rr-next {
  margin-bottom: var(--space-12);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
}
.rr-next-list { margin-top: var(--space-4); display: flex; flex-direction: column; }
.rr-next-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.rr-next-item:last-child { border-bottom: 0; }
.rr-next-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rr-next-main a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); text-decoration: none; }
.rr-next-main a:hover { color: var(--color-primary); text-decoration: underline; }
.rr-next-main em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.rr-next-item .rr-btn { flex-shrink: 0; }

/* An unresearched neighbour is marked by a dashed edge, not by colour alone. */
.rr-rel.is-unresearched { border-style: dashed; }
.rr-rel.is-unresearched span { color: var(--color-text-muted); }

/* =========================================================================
   Focus visibility
   ========================================================================= */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.rr-tab:focus-visible,
.rr-menu-btn:focus-visible,
.rr-menu-link:focus-visible,
.rr-rail-list a:focus-visible { outline-offset: 3px; }
.src-ref:focus-visible { outline-offset: 1px; }

.rr-skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  transition: top 0.12s ease;
}
.rr-skip:focus { top: var(--space-4); }

/* =========================================================================
   Print — a report should hand off as a readable brief
   ========================================================================= */
@media print {
  :root, [data-theme="light"], [data-theme="dark"] {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #ffffff;
    --color-surface-offset: #ffffff;
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-text-faint: #555555;
    --color-divider: #cccccc;
    --color-border: #999999;
    --color-primary: #000000;
    --color-primary-highlight: #ffffff;
    --font-display: Arial, Helvetica, sans-serif;
    --font-body: Arial, Helvetica, sans-serif;
    --font-mono: "Courier New", Courier, monospace;
  }

  .rr-header, .rr-footer, .rr-toolbar, .rr-rail, .rr-drawer, .rr-toast,
  .rr-actions, .rr-progress, .rr-examples, .rr-suggest, .rr-next,
  #theme-toggle, .rr-skip, .rr-print-prep { display: none !important; }

  body {
    background: #fff;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-kerning: none;
    font-variant-ligatures: none;
    letter-spacing: 0;
    word-spacing: 0;
  }
  .rr-wrap { max-width: none; padding: 0; }

  /* The header is dropped from print, so the lockup is reinstated once at the top
     of the first page — a printed brief should still identify its source. */
  .rr-print-brand {
    display: flex !important; align-items: center; gap: 8px;
    padding-bottom: 8px; margin-bottom: 16px;
    border-bottom: 1pt solid #999;
    font-size: 9pt; color: #000;
  }
  .rr-print-brand .rr-mark { color: #000; flex: none; height: 22px; width: auto; }
  .rr-print-brand strong { font-family: var(--font-display); letter-spacing: -0.01em; }
  .rr-report-layout { display: block; }

  /* Collapsed sections and disclosures would silently drop content from the
     printed brief. A paper copy always carries the whole report. */
  .rr-section[data-open="false"] .rr-section-body,
  .rr-block[data-open="false"] .rr-block-body,
  .rr-study[data-open="false"] .rr-study-body { display: block !important; }
  .rr-filter-state { display: none !important; }
  .rr-block { border-top: 1px solid #ccc; }
  .rr-block-head { padding: 6pt 0 2pt; min-height: 0; }
  .rr-block-title { font-size: 11pt; }
  .rr-community-inspect > *:not(summary) { display: block !important; }
  .rr-study-peek { display: none !important; }
  .rr-coverage { border: 1px solid #ccc; display: block !important; }
  .rr-coverage-list, .rr-coverage .rr-section-note { display: block !important; }
  .rr-coverage-list li {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4pt;
    break-inside: avoid;
  }
  .rr-cov-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .rr-cov-state {
    margin-left: 16px; /* align with title text after the status dot */
    text-align: left;
    align-items: flex-start;
  }
  .rr-cov-status, .rr-cov-explain { text-align: left; }
  .rr-cov-status {
    font-family: Arial, Helvetica, sans-serif;
    font-kerning: none;
    font-variant-ligatures: none;
    letter-spacing: 0.01em;
  }
  .rr-coverage-tech { display: none !important; }

  /* Screen glossary sits above Bottom Line; print moves the compact clone
     after Bottom Line so the answer leads the brief. */
  .rr-glossary-lead { display: none !important; }
  .rr-glossary-print {
    display: block !important;
    margin: 8pt 0 12pt;
    break-inside: avoid;
  }
  .rr-glossary-print .rr-glossary-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6pt 12pt;
  }
  .rr-glossary-print .rr-glossary-item dt,
  .rr-glossary-print .rr-glossary-item dd { font-size: 8pt; }

  .rr-section, .rr-study, .rr-finding, .rr-iv, .rr-source,
  .rr-community-theme, .rr-community-note, .rr-community-summary { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }

  /* Provenance must survive the print: a paper copy has no hover or drawer. The
     source registry already prints each URL as visible text, so only the study
     cards' "Open original source" links need the href spelled out. */
  .rr-study .rr-outlink[href^="http"]::after,
  .rr-iv .rr-outlink[href^="http"]::after {
    content: " <" attr(href) ">";
    font-family: var(--font-mono);
    font-size: 7pt;
    word-break: break-all;
    color: #555;
  }
  .rr-study-head, .rr-section-head { cursor: default; }
  .rr-section-caret { display: none; }
  .src-ref { border-style: solid; }

  /* ---- Dense tables: fit the page instead of clipping ----
     On screen these tables scroll inside .rr-table-wrap (overflow-x: auto) with a
     min-width so columns stay legible. In print there is no scrollbar, so the same
     min-width overflows the printable area and the rightmost column is clipped
     mid-word ("cardiovasc", "comparato"), while table-layout:fixed crushes the
     map columns and splits words ("Gallbladd"/"er"). The nowrap <th> and .nowrap
     cells (Strength/Sources/Evidence/Trace) also refuse to wrap, so they steal
     width from the Reported-outcome column and force the badge to collide with
     the next cell ("MODERATEOBSERVED OUTCOME"). Let everything wrap and shrink to
     fit the page. */
  .rr-table-wrap { overflow: visible; }
  .rr-table-glance, .rr-table-map { min-width: 0; width: 100%; }
  .rr-table-map { table-layout: auto; }
  .rr-table { font-size: 8pt; }
  .rr-table th { white-space: normal; }
  .rr-table .nowrap { white-space: normal; }
  .rr-table-map td { word-break: normal; overflow-wrap: break-word; }

  /* ---- Keep block-level items together across page breaks ----
     .rr-section is already kept together, but a section holding many cards is
     taller than a page and must break — so individual cards break across the
     boundary, leaving an orphaned badge ("Missing evidence") at the page foot
     and its body on the next page. Keep each card intact instead. */
  .rr-contra, .rr-summary-block, .rr-finding, .rr-iv { break-inside: avoid; }
  .rr-finding-top, .rr-contra .rr-finding-top { break-after: avoid; }
}

/* =========================================================================
   Methodology tab + Search-tab compaction
   ========================================================================= */
.rr-tab-short { display: none; }

/* BRAND-1: Methodology returns to the header as the "How it works" tab —
   navigation now reads Search / Library / How it works. The trust line and
   footer links remain as secondary paths. */

.rr-search-trust {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
  max-width: 68ch;
}
.rr-search-trust a { color: var(--color-text-muted); font-weight: 500; }
.rr-search-trust a:hover { color: var(--color-text); }

/* When the search view is active, make #view a flex column that fills main and
   center the hero. Falls back to min-height (below) on browsers without :has(). */
#view:has(.rr-wrap-search) { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; min-height: 0; }

.rr-wrap-search {
  padding-top: var(--space-2); padding-bottom: var(--space-2);
  flex: 1 0 auto;
  /* Fill the first viewport so the hero centers on load; the full footer sits
     below the fold as a scroll target (dvh accounts for mobile browser chrome). */
  min-height: calc(100dvh - 60px);
  display: flex; flex-direction: column; justify-content: center;
}

.rr-wrap-center {
  /* Library: center the block when short, but let a long list scroll from
     the top. margin:auto on first/last child centers only when there is free
     space; when content is taller than the min-height it fills and scrolls. */
  min-height: calc(100vh - 210px);
  display: flex; flex-direction: column;
}
.rr-wrap-center > :first-child { margin-top: auto; }
.rr-wrap-center > :last-child { margin-bottom: auto; }

.rr-methodology, .rr-article { padding-bottom: var(--space-12); text-align: left; }
.rr-methodology .rr-h1, .rr-article .rr-h1 { margin-bottom: var(--space-4); }
.rr-methodology .rr-h2, .rr-article .rr-h2 {
  margin-top: 1.75em;
  margin-bottom: 0.55em;
}
.rr-methodology p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 72ch;
}
.rr-article > p:not(.rr-eyebrow):not(.rr-article-back) {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 72ch;
  margin: 0 0 0.9em;
}
.rr-methodology-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-3);
  max-width: 72ch;
}
.rr-methodology-list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  padding-left: var(--space-4);
  position: relative;
}
.rr-methodology-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-faint);
}
.rr-method-grid { margin-top: var(--space-6); }
.rr-methodology-grades { min-width: 560px; }
.rr-methodology-back { margin-top: var(--space-12); }

.rr-methodology-link, .rr-info-link { color: var(--color-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.rr-methodology-link:hover, .rr-info-link:hover { text-decoration: none; opacity: 0.8; }

.rr-info-lockup {
  margin: 0 0 var(--space-8);
  padding: 0 0 var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  max-width: 72ch;
}
.rr-info-lockup-kicker {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-3);
}
.rr-info-lockup-powered {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
  letter-spacing: 0.04em;
}
.rr-info-lockup-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.rr-info-lockup-tag {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 72ch;
}
.rr-article ul.rr-info-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-3);
  max-width: 72ch;
}
.rr-article ul.rr-info-list li {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  padding-left: var(--space-4);
  position: relative;
}
.rr-article ul.rr-info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-faint);
}
.rr-article ol.rr-info-list {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-3);
  max-width: 72ch;
}
.rr-article ol.rr-info-list li {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
}
.rr-article .rr-info-cell-label { display: none; }
.rr-article .rr-info-table tbody th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  background: transparent;
  white-space: normal;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.rr-article .rr-info-table th,
.rr-article .rr-info-table td {
  overflow-wrap: break-word;
  vertical-align: top;
  height: auto;
  min-height: 0;
}
.rr-article .rr-info-table tbody tr:last-child th,
.rr-article .rr-info-table tbody tr:last-child td { border-bottom: 0; }
.rr-article-back { margin-top: var(--space-12); }

.rr-beta-form {
  position: relative;
  margin: var(--space-8) 0 0;
  padding: var(--space-5);
  max-width: 72ch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.rr-beta-form .rr-h2 { margin: 0 0 var(--space-4); }
.rr-beta-label,
.rr-beta-fieldset legend {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-2);
}
.rr-beta-optional { font-weight: 400; color: var(--color-text-muted); }
.rr-beta-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.rr-beta-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.rr-beta-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.rr-beta-options {
  display: grid;
  gap: var(--space-2);
}
.rr-beta-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.4;
  cursor: pointer;
}
.rr-beta-option input { margin-top: 0.2em; flex: none; }
.rr-beta-consent {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.rr-beta-status {
  min-height: 1.4em;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: #964219;
}
.rr-beta-status:empty { display: none; }
.rr-beta-thanks {
  margin: var(--space-8) 0 0;
  padding: var(--space-5);
  max-width: 72ch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}
.rr-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 720px) {
  .rr-beta-form { padding: var(--space-4); }
}

/* Info-page tables only: stacked labelled fields on small viewports.
   Report tables (.rr-table-map / .rr-table-glance) are unchanged.
   One HTML table; desktop keeps columns, mobile restyles the same cells.
   thead is display:none when stacked so field labels are not announced twice. */
@media (max-width: 720px) {
  .rr-article .rr-info-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .rr-article .rr-info-table,
  .rr-article .rr-info-table tbody,
  .rr-article .rr-info-table tr,
  .rr-article .rr-info-table th,
  .rr-article .rr-info-table td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .rr-article .rr-info-table { min-width: 0; }
  .rr-article .rr-info-table thead { display: none; }
  .rr-article .rr-info-table tbody tr {
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-4);
    margin: 0 0 var(--space-3);
    height: auto;
    min-height: 0;
  }
  .rr-article .rr-info-table tbody tr:last-child { margin-bottom: 0; }
  .rr-article .rr-info-table tbody tr:hover { background: var(--color-surface); }
  .rr-article .rr-info-table tbody th,
  .rr-article .rr-info-table tbody td {
    padding: 0;
    border: 0;
    height: auto;
    min-height: 0;
    background: transparent;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .rr-article .rr-info-table tbody th + td,
  .rr-article .rr-info-table tbody td + td { margin-top: var(--space-3); }
  .rr-article .rr-info-cell-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    margin: 0 0 var(--space-1);
  }
  .rr-article .rr-info-table tbody th {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    margin: 0 0 var(--space-1);
  }
}

.rr-footer-disclaimer-link { color: inherit; text-decoration: none; }
.rr-footer-disclaimer-link:hover { color: var(--color-text); text-decoration: underline; }

@media (max-width: 720px) {
  .rr-tab-full { display: none; }
  .rr-tab-short { display: inline; }
  /* Fill the first viewport on mobile too; the (taller, stacked) footer sits
     below the fold as a scroll target. */
  .rr-wrap-search { min-height: calc(100dvh - 61px); }
}

/* =========================================================================
   Stage D — Progressive Entity Profile V2 + navigation pilot
   ========================================================================= */
/* Chip row (related areas on the entity shell, nav strips on categories). */
.rr-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.rr-chip.is-current { font-weight: 600; border-color: var(--color-primary); }

/* Category "Areas" strip: one group per line, leaf chips after the label. */
.rr-navstrip-group {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline;
  font-size: var(--text-sm);
}
.rr-navstrip-label {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-faint);
}

.rr-glossary-print { display: none; }

.rr-print-prep {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 14, 18, 0.45);
  padding: var(--space-5);
}
.rr-print-prep-card {
  max-width: 28rem;
  width: 100%;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.rr-print-prep-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: 0 0 var(--space-3);
}
.rr-print-prep-card p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.rr-print-prep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Repeated-question group header in Research History. */
.rr-run-group .rr-chip { margin-left: var(--space-2); }

/* Source rows in the Inspect-sources region. */
.rr-source-row:first-child { border-top: 1px solid var(--color-border); }

/* Mobile: keep every Stage-D element inside the 390px viewport. */
@media (max-width: 640px) {
  .rr-navstrip-group { display: block; }
  .rr-navstrip-group .rr-chip { display: inline-block; margin: 0 var(--space-2) var(--space-2) 0; }
  .rr-chip-row { gap: var(--space-2); }
  .rr-sources-summary { align-items: flex-start; flex-direction: column; }
}

/* Public example reports (path-routed, prerendered). */
.rr-example-reports {
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-divider);
}
.rr-example-reports .rr-h2 { margin: 0 0 var(--space-3); }
.rr-example-reports-lede {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.rr-example-report-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.rr-example-report-list li { margin: 0 0 var(--space-3); }
.rr-example-report-list a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--color-divider);
}
.rr-example-report-list a:hover { border-bottom-color: var(--color-primary); }
.rr-example-reports-all { font-size: var(--text-sm); }

.rr-public-page .rr-main { padding-bottom: var(--space-8); }
.rr-public-generated {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.rr-public-disclaimer {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-width: 72ch;
}
.rr-public-disclaimer p { margin: 0; font-size: var(--text-sm); line-height: 1.6; }
.rr-public-report .rr-bl-answer { margin-top: var(--space-3); }
.rr-public-glossary {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 72ch;
}
.rr-public-glossary-label {
  font-weight: 600;
  color: var(--color-text);
}
.rr-public-empty {
  color: var(--color-text-muted);
}
.rr-public-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rr-public-source {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.rr-public-source-id {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}
.rr-public-source-title { grid-column: 2; }
.rr-public-source-meta {
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: 2px;
}
.rr-public-source-count {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 72ch;
}
.rr-public-source-count a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rr-public-source-count a:hover {
  color: var(--color-primary);
}
.rr-later-reviews {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 72ch;
}
.rr-public-report .rr-bl-certainty + .rr-later-reviews {
  margin: calc(-1 * var(--space-4)) 0 var(--space-5);
}
.rr-later-reviews a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rr-later-reviews a:hover {
  color: var(--color-primary);
}
.rr-public-index-list {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
}
.rr-public-index-item {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-divider);
}
.rr-public-index-item a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}
.rr-public-index-item a:hover { text-decoration: underline; }
.rr-public-index-meta {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.rr-src-ref {
  font-family: var(--font-mono);
  font-size: 0.75em;
}