/* chaos-prose.css — Article & Research Chrome Kit
 * Consumable primitives for long-form content matching chaoslabs.xyz blog/post style.
 * Builds on chaos-tokens.css; used alongside shell.css prose utilities.
 *
 * Components:
 *   .cp-article      — Article wrapper scoping editorial typography
 *   .cp-header       — Post header with category, reading time, deck
 *   .cp-author       — Byline author card (avatar, name, role)
 *   .cp-toc          — Table of contents (auto or manual)
 *   .cp-cite         — Citation link with favicon-ready styling
 *   .cp-ref          — Inline reference/footnote marker
 *   .cp-card         — Research card with proper spacing
 *   .cp-nav          — Related/prev/next article navigation
 *
 * Usage example:
 *
 * wrapper (.wrap, .cp-article, a page report class) as below, or at fragment
 * top level. Top-level blocks land as direct children of the shell's
 * <main id="view"> and get their own 1300px + space-8 gutter from the
 * `:where(main) >` rules in this file; do not re-add per-page header
 * gutter classes for that case.
 *
 *   <article class="cp-article">
 *     <header class="cp-header">
 *       <div class="cp-header-meta">
 *         <span class="cp-header-category">AI Research</span>
 *         <span class="cp-header-sep">·</span>
 *         <span class="cp-header-date">Sep 19, 2026</span>
 *         <span class="cp-header-sep">·</span>
 *         <span class="cp-header-read">8 min read</span>
 *       </div>
 *       <h1>Article Title Here</h1>
 *       <p class="cp-header-deck">Brief summary or deck for the article.</p>
 *       <div class="cp-author">
 *         <span class="cp-author-avatar" aria-hidden="true">OG</span>
 *         <span class="cp-author-info">
 *           <span class="cp-author-name">Omer Goldberg</span>
 *           <span class="cp-author-role">Founder and CEO <span class="cp-author-sep">·</span> Chaos Labs</span>
 *         </span>
 *       </div>
 *     </header>
 *
 *       <h3>Main point in one sentence</h3>
 *       <p>Supporting context for the key takeaway.</p>
 *       </div>
 *     </div>
 *
 *     <nav class="cp-toc">
 *       <span class="cp-toc-label">Table of Contents</span>
 *       <ol>
 *         <li><a href="#section-1">First section</a></li>
 *         <li><a href="#section-2">Second section</a></li>
 *       </ol>
 *     </nav>
 *
 *     <!-- Citation with favicon -->
 *     <a class="cp-cite" href="https://example.com/paper">
 *       <span class="cp-cite-icon"><img src="favicon.png" alt=""></span>
 *       Paper Title
 *       <span class="cp-cite-domain">example.com</span>
 *     </a>
 *
 *     <!-- Research cards -->
 *     <div class="cp-card-group">
 *       <a class="cp-card" href="#post-1">
 *         <div class="cp-card-meta">
 *           <span class="cp-card-category">AI Research</span>
 *           <span>·</span>
 *           <span>Jun 16, 2026</span>
 *         </div>
 *         <h3>Card Title</h3>
 *         <p>Brief description of the article or research.</p>
 *       </a>
 *     </div>
 *   </article>
 *
 * Future @chaos/brand-web publish:
 *   These presentational patterns can migrate into a shared package once the
 *   company-website refactors its blog components into `packages/brand-web`.
 *   Until then, this CSS-only kit provides brand alignment without Sanity deps.
 *
 *   Migration path:
 *   1. company-website creates packages/brand-web with React components
 *   2. brand-web exports CSS and/or Tailwind config for tokens
 *   3. saving-humanity can then import from @chaos/brand-web or continue
 *      using this CSS-only approach as a standalone fallback
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE SCOPE
   Wrapper for long-form editorial content; sets typography context
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-article {
  --cp-body-width: 72ch;
  --cp-wide-width: 920px;
  font-family: var(--chaos-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tx);
}

.cp-article > * {
  max-width: var(--cp-body-width);
}

.cp-article > .cp-wide,
.cp-article > figure,
.cp-article > .cp-card-group {
  max-width: var(--cp-wide-width);
}

.cp-article h1,
.cp-article h2,
.cp-article h3,
.cp-article h4 {
  font-family: var(--chaos-font-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.cp-article h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  margin-bottom: var(--chaos-space-4);
}

.cp-article h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 500;
  margin-top: var(--chaos-space-12);
  margin-bottom: var(--chaos-space-4);
  padding-top: var(--chaos-space-4);
  border-top: 1px solid var(--chaos-line);
}

.cp-article h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: var(--chaos-space-8);
  margin-bottom: var(--chaos-space-3);
}

.cp-article p {
  margin: 0 0 var(--chaos-space-4);
  color: var(--tx2);
}

.cp-article p strong {
  color: var(--tx);
  font-weight: 600;
}

.cp-article ul,
.cp-article ol {
  margin: 0 0 var(--chaos-space-4);
  padding-left: var(--chaos-space-5);
  color: var(--tx2);
}

.cp-article li {
  margin-bottom: var(--chaos-space-2);
}

.cp-article li::marker {
  color: var(--chaos-accent);
}

.cp-article blockquote {
  margin: var(--chaos-space-6) 0;
  padding: var(--chaos-space-4) var(--chaos-space-5);
  border-left: 3px solid var(--chaos-accent);
  background: var(--chaos-surface-muted);
  font-style: italic;
  color: var(--tx2);
}

.cp-article blockquote p:last-child {
  margin-bottom: 0;
}

.cp-article code {
  font-family: var(--chaos-font-mono);
  font-size: 0.875em;
  background: var(--chaos-surface-muted);
  border: 1px solid var(--chaos-line);
  padding: 1px 6px;
  border-radius: var(--chaos-radius-sm);
  color: var(--chaos-accent);
}

.cp-article pre {
  margin: var(--chaos-space-6) 0;
  padding: var(--chaos-space-4);
  background: var(--chaos-navy);
  border-radius: var(--chaos-radius-md);
  overflow-x: auto;
}

.cp-article pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POST HEADER
   Date, reading time, byline — chaoslabs.xyz editorial header pattern
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-header {
  margin-bottom: var(--chaos-space-8);
}

/* Standalone placement: pages that put .cp-header at fragment top level (no
   .wrap / .cp-article / report wrapper around it) inject it as a direct child
   of the shell's <main id="view">, which has no gutter of its own. Give those
   headers the same 1300px + space-8 column the report pages use so the header
   aligns with the content below it instead of rendering flush to the viewport
   edge. :where() keeps specificity at (0,1,0) so wrapper- and page-scoped
   rules still win; headers nested inside a constrained wrapper never match.
   .cp-header.cp-dark stays wrapper-only: its negative-margin bleed assumes a
   padded parent and would combine badly with this rule's centered box. */
