/* ─────────────────────────────────────────────────────
   style.css  —  The Loss of Control Playbook
   Design system based on apolloresearch.ai
   Font: copy woff2 files from apolloresearch.ai/wp-content/
   themes/theme/assets/fonts/ into a fonts/ subfolder here.
   ───────────────────────────────────────────────────── */

/* @font-face for "PP" now lives once in components.css (linked first everywhere). */

/* ═══════════════════════════════════════════════════════════════════════
   TYPE SYSTEM — PP Neue Montreal classes (mirrors the Figma type classes).
   Weights: Thin 100 · Book/Regular 400 · Medium 500. (Colour is independent.)
   Map data-viz node text is intentionally exempt.
     1 title       var(--page-title)≈32 · 400              (page headlines)
     2 heading     22 · 400                                (h2 / section)
     3 lead        18 · 400 · 0.01em                       (intros)
    12 subtitle    var(--subtitle)≈22 · 400                (subtitles)
     4 body        16 · 400 · 0.025em                      (report body)
     5 subheading  15 · 500 · 0.02em                       (card titles)
     6 ui-strong   14 · 500 · 0.01em                       (strong UI)
     7 body-sm     13 · 400 · 0.015em                      (nav / secondary)
     8 ui          12.5 · 500 · 0.02em                     (buttons / controls)
     9 caption     12 · 400 · 0.02em                       (descriptions)
    10 eyebrow     11 · 500 · 0.18em · UPPER               (eyebrow labels)
    11 micro-label 10 · 500 · 0.18em · UPPER               (tiny section labels)
   COLOUR ROLES (tokens above): ink #0D0D0D · body #333 · muted #666 ·
   mint #17CFB9 / teal-text #0a7d6c · border #E6E6E6 · card fills purple/cyan/white.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ────────────────────────────── */
