/* =========================================================================
   Fresh Context — Research piece chrome
   Universal stylesheet for /research/*  pieces.

   What belongs here
   - Tokens (color, type scale, spacing, eases) — single source of truth.
   - Typography (h1, h2, h3, p, em, strong, blockquote, .reader-*) styled on
     bare elements so prose works without per-piece overrides.
   - Common UI components (chips, callouts, citations footer).
   - The two-pane "AINP shell" chrome — opt-in, only renders when the page
     uses the corresponding HTML structure (.shell, .pane-content, .pane-graph).
   - Graph + wiki components for the right pane.

   What does NOT belong here
   - Article-specific copy treatments (one-off pull quotes, unique callouts)
   - Build-script outputs

   Workflow
   - Edit this file to change tokens or shared components for every piece.
   - Article HTML files link to it: <link rel="stylesheet" href="/styles/research-shell.css">
   - Article pages keep an inline <style> only for unique tweaks.
   ========================================================================= */

:root {
  /* Brand palette — aliases the canonical token set (src/styles/tokens.mjs →
     --fc-*). Fallbacks keep this stylesheet valid if loaded standalone. */
  --brand-accent: var(--fc-accent, #F89420);   /* bright orange — accent only */
  --brand-accent-soft: color-mix(in srgb, var(--fc-accent, #F89420) 18%, transparent);
  --brand-accent-tint: color-mix(in srgb, var(--fc-accent, #F89420) 8%, transparent);
  --brand-deep: var(--fc-accent-deep, #d97a12);
  --brand-mid: #d49070;

  /* Graph palette — INTENTIONAL EXEMPTION from brand tokens. This is a
     functional data-viz scale encoding node hierarchy (focus > featured >
     connected); folding it into the single accent would collapse the levels.
     Spot-check that golden --focus stays distinct from the brighter orange. */
  --focus: #fdcd7d;              /* in-focus node — bright golden */
  --focus-halo: rgba(253, 205, 125, 0.55);
  --featured: #ed9a49;            /* highlighted vault ref but not currently focused — bright orange */
  --connected: #e8d8b8;            /* one-degree-out connected concept — light cream */
  --connected-dim: #d8d2c4;

  /* Ink — headline matches the canonical wordmark brown; the body reading
     ramp (fg2–fg4) is intentionally tuned for long-form legibility. */
  --fg1: var(--fc-ink, #381800);   /* headlines */
  --fg2: #4a3a30;   /* body text — warm brown-gray (reading-tuned) */
  --fg3: #7a6e62;   /* secondary / meta */
  --fg4: #a89e92;   /* captions / placeholders */

  /* Surface — one cream paper across the site */
  --bg-page: var(--fc-paper, #f4efe4);
  --bg-card: var(--fc-card, #fbf8f0);
  --bg-nest: var(--fc-paper-2, #efe8d9);

  /* Lines */
  --border: var(--fc-rule, #d8cfbc);
  --border-subtle: var(--fc-rule-soft, #ece5d5);
  --border-warm: #d8d2c4;

  /* Type — now reads the loaded brand fonts (was system fallback) */
  --font-brand: var(--fc-sans, system-ui, sans-serif);
  --font-serif: var(--fc-serif, Georgia, serif);

  /* Layout */
  --divider-w: 6px;
  --pane-collapsed: 44px;
  --content-pane-w: 880px;        /* fixed width of the content pane; graph fills the rest */
  --content-pane-w-wide: 1040px;  /* on very wide screens, give content more padding */

  /* Motion */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
}

/* =========================================================================
   Base
   ========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Default to normal document scroll. The legacy two-pane reader (ResearchShell)
   is no longer the default chrome; pieces render as flow articles inside the
   shared site chrome. Was `height:100%;overflow:hidden`, which froze every page. */
html, body { height: auto; }
body {
  font-family: var(--font-brand);
  font-size: 15px;
  background: var(--bg-page);
  color: var(--fg2);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 3px; }
em, strong { color: var(--fg1); }

/* For single-column article pages (Article ii pattern) that don't use the shell. */
body.research-flow { overflow: auto; height: auto; }
body.research-flow html { overflow: auto; height: auto; }

/* =========================================================================
   Reader typography — applied on plain tags so prose just works
   ========================================================================= */
.reader-scroll { height: 100%; overflow-y: auto; scroll-behavior: smooth; padding: 64px clamp(40px, 7vw, 96px) 96px; }
.reader-inner { max-width: 760px; margin: 0 auto; }

.reader-kicker {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg3); font-weight: 700; margin-bottom: 18px;
}
.reader-h1 {
  font-family: var(--font-serif);
  font-size: 44px; line-height: 1.1; font-weight: 600;
  color: var(--fg1); letter-spacing: -0.01em; margin: 0 0 22px;
}
.reader-lede {
  font-family: var(--font-serif);
  font-size: 20px; line-height: 1.5; color: var(--fg2);
  margin: 0 0 24px; font-style: italic;
}
.reader-h2 {
  font-family: var(--font-serif);
  font-size: 26px; line-height: 1.25; font-weight: 600;
  color: var(--fg1); margin: 56px 0 16px;
}
.reader-h3 {
  font-family: var(--font-brand);
  font-size: 14px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg2); font-weight: 700; margin: 28px 0 10px;
}
.reader-p {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.6; color: var(--fg2); margin: 0 0 18px;
}
.reader-pullquote {
  font-family: var(--font-serif); font-size: 22px; line-height: 1.35;
  color: var(--fg1); font-style: italic;
  border-left: 3px solid var(--brand-accent); padding-left: 20px; margin: 28px 0;
}
.reader-stat-highlight {
  border-left: 3px solid var(--brand-accent);
  padding: 14px 20px; margin: 28px 0;
  background: var(--brand-accent-tint);
  font-family: var(--font-serif); font-size: 17px; line-height: 1.55;
}
.reader-stat-highlight strong { color: var(--brand-accent); }
.reader-stat-highlight .cite {
  display: block; margin-top: 8px; font-size: 13px; color: var(--fg3); font-style: italic;
}
.reader-figure { margin: 32px 0; }
.reader-figure svg { display: block; width: 100%; height: auto; }
.reader-figure figcaption {
  font-style: italic; color: var(--fg3); font-size: 13px;
  margin-top: 10px; text-align: center; line-height: 1.5;
}

/* Headline image — sits between the lede and the first body paragraph.
   On wide screens, the image bleeds into the column margins for editorial feel.
   Bleed is capped so it never exceeds reader-scroll's padding (no horizontal scroll). */
.reader-headline-figure { margin: 12px 0 40px; }
.reader-headline-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0;
}
@media (min-width: 900px) {
  .reader-headline-image {
    /* The reader-scroll's min horizontal padding is clamp(40px,7vw,96px) → at least 40px each side.
       Extending the image -40px each side stays inside the padding. */
    width: calc(100% + 80px);
    max-width: none;
    margin-left: -40px;
    margin-right: -40px;
  }
}
@media (min-width: 1400px) {
  .reader-headline-image {
    /* On wider screens the padding grows, so allow a larger bleed up to -64px. */
    width: calc(100% + 128px);
    margin-left: -64px;
    margin-right: -64px;
  }
}
.reader-citations {
  margin-top: 64px; padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px; line-height: 1.55; color: var(--fg3);
}
.reader-citations h3 {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg2); margin: 0 0 12px; font-weight: 700;
}
.reader-citations p { margin: 0 0 12px; font-family: var(--font-serif); }
.reader-citations strong { color: var(--fg1); }

/* MDX renders bare <h1>/<h2>/<h3>/<p> tags inside .reader-inner. Apply the
   same typography rules to the elements directly so authors don't have to
   add className= to every heading and paragraph in MDX. */
.reader-inner h1 {
  font-family: var(--font-serif);
  font-size: 44px; line-height: 1.1; font-weight: 600;
  color: var(--fg1); letter-spacing: -0.01em; margin: 0 0 22px;
}
.reader-inner h2 {
  font-family: var(--font-serif);
  font-size: 26px; line-height: 1.25; font-weight: 600;
  color: var(--fg1); margin: 56px 0 16px;
}
.reader-inner h3 {
  font-family: var(--font-brand);
  font-size: 14px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg2); font-weight: 700; margin: 28px 0 10px;
}
.reader-inner p {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.6; color: var(--fg2); margin: 0 0 18px;
}
.reader-inner a { color: var(--brand-accent); }
.reader-inner em { color: var(--fg1); }
.reader-inner strong { color: var(--fg1); }

/* Inline wiki references */
.wiki-ref {
  color: var(--fg1); text-decoration: none;
  border-bottom: 1px dotted var(--brand-accent);
  padding: 0 2px; margin: 0 -2px;
  border-radius: 2px; cursor: pointer; transition: background-color 120ms ease;
}
.wiki-ref:hover, .wiki-ref.is-active { background-color: var(--brand-accent-soft); }

/* =========================================================================
   AINP shell — two-pane layout
   ========================================================================= */
.shell { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; overflow: hidden; }
.pane { position: relative; overflow: hidden; }

/* Default split: graph pane caps at 50% of the shell on wide screens.
   Content pane absorbs the remaining space (reader-inner stays max-width: 760px and centered,
   so wider content = more breathing room, not wider prose). User can drag the divider to override. */
.pane-content { flex: 1 1 auto; background: var(--bg-page); min-width: 0; }
.pane-graph { flex: 0 0 50%; max-width: 50vw; min-width: 360px; background: var(--bg-card); border-left: 1px solid var(--border-subtle); }

/* Collapse */
.pane.collapsed { flex: 0 0 var(--pane-collapsed) !important; width: var(--pane-collapsed) !important; }
.pane.collapsed .pane-inner { display: none; }
.pane.collapsed .collapsed-rail { display: flex; }
/* Solo — when the other pane is collapsed, this one fills the shell. */
.pane.is-solo {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
/* Divider: when one pane is collapsed there's nothing to resize — hide it. */
body.has-collapsed-pane .divider { pointer-events: none; }
body.has-collapsed-pane .divider::before { opacity: 0; }
body.has-collapsed-pane .divider .grip { display: none; }

.collapsed-rail {
  display: none; width: var(--pane-collapsed); height: 100%;
  flex-direction: column; align-items: center; padding: 18px 0; gap: 14px;
  background: var(--bg-nest);
}
.pane-content.collapsed .collapsed-rail { border-right: 1px solid var(--border-subtle); }
.pane-graph.collapsed .collapsed-rail { margin-left: auto; border-left: 1px solid var(--border-subtle); }
.collapsed-rail .vert-label {
  writing-mode: vertical-rl; font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg3);
  margin-top: 12px; white-space: nowrap;
}
.collapsed-rail button {
  background: var(--bg-card); border: 1px solid var(--border-warm);
  color: var(--fg2); width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 180ms var(--ease-out);
}
.collapsed-rail button:hover { background: var(--brand-deep); color: white; border-color: var(--brand-deep); }
.collapsed-rail button .ph { font-size: 14px; }

/* Divider */
.divider {
  flex: 0 0 var(--divider-w); background: transparent; cursor: col-resize;
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms var(--ease-out);
}
.divider::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--border-subtle); transform: translateX(-50%);
  transition: background 150ms var(--ease-out);
}
.divider:hover::before, .divider.dragging::before { background: var(--brand-accent); width: 2px; }
.divider .grip {
  width: 4px; height: 36px; background: var(--border); border-radius: 999px;
  opacity: 0; transition: opacity 150ms var(--ease-out);
}
.divider:hover .grip, .divider.dragging .grip { opacity: 1; background: var(--brand-accent); }

.pane-inner { position: relative; height: 100%; overflow: hidden; }

/* Float-mode pill (mode toggle, top-right of pane) */
.float-mode {
  position: absolute; top: 18px; right: 18px; z-index: 30;
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-warm);
  padding: 4px; border-radius: 999px; gap: 1px;
  box-shadow: 0 6px 20px rgba(58, 0, 105, 0.06), 0 1px 3px rgba(58, 0, 105, 0.04);
}
.float-mode-btn {
  background: transparent; border: none; padding: 8px 14px; border-radius: 999px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-brand); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg3); cursor: pointer; transition: all 180ms var(--ease-out); white-space: nowrap;
}
.float-mode-btn .ph { font-size: 16px; line-height: 1; }
.float-mode-btn:hover { color: var(--brand-deep); }
.float-mode-btn.active {
  background: var(--brand-accent); color: white;
  box-shadow: 0 2px 8px rgba(196, 104, 58, 0.20);
}
.float-mode .divider-mini { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.float-mode .icon-only {
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: transparent; color: var(--fg3); border: none; cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.float-mode .icon-only:hover { background: var(--bg-nest); color: var(--brand-deep); }
.float-mode .icon-only .ph { font-size: 16px; }

/* =========================================================================
   Graph pane (right) — stacked slots: graph (always) + wiki (opens in wiki mode)
   ========================================================================= */
.pane-graph .pane-inner { display: flex; flex-direction: column; position: relative; }
.wiki-pane {
  flex: 0 0 0%; min-height: 0; overflow: hidden; position: relative;
  background: var(--bg-card); display: flex; flex-direction: column;
  transition: flex-basis 380ms var(--ease-smooth);
  border-top: 1px solid transparent;
}
.pane-graph[data-mode="wiki"] .wiki-pane {
  flex-basis: 55%;
  border-top-color: var(--border-subtle);
}

.graph-canvas-wrap {
  flex: 1 1 0; min-height: 0; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6), transparent 70%),
    var(--bg-card);
}
#graph-svg { width: 100%; height: 100%; display: block; cursor: grab; }
#graph-svg:active { cursor: grabbing; }
#graph-svg .node-g { cursor: pointer; }

/* ---- Graph node hierarchy: focus > featured > near > base > faded ---- */
#graph-svg .node-g .core {
  fill: var(--connected-dim); opacity: 0.5;
  transition: r 380ms var(--ease-smooth), fill 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
#graph-svg .node-g .halo {
  fill: var(--focus); opacity: 0;
  transition: r 380ms var(--ease-smooth), opacity 320ms var(--ease-out);
}
#graph-svg .node-g text {
  font-family: var(--font-brand); font-size: 9px; font-weight: 500;
  fill: var(--fg4); opacity: 0.5; pointer-events: none;
  transition: opacity 320ms var(--ease-out), fill 320ms var(--ease-out), font-size 320ms var(--ease-out);
}
/* Featured — bright orange (the 9 vault refs declared by this article) */
#graph-svg .node-g.is-featured .core { fill: var(--featured); opacity: 0.92; }
#graph-svg .node-g.is-featured text { fill: var(--fg2); opacity: 0.85; font-weight: 600; }
/* Focused — bright golden, the 1–3 currently in viewport */
#graph-svg .node-g.is-focused .core { fill: var(--focus); opacity: 1; }
#graph-svg .node-g.is-focused .halo { opacity: 0.55; }
#graph-svg .node-g.is-focused text { fill: var(--fg1); opacity: 1; font-weight: 700; font-size: 11px; }
/* Near — one degree from focused, slightly elevated */
#graph-svg .node-g.is-near .core { fill: var(--featured); opacity: 0.7; }
#graph-svg .node-g.is-near text { fill: var(--fg2); opacity: 0.78; font-weight: 600; }
/* Faded — far from focus, dim */
#graph-svg .node-g.is-faded .core { opacity: 0.28; }
#graph-svg .node-g.is-faded text { opacity: 0.22; }
/* Click-selected (separate from scroll focus) */
/* Click-selected ring (handled below by the unified is-active rule) */