:where(main) > .cp-header {
  max-width: 1300px;
  margin-inline: auto;
  padding: var(--chaos-space-10) var(--chaos-space-8) 0;
}

@media (max-width: 820px) {
  :where(main) > .cp-header {
    padding-inline: var(--chaos-space-5);
  }
}

@media (max-width: 560px) {
  :where(main) > .cp-header {
    padding-inline: var(--chaos-space-4);
  }
}

.cp-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--chaos-space-2) var(--chaos-space-4);
  margin-bottom: var(--chaos-space-4);
  font-family: var(--chaos-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tx3);
}

.cp-header-category {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--chaos-accent);
}

.cp-header-date,
.cp-header-read {
  font-weight: 500;
}

.cp-header-sep {
  color: var(--chaos-line-strong);
}

.cp-header h1 {
  font-family: var(--chaos-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 var(--chaos-space-4);
  max-width: 24ch;
}

.cp-header-deck {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--tx2);
  max-width: 65ch;
  margin: 0;
}

/* Byline author card — avatar + name + role, replaces the plain author
   mention some pages used to fold into .cp-header-meta. Mirrors the
   chaoslabs.xyz PostMeta byline presentationally (avatar, name, role)
   without the popup: this is a static site, so the card is always
   expanded rather than a click-to-open dialog. */
/* ── cp-post: article-page header variant ─────────────────────────────────
   Ports the chaoslabs.xyz blog post chrome (PostHero/PostMeta at the
   chaos-tokens.css pinned SHA): the 60px AT Aero headline with the
   bg-headline gradient, a bordered category chip, and 14px/500 meta type.
   Applied via the cp-post class on the seven article pages only - hub and
   dashboard headers keep the base ramp above. */