:root {
  --text:          var(--ink, #0D0D0D);   /* one source of truth: components.css --ink (#0d0d0d) */
  --mint:          #17CFB9;
  --mint-light:    #D7F3EF;
  --purple:        #8D7ACC;
  --purple-light:  #DED8F1;
  --blue:          #6BA6EF;
  --blue-light:    #CAE0FB;
  --green:         #C2DB75;
  --green-light:   #ECF3D7;
  --border:        #E6E6E6;
  --bg:            #FAFAFA;
  --muted:         #666;
  /* Unified page-title scale (#14) — calmer + consistent across every page's
     headline, replacing the 54px/44px ultra-light giants. */
  --page-title:    clamp(26px, 3vw, 32px);   /* 01 · Title — PP NM Regular */
  --subtitle:      clamp(18px, 2vw, 22px);   /* 12 · Subtitle — PP NM Regular */
}

/* ── Base ─────────────────────────────────────── */
/* Dotted-grid page background (matches Figma). Content sits on it; opaque
   surfaces (header, footer, cards, map stages) cover it where needed. */
html {
  background-color: var(--bg);   /* #FAFAFA — the report pages' page background (matches the original design) */
  /* Landing / report pages (Home, Q&A, chapters) use this plain background; the
     5 threat-model view pages load app.css afterward, which overrides this with
     --surface-page + the dotted grid, so they're unaffected. */
  scroll-behavior: smooth;
}

body {
  font-family: "PP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; letter-spacing: 0.025em;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* ── Layout ───────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Buttons ──────────────────────────────────── */
/* Figma action button (hero "See arXiv report" / "Watch video" / "Cite this report",
   chapter "See Full Report"): white ghost pill — 0.5px rgba(170,170,170,0.3) border,
   the Dropshadow/M elevation, ink-2 #444 label, 12.5/500/0.02em, px18 py9. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;                 /* match the diagram UI pills (.app-controls .app-pill) */
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-white);
  box-shadow: var(--shadow-pill);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

/* Same resting elevation + hover lift as the chapter cards (shared shadow tokens). */
.btn:hover { border-color: var(--card-border); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.btn:active { transform: translateY(-2px) scale(0.97); }   /* keep the lift while pressing */
.btn svg { display: block; flex-shrink: 0; color: var(--ink-muted); }   /* Figma icon stroke = ink/muted #666 (label stays ink-2 #444) */

/* ── Hero ─────────────────────────────────────── */
.hero {
  /* Clears the fixed header; reserves the sub-nav strip only when it's present
     (.has-subnav, set by site-header.js) so Q&A doesn't get a phantom gap.
     Expressed off --header-h so it tracks the shorter mobile header. */
  padding-top: calc(var(--header-h) + 66px);
  padding-bottom: 36px;
}
.has-subnav .hero { padding-top: calc(var(--header-h) + 66px + var(--subnav-h)); }

.hero-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.hero .meta {
  color: var(--mint-deep);
  margin-bottom: 24px;
}

.hero h1 {
  font-size: var(--page-title);
  font-weight: 400;            /* 01 · Title — PP NM Regular */
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 14px;
}

.hero .subtitle {
  font-size: var(--subtitle);
  font-weight: 400;            /* 12 · Subtitle — PP NM Regular */
  letter-spacing: 0;
  color: var(--ink-2);
  line-height: 1.35;
  margin-bottom: 28px;
}

.hero .authors {
  font-size: 16px; letter-spacing: 0.025em; font-weight: 400;
  color: var(--muted);
  margin-bottom: 36px;
}

.hero .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Page reveal (transitions.dev texts-reveal vocabulary): the layout rises + un-blurs
   into place on first paint. One snappy ease-out motion per region — gentle distance,
   NO long per-element cascade on the long content pages (Emil's frequency rule: these
   are navigated often, so the reveal stays short and singular, not a slow stagger).
   fill-mode `backwards` (NOT forwards/both) holds the from-state during the delay but
   releases after, so e.g. the .actions buttons keep their hover transforms. Base
   opacity stays 1 — the from-state lives only in the keyframe — so the reduced-motion
   guard below can drop the animation without ever stranding content invisible. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Landing: the headline block reveals as ONE unit (no per-line cascade) and the
   main copy block below it rises in the SAME transition — same duration, same
   delay (0), so the headline and the copy appear together as one motion. */
.hero-inner > * { animation: hero-rise 0.5s var(--ease-in-out) backwards; }
.hero ~ section { animation: hero-rise 0.5s var(--ease-in-out) backwards; }

/* Content pages (chapters, intro, conclusion, exec-summary, Q&A): the whole layout
   reveals as one unit. The transform is a one-shot at load, so the sticky sidebar —
   which only matters once the reader scrolls — is unaffected. */
.chapter-page { animation: hero-rise 0.45s var(--ease-out) backwards; }

@media (prefers-reduced-motion: reduce) {
  .hero-inner > *,
  .hero ~ section,
  .chapter-page { animation: none; }
}

/* ── Section label ────────────────────────────── */
.section-label {
  color: var(--muted);
  margin-bottom: 24px;
}

/* ── Chapters section ─────────────────────────── */
.index-exec-summary {
  border-top: 1px solid var(--border);
  padding: 36px 0 36px;
}

.index-exec-summary-content {
  max-width: 100%;
}

.index-exec-summary .content-wrap {
  max-width: 100%;
}

.chapters {
  border-top: 1px solid var(--border);
  padding-top: 40px;
  padding-bottom: 100px;
}

/* ── Chapter cards ────────────────────────────── */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;                              /* Figma chapter-grid */
}

/* Card surface shared by the overview chapter cards and the prev/next chapter nav
   (its rule below carried an identical copy): border, radius, white fill, resting
   shadow + the hover lift now live in one place. Each card keeps only its own
   layout below. */
/* Use the shared interactive-card system (components.css --card-*) so these report
   cards rest + lift exactly like the diagram cards (Visual Summary / Standard /
   Detail): subtle resting shadow, a constant 3px hover lift, the same hover shadow. */
.chapter-card, .chapter-nav-item {
  border: 1px solid var(--border);        /* subtle at rest; hover brightens the edge (see :hover) */
  border-radius: 12px;                    /* Figma: 12px (was 8) */
  background: var(--surface-white);
  box-shadow: var(--card-shadow);
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), transform 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}
.chapter-card:hover, .chapter-nav-item:hover {
  border-color: var(--card-border);       /* brighter/crisper edge on hover, not dimmer */
  box-shadow: var(--card-shadow-hover);
  transform: translateY(var(--card-lift));
}
/* Index chapter cards wash to their own accent colour on hover (v5 behaviour) —
   accent border + a light tint derived from --accent. Index cards only (this
   overrides the neutral border above for .chapter-card, not .chapter-nav-item). */