/* Edges — softened: rounded dotted lines with reduced opacity. The graph reads as
   atmosphere rather than as a network diagram; node legibility comes first. */
#graph-svg .edge {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.11;
  fill: none;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
  transition: stroke 320ms var(--ease-out), opacity 320ms var(--ease-out), stroke-width 320ms var(--ease-out);
}
/* Focused / click-active edges: same golden as the focused node, modest opacity so
   they read as a connection without competing with the bright nodes. */
#graph-svg .edge.is-focused,
#graph-svg .edge.is-active {
  stroke: var(--focus);
  opacity: 0.48;
  stroke-width: 1.6;
}
#graph-svg .edge.is-faded { opacity: 0.03; }
#graph-svg .node-g.is-active .core { stroke: var(--focus); stroke-width: 2; }

/* =========================================================================
   Wiki pane — browse view + article view
   ========================================================================= */
.wiki-close {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-warm);
  color: var(--fg3); cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 12; transition: all 180ms var(--ease-out);
  opacity: 0; pointer-events: none;
}
.pane-graph[data-mode="wiki"] .wiki-close { opacity: 1; pointer-events: auto; }
.wiki-close:hover { color: var(--brand-deep); border-color: var(--brand-mid); transform: scale(1.04); }
.wiki-close .ph { font-size: 14px; }