.cp-header.cp-post h1 {
  font-size: clamp(31px, 4.7vw, 60px);
  font-weight: 400;
  line-height: 1.035;
  letter-spacing: -0.03em;
  max-width: 20ch;
  /* bg-headline: white wash fading out over the ink color, clipped to text. */
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) -55.33%, rgba(255, 255, 255, 0) 31.29%);
  background-color: var(--tx);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 560px) {
  .cp-header.cp-post h1 {
    letter-spacing: -0.01em;
  }
}
/* The gradient reads as a subtle top-light on dark ink; on the dark theme the
   ink is near-white, so the wash washes out - fall back to plain text there. */
html[data-theme="dark"] .cp-header.cp-post h1 {
  background: none;
  color: var(--tx);
}

.cp-header.cp-post .cp-header-meta {
  font-family: var(--chaos-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--tx2);
}

/* Also matches the category chip once it moves out of .cp-header into the
   meta band below H1 (mission's superseding direction) - same chip, new
   parent, one rule. */
.cp-header.cp-post .cp-header-category,
.cp-meta-band .cp-header-category {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line-strong, var(--chaos-line-strong));
  border-radius: 6px;
  font-family: var(--chaos-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tx2);
}

.cp-author {
  display: flex;
  align-items: center;
  gap: var(--chaos-space-3);
  margin-top: var(--chaos-space-6);
}

.cp-author-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  /* See .cp-card's --panel/--line note above: these are the site's
     themed semantic tokens (light/dark aware), with the static brand
     primitives as a fallback when a page never loads atlas.css. */
  background: var(--panel, var(--chaos-panel));
  border: 1px solid var(--line, var(--chaos-line));
  font-family: var(--chaos-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tx2);
}

.cp-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-author-name {
  font-family: var(--chaos-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tx);
}

.cp-author-role {
  font-size: 13px;
  line-height: 1.3;
  color: var(--tx3);
}

.cp-author-role .cp-author-sep {
  margin: 0 4px;
  color: var(--chaos-line-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FRAMED SHEET
   chaoslabs.xyz post-page chrome: a centered content column (~1130px) boxed
   by vertical hairlines that run the full page height, with light gray rails
   outside (light theme; dark theme uses the semantic --bg2/--panel tokens so
   the same contrast holds). Full-width horizontal hairlines separate the
   frame's sections and cross the rails. Source: chaoslabs.xyz /posts/[slug]
   composition (PostHeader/PostHero/PostMeta/related-articles.tsx) at the
   pinned SHA. Wraps a post's top rail (back link + share), header, meta
   band, body content and sibling cards; the body content keeps whatever
   report-specific layout it already had (see cp-frame-sheet--flush).
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-frame {
  --cp-frame-w: 1130px;
  /* Owner review 2026-09-21: the rails outside the sheet read as gray
     gutters; gold's rails share the page background and the frame reads
     through its hairline rules alone. */
  background: var(--bg, var(--chaos-surface));
}

.cp-frame-sheet {
  max-width: var(--cp-frame-w);
  margin-inline: auto;
  padding: var(--chaos-space-8) var(--chaos-space-10);
  background: var(--panel, var(--chaos-panel));
  border-left: 1px solid var(--line, var(--chaos-line));
  border-right: 1px solid var(--line, var(--chaos-line));
}

/* Content that manages its own spacing (report layouts, sibling cards, the
   meta band) opts out of the sheet's default padding with this modifier. */
.cp-frame-sheet--flush {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.cp-frame-rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line, var(--chaos-line));
}

@media (max-width: 820px) {
  .cp-frame-sheet {
    padding: var(--chaos-space-6) var(--chaos-space-5);
  }
}

@media (max-width: 560px) {
  .cp-frame-sheet {
    padding: var(--chaos-space-5) var(--chaos-space-4);
  }
}

/* Existing page wrappers (.wrap) that used to own the header's own padding/
   background/border-bottom would otherwise double up with the sheet's own
   padding and border once nested inside it - neutralize just that nested
   case rather than .wrap generally, which architecture.html and defense.html
   still use elsewhere for unrelated section widths (PR #92 pattern). */
.cp-frame-sheet .cp-header .wrap {
  padding: 0;
  border: 0;
  background: none;
}

/* Top rail: back link (left) + share (right) ---------------------------- */

.cp-frame-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--chaos-space-4);
  padding-top: var(--chaos-space-5);
  padding-bottom: var(--chaos-space-5);
}