.chapter-card:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-white));
}

.chapter-card {
  position: relative;                     /* anchors the top accent bar */
  overflow: hidden;                       /* clips the bar to the 12px radius */
  padding: 22px 22px 18px;                /* Figma: pt22 / px22 / pb18 */
  display: flex;
  flex-direction: column;
  gap: 8px;                               /* Figma: 8px between items */
  min-height: 240px;                      /* Figma card height */
}

/* 4px coloured accent bar across the top of every card (Figma). */
.chapter-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
}

/* Per-chapter accent — exact Figma fills. --accent = top bar / bright colour;
   --accent-text = eyebrow ink (mint uses its deep #0fa995 for legibility on white;
   the blue / green / purple read fine at their own value). */
.chapter-card.mint   { --accent: #17cfb9; --accent-text: #0fa995; }
.chapter-card.blue   { --accent: #3c83db; --accent-text: #3c83db; }
.chapter-card.green  { --accent: #93b91d; --accent-text: #93b91d; }
.chapter-card.purple { --accent: #8d7acc; --accent-text: #8d7acc; }

.card-label {                              /* 10 · Eyebrow type via shared .eyebrow */
  color: var(--accent-text);
  display: block;
}

.chapter-card h3 {                         /* 05 · Subheading */
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--text);
}

.card-desc {                               /* 07 · Body SM */
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.015em;
  color: var(--muted);
  line-height: 1.45;
}

.card-arrow {                              /* 17 · Icon — neutral ink-2 #444, bottom-aligned */
  margin-top: auto;
  display: inline-flex;
  color: var(--ink-2);
}
.card-arrow svg { display: block; }

/* ── Chapter page layout (sidebar + content) ─── */
.chapter-page {
  /* Clears the fixed header; reserves the sub-nav strip only when present
     (.has-subnav). Off --header-h so it tracks the shorter mobile header. */
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 80px;
}
.has-subnav .chapter-page { padding-top: calc(var(--header-h) + 48px + var(--subnav-h)); }

.chapter-page-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 64px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: calc(108px + var(--subnav-h));   /* below header + sub-nav */
  padding-top: 52px;
}

.sidebar-title {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.3;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}
.sidebar-title.visible {
  opacity: 1;
}
.sidebar-title:hover {
  color: var(--mint-deep);
}

.sidebar-link {
  display: block;
  font-size: 13px; font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.4;
  padding: 5px 0 5px 14px;
  border-left: 1px solid var(--border);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sidebar-link:hover {
  color: var(--text);
  border-left-color: var(--border);
}

.sidebar-link.active {
  color: var(--text);
  font-weight: 500;
  border-left-width: 3px;            /* 3px teal accent bar (Figma TOC) */
  border-left-color: var(--mint-deep);
  padding-left: 12px;                /* 12 + 3px bar keeps text at the 15px baseline */
}

.sidebar-link.sub {
  font-size: 13px; font-weight: 400;
  padding-left: 26px;
  color: var(--ink-faint);
}

.sidebar-link.sub:hover { color: var(--ink-3); }

.sidebar-link.sub.active {
  padding-left: 24px;                /* 24 + 3px bar keeps sub-item text aligned */
  color: var(--muted);
  font-weight: 500;
  border-left-color: var(--mint-deep);
  border-left-width: 3px;
}

/* ── Article page header ──────────────────────── */
.article-page-header {
  padding-top: 52px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.article-page-header .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  margin-bottom: 22px;
}

.article-page-header .breadcrumb a { color: var(--mint-deep); }
.article-page-header .breadcrumb .sep { color: var(--ink-faint); }  /* divider, a touch more visible than --border but still below the muted label */

.article-page-header h1 {
  font-size: var(--page-title); letter-spacing: 0;
  font-weight: 400;            /* 01 · Title — PP NM Regular */
  line-height: 1.2;
  margin-bottom: 16px;
}

.article-page-header .chapter-intro {   /* 03 · Lead */
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
  line-height: 1.4;
  max-width: 600px;
}
/* (The header is revealed by the whole-page .chapter-page rise — one short,
   singular motion — so it carries no separate per-line texts-reveal.) */

.chapter-header-actions {
  margin-top: 20px;
}


.video-embed {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding-bottom: 56.25%;
  height: 0;
  margin-bottom: 2rem;
}

.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 6px;
}

.content-wrap { max-width: 720px; }

/* Pages with no table-of-contents sidebar (introduction / executive summary /
   conclusion): drop the empty 210px sidebar column and let the content span the
   full width the sidebar+gap+content used to occupy (210 + 64 + 720 = 994px), so
   the text doesn't look smushed into a narrow right-hand column. */
.chapter-page--no-toc .chapter-page-grid { grid-template-columns: 1fr; }
.chapter-page--no-toc .sidebar { display: none; }
.chapter-page--no-toc .content-wrap { max-width: 994px; }
/* Justify body copy across the report prose pages (chapters, intro / exec summary /
   conclusion, and the overview) — everything that uses .content-wrap. */
.content-wrap p,
.content-wrap li { text-align: justify; }

.content-wrap h2 {                       /* 02 · Heading */
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}

.content-wrap h3 {                       /* 19 · H3 — 18px Medium */
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.content-wrap p {
  margin-bottom: 1.1rem;
  /* Match the threat-map article body (#13): softer dark grey + a hair of
     tracking, applied report-wide. */
  color: var(--ink-body);
  letter-spacing: 0.025em;
}
.content-wrap p:last-child { margin-bottom: 0; }

.content-wrap ul,
.content-wrap ol {
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
}

.content-wrap li { margin-bottom: 0.5rem; }
/* Mint bullet markers on unordered lists (matches the link mint) — text stays ink. */
.content-wrap ul li::marker { color: var(--mint-deep); }
strong { font-weight: 500; }

/* figure counter reset is set inline per page so numbering is continuous across chapters */

figure {
  margin: 2.5rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: zoom-in;
}

/* Modal (transitions.dev tokens): backdrop fades + image scales 0.96→1.
   .open puts it in the DOM (display:flex); .is-shown drives the transition. The
   JS forces a reflow between adding the two (so the fade-in actually runs) and
   delays removing .open on close until the fade-out finishes. */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);                 /* close: Quick 150ms */
}
#lightbox.open { display: flex; }
#lightbox.is-shown { opacity: 1; transition: opacity 0.25s var(--ease-out); }   /* open: Fast 250ms */
#lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  border: none;
  cursor: default;   /* image click no longer closes — use the × or backdrop */
  transform: scale(0.96);
  transition: transform 0.15s var(--ease-out);
}
#lightbox.is-shown img { transform: scale(1); transition: transform 0.25s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  #lightbox, #lightbox.is-shown, #lightbox img, #lightbox.is-shown img { transition: none; }
}
.lightbox-close {
  position: fixed; top: 20px; right: 24px;
  width: 40px; height: 40px; border-radius: 999px;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s var(--ease-out), transform 0.12s var(--ease-out);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox-close:active { transform: scale(0.94); }

/* ── Cite modal (Figma 130:3177, adjusted) — opened from "Cite this report".
   Reuses the lightbox's open/is-shown convention: .open mounts it (display:flex),
   .is-shown drives the scale-up. A modal isn't trigger-anchored, so it scales from
   centre. The citation + BibTeX render in a system monospace stack — the design's
   PT Mono isn't loaded and isn't worth a new webfont for one component. */
.cite-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(20, 24, 23, 0.55);
  opacity: 0; transition: opacity 0.15s var(--ease-out);                 /* close: Quick 150ms */
}
.cite-modal.open { display: flex; }
.cite-modal.is-shown { opacity: 1; transition: opacity 0.25s var(--ease-out); }   /* open: Fast 250ms */
.cite-card {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--surface-white); border-radius: 12px;
  box-shadow: var(--shadow-card-hover); padding: 32px;
  display: flex; flex-direction: column; gap: 32px;
  transform: scale(0.96); transition: transform 0.15s var(--ease-out);
}
.cite-modal.is-shown .cite-card { transform: scale(1); transition: transform 0.25s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .cite-modal, .cite-modal.is-shown, .cite-card, .cite-modal.is-shown .cite-card { transition: none; }
}
.cite-block { display: flex; flex-direction: column; gap: 16px; }
.cite-h {
  margin: 0; font-size: 16px; font-weight: 500; line-height: 1.25;
  letter-spacing: 0.4px; color: var(--ink-2);
}
/* Grey code box: text + copy icon as flex siblings (Figma layout). */
.cite-box {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--surface-page); border-radius: 8px; padding: 20px 18px;
}
.cite-text {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
  font-size: 12px; line-height: 1.6; color: var(--ink-body);
  white-space: pre-wrap; word-break: break-word;
}
.cite-copy {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--ink-muted);
  cursor: pointer; transition: color .14s var(--ease-out), background .14s var(--ease-out), transform .12s var(--ease-out);
}
.cite-copy:hover { background: var(--surface-bg); color: var(--ink); }
.cite-copy:active { transform: scale(0.92); }
.cite-copy.is-copied { color: var(--mint-deep); }
.cite-copy svg { width: 16px; height: 16px; display: block; }
.cite-close {
  position: absolute; top: 20px; right: 20px;
  width: 32px; height: 32px; border-radius: 1000px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: background .14s var(--ease-out), color .14s var(--ease-out), transform .12s var(--ease-out);
}
.cite-close:hover { background: var(--surface-bg); color: var(--ink); }
.cite-close:active { transform: scale(0.94); }
.cite-close svg { width: 18px; height: 18px; display: block; }
@media (max-width: 600px) {
  .cite-card { padding: 24px 20px; gap: 24px; }
  .cite-box { padding: 16px 14px; }
}

