/* =============================================================================
   EMPIRICAL REGISTRY — COMPONENTS CSS
   /public/styles/components.css

   CONTENTS:
     01. Breadcrumb Bar
     02. Audit Page Layout (two-column grid)
     03. Audit Sidebar
     04. Audit Header
     05. Verdict Components (strip, badges, pips)
     06. Claim Pairs
     07. Verified Fact Block
     08. Authority Anchors
     09. Audit Body (MDX slot)
     10. Schema Disclosure Block
     11. Corrections Notice
     12. Review Notice
     13. Audit Index — Page Header
     14. Audit Index — Filter Bar
     15. Audit Index — Sections & Cards
     16. Audit Index — Registry Notice
     17. Vertical Index Page
     18. Prose Layout (methodology, about, conflicts)
     19. Prose Components (notice box, process step)
     20. Draft & Archived Notice Bars
     21. Responsive Overrides

   SOURCE:
     Extracted from scoped <style> blocks in:
       src/layouts/AuditLayout.astro
       src/pages/audits/index.astro
       src/layouts/BaseLayout.astro
     Those scoped blocks should be removed once this file is confirmed stable.

   TOKENS:
     All colour, font, and spacing values reference :root variables
     defined in global.css. No hardcoded values in this file.
     Exception: verdict and tier colours are set inline via style props
     in Astro components (dynamic values from frontmatter enums).
     Those inline styles are intentional and not duplicated here.
============================================================================= */


/* =============================================================================
   01. BREADCRUMB BAR
   Rendered in AuditLayout.astro above the two-column grid.
   Not present on BaseLayout pages (those use prose or custom headers).
============================================================================= */

.breadcrumb-bar {
  border-bottom: 1px solid var(--rule);
  padding: 0 2rem;
  background: var(--bg-inset);
}

.breadcrumb-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.6rem 0;
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-light);
}

.breadcrumb-list li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--rule);
}

.breadcrumb-list a {
  color: var(--ink-light);
  text-decoration: none;
  transition: color var(--ease);
}

.breadcrumb-list a:hover { color: var(--accent); }

.breadcrumb-list li[aria-current="page"] { color: var(--ink-mid); }


/* =============================================================================
   02. AUDIT PAGE LAYOUT
   Two-column grid: sidebar (220px) | main content (1fr)
   Collapses to single column at 900px.
============================================================================= */

.audit-page-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0 2.5rem;
  align-items: start;
}


/* =============================================================================
   03. AUDIT SIDEBAR
============================================================================= */

.audit-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding: 2.5rem 0;
  font-family: var(--font-sans);
}

.sidebar-block { margin-bottom: 1.5rem; }

.sidebar-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.75rem;
}

.sidebar-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1.25rem 0;
}

/* Claim index */
.claim-index { list-style: none; }
.claim-index li { margin-bottom: 0.5rem; }

.claim-index-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  padding: 0.5rem;
  border: 1px solid var(--rule-light);
  border-radius: 2px;
  background: var(--bg);
  transition: border-color var(--ease);
}
.claim-index-link:hover { border-color: var(--accent); }

.claim-index-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-light);
}

.claim-index-text {
  font-size: 0.72rem;
  color: var(--ink-mid);
  line-height: 1.4;
}

.verdict-pip {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border: 1px solid;
  border-radius: 2px;
  align-self: flex-start;
  margin-top: 0.2rem;
  /* colour set inline via style prop — verdict enum drives values */
}

/* Audit meta list */
.audit-meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.72rem;
}
.audit-meta-list dt { color: var(--ink-light); white-space: nowrap; }
.audit-meta-list dd { color: var(--ink-mid); }
.audit-meta-list a {
  color: var(--accent-mid);
  text-decoration: none;
  font-size: 0.68rem;
}

/* Tier legend */
.tier-legend { list-style: none; }
.tier-legend li {
  font-size: 0.72rem;
  color: var(--ink-mid);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.4;
}


/* =============================================================================
   04. AUDIT HEADER
   First element inside .audit-main.
   Contains kicker, H1, standfirst, verdict strip, optional review notice.
============================================================================= */

.audit-main {
  padding: 2.5rem 0 5rem;
  border-left: 1px solid var(--rule);
  padding-left: 2.5rem;
  min-width: 0; /* prevents grid blowout on long unbreakable strings */
}

.audit-header {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid var(--ink);
}

.audit-kicker {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.audit-kicker a {
  color: var(--accent);
  text-decoration: none;
}
.audit-kicker a:hover { text-decoration: underline; }

.kicker-sep {
  margin: 0 0.4rem;
  color: var(--ink-light);
}

.audit-title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 1rem;
}