/* .cp-frame-rail a.cp-frame-back (parent class + element + class, (0,2,1))
   rather than plain .cp-frame-back: several report pages set their own
   `.atlas-report a{color;text-decoration:underline}` / `.xx-report a{...}`
   at (0,1,1), later in source order than chaos-prose.css - see the
   .cp-siblings a.cp-sibling-card rule below for the same fight. The extra
   parent class reliably outranks those regardless of source order. */
.cp-frame-rail a.cp-frame-back {
  display: inline-flex;
  align-items: center;
  gap: var(--chaos-space-3);
  font-family: var(--mono, var(--chaos-font-mono));
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx3, var(--chaos-text-tertiary));
  text-decoration: none;
}

.cp-frame-back svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.cp-frame-rail a.cp-frame-back:hover {
  color: var(--acc, var(--chaos-accent));
}

.cp-frame-rail a.cp-frame-back:focus-visible {
  outline: 2px solid var(--acc, var(--chaos-accent));
  outline-offset: 2px;
}

.cp-frame-share {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-frame-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--chaos-radius-md);
  color: var(--tx3, var(--chaos-text-tertiary));
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.cp-frame-share-btn svg {
  width: 18px;
  height: 18px;
}

.cp-frame-share-btn:hover {
  color: var(--acc, var(--chaos-accent));
  background: var(--bg2, var(--chaos-surface-muted));
}

.cp-frame-share-btn:focus-visible {
  outline: 2px solid var(--acc, var(--chaos-accent));
  outline-offset: 2px;
}

/* Small copy-status toast, mirroring the existing data-ar-copy-link pattern
   from state-of-the-union.html's citation block (clipboard write + status
   text) without introducing a different UI mechanism. */