figcaption {                               /* 09 · Caption */
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.4;
  text-align: left;
  max-width: 80%;
}

.pandoc-content figure {
  counter-increment: figure-counter;
}

.pandoc-content figcaption::before {
  /* "Figure N —" prefix: Semibold, same muted ink as the caption body (Figma),
     em-dash separator. */
  content: "Figure " counter(figure-counter) " — ";
  font-weight: 600;
  color: var(--muted);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}

/* ── Chapter prev/next nav ────────────────────── */
.chapter-nav {
  /* Fixed 2 columns (not flex:1) so a lone Previous keeps its half width and
     stays in the left column — the right column is simply empty — instead of
     stretching to fill the row (conclusion.html, qa.html have no Next). */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 48px;
  margin-top: 64px;
}

.chapter-nav-item {                      /* card surface shared in .chapter-card, .chapter-nav-item above */
  padding: 20px 24px;
  min-width: 0;
}

.chapter-nav-item .nav-dir {
  color: var(--muted);
  margin-bottom: 6px;
}

.chapter-nav-item .nav-title {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-nav-item.prev .nav-dir::before { content: "← "; }
.chapter-nav-item.next { text-align: right; }
.chapter-nav-item.next .nav-dir::after  { content: " →"; }

/* Footer markup + look are shared — see .app-footer in components.css. */

/* ── Scroll offset for fixed header ──────────── */
.content-wrap h1[id],
.content-wrap h2[id],
.content-wrap h3[id],
.content-wrap h4[id],
.footnotes li[id],
.content-wrap figure[id] {
  /* clear the fixed header + sub-nav (107px) so a jumped-to heading lands below
     the chrome, not tucked under the sub-nav. */
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 24px);
}

