/* =====================================================================
   MIRA — shared design system for the epistack submission site
   Palette, type, node/edge rendering, tooltip, header menu, and the
   page components reused across all eight pages. Lifted from the
   schema-demo / legacy deck (PAGE-SPEC §3) and figure-mira-stack.html.
   ===================================================================== */
:root{
  /* warm, tinted neutrals — never pure black/gray */
  --bg:#FBFAF8; --ink:#241F2B; --muted:#8B8581; --faint:#C2BDB5; --hair:#EAE5DD;
  --card:rgba(252,251,249,.92);

  /* node palette (schema-demo, exact) */
  --question:#E6B158; --question-fill:#FBF4E8; --question-ink:#8A5A12;
  --claim:#5BA756;    --claim-fill:#E7F4E8;    --claim-ink:#2C6A29;
  --evidence:#E6827A; --evidence-fill:#FBE7E5; --evidence-ink:#A2362E;
  --study:#5E9EED;    --study-fill:#E7F1FD;    --study-ink:#1F5596;
  --protocol:#C77FE0; --protocol-fill:#F6ECFB; --protocol-ink:#793795;
  --request:#5566E4;  --request-fill:#E6E9FB;  --request-ink:#26309A;
  --source:#8B8581;   --source-fill:#F0EEEA;   --source-ink:#4A4640;
  --entity:#241F2B;   --entity-fill:#FFFFFF;
  --artifact:#6E665F; --artifact-fill:#F2EEE7; --artifact-ink:#463F38;

  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"Hanken Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-eyebrow:.72rem; --t-cap:.8rem; --t-sm:.92rem; --t-body:1rem;
  --t-lead:1.18rem;
  --t-def:clamp(1.32rem, 1.05rem + 1.25vw, 1.7rem);
  --t-hero:clamp(2.05rem, 1.4rem + 3.4vw, 2.95rem);
  --t-h2:clamp(1.65rem, 1.15rem + 2.2vw, 2.35rem);
  --t-h1:clamp(2.2rem, 1.5rem + 3.2vw, 3.1rem);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --shadow:0 6px 26px -8px rgba(54,44,32,.18);
  --head:56px;
  --measure:66ch;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; background:var(--bg); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  font-optical-sizing:auto; font-kerning:normal;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; }
:focus-visible{ outline:2px solid color-mix(in srgb,var(--request) 55%, transparent); outline-offset:2px; border-radius:3px; }
.skip{ position:absolute; left:-999px; top:0; z-index:100; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

/* =====================================================================
   Persistent header / menu
   ===================================================================== */
.head{ position:sticky; top:0; z-index:40; height:var(--head);
  display:flex; align-items:center; gap:var(--s4); justify-content:space-between;
  padding:0 clamp(var(--s4),4vw,var(--s6)); background:rgba(251,250,248,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair); }
.wordmark{ display:inline-flex; align-items:baseline; gap:8px; text-decoration:none;
  white-space:nowrap; flex:0 0 auto; }
.wordmark b{ color:var(--ink); font-weight:800; letter-spacing:.16em; font-size:.98rem; }
.wordmark .sub{ font-size:var(--t-eyebrow); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){ .wordmark .sub{ display:none; } }

.nav{ display:flex; align-items:center; gap:2px; flex:1 1 auto; justify-content:center;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.nav::-webkit-scrollbar{ display:none; }
.nav a{ font-size:var(--t-cap); font-weight:650; color:var(--muted); text-decoration:none;
  padding:7px 10px; border-radius:8px; white-space:nowrap; letter-spacing:.005em;
  transition:color .18s ease, background .18s ease; }
.nav a:hover{ color:var(--ink); background:var(--hair); }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:750; background:color-mix(in srgb,var(--claim) 15%, transparent); }
.nav a .n{ color:var(--faint); font-weight:800; margin-right:5px; font-variant-numeric:tabular-nums; font-size:.9em; }
.nav a[aria-current="page"] .n{ color:var(--claim); }

.runbtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:var(--t-cap); font-weight:750; color:#fff; background:var(--request);
  padding:8px 15px; border-radius:999px; box-shadow:0 2px 8px -2px color-mix(in srgb,var(--request) 60%, transparent);
  transition:transform .18s ease, box-shadow .18s ease; }
.runbtn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px -4px color-mix(in srgb,var(--request) 55%, transparent); }
.runbtn .play{ font-size:.9em; }
.navtoggle{ display:none; flex:0 0 auto; border:1px solid var(--hair); background:var(--bg);
  border-radius:9px; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
.navtoggle svg{ width:18px; height:18px; }

@media (max-width:760px){
  .navtoggle{ display:inline-flex; }
  .nav{ position:fixed; inset:var(--head) 0 auto 0; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:0; background:var(--bg); border-bottom:1px solid var(--hair);
    padding:var(--s3); box-shadow:var(--shadow); transform:translateY(-8px); opacity:0;
    pointer-events:none; transition:opacity .18s ease, transform .18s ease; max-height:80vh; overflow:auto; }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:12px 14px; font-size:var(--t-sm); border-radius:10px; }
  .head .runbtn .lbl{ display:none; }
  .head .runbtn{ padding:8px 12px; }
}

/* =====================================================================
   Page shell / generic layout
   ===================================================================== */
.wrap{ max-width:820px; margin:0 auto; padding:0 clamp(var(--s4),4vw,var(--s6)); }
.wrap.narrow{ max-width:720px; }
.page{ padding:var(--s7) 0 calc(var(--s7) + env(safe-area-inset-bottom)); }
.pagehead{ padding:var(--s7) 0 var(--s5); }
.eyebrowline{ font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink,var(--muted)); margin:0 0 var(--s3); display:inline-flex; align-items:center; gap:8px; }
h1.title{ font-family:var(--display); font-weight:800; font-size:var(--t-h1); line-height:1.03;
  letter-spacing:-.02em; margin:0; text-wrap:balance; }