.cp-copy-status {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 4px 10px;
  background: var(--tx, var(--chaos-text-primary));
  color: var(--bg, var(--chaos-surface));
  font-family: var(--sans, var(--chaos-font-body));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--chaos-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.cp-copy-status:not(:empty) {
  opacity: 1;
}

/* Meta band: chip | byline | read time, below H1 ------------------------ */

.cp-meta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.cp-meta-band-cell {
  display: flex;
  align-items: center;
  padding: var(--chaos-space-5) var(--chaos-space-6);
  border-right: 1px solid var(--line, var(--chaos-line));
}

.cp-meta-band-cell:last-child {
  border-right: 0;
  margin-left: auto;
}

.cp-meta-band .cp-header-category {
  margin: 0;
}

.cp-meta-band .cp-author {
  margin-top: 0;
}

.cp-meta-band .cp-header-read {
  font-family: var(--sans, var(--chaos-font-body));
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tx2, var(--chaos-text-secondary));
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cp-meta-band {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-meta-band-cell {
    border-right: 0;
    border-bottom: 1px solid var(--line, var(--chaos-line));
    padding: var(--chaos-space-4) var(--chaos-space-5);
  }

  .cp-meta-band-cell:last-child {
    border-bottom: 0;
    margin-left: 0;
  }
}

/* Dark header variant (navy hero) */
.cp-header.cp-dark {
  --tx: var(--chaos-text-primary);
  --tx2: var(--chaos-text-secondary);
  --tx3: var(--chaos-text-tertiary);
  color: #f2f4f7;
  background: var(--chaos-navy);
  padding: var(--chaos-space-12) var(--chaos-space-6);
  margin: calc(-1 * var(--chaos-space-8)) calc(-1 * var(--chaos-space-6)) var(--chaos-space-8);
  border-bottom: 1px solid var(--chaos-line-dark);
}

.cp-header.cp-dark h1 {
  color: #fff;
}

.cp-header.cp-dark .cp-header-deck {
  color: #b9c6d8;
}

.cp-header.cp-dark .cp-header-meta {
  color: #8a9ab2;
}

.cp-header.cp-dark .cp-header-category {
  color: var(--chaos-accent-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TLDR / KEY TAKEAWAY BLOCK
   Prominent callout for executive summary — chaoslabs.xyz "bluf" style
   ═══════════════════════════════════════════════════════════════════════════ */























/* ═══════════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   Auto-generated or manual section navigation
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-toc {
  margin: var(--chaos-space-6) 0;
  padding: var(--chaos-space-4) var(--chaos-space-5);
  background: var(--chaos-surface-muted);
  border: 1px solid var(--chaos-line);
  border-radius: var(--chaos-radius-lg);
}

.cp-toc-label {
  display: block;
  font-family: var(--chaos-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: var(--chaos-space-3);
}

.cp-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-section;
}

.cp-toc li {
  counter-increment: toc-section;
  margin-bottom: var(--chaos-space-2);
}

.cp-toc a {
  display: flex;
  align-items: baseline;
  gap: var(--chaos-space-3);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tx);
  text-decoration: none;
  padding: var(--chaos-space-1) 0;
  border-radius: var(--chaos-radius-sm);
  transition: color 0.12s ease;
}

.cp-toc a::before {
  content: counter(toc-section, decimal-leading-zero);
  font-family: var(--chaos-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--chaos-accent);
  flex-shrink: 0;
  min-width: 20px;
}

.cp-toc a:hover {
  color: var(--chaos-accent);
}

.cp-toc a:focus-visible {
  outline: 2px solid var(--chaos-accent);
  outline-offset: 2px;
}

/* Nested subsections */
.cp-toc ol ol {
  margin-top: var(--chaos-space-2);
  margin-left: var(--chaos-space-6);
  counter-reset: toc-sub;
}

.cp-toc ol ol li {
  counter-increment: toc-sub;
}

.cp-toc ol ol a::before {
  content: counter(toc-section, decimal-leading-zero) "." counter(toc-sub);
  color: var(--tx3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOC RESTYLE — report chapter index asides
   Restyles the existing chapter-index pattern used by state-of-the-union.html
   (.ar-index), methodology.html (.me-index), downloads.html (.dl-index) and
   novelty.html (.nv-index) to the chaoslabs.xyz PostToc pattern (numbered
   chip rows, mono uppercase heading, active row blue with a right-edge bar
   marker) - see post-toc.tsx's border-r-4 active treatment. The markup, ids
   and scroll-spy JS (each page's own script toggles aria-current="location"
   on the active link) are untouched; the base structural/layout rules in
   atlas-report.css and each page's own <style> block were trimmed of the
   properties restyled here so this stays the single visual source.
   ═══════════════════════════════════════════════════════════════════════════ */

.ar-index-heading,
.me-index-heading,
.dl-index-heading,
.nv-index-heading {
  font-family: var(--mono, var(--chaos-font-mono));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx3, var(--chaos-text-tertiary));
}

.ar-index nav a,
.me-index nav a,
.dl-index nav a,
.nv-index nav a {
  display: flex;
  align-items: center;
  gap: var(--chaos-space-3);
  /* min-width: 0 lets the row shrink inside its grid cell at the
     <=820px 2-column breakpoint (site/assets/atlas-report.css and the
     equivalent per-page rules) - a flex item's default min-width:auto
     floors it at the label's min-content width, which overflowed the
     narrow mobile column before this. overflow-wrap makes the label text
     itself the thing that gives, not the row. */
  min-width: 0;
  padding: var(--chaos-space-2) var(--chaos-space-3) var(--chaos-space-2) 0;
  border-right: 4px solid transparent;
  color: var(--tx2, var(--chaos-text-secondary));
  font-family: var(--mono, var(--chaos-font-mono));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* The <li> is also a grid item at the <=820px 2-column breakpoint and needs
   the same min-width:0 shrink-to-fit as its <a> (see comment above). */
.ar-index nav li,
.me-index nav li,
.dl-index nav li,
.nv-index nav li {
  min-width: 0;
}

.ar-index nav a span,
.me-index nav a span,
.dl-index nav a span,
.nv-index nav a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line, var(--chaos-line));
  border-radius: var(--chaos-radius-sm);
  font: 600 11px/1 var(--mono, var(--chaos-font-mono));
  color: var(--tx3, var(--chaos-text-tertiary));
}

.ar-index nav a:hover,
.me-index nav a:hover,
.dl-index nav a:hover,
.nv-index nav a:hover {
  color: var(--acc, var(--chaos-accent));
}

.ar-index nav a[aria-current="location"],
.me-index nav a[aria-current="location"],
.dl-index nav a[aria-current="location"],
.nv-index nav a[aria-current="location"] {
  color: var(--acc, var(--chaos-accent));
  border-right-color: var(--acc, var(--chaos-accent));
}

.ar-index nav a[aria-current="location"] span,
.me-index nav a[aria-current="location"] span,
.dl-index nav a[aria-current="location"] span,
.nv-index nav a[aria-current="location"] span {
  border-color: var(--acc, var(--chaos-accent));
  color: var(--acc, var(--chaos-accent));
}

/* ═══════════════════════════════════════════════════════════════════════════
   CITATION LINKS
   Favicon-ready styling for external source links
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-cite {
  display: inline-flex;
  align-items: center;
  gap: var(--chaos-space-2);
  font-size: 14px;
  line-height: 1.45;
  color: var(--chaos-accent);
  text-decoration: none;
  text-underline-offset: 3px;
}

.cp-cite:hover {
  text-decoration: underline;
}

.cp-cite:focus-visible {
  outline: 2px solid var(--chaos-accent);
  outline-offset: 2px;
  border-radius: var(--chaos-radius-sm);
}

/* Favicon slot */
.cp-cite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cp-cite-icon img {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: contain;
}

/* Fallback icon (no favicon) */
.cp-cite-icon svg {
  width: 14px;
  height: 14px;
  color: var(--chaos-accent);
  opacity: 0.7;
}

/* Domain hint */
.cp-cite-domain {
  font-family: var(--chaos-font-mono);
  font-size: 11px;
  color: var(--tx3);
  margin-left: var(--chaos-space-1);
}

/* Citation list (bibliography style) */
.cp-cite-list {
  list-style: none;
  margin: var(--chaos-space-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--chaos-space-3);
}

.cp-cite-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--chaos-space-3);
  padding: var(--chaos-space-3) var(--chaos-space-4);
  background: var(--chaos-surface-muted);
  border: 1px solid var(--chaos-line);
  border-radius: var(--chaos-radius-md);
  font-size: 13px;
  line-height: 1.5;
}

.cp-cite-list .cp-cite-icon {
  margin-top: 2px;
}

.cp-cite-list .cp-cite-meta {
  flex: 1;
  min-width: 0;
}

.cp-cite-list .cp-cite-title {
  font-weight: 500;
  color: var(--tx);
  display: block;
}

.cp-cite-list .cp-cite-source {
  font-family: var(--chaos-font-mono);
  font-size: 11px;
  color: var(--tx3);
  margin-top: var(--chaos-space-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INLINE REFERENCES
   Superscript footnote/endnote markers
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--chaos-font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--chaos-accent);
  background: color-mix(in srgb, var(--chaos-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--chaos-accent) 25%, transparent);
  border-radius: var(--chaos-radius-sm);
  text-decoration: none;
  vertical-align: super;
  margin-left: 1px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.cp-ref:hover {
  background: color-mix(in srgb, var(--chaos-accent) 18%, transparent);
  border-color: var(--chaos-accent);
}

.cp-ref:focus-visible {
  outline: 2px solid var(--chaos-accent);
  outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESEARCH CARDS
   Compact card layout for research/post listings
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--chaos-space-5);
  margin: var(--chaos-space-8) 0;
}

.cp-card {
  display: flex;
  flex-direction: column;
  gap: var(--chaos-space-3);
  padding: var(--chaos-space-5);
  /* why: --chaos-panel/--chaos-line are static brand primitives (light-only,
     see chaos-tokens.css); --panel/--line are the site's semantic tokens with
     a real dark override (atlas.css html[data-theme="dark"]). The rest of
     this component (h3/p) already themes via --tx/--tx2, so the surface
     needs to match or the card renders as a stray white box in dark mode. */
  background: var(--panel, var(--chaos-panel));
  border: 1px solid var(--line, var(--chaos-line));
  border-radius: var(--chaos-radius-xl);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cp-card:hover {
  border-color: var(--chaos-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--chaos-navy) 10%, transparent);
}

.cp-card:focus-visible {
  outline: 2px solid var(--chaos-accent);
  outline-offset: 2px;
}

.cp-card-meta {
  display: flex;
  align-items: center;
  gap: var(--chaos-space-2);
  font-family: var(--chaos-font-mono);
  font-size: 11px;
  color: var(--tx3);
}

.cp-card-category {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--chaos-accent);
}