/* ── Pandoc-generated elements ────────────────── */

/* Every in-content link: mint-deep with the report's dotted underline, deepening to
   teal-deep on hover. Footnote-ref [n] markers are excluded so they keep their clean
   superscript look. Citations have a matching rule below. */
.pandoc-content a:not(.footnote-ref) {
  color: var(--mint-deep);
  border-bottom: 1px dotted color-mix(in srgb, var(--mint-deep) 40%, transparent);
  transition: color 0.15s, border-color 0.15s;
}
.pandoc-content a:not(.footnote-ref):hover {
  color: var(--teal-deep);
  border-bottom-color: var(--teal-deep);
}

/* Inline citations — now mint-deep (matching the rest of the links), at body size
   so they read as part of the prose, with a soft mint dotted underline on the
   author-year links that strengthens on hover. */
.pandoc-content .citation {
  font-size: inherit; font-weight: 400;
  color: var(--mint-deep);
}

.pandoc-content .citation a {
  color: var(--mint-deep);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--mint-deep) 40%, transparent);
  transition: color 0.15s, border-color 0.15s;
}

.pandoc-content .citation a:hover {
  color: var(--teal-deep);
  border-bottom-color: var(--teal-deep);
}

/* Superscript footnote references — small, medium-weight, mint-deep. Stepped down
   from 600 → 500 so the inline [n] markers read lighter against body text. */