.audit-standfirst {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 580px;
}

/* Commissioned disclosure — renders between standfirst and verdict strip */
.commissioned-disclosure {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-light);
  background: var(--bg-inset);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
}

.commissioned-disclosure strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.3rem;
}

.commissioned-disclosure p {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.6;
}

/* =============================================================================
   05. VERDICT COMPONENTS
============================================================================= */

/* Verdict strip — summary row in audit header */
.verdict-strip {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.verdict-strip-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity var(--ease);
  /* colour set inline via style prop */
}
.verdict-strip-item:hover { opacity: 0.8; }

.verdict-strip-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.verdict-strip-claim {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Verdict badge — used in claim pair headers */
.verdict-badge {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  border: 1px solid;
  /* colour set inline via style prop */
}

/* Verdict badge small — used in audit index cards */
.verdict-badge-sm {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border: 1px solid;
  border-radius: 2px;
  /* colour set inline via style prop */
}


/* =============================================================================
   06. CLAIM PAIRS
============================================================================= */

.claim-pairs-section { margin-bottom: 3rem; }

.claim-pair {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}
.claim-pair:last-child { border-bottom: none; }

.claim-pair-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.claim-pair-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-light);
}

/* Shared label style — claim block, verified fact, anchor list */
.claim-block-label,
.verified-fact-label,
.anchor-list-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.5rem;
}

/* False claim block */
.claim-block { margin-bottom: 1.25rem; }

.claim-quote {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-mid);
  border-left: 3px solid var(--rule);
  padding: 0.75rem 1rem;
  margin: 0 0 0.6rem;
  background: var(--bg-inset);
  line-height: 1.65;
}

.claim-origin-note {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-light);
  line-height: 1.5;
}
.claim-origin-note strong { color: var(--ink-mid); }


/* =============================================================================
   07. VERIFIED FACT BLOCK
   The definitive counter to the false claim.
   Left border uses --accent to signal authority.
============================================================================= */

.verified-fact-block {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.verified-fact-text {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 0.75rem;
  font-weight: 400;
}

.cohort-note {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-light);
  line-height: 1.5;
}

.cohort-label {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.65rem;
  margin-right: 0.4rem;
  color: var(--ink-light);
}


/* =============================================================================
   08. AUTHORITY ANCHORS
============================================================================= */

.anchor-list-wrap { margin-top: 1rem; }
.anchor-list { list-style: none; }

.anchor-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-light);
}
.anchor-item:last-child { border-bottom: none; }

.anchor-detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.anchor-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--accent-mid);
  text-decoration: none;
  line-height: 1.4;
}
.anchor-label:hover { text-decoration: underline; }

.anchor-meta {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--ink-light);
}

.anchor-note { font-style: italic; }


/* =============================================================================
   09. AUDIT BODY (MDX SLOT)
   Optional narrative section below claim pairs.
   Hides cleanly if empty.
============================================================================= */

.audit-body {
  margin-bottom: 3rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--ink-mid);
  line-height: 1.75;
}

.audit-body:empty { display: none; }

.audit-body h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 2rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.audit-body p { margin-bottom: 1rem; }

.audit-body a {
  color: var(--accent-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =============================================================================
   10. SCHEMA DISCLOSURE BLOCK
============================================================================= */

.schema-disclosure {
  background: var(--bg-inset);
  border: 1px solid var(--rule);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.schema-disclosure-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.75rem;
}

.schema-disclosure-body {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.schema-disclosure-body a { color: var(--accent-mid); }

.schema-disclosure-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  font-size: 0.75rem;
}
.schema-disclosure-meta dt {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-light);
  white-space: nowrap;
}
.schema-disclosure-meta dd {
  font-family: var(--font-sans);
  color: var(--ink-mid);
}
.schema-disclosure-meta a {
  color: var(--accent-mid);
  text-decoration: none;
}

.schema-note {
  font-style: italic;
  color: var(--ink-light);
  font-size: 0.7rem;
}


/* =============================================================================
   11. CORRECTIONS NOTICE
   Persistent on every audit page.
   Amber left border distinguishes from the verified fact block (red).
============================================================================= */

.corrections-notice {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warn-border);
  background: var(--warn-bg);
  padding: 1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.corrections-notice strong {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warn-border);
  margin-bottom: 0.35rem;
}

.corrections-notice a { color: var(--accent-mid); }


/* =============================================================================
   12. REVIEW NOTICE
   Renders in audit header when reviewNote frontmatter field is populated.
   Signals to readers that the audit has been reviewed since publication.
============================================================================= */