.cp-card h3 {
  font-family: var(--chaos-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tx);
  margin: 0;
}

.cp-card:hover h3 {
  color: var(--chaos-accent);
}

.cp-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--tx2);
  margin: 0;
  flex: 1;
}

.cp-card-footer {
  display: flex;
  align-items: center;
  gap: var(--chaos-space-2);
  font-family: var(--chaos-font-mono);
  font-size: 11px;
  color: var(--tx3);
  margin-top: auto;
  padding-top: var(--chaos-space-3);
  border-top: 1px solid var(--chaos-line);
}

/* Featured card variant */
.cp-card.cp-featured {
  grid-column: span 2;
  flex-direction: row;
  gap: var(--chaos-space-6);
  padding: var(--chaos-space-6);
}

.cp-card.cp-featured .cp-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--chaos-space-3);
  flex: 1;
}

.cp-card.cp-featured h3 {
  font-size: 18px;
}

@media (max-width: 700px) {
  .cp-card.cp-featured {
    grid-column: span 1;
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE NAVIGATION
   Previous / Next article links
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--chaos-space-4);
  margin-top: var(--chaos-space-12);
  padding-top: var(--chaos-space-8);
  border-top: 1px solid var(--chaos-line);
}

.cp-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--chaos-space-2);
  padding: var(--chaos-space-4);
  background: var(--chaos-surface-muted);
  border: 1px solid var(--chaos-line);
  border-radius: var(--chaos-radius-lg);
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.cp-nav a:hover {
  border-color: var(--chaos-accent);
  background: var(--chaos-panel);
}