.pandoc-content .footnote-ref {
  color: var(--mint-deep);
  font-weight: 500;
  text-decoration: none;
}
.pandoc-content .footnote-ref sup { font-size: 0.72em; }   /* a bit smaller */

.pandoc-content .footnote-ref sup::before { content: '['; }
.pandoc-content .footnote-ref sup::after  { content: ']'; }

.pandoc-content .footnote-ref:hover { opacity: 0.75; }

/* Footnotes section */
.pandoc-content section.footnotes {
  margin-top: 1rem;
  font-size: 13px; font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
}

/* The footnotes section sits inside a <details><summary>Footnotes</summary> accordion,
   so the section's own "Footnotes" heading was a duplicate — removed. */

/* Pandoc emits an <hr> between the section and the list — a stray rule
   directly under the FOOTNOTES accordion header. Hide it. */
.pandoc-content section.footnotes hr { display: none; }
.pandoc-content section.footnotes ol { padding-left: 1.4rem; }
.pandoc-content section.footnotes li { margin-bottom: 0.6rem; }
.pandoc-content section.footnotes p  { margin-bottom: 0; display: inline; }

.pandoc-content .footnote-back {
  margin-left: 4px;
  color: var(--mint-deep);
  text-decoration: none;
  font-size: 13px; font-weight: 400;
}

/* ── References (collapsible) ─────────────────── */

.pandoc-content details.references {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.pandoc-content details.references summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);   /* #666 — was #bbb (too faint) */
  cursor: pointer;
  user-select: none;
  list-style: none;
  width: fit-content;
}

/* Hide the default triangle */
.pandoc-content details.references summary::-webkit-details-marker { display: none; }

.pandoc-content details.references summary::after {
  content: "↓";
  font-size: 11.5px; font-weight: 400;
  transition: transform 0.2s var(--ease-out);
  display: inline-block;
}

.pandoc-content details.references[open] summary::after {
  transform: rotate(180deg);
}

.pandoc-content details.references summary:hover { color: var(--text); }

/* The refs list itself */
.pandoc-content #refs {
  margin-top: 1.5rem;
  font-size: 13px; font-weight: 400;
  color: var(--muted);
  line-height: 1.65;
}

.pandoc-content .csl-entry {
  /* A transparent 3px left border is reserved on EVERY entry so the :target bar below
     can colour in without nudging the text — highlighted and un-highlighted entries
     stay perfectly aligned. padding-left = 12px gutter (the gap from bar to copy) +
     1.5rem for the hanging indent; text-indent -1.5rem pulls the first line flush to
     the gutter while continuation lines hang 1.5rem past it. */
  border-left: 3px solid transparent;
  padding: 0.1rem 0.6rem 0.1rem calc(12px + 1.5rem);
  text-indent: -1.5rem;
  margin-bottom: 0.5rem;
  /* clear the fixed header + sub-nav when a citation deep-links straight to this ref */
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 24px);
  transition: border-color 0.35s var(--ease-out);
}
/* Citation deep-link highlight: clicking a [n] citation jumps here and makes this entry
   the :target — a subtle green blockquote bar marks it so the reader can spot the one
   reference among the list, without a box or tint. The site-chapter.js hook expands the
   collapsed references <details> first, so the jump lands. */
.pandoc-content .csl-entry:target {
  border-left-color: var(--mint-deep);
}
/* Long reference URLs/DOIs must wrap rather than overflow the column on mobile. */
.pandoc-content #refs a,
.pandoc-content .csl-entry a { overflow-wrap: anywhere; }

/* ── Q&A ───────────────────────────────────────── */
.qa-content {
  margin-top: 0;
}

.chapter-content:has(.qa-content) .article-page-header {
  margin-bottom: 8px;
}

/* ── Appendix injection ───────────────────────── */
.appendix-section h2:first-child {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 1rem;
}
hr.appendix-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0 1.5rem;
}

.appendix-section ul { margin-bottom: 0.5rem; }
.appendix-section li { margin-bottom: 0.15rem; }
.appendix-section li > p { margin-bottom: 0.15rem; }
.appendix-section p { margin-bottom: 0.6rem; }

.content-wrap.pandoc-content ~ * {
  max-width: 720px;
}