.wiki-browse { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg-card); }
.wiki-browse-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-card); }
.wiki-browse-titlerow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.wiki-browse-title { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg2); font-weight: 700; }
.wiki-browse-count { font-size: 11px; color: var(--fg4); }
.wiki-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border-warm); border-radius: 999px; background: var(--bg-nest);
}
.wiki-search input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 13px; color: var(--fg1); }
.wiki-search input::placeholder { color: var(--fg4); }
.wiki-search .ph { color: var(--fg4); font-size: 14px; }
.wiki-search-clear { background: transparent; border: none; cursor: pointer; padding: 0; color: var(--fg4); display: none; }
.wiki-search.has-text .wiki-search-clear { display: inline-flex; }
.wiki-typefilter { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.wiki-type-chip {
  background: var(--bg-card); border: 1px solid var(--border-warm);
  border-radius: 999px; padding: 3px 9px; font-size: 11px;
  color: var(--fg3); cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: all 140ms var(--ease-out);
}
.wiki-type-chip .swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.wiki-type-chip[data-active="true"] { background: var(--brand-accent); color: white; border-color: var(--brand-accent); }
.wiki-type-chip[data-active="true"] .swatch { background: white !important; }

.wiki-browse-list { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 8px 12px 24px; }
.wiki-browse-group { margin-top: 14px; }
.wiki-browse-grouplabel { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg3); font-weight: 700; padding: 8px 8px 6px; display: flex; align-items: center; gap: 8px; }
.wiki-browse-grouplabel .swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.wiki-browse-item {
  width: 100%; text-align: left; background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  padding: 8px 10px; margin-bottom: 4px; cursor: pointer; transition: all 120ms var(--ease-out);
}
.wiki-browse-item:hover { background: var(--bg-nest); border-color: var(--border-subtle); }
.wiki-browse-item[data-active="true"] { background: var(--brand-accent-tint); border-color: var(--brand-accent); }
.wiki-browse-item-title { font-size: 13px; font-weight: 700; color: var(--fg1); margin-bottom: 2px; }
.wiki-browse-item-blurb { font-size: 12px; color: var(--fg3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.wiki-article { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 24px clamp(20px, 4vw, 40px) 36px; display: none; }
.pane-graph[data-mode="wiki"][data-wiki-view="article"] .wiki-article { display: block; }
.pane-graph[data-mode="wiki"][data-wiki-view="article"] .wiki-browse { display: none; }
.wiki-article-meta { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; font-weight: 700; }
.wiki-article-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--fg1); margin: 0 0 10px; line-height: 1.2; }
.wiki-article-summary { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--fg2); margin: 0 0 16px; }
.wiki-article-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border-warm); border-radius: 999px;
  padding: 5px 12px; font-size: 11px; color: var(--fg2); cursor: pointer; font-family: inherit;
  letter-spacing: 0.08em; text-transform: uppercase; transition: all 140ms var(--ease-out); margin-bottom: 16px;
}
.wiki-article-back:hover { background: var(--bg-nest); }