.cp-nav a:focus-visible {
  outline: 2px solid var(--chaos-accent);
  outline-offset: 2px;
}

.cp-nav-label {
  font-family: var(--chaos-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx3);
}

.cp-nav-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tx);
}

.cp-nav a:hover .cp-nav-title {
  color: var(--chaos-accent);
}

.cp-nav a[data-dir="next"] {
  text-align: right;
}

@media (max-width: 600px) {
  .cp-nav {
    grid-template-columns: 1fr;
  }

  .cp-nav a[data-dir="next"] {
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIBLING CARDS
   Restyles the existing "More in X" / "Related" footer nav (a plain link
   list) into the chaoslabs.xyz related-articles.tsx split-card pattern:
   bordered, hairline-separated cards with a big AT Aero title and an arrow.
   AER's sibling links don't carry per-link excerpt/date/category data (only
   a label and an href), so each card surfaces only what's real: the
   section's existing eyebrow label above the row, and the link's own text as
   the card title - no invented prev/next ordering, no fabricated excerpt or
   date (drunk-nav rule).
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-siblings-label {
  margin: 0 0 var(--chaos-space-2);
  font-family: var(--mono, var(--chaos-font-mono));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx3, var(--chaos-text-tertiary));
}

.cp-siblings-row {
  display: flex;
  flex-wrap: wrap;
}

.cp-siblings a.cp-sibling-card {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--chaos-space-4);
  padding: var(--chaos-space-6) var(--chaos-space-6);
  border-left: 1px solid var(--line, var(--chaos-line));
  /* Beats the report pages' own `.atlas-report a{text-decoration:underline}`
     (and equivalents) at equal-ish specificity but later source order - see
     the .cp-frame-sheet .cp-header .wrap comment above for the same class
     of fight. */
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}

.cp-sibling-card:first-child {
  border-left: 0;
  padding-left: 0;
}

.cp-sibling-card:hover {
  background: var(--bg2, var(--chaos-surface-muted));
}

.cp-sibling-card-title {
  font-family: var(--chaos-font-display);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tx, var(--chaos-text-primary));
}

.cp-sibling-card-arrow {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--tx3, var(--chaos-text-tertiary));
  transform: rotate(180deg);
  transition: transform 0.12s ease, color 0.12s ease;
}

.cp-sibling-card:hover .cp-sibling-card-arrow {
  color: var(--acc, var(--chaos-accent));
  transform: rotate(180deg) translateX(-3px);
}

@media (max-width: 640px) {
  .cp-sibling-card {
    flex: 1 1 100%;
    border-left: 0;
    padding-left: var(--chaos-space-6);
  }

  .cp-sibling-card:first-child {
    padding-left: var(--chaos-space-6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .cp-article {
    font-size: 15px;
  }

  .cp-header.cp-dark {
    padding: var(--chaos-space-8) var(--chaos-space-4);
    margin-left: calc(-1 * var(--chaos-space-4));
    margin-right: calc(-1 * var(--chaos-space-4));
  }



  .cp-card-group {
    grid-template-columns: 1fr;
  }
}