.review-notice {
  background: var(--bg-inset);
  border-left: 3px solid var(--rule);
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.6;
}

.review-notice strong {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  display: block;
  margin-bottom: 0.3rem;
}


/* =============================================================================
   13. AUDIT INDEX — PAGE HEADER
============================================================================= */

.index-header {
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  padding: 0 2rem;
}

.index-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 0 2.5rem;
}

.index-kicker {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.index-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.index-standfirst {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 1.5rem;
}
.index-standfirst a {
  color: var(--accent-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.index-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-light);
}
.index-stat strong { color: var(--ink); font-weight: 600; }
.index-stat a { color: var(--accent-mid); text-decoration: none; }
.index-stat a:hover { text-decoration: underline; }
.index-stat-sep { color: var(--rule); }


/* =============================================================================
   14. AUDIT INDEX — FILTER BAR
   Sticky below site header. Scrollable on mobile.
============================================================================= */

.filter-bar {
  border-bottom: 1px solid var(--rule);
  background: var(--bg-inset);
  padding: 0 2rem;
  position: sticky;
  top: var(--header-h);
  z-index: 10;
}

.filter-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-bar-inner::-webkit-scrollbar { display: none; }

.filter-tab {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-light);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.85rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: color var(--ease), border-color var(--ease);
  margin-bottom: -1px;
}
.filter-tab:hover { color: var(--ink); }
.filter-tab.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}

.filter-count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-light);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05rem 0.35rem;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.filter-tab.active .filter-count {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}


/* =============================================================================
   15. AUDIT INDEX — SECTIONS & CARDS
============================================================================= */

.audit-sections-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

/* Vertical section */
.vertical-section {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.vertical-section:last-of-type { border-bottom: none; }

.vertical-section-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.vertical-section-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.vertical-section-title a {
  color: var(--ink-light);
  text-decoration: none;
  transition: color var(--ease);
}
.vertical-section-title a:hover { color: var(--accent); }

.vertical-section-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--rule);
}

/* Card grid — 1px gap trick: container bg shows through as grid lines */
.audit-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* Audit card */
.audit-card {
  background: var(--bg);
  transition: background var(--ease);
}
.audit-card:hover { background: var(--bg-inset); }

.audit-card-link {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  text-decoration: none;
  height: 100%;
  box-sizing: border-box;
}

.audit-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}

.audit-card-vertical {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.audit-card-brand {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-light);
}

.audit-card-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.audit-card-desc {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1; /* pushes footer to bottom of card */
}

.audit-card-verdicts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.audit-card-claim-count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-light);
  margin-left: auto;
}

.audit-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule-light);
}

.audit-card-date {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--ink-light);
}

.audit-card-version {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--rule);
}

/* Empty state */
.empty-state {
  padding: 3rem 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink-light);
  text-align: center;
}


/* =============================================================================
   16. AUDIT INDEX — REGISTRY NOTICE
   Three-column trust footer at bottom of /audits/ index.
============================================================================= */

.registry-notice-wrap {
  background: var(--bg-inset);
  border-top: 1px solid var(--rule);
  padding: 0 2rem;
}

.registry-notice {
  max-width: var(--max-width);
  margin: 0 auto;
}

.registry-notice-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2.5rem 0;
}

.registry-notice-block strong {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  display: block;
  margin-bottom: 0.5rem;
}

.registry-notice-block p {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--ink-mid);
  line-height: 1.65;
}

.registry-notice-block a {
  color: var(--accent-mid);
  text-decoration: none;
}
.registry-notice-block a:hover { text-decoration: underline; }


/* =============================================================================
   17. VERTICAL INDEX PAGE
   /audits/[vertical]/ — auto-populated stub pages.
   Shares most styles with the main audit index.
   Unique elements: vertical hero header, back link.
============================================================================= */

.vertical-index-header {
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  padding: 0 2rem;
}

.vertical-index-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 0 2rem;
}

.vertical-back-link {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--ink-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
  transition: color var(--ease);
}
.vertical-back-link:hover { color: var(--accent); }

.vertical-index-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.vertical-index-desc {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.7;
  max-width: 560px;
}


/* =============================================================================
   18. PROSE LAYOUT
   Used by BaseLayout.astro when prose=true.
   Methodology, About, Conflict of Interest pages.
============================================================================= */

.prose-wrap {
  max-width: var(--prose-width);
  margin: 0 auto;
  padding: 3.5rem 2rem 6rem;
}