/* =========================================================================
   Responsive — mobile fallback
   ========================================================================= */
@media (max-width: 1080px) {
  :root { --content-pane-w: 640px; }
}
@media (min-width: 1600px) {
  :root { --content-pane-w: var(--content-pane-w-wide); }
}
/* Desktop default — hide the mobile-only icons */
.float-mode .mobile-icon { display: none; }
.float-mode .desktop-icon { display: inline; }

@media (max-width: 900px) {
  /* `visible`, NOT `auto`: body.research-white sets overflow-x:clip, and the
     pair {clip, auto} is invalid CSS — clip promotes to hidden, body becomes
     a scroll container, and every position:sticky on the page binds to body
     (which never scrolls) instead of the viewport. That silently killed all
     mobile pinning (SlideStage, SplitScrollRow). {clip, visible} is valid. */
  html, body { overflow: visible; height: auto; }
  .shell { position: static; flex-direction: column; min-height: 100vh; }
  .pane-content, .pane-graph { flex: 0 0 auto; width: 100%; min-height: 100vh; }
  .pane-graph { border-left: none; border-top: none; height: 100vh; }
  .pane-graph .pane-inner { height: 100vh; }
  .divider { display: none; }
  /* On mobile collapsed = invisible (no rail to expand) */
  .pane.collapsed { display: none !important; }
  .collapsed-rail { display: none !important; }
  /* Pill sticks to the viewport top-right and stays visible while scrolling */
  .float-mode {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 50;
  }
  .float-mode .label { display: none; }
  .float-mode-btn { padding: 8px 10px; }
  /* Swap icons on mobile: the "hide pane" toggle becomes a "switch to other view" icon */
  .float-mode .desktop-icon { display: none; }
  .float-mode .mobile-icon { display: inline; }
  /* In graph view, the back-to-reader icon belongs on the LEFT of the pill. */
  #graphMode { display: flex; }
  #graphMode #togglePaneGraph { order: -1; }
  #graphMode .divider-mini { display: none; }
  .reader-scroll { padding: 56px 18px 80px; height: auto; overflow: visible; }
  .reader-h1 { font-size: 32px; }
}