.pagehead .sub{ font-size:var(--t-lead); line-height:1.45; color:#4a444f; margin:var(--s4) 0 0; max-width:60ch; text-wrap:pretty; }

h2.sec{ font-family:var(--display); font-weight:760; font-size:var(--t-h2); line-height:1.08;
  letter-spacing:-.02em; margin:0; text-wrap:balance; }
h3.subsec{ font-family:var(--display); font-weight:680; font-size:var(--t-lead); margin:var(--s6) 0 0; color:var(--ink); }
.move{ padding:var(--s7) 0; border-top:1px solid var(--hair); }
.move:first-of-type{ border-top:0; }
.kick{ font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink,var(--ink)); display:inline-flex; align-items:center; gap:8px; margin:0 0 var(--s3); }
.kick .num{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:var(--accent,var(--ink)); color:#fff; font-size:.72rem; font-weight:800; }
.move .sub{ font-size:var(--t-lead); line-height:1.42; color:#4a444f; margin:var(--s4) 0 0; max-width:60ch; text-wrap:pretty; }

.prose{ font-size:var(--t-body); line-height:1.65; color:#33303a; margin:var(--s5) 0 0; max-width:var(--measure); text-wrap:pretty; }
.prose + .prose{ margin-top:var(--s4); }
.prose b{ color:var(--ink); font-weight:700; }
.prose a{ color:var(--study-ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.prose .term{ font-weight:700; color:var(--accent-ink,var(--ink)); }
q{ quotes:none; }
.mono{ font-family:var(--sans); font-weight:700; background:#F0EEEA; padding:1px 6px; border-radius:5px; color:#4a444f; }

.pull{ margin:var(--s6) 0; padding:var(--s4) 0 var(--s4) var(--s5); border-left:4px solid var(--accent,var(--ink)); }
.pull q{ font-family:var(--display); font-size:var(--t-lead); font-weight:520; line-height:1.4; color:var(--ink); }
.pull .who{ display:block; margin-top:var(--s3); font-size:var(--t-sm); font-weight:700; color:var(--muted); letter-spacing:.01em; }

.disclaim{ margin:var(--s5) 0 0; padding:var(--s4) var(--s5); border-radius:12px; background:#F4EEE6;
  font-size:var(--t-sm); line-height:1.55; color:#4a444f; }
.disclaim b{ color:var(--ink); }
.foot-note{ font-size:var(--t-cap); line-height:1.6; color:var(--muted); margin-top:var(--s5); max-width:var(--measure); text-wrap:pretty; }
.foot-note b{ color:#4a444f; }

.sitefoot{ border-top:1px solid var(--hair); padding:var(--s5) 0 calc(var(--s6) + env(safe-area-inset-bottom));
  font-size:var(--t-cap); line-height:1.6; color:var(--muted); text-wrap:pretty; }
.sitefoot b{ color:#4a444f; }
.sitefoot a{ color:var(--study-ink); }

/* accent helpers */
.accent-question{ --accent:var(--question); --accent-ink:var(--question-ink); }
.accent-claim{ --accent:var(--claim); --accent-ink:var(--claim-ink); }
.accent-evidence{ --accent:var(--evidence); --accent-ink:var(--evidence-ink); }
.accent-study{ --accent:var(--study); --accent-ink:var(--study-ink); }
.accent-protocol{ --accent:var(--protocol); --accent-ink:var(--protocol-ink); }
.accent-request{ --accent:var(--request); --accent-ink:var(--request-ink); }
.accent-source{ --accent:var(--source); --accent-ink:var(--source-ink); }

/* =====================================================================
   Home — cover + menu cards + layer table
   ===================================================================== */
.cover{ padding:clamp(var(--s6),7vw,72px) 0 var(--s6); }
.cover .thesis{ font-family:var(--display); font-weight:800; font-size:var(--t-h1); line-height:1.05;
  letter-spacing:-.02em; margin:var(--s4) 0 0; text-wrap:balance; max-width:20ch; }
.cover .astera{ font-family:var(--display); font-style:italic; font-weight:500; font-size:var(--t-lead);
  color:#4a444f; margin:var(--s5) 0 0; max-width:52ch; line-height:1.4; }
.cover .astera .who{ display:block; font-family:var(--sans); font-style:normal; font-size:var(--t-sm); font-weight:700; color:var(--muted); margin-top:var(--s2); }
.whatis{ margin:var(--s6) 0 0; font-size:var(--t-body); line-height:1.65; color:#33303a; max-width:var(--measure); }
.whatis b{ color:var(--ink); }

.scopeline{ margin:var(--s5) 0 0; padding:var(--s3) var(--s4); border-radius:10px; border:1px dashed var(--hair);
  background:#FCFBF9; font-size:var(--t-sm); line-height:1.55; color:#4a444f; }
.scopeline b{ color:var(--ink); }
.scopeline a{ color:var(--study-ink); }

.layer{ width:100%; border-collapse:collapse; margin:var(--s5) 0 0; font-size:var(--t-sm); }
.layer th, .layer td{ text-align:left; padding:var(--s3) var(--s3); border-top:1px solid var(--hair); vertical-align:top; line-height:1.5; }
.layer thead th{ border-top:0; font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.layer td:first-child{ font-weight:750; white-space:nowrap; color:var(--ink); }
.layer .stance{ font-weight:750; }
.layer .stance.focus{ color:var(--claim-ink); }
.layer .stance.touch{ color:var(--source-ink); }
.layer .stance.enable{ color:var(--request-ink); }

.pathhead{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin:var(--s5) 0 var(--s2); }
.pathhead h2{ margin:0; }
.pathhead .tag{ font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.menu{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s4); margin:var(--s5) 0 0; }
.mcard{ position:relative; display:block; text-decoration:none; border:1px solid var(--hair); border-radius:16px;
  padding:var(--s5); background:#FCFBF9; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent,var(--ink)) 40%, var(--hair)); }
.mcard .mnum{ position:absolute; top:var(--s4); right:var(--s4); width:26px; height:26px; min-height:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:var(--t-cap); font-weight:800;
  background:var(--accent,var(--ink)); color:#fff; }
.mcard.explore .mnum{ background:var(--hair); color:var(--muted); }
.mcard h3{ font-family:var(--display); font-weight:680; font-size:var(--t-lead); margin:0 34px 0 0; color:var(--ink); letter-spacing:-.01em; }
.mcard .what{ font-size:var(--t-sm); line-height:1.5; color:#4a444f; margin:var(--s2) 0 0; }
.mcard .go{ display:inline-flex; align-items:center; gap:5px; margin-top:var(--s3); font-size:var(--t-cap); font-weight:750; color:var(--accent-ink,var(--study-ink)); }
.mcard .go .ar{ transition:transform .18s ease; }
.mcard:hover .go .ar{ transform:translateX(3px); }
.grouplabel{ grid-column:1/-1; font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:var(--s3) 0 calc(-1 * var(--s2)); }

.callout-run{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; justify-content:space-between;
  margin:var(--s6) 0 0; padding:var(--s5); border-radius:16px; background:var(--ink); color:#F3F0EA; }
.callout-run .t{ font-family:var(--display); font-size:var(--t-lead); font-weight:600; letter-spacing:-.01em; max-width:44ch; }
.callout-run .t b{ color:#F4D9A0; }
.callout-run a{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:750; font-size:var(--t-sm); color:var(--ink); background:#F4D9A0; padding:11px 18px; border-radius:999px;
  transition:transform .18s ease; }
.callout-run a:hover{ transform:translateY(-2px); }

/* =====================================================================
   Cards / node-definition surface (grammar page + walk deck)
   ===================================================================== */
.card{ width:min(94vw,470px); margin:0 auto; background:var(--card);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-left:4px solid var(--accent,var(--ink)); border-radius:4px 16px 16px 4px;
  padding:var(--s5) var(--s5) var(--s4); box-shadow:var(--shadow); max-width:64ch; }
.eyebrow{ margin:0; font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-ink,var(--ink));
  display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
.also{ font-size:var(--t-sm); font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); }
.def{ font-family:var(--display); font-weight:560; font-size:var(--t-def); line-height:1.24;
  letter-spacing:-.01em; margin:var(--s3) 0 0; text-wrap:balance; color:var(--ink); }
.hero{ font-family:var(--display); font-weight:820; font-size:var(--t-hero); line-height:1.02;
  letter-spacing:-.02em; margin:var(--s2) 0 0; text-wrap:balance; }
.lede{ font-size:var(--t-body); line-height:1.6; color:#3b3540; margin:var(--s4) 0 0; max-width:60ch; text-wrap:pretty; }
.lede b{ color:var(--ink); font-weight:700; }
.ex{ margin:var(--s5) 0 0; padding:var(--s3) 0 var(--s3) var(--s4);
  border-left:3px solid var(--accent); background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 8%, transparent), transparent 92%); }
.ex .tag{ font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); opacity:.85; }
.ex .lead{ font-family:var(--display); font-size:var(--t-lead); font-weight:540; line-height:1.32; margin-top:var(--s1); color:var(--accent-ink); text-wrap:pretty; }
.ex .note{ font-size:var(--t-sm); line-height:1.5; color:var(--accent-ink); opacity:.82; margin-top:var(--s2); }
.ex .row{ display:flex; gap:var(--s3); align-items:flex-start; }
.artifact{ flex:0 0 auto; border-radius:8px; }
.why{ font-size:var(--t-body); line-height:1.58; color:#3b3540; margin:var(--s5) 0 0; max-width:60ch; text-wrap:pretty; }
.why.labelled::before{ content:"Why its own node — "; font-family:var(--sans); font-weight:800; color:var(--accent-ink,var(--ink)); }

.rel{ margin:var(--s5) 0 0; }
.rel-label{ margin:0 0 var(--s2); font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.rel-label .on{ color:var(--accent-ink); }
.rel-sub{ margin:var(--s3) 0 var(--s2); font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); opacity:.75; }
.attrs{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.pill{ font-size:var(--t-cap); line-height:1; display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px; border-radius:8px; background:var(--fill,#f0efea);
  border:1px solid color-mix(in srgb,var(--accent,#ccc) 30%, transparent); color:var(--accent-ink,#333); font-weight:600; }
.pill .ar{ color:var(--accent,#999); font-weight:800; }
.pill .tg{ color:var(--ink); opacity:.7; font-weight:540; }
.pill .many{ font-size:.86em; font-weight:700; font-style:italic; letter-spacing:.01em; color:var(--accent,#999); opacity:.9; }
.pill.inv{ background:transparent; border-style:dashed; border-color:color-mix(in srgb,var(--accent,#ccc) 38%, transparent);
  color:color-mix(in srgb,var(--accent-ink,#333) 72%, #fbfaf8); font-weight:540; }
button.pill{ font-family:var(--sans); cursor:help; text-align:left; }
button.pill:hover, button.pill[aria-expanded="true"]{ border-color:color-mix(in srgb,var(--accent,#999) 65%, transparent); }
.none{ font-size:var(--t-cap); color:var(--muted); font-style:italic; margin:0; }
.snote{ font-size:var(--t-cap); line-height:1.6; color:var(--muted); margin-top:var(--s3); font-style:italic; max-width:58ch; text-wrap:pretty; }
.snote code{ font-family:var(--sans); font-style:normal; font-weight:700; color:var(--accent-ink,var(--ink)); opacity:.85; }
.snote b{ font-style:normal; color:#4a444f; }

/* shared fields block (grammar page) */
.fields{ margin:var(--s5) 0 0; padding-top:var(--s4); border-top:1px solid var(--hair); }
.fields-h{ font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--s3); display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.fields-h .src{ font-weight:600; letter-spacing:.02em; opacity:.75; text-transform:none; font-style:italic; }
.frow{ display:grid; grid-template-columns:82px 1fr; gap:var(--s2) var(--s3); align-items:baseline;
  font-size:var(--t-cap); line-height:1.9; color:#6b6560; margin:0 0 var(--s1); }
.frow b{ color:var(--accent-ink,#4a444f); opacity:.75; font-weight:700; font-size:var(--t-eyebrow); letter-spacing:.04em; text-transform:uppercase; }
.frow .fs{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--s1); }
.frow span[aria-hidden]{ color:var(--faint); }
.f{ font:inherit; font-weight:600; color:#4a444f; background:none; border:0; padding:2px 1px; margin:0;
  cursor:help; border-bottom:1px dotted var(--faint); border-radius:2px; transition:color .18s ease, border-color .18s ease; }
.f:hover, .f:focus-visible, .f[aria-expanded="true"]{ color:var(--ink); border-bottom-color:var(--ink); }
.h-tap{ display:none; }
@media (hover:none){ .h-hover{ display:none; } .h-tap{ display:inline; } }

/* =====================================================================
   Shared tooltip
   ===================================================================== */
.tip{ position:fixed; z-index:60; max-width:min(80vw,300px); padding:var(--s3) var(--s4);
  background:var(--ink); color:#F3F0EA; border-radius:10px; font-size:var(--t-sm); line-height:1.45;
  box-shadow:0 10px 30px -8px rgba(54,44,32,.45); pointer-events:none;
  opacity:0; transform:translateY(3px); transition:opacity .16s ease, transform .16s ease; }
.tip.is-on{ opacity:1; transform:translateY(0); }
.tip code{ font-family:var(--sans); font-weight:700; color:#F4D9A0; }
@media (prefers-reduced-motion: reduce){ .tip{ transition:opacity .16s ease; transform:none; } }

/* =====================================================================
   Graph (shared SVG node/edge rendering)
   ===================================================================== */
figure.fig{ margin:var(--s6) 0 0; }
figure.fig svg{ width:100%; height:auto; display:block; overflow:visible; }
figure.fig .scroller{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
figcaption{ margin-top:var(--s3); font-size:var(--t-cap); line-height:1.5; color:var(--muted); text-wrap:pretty; }
figcaption b{ color:#4a444f; font-weight:700; }
.figttl{ font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s3); }

/* deep-link targets: clear the sticky header when an anchor lands on them */
figure.fig[id], .figttl[id], h3.subsec[id]{ scroll-margin-top:calc(var(--head) + var(--s4)); }

.gnode rect, .gnode .frame{ fill:#fff; stroke:var(--n,#bbb); stroke-width:2; }
.gnode text{ font-family:var(--sans); font-size:12.5px; font-weight:700; fill:var(--ink); text-anchor:middle; dominant-baseline:middle; }
.gnode .nsub{ font-size:10px; font-weight:600; fill:var(--nink,var(--muted)); opacity:.9; }
.gnode--question{ --n:var(--question); --nink:var(--question-ink); --fillc:var(--question-fill); }
.gnode--claim{ --n:var(--claim); --nink:var(--claim-ink); --fillc:var(--claim-fill); }
.gnode--evidence{ --n:var(--evidence); --nink:var(--evidence-ink); --fillc:var(--evidence-fill); }
.gnode--study{ --n:var(--study); --nink:var(--study-ink); --fillc:var(--study-fill); }
.gnode--protocol{ --n:var(--protocol); --nink:var(--protocol-ink); --fillc:var(--protocol-fill); }
.gnode--request{ --n:var(--request); --nink:var(--request-ink); --fillc:var(--request-fill); }
.gnode--source{ --n:var(--source); --nink:var(--source-ink); --fillc:var(--source-fill); }
.gnode--entity{ --n:var(--entity); --nink:var(--entity); --fillc:#fff; }
.gnode, .gedge{ transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.gnode.is-ghost, .gedge.is-ghost{ opacity:.13; }
.gnode[data-tip]{ cursor:help; }
.gnode.is-ghost{ pointer-events:none; } /* no node tooltip until the node is revealed */
.gnode.is-on rect, .gnode.is-on .frame{ fill:var(--fillc,#fff); }
.gnode.is-active rect, .gnode.is-active .frame{ stroke-width:3; filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--n) 55%, transparent)); }
.gnode.is-active{ animation:pop .5s cubic-bezier(.22,.61,.36,1); }
@keyframes pop{ 0%{ transform:scale(.94) } 100%{ transform:scale(1) } }
@media (prefers-reduced-motion: reduce){ .gnode.is-active{ animation:none } }
.figure.is-overview .gnode, .figure.is-overview .gedge{ opacity:.5; }

.glink{ fill:none; stroke:#AAA59C; stroke-width:1.7; }
.gedge.is-active .glink, .gedge:hover .glink{ stroke:var(--n,#7a7a82); stroke-width:2.4; }
.gedge{ --n:#AAA59C; --nink:#555; }
.gedge--addresses{ --n:var(--claim); --nink:var(--claim-ink); }
.gedge--obs{ --n:var(--evidence); --nink:var(--evidence-ink); }
.gedge--supports{ --n:var(--claim); --nink:var(--claim-ink); }
.gedge--opposes{ --n:var(--evidence); --nink:var(--evidence-ink); }
.gedge--base{ --n:var(--entity); --nink:var(--entity); }
.gedge--ground{ --n:var(--study); --nink:var(--study-ink); }
.gedge--follows{ --n:var(--protocol); --nink:var(--protocol-ink); }
.gedge--source{ --n:var(--source); --nink:var(--source-ink); }
.gedge--request{ --n:var(--request); --nink:var(--request-ink); }
.elabel{ font-family:var(--sans); font-size:9.5px; font-weight:700; fill:var(--muted); letter-spacing:.01em;
  paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; text-anchor:middle; }
.gedge.is-active .elabel, .gedge:hover .elabel{ fill:var(--nink,#555); }
.ehit{ fill:transparent; stroke:none; pointer-events:all; cursor:help; }
.gedge .glink, .gedge .elabel{ pointer-events:none; }
.gedge.is-ghost .ehit{ pointer-events:none; }
.who-chip{ font-family:var(--sans); font-size:9px; font-weight:700; }

/* ghost-slot legend chip */
.ghostkey{ display:inline-flex; align-items:center; gap:7px; font-size:var(--t-cap); color:var(--muted); font-style:italic; }
.ghostkey .sw{ width:26px; height:15px; border:1.5px dashed var(--muted); border-radius:4px; }

/* new-node highlight for snap-on */
.gnode.is-new rect{ stroke-width:2.4; }
#snapgraph .gnode.is-new rect{ stroke:var(--study); }

/* =====================================================================
   Static grammar diagram (figure-mira-stack)
   ===================================================================== */
.chainfig svg{ width:100%; height:auto; display:block; }
.chainfig .n-label{ font-family:var(--sans); font-size:15px; font-weight:750; fill:var(--ink); text-anchor:middle; }
.chainfig .n-sub{ font-family:var(--sans); font-size:11.5px; font-weight:500; fill:var(--muted); text-anchor:middle; }
.chainfig .e-label{ font-family:var(--mono); font-size:11px; font-weight:700; fill:#6b6560; text-anchor:middle; }
.chainfig .e-label-em{ font-family:var(--mono); font-size:12px; font-weight:800; fill:var(--artifact-ink); text-anchor:middle; }
.chainfig .zone{ font-family:var(--sans); font-size:11px; font-weight:750; letter-spacing:.06em; fill:var(--muted); }
.chainfig .zone-note{ font-family:var(--sans); font-size:11.5px; font-weight:500; fill:var(--muted); }
.chainfig .edge{ fill:none; stroke:#57505A; stroke-width:1.4; }
.chainfig .edge-strong{ fill:none; stroke:var(--artifact-ink); stroke-width:2.6; }
.chainfig .rule{ stroke:#A69E95; stroke-width:2; stroke-dasharray:3 6; }
.chainfig .edge-halo{ fill:none; stroke:var(--bg); stroke-width:7; stroke-linecap:round; }
.chainfig .node-box{ fill:#fff; stroke-width:2; }

/* =====================================================================
   Artifact pair (WHO schematic -> Worobey photo) — cases page
   ===================================================================== */
.pair{ display:grid; grid-template-columns:1fr auto 1.1fr; align-items:center; gap:var(--s3); margin-top:var(--s5); }
@media (max-width:600px){ .pair{ grid-template-columns:1fr; } .pair .arrow{ transform:rotate(90deg); justify-self:center; } }
.pair figure{ margin:0; }
.pair .cap{ font-size:var(--t-cap); line-height:1.4; color:var(--muted); margin-top:8px; }
.pair .cap b{ color:#4a444f; }
.pair .arrow{ font-size:1.6rem; color:var(--muted); text-align:center; font-weight:700; }
.pair img{ width:100%; height:auto; border-radius:10px; border:1px solid var(--hair); display:block; }
.who-schem{ width:100%; height:auto; border-radius:10px; border:1px solid var(--hair); background:#fff; display:block; }

/* =====================================================================
   Tags / chips, self-audit list, live-graph cards, mapmini
   ===================================================================== */
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--s4) 0 0; }
.vtag{ font-size:var(--t-cap); font-weight:700; padding:6px 11px; border-radius:999px; background:var(--fill,#F0EEEA);
  color:var(--ink); border:1px solid var(--hair); display:inline-flex; align-items:center; gap:6px; }
.vtag[data-tip]{ cursor:help; }
.vtag .d{ width:9px; height:9px; border-radius:50%; background:var(--c,#999); }

.audit{ margin:var(--s5) 0 0; border:1px solid var(--hair); border-radius:14px; overflow:hidden; }
.audit .ahead{ background:#F4EEE6; padding:var(--s4) var(--s5); font-family:var(--display); font-weight:640; font-size:var(--t-lead); color:var(--ink); }
.audit ul{ list-style:none; margin:0; padding:var(--s3) var(--s5) var(--s5); }
.audit li{ position:relative; padding:var(--s3) 0 var(--s3) 26px; font-size:var(--t-sm); line-height:1.55; color:#33303a; border-top:1px solid var(--hair); }
.audit li:first-child{ border-top:0; }
.audit li::before{ content:"✕"; position:absolute; left:0; top:var(--s3); color:var(--evidence-ink); font-weight:800; }
.audit li.ok::before{ content:"○"; color:var(--muted); }
.audit li b{ color:var(--ink); }
.audit .foot{ padding:var(--s4) var(--s5); border-top:1px solid var(--hair); font-size:var(--t-sm); line-height:1.55; color:#33303a; background:#FCFBF9; }

.lg{ display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s5); }
.lgcard{ flex:1 1 260px; border:1px solid var(--hair); border-radius:14px; padding:var(--s4) var(--s5); background:#FCFBF9; text-decoration:none; display:block; transition:transform .18s ease, box-shadow .18s ease; }
.lgcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.lgcard .h{ font-family:var(--display); font-weight:620; font-size:var(--t-lead); color:var(--ink); letter-spacing:-.01em; }
.lgcard .m{ font-size:var(--t-cap); color:var(--muted); margin-top:6px; }
.lgcard .u{ font-size:var(--t-cap); color:var(--study-ink); margin-top:10px; font-weight:700; word-break:break-all; }

.mapmini{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s4); font-size:var(--t-sm); color:#4a444f; }
.mapmini .arr{ color:var(--muted); font-weight:800; }
.mapmini code{ font-family:var(--sans); font-weight:700; background:#F0EEEA; padding:2px 7px; border-radius:6px; color:#4a444f; }

/* =====================================================================
   Code block (JSON-LD) — grammar / appendix
   ===================================================================== */
.code{ margin:var(--s5) 0 0; background:#211C28; color:#E7E2DC; border-radius:12px; padding:var(--s4) var(--s5);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.82rem; line-height:1.65; overflow-x:auto; }
.code .k{ color:#9DB7E8; } .code .s{ color:#B9D8A6; } .code .c{ color:#8B8581; } .code .p{ color:#E0A0C0; }
.code .cm{ color:#6f6a76; font-style:italic; }

/* =====================================================================
   Run-it catalogue table
   ===================================================================== */
.catalogue{ margin:var(--s5) 0 0; display:flex; flex-direction:column; gap:var(--s3); }
.protocard{ border:1px solid var(--hair); border-radius:14px; padding:var(--s4) var(--s5); background:#FCFBF9; }
.protocard .top{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.protocard .name{ font-family:var(--sans); font-weight:800; font-size:var(--t-body); color:var(--ink); }
.protocard .name code{ background:none; }
.status{ font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.status.shipped{ background:var(--claim-fill); color:var(--claim-ink); }
.status.designed{ background:var(--question-fill); color:var(--question-ink); }
.status.pilot{ background:var(--source-fill); color:var(--source-ink); }
.protocard .what{ font-size:var(--t-sm); line-height:1.5; color:#33303a; margin:var(--s2) 0 0; }
.protocard .try{ font-size:var(--t-sm); line-height:1.5; color:#4a444f; margin:var(--s2) 0 0; }
.protocard .try b{ color:var(--ink); }
.protocard .link{ display:inline-block; margin-top:var(--s3); font-size:var(--t-cap); font-weight:750; color:var(--study-ink); word-break:break-all; }

/* =====================================================================
   Protocol FAQ — TOC rail + accordions (panel-qa-site pattern)
   ===================================================================== */
.faq-layout{ display:grid; grid-template-columns:1fr; gap:var(--s6); }
@media (min-width:960px){ .faq-layout{ grid-template-columns:214px 1fr; align-items:start; } }
.toc{ display:none; }
@media (min-width:960px){
  .toc{ display:block; position:sticky; top:calc(var(--head) + var(--s5)); align-self:start; font-size:var(--t-sm); }
  .toc .th{ font-size:var(--t-eyebrow); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s3); }
  .toc ol{ list-style:none; margin:0 0 var(--s4); padding:0; }
  .toc .sechead{ font-weight:800; color:var(--ink); margin:var(--s3) 0 var(--s1); font-size:var(--t-cap); letter-spacing:.02em; }
  .toc a{ display:block; text-decoration:none; color:var(--muted); padding:3px 0 3px 10px; border-left:2px solid var(--hair); line-height:1.4; transition:color .15s ease, border-color .15s ease; }
  .toc a:hover{ color:var(--ink); }
  .toc a.active{ color:var(--ink); font-weight:700; border-left-color:var(--claim); }
}
.faq-controls{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin:0 0 var(--s4); }
.faq-controls .legend{ font-size:var(--t-cap); color:var(--muted); display:flex; gap:var(--s4); flex-wrap:wrap; }
.faq-controls .legend .core::before{ content:"●"; color:var(--claim); margin-right:5px; }
.expandall{ font-family:var(--sans); font-size:var(--t-cap); font-weight:700; color:var(--study-ink);
  background:var(--study-fill); border:1px solid color-mix(in srgb,var(--study) 30%, transparent);
  border-radius:999px; padding:7px 14px; cursor:pointer; }
.faqsec{ margin:var(--s6) 0 0; scroll-margin-top:calc(var(--head) + var(--s4)); }
.faqsec > h2{ font-family:var(--display); font-weight:740; font-size:var(--t-h2); letter-spacing:-.015em; margin:0 0 var(--s2); line-height:1.1; }
.faqsec > .secsub{ font-size:var(--t-sm); color:var(--muted); margin:0 0 var(--s3); max-width:60ch; line-height:1.5; }
.qa{ border-top:1px solid var(--hair); scroll-margin-top:calc(var(--head) + var(--s3)); }
.qa:last-child{ border-bottom:1px solid var(--hair); }
.qa summary{ list-style:none; cursor:pointer; padding:var(--s4) 40px var(--s4) 0; position:relative;
  font-family:var(--display); font-weight:620; font-size:var(--t-lead); line-height:1.3; color:var(--ink); scroll-margin-top:calc(var(--head) + var(--s3)); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--claim-ink); }
.qa summary .core{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--claim); margin-right:9px; vertical-align:middle; }
.qa summary .prompt{ display:block; font-family:var(--sans); font-size:var(--t-cap); font-weight:700; color:var(--request-ink); margin-top:6px; letter-spacing:.01em; }
.qa summary::after{ content:"+"; position:absolute; right:6px; top:var(--s4); font-family:var(--sans); font-size:1.4rem; font-weight:400; color:var(--muted); transition:transform .2s ease; line-height:1; }
.qa[open] summary::after{ content:"−"; }
.qa .body{ padding:0 0 var(--s5); max-width:var(--measure); }
.qa .body .prose:first-child{ margin-top:var(--s2); }
.grounding{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--s4); font-size:var(--t-cap); font-weight:750;
  color:var(--study-ink); background:var(--study-fill); border-radius:999px; padding:6px 13px; text-decoration:none;
  border:1px solid color-mix(in srgb,var(--study) 25%, transparent); }
.grounding:hover{ background:color-mix(in srgb,var(--study) 18%, #fff); }
.grounding.multi{ margin-right:8px; }

.nonumbers{ margin:var(--s6) 0 0; padding:var(--s5); border-radius:16px; border:2px solid color-mix(in srgb,var(--request) 30%, transparent); background:var(--request-fill); }
.nonumbers .h{ font-family:var(--display); font-weight:700; font-size:var(--t-lead); color:var(--request-ink); margin:0; }
.nonumbers p{ font-size:var(--t-sm); line-height:1.6; color:#33303a; margin:var(--s3) 0 0; max-width:var(--measure); }
.nonumbers p b{ color:var(--request-ink); }

/* degree-scale mini table (grammar / faq) */
.degtable{ width:100%; border-collapse:collapse; margin:var(--s5) 0 0; font-size:var(--t-sm); }
.degtable th, .degtable td{ text-align:left; padding:var(--s3); border-top:1px solid var(--hair); }
.degtable thead th{ border-top:0; font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.degtable td:first-child{ font-family:var(--sans); font-weight:800; }
.degtable .fl-support{ color:var(--claim-ink); }
.degtable .fl-informs{ color:var(--source-ink); }
.degtable .fl-opposes{ color:var(--evidence-ink); }

/* =====================================================================
   Walk deck — DNA scrollytelling (only present on walk.html)
   ===================================================================== */
.walk{ scroll-snap-type:y proximity; }
.progress{ position:fixed; top:var(--head); left:0; height:3px; width:0%; z-index:39;
  background:var(--accent,#241F2B); transition:width .45s cubic-bezier(.22,.61,.36,1), background .45s ease; }
.counter{ position:fixed; bottom:calc(10px + env(safe-area-inset-bottom)); right:14px; display:flex; align-items:center;
  z-index:41; font-size:var(--t-eyebrow); letter-spacing:.12em; color:var(--muted); font-variant-numeric:tabular-nums;
  background:rgba(251,250,248,.8); padding:3px 8px; border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.dots{ position:fixed; z-index:38; right:6px; top:calc(50% + var(--head)/2); transform:translateY(-50%);
  display:flex; flex-direction:column; gap:var(--s2); }
.dot{ position:relative; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--faint);
  background:transparent; padding:0; cursor:pointer; transition:all .25s ease; }
.dot::before{ content:""; position:absolute; inset:-14px; }
.dot[aria-current="true"]{ background:var(--accent,#241F2B); border-color:var(--accent,#241F2B); transform:scale(1.3); }
@media (max-width:640px){ .dots{ display:none; } }

.scrolly{ position:relative; }
.figure{ position:sticky; top:var(--head); height:44svh; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; padding-top:14px; z-index:5; background:var(--bg); }
.figure::after{ content:""; position:absolute; left:0; right:0; bottom:-22px; height:22px;
  background:linear-gradient(var(--bg), transparent); pointer-events:none; }
.figure svg{ width:min(92vw,440px); height:38svh; overflow:visible; }
.steps{ position:relative; z-index:2; }
.step{ min-height:56svh; scroll-snap-align:start; scroll-margin-top:calc(44svh + var(--head));
  display:flex; flex-direction:column; justify-content:flex-start; padding:0 var(--s4) 9svh; }
.step:first-child{ padding-top:2svh; }

.hint{ margin:var(--s5) 0 0; font-size:var(--t-sm); color:var(--muted); display:flex; align-items:center; gap:var(--s2); }
.hint .k{ display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;
  border:1.5px solid var(--faint); border-radius:50%; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.7 } 50%{ transform:translateY(3px); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .hint .k{ animation:none } }

.bridge{ display:flex; align-items:center; gap:8px; margin-top:var(--s5); width:100%;
  font-family:var(--sans); font-size:var(--t-sm); font-weight:700; text-align:left; text-decoration:none;
  background:var(--claim-fill); color:var(--claim-ink); border:1px solid color-mix(in srgb,var(--claim) 40%, transparent);
  border-radius:12px; padding:var(--s4) var(--s5); transition:transform .2s ease; }
.bridge:hover{ transform:translateY(-2px); }
.bridge .ar{ margin-left:auto; font-weight:800; }
.bridge.alt{ background:var(--request-fill); color:var(--request-ink); border-color:color-mix(in srgb,var(--request) 40%, transparent); margin-top:var(--s3); }

/* payoff annotations for the DNA graph */
.badge text{ font-size:8.5px; font-weight:800; fill:#fff; font-family:var(--sans); text-anchor:middle; }
.badge.refuted rect{ fill:var(--evidence); stroke:none; }
.badge.supported rect{ fill:var(--claim); stroke:none; }
.badge, .spinout{ opacity:0; transition:opacity .55s ease; }
.figure.is-payoff .badge, .figure.is-payoff .spinout{ opacity:1; }
.figure.is-payoff .gedge--supports .glink{ stroke:var(--claim); stroke-width:2.6; }
.figure.is-payoff .gedge--opposes .glink{ stroke:var(--evidence); stroke-width:2.6; }
.figure.is-payoff .gedge--supports .elabel{ fill:var(--claim-ink); }
.figure.is-payoff .gedge--opposes .elabel{ fill:var(--evidence-ink); }
.spinout .glink{ stroke:var(--request); stroke-dasharray:4 4; stroke-width:1.6; fill:none; }
.spinout text{ font-family:var(--sans); font-size:9px; font-weight:700; fill:var(--request-ink); }

/* walk deck — desktop: sticky graph column beside scrolling step cards */
@media (min-width:900px){
  .walk{ scroll-snap-type:none; } /* free-scroll reads better than snap in two columns */
  .step{ scroll-snap-align:none; }
  .scrolly{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(var(--s6),5vw,72px); max-width:1240px; margin:0 auto;
    padding:0 clamp(var(--s5),4vw,var(--s7)); align-items:start; }
  .figure{ position:sticky; top:var(--head); height:calc(100svh - var(--head));
    width:auto; padding-top:0; justify-content:center; }
  .figure::after{ display:none; }
  .figure svg{ width:auto; height:min(76svh,560px); max-width:100%; }
  .steps{ padding:0 0 24svh; }
  .step{ min-height:86svh; justify-content:center; padding:0; scroll-margin-top:var(--head); }
  .step:first-child{ padding-top:0; }
  .card{ width:100%; max-width:540px; margin:0; }
}
@media (min-width:1400px){
  .figure svg{ height:min(78svh,620px); }
}

/* receipts index (appendix) */
.receipts{ margin:var(--s5) 0 0; font-size:var(--t-sm); }
.receipt{ border-top:1px solid var(--hair); padding:var(--s4) 0; }
.receipt q{ font-family:var(--display); font-weight:500; line-height:1.4; color:var(--ink); }
.receipt .meta{ display:block; margin-top:var(--s2); font-size:var(--t-cap); color:var(--muted); }
.receipt .meta b{ color:#4a444f; }
.receipt .meta code{ font-family:ui-monospace, Menlo, monospace; background:#F0EEEA; padding:1px 5px; border-radius:4px; }

/* =====================================================================
   Workflow figure (run.html) — tools as boxes, JSON-LD as the labelled
   edge, a closed loop. All SVG rules are scoped under #workflow so the
   generic .elabel / .status rules never leak into (or get clobbered by)
   the other graph exhibits. Built by buildWorkflow() in graphs.js.
   ===================================================================== */
#workflow{ min-width:640px; }
#workflow .box rect{ stroke-width:2; }
#workflow .box .name{ font-family:var(--mono); font-weight:700; font-size:13px; fill:var(--ink); text-anchor:middle; }
#workflow .box .sub{ font-family:var(--sans); font-weight:600; font-size:10px; fill:var(--muted); text-anchor:middle; }
#workflow .box.tool rect{ fill:#fff; stroke:var(--ink); }
#workflow .box.io-src rect{ fill:var(--source-fill); stroke:var(--source); }
#workflow .box.io-src .name{ font-family:var(--sans); font-weight:800; }
#workflow .box.io-view rect{ fill:var(--study-fill); stroke:var(--study); }
#workflow .box.io-view .name{ font-family:var(--sans); font-weight:800; fill:var(--study-ink); }
#workflow .box.io-live rect{ fill:var(--claim-fill); stroke:var(--claim); }
#workflow .box.io-live .name{ font-family:var(--sans); font-weight:800; fill:var(--claim-ink); }
#workflow .box.req rect{ fill:var(--request-fill); stroke:var(--request); }
#workflow .box.req .name{ font-family:var(--sans); font-weight:800; fill:var(--request-ink); }
#workflow .box.stu rect{ fill:var(--study-fill); stroke:var(--study); }
#workflow .box.stu .name{ font-family:var(--sans); font-weight:800; fill:var(--study-ink); }
#workflow .box .ntag{ font-family:var(--sans); font-weight:800; font-size:8px; letter-spacing:.09em; text-transform:uppercase; text-anchor:middle; }
#workflow .box.req .ntag{ fill:var(--request); }
#workflow .box.stu .ntag{ fill:var(--study); }
#workflow .box.designed rect{ fill:none; stroke:var(--muted); stroke-dasharray:5 4; stroke-width:1.6; }
#workflow .box.designed .name{ font-family:var(--sans); font-weight:700; font-style:italic; fill:var(--muted); }
#workflow .box.designed .sub{ fill:var(--faint); }
#workflow .container-bg{ fill:#FCFBF8; stroke:var(--hair); stroke-width:1.5; stroke-dasharray:2 5; }
#workflow .container-hd{ font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.02em; fill:var(--source-ink); text-anchor:middle; }
#workflow .stage{ font-family:var(--sans); font-weight:800; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; fill:var(--faint); text-anchor:middle; }
#workflow .edge{ fill:none; stroke:#AAA59C; stroke-width:1.8; }
#workflow .edge.wire{ stroke:var(--ink); stroke-width:2.2; }
#workflow .edge.work{ stroke:var(--request); stroke-width:1.4; stroke-opacity:.5; }
#workflow .edge.designed{ stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 4; }
#workflow .elabel{ font-family:var(--sans); font-weight:700; font-size:10px; fill:var(--muted); text-anchor:middle; letter-spacing:0; }
#workflow .elabel.work{ fill:#928BC9; font-weight:600; }
#workflow .rwlabel{ font-family:var(--sans); font-weight:800; font-size:9px; letter-spacing:.03em; fill:var(--ink); text-anchor:middle; }
#workflow .wirelabel{ font-family:var(--mono); font-weight:700; font-size:10.5px; fill:#fff; text-anchor:middle; }
#workflow .wirepill{ fill:var(--ink); }
#workflow .loopnote{ font-family:var(--display); font-style:italic; font-size:13px; fill:var(--request-ink); text-anchor:middle; }
#workflow .loopcap{ font-family:var(--sans); font-weight:700; font-size:10px; fill:var(--muted); text-anchor:middle; }
#workflow .schemaband{ fill:#F1EEE8; stroke:var(--source); stroke-width:1.4; }
#workflow .schema-accent{ fill:var(--question); }
#workflow .schema-name{ font-family:var(--mono); font-weight:700; font-size:12.5px; fill:var(--source-ink); text-anchor:middle; }
#workflow .schema-sub{ font-family:var(--sans); font-weight:600; font-size:10.5px; fill:var(--muted); text-anchor:middle; }
#workflow .status{ stroke:#fff; stroke-width:1.2; }
/* hover overlays: fat invisible hit-line along each arrow + help cursor on anything with a tip */
#workflow [data-tip]{ cursor:help; }
#workflow .box rect{ pointer-events:all; }
#workflow .wf-hit{ fill:none; stroke:transparent; stroke-width:16; pointer-events:stroke; }

/* Workflow figure legend (HTML, below the figure) */
.wf-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:var(--s4); font-size:.82rem; }
.wf-legend .row{ display:flex; flex-wrap:wrap; gap:12px 18px; flex-basis:100%; }
.wf-legend span{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:600; }
.wf-legend .sw{ width:13px; height:13px; border-radius:4px; border:2px solid; flex:none; }
.wf-legend .arrowkey{ width:22px; height:0; border-top:2.4px solid var(--request); position:relative; opacity:.6; flex:none; }
.wf-legend .arrowkey::after{ content:""; position:absolute; right:-2px; top:-4px; border:4px solid transparent; border-left-color:var(--request); }
.wf-legend .pillkey{ font-family:var(--mono); font-size:.72rem; font-weight:700; color:#fff; background:var(--ink); padding:2px 8px; border-radius:999px; letter-spacing:.02em; }