/* …but the chapter-nav is also a later sibling, so the cap above shrinks it to the old
   720px (narrower than the widened text). Restore it to the body-column width so the
   divider + the two half-width buttons span the full text width on no-TOC pages. */
.chapter-page--no-toc .chapter-nav { max-width: 994px; }

.content-wrap.pandoc-content + hr.appendix-divider ~ .pandoc-content,
.appendix-section {
  max-width: 720px;
  margin: 0 auto;
}

details.example-foldout {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

details.example-foldout > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);   /* #666 — was #bbb (too faint) */
  cursor: pointer;
  user-select: none;
  list-style: none;
  width: fit-content;
}

details.example-foldout > summary::-webkit-details-marker { display: none; }

details.example-foldout > summary::after {
  content: "↓";
  font-size: 11.5px; font-weight: 400;
  transition: transform 0.2s var(--ease-out);
  display: inline-block;
}

details.example-foldout[open] > summary::after {
  transform: rotate(180deg);
}

details.example-foldout > summary:hover { color: var(--text); }

.qa-content details.qa-item {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.qa-content details.qa-item:first-child {
  border-top: none;
}

.qa-content details.qa-item:last-child {
  border-bottom: 1px solid var(--border);
}

.qa-content details.qa-item summary {
  font-size: 16px; letter-spacing: 0.025em;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.qa-content details.qa-item summary::-webkit-details-marker { display: none; }

.qa-content details.qa-item summary::after {
  content: "+";
  font-size: 32px;          /* larger toggle icon */
  font-weight: 300;
  line-height: 1;
  color: var(--mint-deep);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
  display: inline-block;
}

.qa-content details.qa-item[open] summary::after {
  transform: rotate(45deg);
}

.qa-content details.qa-item summary:hover { color: var(--ink-2); }

.qa-content details.qa-item p {
  margin-top: 14px;
  font-size: 16px; letter-spacing: 0.025em; font-weight: 400;
  line-height: 1.7;
  color: var(--muted);
}

.qa-content details.qa-item p a {
  color: var(--mint-deep);
  border-bottom: 1px dotted color-mix(in srgb, var(--mint-deep) 40%, transparent);
  transition: color 0.15s, border-color 0.15s;
  /* Allow long URLs/links to wrap instead of overflowing on narrow screens
     (was white-space:nowrap, which pushed long links off-canvas at 390px). */
  overflow-wrap: anywhere;
}
.qa-content details.qa-item p a:hover {
  color: var(--teal-deep);
  border-bottom-color: var(--teal-deep);
}

.qa-contact {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 400;
  color: var(--muted);
}

.qa-contact a {
  color: var(--mint-deep);
  border-bottom: 1px dotted color-mix(in srgb, var(--mint-deep) 40%, transparent);
  transition: color 0.15s, border-color 0.15s;
}
.qa-contact a:hover { color: var(--teal-deep); border-bottom-color: var(--teal-deep); }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1000px) {
  .chapter-page-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sidebar { display: none; }
}


@media (max-width: 900px) {
  .chapter-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: the desktop top gaps (≈100px below the sub-nav, 143px on Q&A) are far
   too tall on a phone. Tighten the offsets and the article header's own padding
   so every report page starts close under the header / sub-nav. */
@media (max-width: 768px) {
  .hero { padding-top: calc(var(--header-h) + 24px); }
  .has-subnav .hero { padding-top: calc(var(--header-h) + 24px + var(--subnav-h)); }
  .chapter-page { padding-top: calc(var(--header-h) + 16px); }
  .has-subnav .chapter-page { padding-top: calc(var(--header-h) + 16px + var(--subnav-h)); }
  .article-page-header { padding-top: 16px; }
}

@media (max-width: 600px) {
  .container { padding: 0 20px; }
  /* h1 sizes now handled responsively by --page-title (clamp), so no
     per-breakpoint overrides needed. */
  .hero .subtitle { font-size: 17px; font-weight: 400; }
  .chapter-grid { grid-template-columns: 1fr; }
  /* Prev/Next stay side by side (2 columns) on mobile. Tighten the padding/gap
     and let the title wrap rather than ellipsis-truncate in the narrow column. */
  .chapter-nav { gap: 10px; }
  .chapter-nav-item { padding: 14px 16px; }
  .chapter-nav-item .nav-title { font-size: 12px; white-space: normal; }
}