/* =========================================================================
   Wiki pulse — subtle "new context available" cue on the wiki button
   when the scroll-anchored focus changes sections. Fires once per change.
   ========================================================================= */
@keyframes wiki-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--brand-accent-soft); }
  35%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(253, 205, 125, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(253, 205, 125, 0); }
}
.float-mode .pulsing {
  animation: wiki-pulse 1.4s ease-out 1;
}

/* =========================================================================
   White reading surface (scoped opt-in)
   -------------------------------------------------------------------------
   Research/reader long-form reads on plain white instead of the site's cream
   paper. Scoped via a `research-white` class that ResearchWrapper toggles on
   <body> for research routes only — the rest of the site keeps --fc-paper.
   Redefining --bg-page on <body> cascades to the single-column reader AND the
   position:fixed ResearchShell content pane (custom properties inherit through
   the DOM tree even though the shell escapes layout flow), giving full-bleed
   white without touching the fc-managed [slug]/page.tsx.
   The graph pane keeps --bg-card (a hair off-white) on purpose: the dimmest
   connected-node colors were tuned against a warm ground and wash out on pure
   white, so the reading pane goes white while the data-viz keeps its contrast.
   ========================================================================= */
body.research-white { --bg-page: #fff; background: #fff; overflow-x: clip; }

/* =========================================================================
   DOCKED reader shell (UX spike, 2026-07-07)
   -------------------------------------------------------------------------
   A near-full-width explorable UNDER the global nav on plain white — article
   left, live graph right. The article scrolls the PAGE (one scrollbar, global
   sticky nav on top); the graph is a STICKY column pinned in view while the text
   flows past. Reuses .pane-graph/.graph-canvas-wrap/.wiki-pane wholesale;
   overrides only layout + the two-tone fill (the plate's 1px border is the sole
   boundary between the columns).

   FULL-BLEED: the fc-managed [slug]/page.tsx wraps content in a max-width:720
   <article>. The docked shell must escape that cage to span the viewport, so it
   breaks out with symmetric negative margins (width stays auto and expands to the
   viewport edges regardless of the constrained parent). body.research-white sets
   overflow-x:clip so the break-out can't produce a horizontal scrollbar.
   ========================================================================= */
.shell-docked {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  --graph-col: min(40%, 560px);   /* graph capped at 40% of the width */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--graph-col);
  gap: clamp(36px, 4vw, 88px);
  padding: clamp(16px, 2vw, 32px) clamp(24px, 3.5vw, 56px) 56px;
  align-items: start;
  transition: grid-template-columns 340ms var(--ease-smooth), gap 340ms var(--ease-smooth);
}
.shell-docked .sd-reader { min-width: 0; }
/* Reading is a fixed measure CENTERED in its zone — slack goes to the outer
   margins and the single seam, never into a valley between text and graph. */