.prose-wrap :global(h1) {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.prose-wrap :global(.page-kicker) {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
  display: block;
}

.prose-wrap :global(.page-standfirst) {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--ink);
}

.prose-wrap :global(h2) {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.prose-wrap :global(h3) {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 2rem 0 0.5rem;
}

.prose-wrap :global(p) {
  font-family: var(--font-serif);
  font-size: 0.97rem;
  color: var(--ink-mid);
  line-height: 1.78;
  margin-bottom: 1.1rem;
}

.prose-wrap :global(a) {
  color: var(--accent-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-wrap :global(a:hover) { color: var(--accent); }

.prose-wrap :global(ul),
.prose-wrap :global(ol) {
  font-family: var(--font-serif);
  font-size: 0.97rem;
  color: var(--ink-mid);
  line-height: 1.78;
  margin-bottom: 1.1rem;
  padding-left: 1.5rem;
}

.prose-wrap :global(li) { margin-bottom: 0.4rem; }

.prose-wrap :global(strong) {
  font-weight: 600;
  color: var(--ink);
}

.prose-wrap :global(blockquote) {
  border-left: 3px solid var(--rule);
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  background: var(--bg-inset);
  font-style: italic;
  color: var(--ink-mid);
}

.prose-wrap :global(code) {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--bg-inset);
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.prose-wrap :global(hr) {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}


/* =============================================================================
   19. PROSE COMPONENTS
   Reusable MDX components for methodology, about, conflicts pages.
   Applied via className in MDX content — no import needed.
============================================================================= */

/* Notice box — policy callouts, warnings, editorial notes */
.prose-wrap :global(.notice) {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--bg-inset);
  padding: 1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.6;
  margin: 1.5rem 0;
}

.prose-wrap :global(.notice strong) {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

/* Process step — numbered workflow steps in methodology */
.prose-wrap :global(.process-step) {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 1rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

.prose-wrap :global(.process-step-num) {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-light);
  padding-top: 0.25rem;
}

.prose-wrap :global(.process-step-body p) { margin-bottom: 0.5rem; }

.prose-wrap :global(.process-step-body p:first-child) {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

/* Definition list — used in conflict of interest, about pages */
.prose-wrap :global(dl) {
  margin-bottom: 1.5rem;
}

.prose-wrap :global(dt) {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

.prose-wrap :global(dd) {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--ink-mid);
  line-height: 1.7;
  padding-left: 1rem;
  border-left: 2px solid var(--rule-light);
}


/* =============================================================================
   20. DRAFT & ARCHIVED NOTICE BARS
   Rendered in [brand].astro above AuditLayout when status !== 'published'.
============================================================================= */

.archived-notice-bar {
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-border);
  padding: 0 2rem;
}

.archived-notice-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.65rem 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--warn-ink);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.archived-notice-inner strong { font-weight: 600; }

.archived-notice-inner a {
  color: var(--warn-ink);
  font-weight: 600;
  text-decoration: underline;
}

.draft-notice-bar {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--rule);
  padding: 0 2rem;
}

.draft-notice-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.65rem 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-light);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.draft-notice-inner strong { font-weight: 600; }


/* =============================================================================
   21. RESPONSIVE OVERRIDES
   Component-level breakpoints only.
   Site chrome (header/footer) breakpoints live in global.css.
============================================================================= */

/* Audit layout: collapse to single column */
@media (max-width: 900px) {
  .audit-page-wrap {
    grid-template-columns: 1fr;
  }
  .audit-sidebar {
    display: none; /* sidebar hidden on mobile — claim index not needed */
  }
  .audit-main {
    border-left: none;
    padding-left: 0;
  }
  .verdict-strip-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}

/* Audit index: single column cards, stacked registry notice */
@media (max-width: 768px) {
  .audit-card-grid {
    grid-template-columns: 1fr;
  }
  .registry-notice-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .index-title { font-size: 1.6rem; }
  .filter-bar { position: static; }
  .audit-sections-wrap { padding: 0 1.25rem 3rem; }
  .index-header { padding: 0 1.25rem; }
  .index-header-inner { padding: 2rem 0 1.5rem; }
}

/* Prose pages: tighten padding on small screens */
@media (max-width: 680px) {
  .prose-wrap {
    padding: 2rem 1.25rem 4rem;
  }
  .prose-wrap :global(h1) {
    font-size: 1.6rem;
  }
}

/* Breadcrumb: truncate on very small screens */
@media (max-width: 480px) {
  .breadcrumb-list {
    font-size: 0.68rem;
  }
  .audit-title {
    font-size: 1.5rem;
  }
}