.shell-docked .sd-reader .reader-inner { max-width: 680px; margin: 0 auto; }

/* Collapsed — the graph accordions shut to the right; reading re-centers. */
.shell-docked[data-graph-open="false"] { --graph-col: 0px; gap: 0; }
.shell-docked[data-graph-open="false"] .sd-graph-col { pointer-events: none; }

/* The graph sits IN the page — a sticky field, not a card. Pinned below the nav
   band; `top` set inline (NAV_H). overflow clips it during the accordion close. */
.shell-docked .sd-graph-col {
  position: sticky;
  align-self: start;
  height: calc(100vh - 78px - 32px);
  min-height: 440px;
  overflow: hidden;
}

/* Flat plate — no border, no shadow, no radius, no fill. The graph and wiki
   render directly on the page white; nothing frames them into a modal. */
.shell-docked .pane-graph.sd-plate {
  position: relative;
  flex: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.shell-docked .pane-graph .pane-inner { height: 100%; }

/* Everything inside is white/transparent — graph AND wiki (no cream anywhere). */
.shell-docked .graph-canvas-wrap { background: transparent; }
.shell-docked .wiki-pane,
.shell-docked .wiki-browse,
.shell-docked .wiki-browse-header,
.shell-docked .wiki-type-chip { background: #fff; }
.shell-docked .wiki-search { background: #fff; border-color: var(--border-subtle); }
.shell-docked .wiki-browse-item:hover { background: rgba(56, 24, 0, 0.045); border-color: transparent; }
/* Drop the wiki's own close chrome — the Graph/Wiki toggle already switches back. */
.shell-docked .wiki-close { display: none; }

/* Flat control cluster — Graph/Wiki toggle + collapse caret, top-right, no bar
   and no background. Inline affordances on the page, not a titlebar. */
.shell-docked .sd-controls {
  position: absolute; top: 8px; right: 12px; z-index: 6;
  display: flex; align-items: center; gap: 12px;
}
.shell-docked .sd-controls .sd-tog {
  background: none; border: none; cursor: pointer; font-family: var(--font-brand);
  font-size: 12px; font-weight: 600; color: var(--fg4);
  display: inline-flex; align-items: center; gap: 5px; padding: 2px;
  transition: color 140ms var(--ease-out);
}
.shell-docked .sd-controls .sd-tog .ph { font-size: 14px; }
.shell-docked .sd-controls .sd-tog.active { color: var(--fg1); }
.shell-docked .sd-controls .sd-tog:hover { color: var(--brand-deep); }
.shell-docked .sd-controls .sd-collapse-btn {
  background: none; border: none; cursor: pointer; color: var(--fg4);
  font-size: 17px; line-height: 1; padding: 2px; border-radius: 4px;
  transition: color 140ms var(--ease-out);
}
.shell-docked .sd-controls .sd-collapse-btn:hover { color: var(--brand-deep); }

/* Node/edge palette tuned for WHITE — the cream-era dim colors washed out. */
.shell-docked { --connected: #c7b083; --connected-dim: #b0a082; }
.shell-docked #graph-svg .node-g .core { opacity: 0.62; }
.shell-docked #graph-svg .node-g.is-faded .core { opacity: 0.42; }
.shell-docked #graph-svg .node-g text { fill: var(--fg3); opacity: 0.62; }
.shell-docked #graph-svg .node-g.is-faded text { opacity: 0.34; }
.shell-docked #graph-svg .edge { stroke: #cbb590; opacity: 0.22; }
.shell-docked #graph-svg .edge.is-faded { opacity: 0.07; }

/* Re-expand affordance — a slim tab on the right edge (the collapsed graph).
   Shown only when collapsed; click brings the field (desktop) / overlay (mobile). */
.sd-rail { display: none; }
.shell-docked[data-graph-open="false"] .sd-rail {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 55;
  padding: 16px 9px; cursor: pointer; color: var(--fg3);
  background: #fff; border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px; box-shadow: -2px 0 10px rgba(56, 24, 0, 0.05);
  transition: color 140ms var(--ease-out);
}
.shell-docked[data-graph-open="false"] .sd-rail:hover { color: var(--brand-deep); }
.sd-rail .ph { font-size: 15px; }
.sd-rail .sd-rail-label {
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ── Mobile: single column; the graph opens as a fullscreen overlay ──────── */
@media (max-width: 900px) {
  .shell-docked,
  .shell-docked[data-graph-open="true"],
  .shell-docked[data-graph-open="false"] { grid-template-columns: 1fr; gap: 0; padding-bottom: 96px; }
  .shell-docked .sd-graph-col { display: none; overflow: visible; }
  .shell-docked[data-graph-open="true"] .sd-graph-col {
    display: block; position: fixed; inset: 0; z-index: 70; height: 100dvh; margin: 0;
    background: #fff; pointer-events: auto;
  }
}