/* =========================================================================
   SIGMA v3 — shared stylesheet
   Used by every chapter page, plus index.html and design.html. Chapter pages
   add NO CSS of their own; a chapter-specific Visualizer reuses the tokens and
   components defined here. Matured from docs-dev/mockups/assets/sigma.css:
   the mockup class contract is preserved byte-for-byte, with additions for
   semantic tokens, real figures, navbar (home + track switch + prev/next),
   the home page, and vendored KaTeX.
   ========================================================================= */
:root{
  /* ---------- brand (raw tokens — specs/DESIGN.md §2, adopted 2026-07-15) ---------- */
  --red:#B31B1B; --red-dark:#8f1414; --red-tint:#fbecec; --red-line:#eec9c9;
  --ink:#2a1414; --muted:#8a6a6a; --white:#ffffff;
  --gray:#fff8f6; --gray-2:#fdf0ec; --line:#eddad6;
  --nav-bg:#b31b1b; --nav-ink:#ffffff;           /* both navbars: Cornell-red ground, white text */
  --rule:rgba(179,27,27,.08);                    /* ruled chart-paper panels */
  /* IBM Carbon pastel accents (the course already uses these) */
  --y:#f1c21b; --y-soft:#fcefc7; --o:#ff832b; --o-soft:#ffe3d1;
  --b:#4589ff; --b-soft:#dbe7ff; --p:#a56eff; --p-soft:#ebe0ff; --g:#24a148; --g-soft:#d3f0da;
  --mean:#DC267F; --median:#4589ff;
  /* code */
  --code-bg:#26100f; --code-ink:#e9edf2; --code-cm:#8bd6a4;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* --meta-h is 0 because the chapter meta chip row is hidden site-wide
     (2026-08-20, see the .meta rule below). The token is KEPT because .body and
     .side-reopen still subtract it; restoring the bar is a two-line change. */
  --nav-h:52px; --meta-h:0px;
  --shadow:0 1px 2px rgba(20,20,30,.06),0 4px 16px rgba(20,20,30,.06);

  /* ---------- semantic layer (netsci-style; map brand → meaning) ---------- */
  --accent:var(--red); --accent-dark:var(--red-dark); --accent-tint:var(--red-tint); --accent-line:var(--red-line);
  --link:#1f4fb8; --link-hover:var(--red);
  --success:var(--g); --success-soft:var(--g-soft);
  --warning:var(--y); --warning-soft:var(--y-soft);
  --danger:var(--o); --danger-soft:var(--o-soft);
  --info:var(--b); --info-soft:var(--b-soft);
  --surface:var(--white); --surface-2:var(--gray);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--gray);color:var(--ink);font-family:var(--sans);line-height:1.55;font-size:15px}
code,pre,.mono{font-family:var(--mono)}
button{font-family:inherit}
a{color:var(--link)}
::selection{background:var(--red-tint)}
p code,li code,td code,.lc-question code,.lc-body code{background:var(--gray);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:.85em}

/* ---------- navbar (chapter name only) — Cornell-red ground (DESIGN.md §3) ---------- */
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);background:var(--nav-bg);color:var(--nav-ink);border-bottom:1px solid var(--red-dark);display:flex;align-items:center;gap:12px;padding:0 14px}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:var(--white);border-radius:8px;cursor:pointer;color:var(--ink);font-size:15px;display:grid;place-items:center;transition:.12s}
.icon-btn:hover{border-color:var(--red);color:var(--red)}
.icon-btn.on{background:var(--red);color:#fff;border-color:var(--red)}
/* red-ground variants (base .icon-btn/.track-* above stay paper-friendly: gallery/projects reuse them on white) */
.nav .icon-btn{border-color:rgba(255,255,255,.2);background:transparent;color:var(--nav-ink)}
.nav .icon-btn:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.13)}
.nav .icon-btn.on{background:#fff;color:var(--red-dark);border-color:#fff}
/* brand = Contents toggle on chapter pages (SITE.md R6); a <button> that keeps
   the brand look (background/border reset), the inner <span.sigma> keeps the
   yellow-Σ ::first-letter treatment. */
.nav .brand{display:inline-flex;align-items:center;text-decoration:none;background:transparent;border:0;padding:0;cursor:pointer;font:inherit}
.nav .sigma{font-weight:800;letter-spacing:.5px;color:var(--nav-ink);font-size:.82rem;display:inline-block}
.nav .sigma::first-letter{color:var(--y)}       /* the Σ glyph */
.nav .brand:hover .sigma{color:rgba(255,255,255,.85)}
.nav .chap{font-weight:700;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .chap .n{color:#fff;font-family:var(--mono);font-size:.74rem;font-weight:700;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:1px 6px;margin-right:8px}
.nav .spacer{flex:1}

/* R ⇄ Py track-switch pill (rendered when the chapter has a pair) */
.track-pill{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.72rem;font-weight:700;flex-shrink:0}
.track-seg{padding:4px 11px;text-decoration:none;color:var(--muted);background:var(--white);transition:.12s;display:inline-flex;align-items:center;gap:4px}
.track-seg + .track-seg{border-left:1px solid var(--line)}
.track-seg:hover{color:var(--red);background:var(--red-tint)}
.track-seg.active{background:var(--red);color:#fff}
.track-seg.active:hover{color:#fff}
/* pill on the red navbar: white text, white-tab active segment */
.nav .track-pill{border-color:rgba(255,255,255,.2)}
.nav .track-seg{background:transparent;color:var(--nav-ink)}
.nav .track-seg + .track-seg{border-left-color:rgba(255,255,255,.2)}
.nav .track-seg:hover{color:#fff;background:rgba(255,255,255,.13)}
.nav .track-seg.active{background:#fff;color:var(--red-dark)}
.nav .track-seg.active:hover{color:var(--red-dark)}

/* ---------- navbar Home control (2026-08-20) ----------
   Injected by sigma-shell.js (chapter navbar) immediately LEFT of the 🔍 search
   control. Deliberately speaks the same language as .track-pill / .home-nav
   a.navlink: translucent-white pill on the carnelian ground, white ink, solid
   white on hover. Works on both navbars (.nav and .home-nav). */
.nav .nav-home,.home-nav .nav-home{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  text-decoration:none;color:var(--nav-ink);
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:5px 12px;line-height:1.2;
  transition:background .15s,color .15s,border-color .15s;
}
.nav .nav-home:hover,.home-nav .nav-home:hover{background:#fff;color:var(--red-dark);border-color:#fff}
.nav .nav-home:focus-visible,.home-nav .nav-home:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.nav .nav-home .ico,.home-nav .nav-home .ico{font-size:.95em;line-height:1}
@media(max-width:760px){.nav .nav-home .lbl,.home-nav .nav-home .lbl{display:none}}

/* ---------- navbar 🔍 search control (2026-08-20) ----------
   search.css owns the full definition, but it is LAZY-LOADED on first use — so
   before this block the button painted as a raw UA <button> (grey/white box) on
   the red bar. These values are kept byte-identical to the .sigma-search-btn
   rule in search.css so there is no restyle flash when search.css finally
   arrives. Edit BOTH or neither. */
.nav .sigma-search-btn,.home-nav .sigma-search-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;
  box-sizing:border-box;-webkit-appearance:none;appearance:none;margin:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  color:var(--nav-ink);
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.02em;
  border-radius:999px;padding:5px 12px;cursor:pointer;line-height:1.2;
  transition:background .15s,color .15s,border-color .15s;
}
.nav .sigma-search-btn:hover,.home-nav .sigma-search-btn:hover{background:#fff;color:var(--red-dark);border-color:#fff}
.nav .sigma-search-btn:focus-visible,.home-nav .sigma-search-btn:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.nav .sigma-search-btn .kbd,.home-nav .sigma-search-btn .kbd{
  font-family:var(--mono);font-size:.68rem;font-weight:600;opacity:.85;
  border:1px solid currentColor;border-radius:4px;padding:0 4px;
}
@media(max-width:760px){
  .nav .sigma-search-btn .lbl,.nav .sigma-search-btn .kbd,
  .home-nav .sigma-search-btn .lbl,.home-nav .sigma-search-btn .kbd{display:none}
}

/* ---------- meta chip row — INTENTIONALLY HIDDEN SITE-WIDE (2026-08-20) ----------
   The off-white second bar under the red navbar (Part / Track / Time /
   Visualizer chips) read as supplementary chrome. The red navbar is now the
   only bar. sigma-shell.js no longer fills it; this rule collapses the
   <div class="meta" id="sigma-meta"> that is still baked into each chapter
   page's markup, so no chapter HTML had to be touched. Part/Track/Time stay
   discoverable on contents.html.
   TO RESTORE: set --meta-h back to 40px above, replace the rule below with the
   ORIGINAL kept here, and un-comment the chip block in sigma-shell.js.
   ORIGINAL: .meta{height:var(--meta-h);background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 16px;font-size:.76rem;overflow-x:auto;position:sticky;top:var(--nav-h);z-index:39} */
.meta{display:none}
/* .chip / .chip.* below are still used by the playground ⚡ live-status chip and
   by visualizers — they are NOT dead code. */
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:999px;padding:3px 10px;font-weight:600;border:1px solid transparent}
.chip .k{font-weight:500;color:var(--muted)}
.chip.red{background:var(--red-tint);border-color:var(--red-line);color:var(--red-dark)}
.chip.blue{background:var(--b-soft);border-color:#c3d8ff;color:#1f4fb8}
.chip.yellow{background:var(--y-soft);border-color:#efdd9a;color:#8a6d05}
.chip.purple{background:var(--p-soft);border-color:#dbc9ff;color:#6f3fd0}
.chip.green{background:var(--g-soft);border-color:#b3e0bf;color:#12331d}

/* ---------- 2-panel body: [TOC + textbook] | [visualizer + playground] ---------- */
.body{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,33%,480px);transition:grid-template-columns .22s ease;height:calc(100vh - var(--nav-h) - var(--meta-h))}
.body.no-side{grid-template-columns:minmax(0,1fr) 0}
.leftpanel{display:grid;grid-template-columns:250px minmax(0,1fr);min-width:0;overflow:hidden;transition:grid-template-columns .22s ease}
.leftpanel.no-toc{grid-template-columns:0 minmax(0,1fr)}

/* ---------- TOC sidebar (gitbook-style, inside the left panel) ---------- */
.toc{background:var(--white);border-right:1px solid var(--line);overflow:auto;padding:16px 10px}
.toc h4{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:6px 10px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
/* small home link in the Contents header (SITE.md R6 — chapters reach home in
   one click even though the brand now toggles this panel) */
.toc h4 a.toc-home{display:inline-flex;align-items:center;gap:3px;font-size:.78rem;text-transform:none;letter-spacing:0;font-weight:600;color:var(--red-dark);text-decoration:none;padding:2px 8px;border:1px solid var(--red-line);border-radius:999px;background:var(--red-tint);white-space:nowrap}
.toc h4 a.toc-home:hover{background:var(--red);color:#fff;border-color:var(--red)}
.toc a{display:block;padding:5px 10px;border-radius:7px;color:#3a3a40;text-decoration:none;font-size:.84rem;border-left:2px solid transparent}
.toc a:hover{background:var(--gray)}
.toc a.active{background:var(--red-tint);color:var(--red-dark);font-weight:600;border-left-color:var(--red)}
.toc a.lc{color:var(--red-dark)}
.toc a .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:7px;vertical-align:middle}

/* book TOC (bookdown-style): PART headings → chapter links (.chap) → the
   current chapter's nested section links (.sec). Small + token-based. */
.toc-part{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:800;margin:6px 10px 4px;padding-top:11px;border-top:1px solid var(--gray-2)}
#tocBook > .toc-part:first-child{border-top:0;padding-top:2px;margin-top:2px}
.toc a.chap{font-weight:600;color:var(--ink);line-height:1.34}
.toc a.chap.active-chap{color:var(--red-dark);font-weight:700;border-left-color:var(--red)}
.toc-secs{margin:1px 0 4px}
.toc a.sec{font-size:.79rem;padding:4px 10px 4px 22px;color:#5a5a62;line-height:1.32}
.toc a.sec .dot{margin-left:-13px}

/* ---------- center content ---------- */
.content{overflow:auto;padding:30px 44px 120px;scroll-behavior:smooth}
.prose{max-width:760px}
.prose h1{font-size:1.8rem;margin:.1em 0 .5em}
.prose h2{font-size:1.28rem;margin:1.9em 0 .5em;padding-bottom:6px;border-bottom:1px solid var(--line);scroll-margin-top:16px}
.prose h3{font-size:1.04rem;margin:1.4em 0 .3em;scroll-margin-top:16px}
.prose h2[id],.prose h3[id]{scroll-margin-top:16px}
.prose p{margin:.65em 0}
.prose ul,.prose ol{margin:.5em 0;padding-left:1.4em}
.prose li{margin:.3em 0}
.lead{color:var(--muted);font-size:1.02rem}
.chunk{position:relative;margin:.7em 0}
pre.rin{background:var(--code-bg);color:var(--code-ink);padding:13px 15px;border-radius:10px;overflow:auto;font-size:.82rem;margin:0;box-shadow:var(--shadow)}
pre.rin .cm{color:var(--code-cm)}
.chunk .send{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.08);color:#cfe;border:1px solid rgba(255,255,255,.16);border-radius:6px;font-size:.68rem;font-weight:600;padding:3px 8px;cursor:pointer;opacity:0;transition:.12s}
.chunk:hover .send{opacity:1}
.chunk .send:hover{background:var(--red);color:#fff;border-color:var(--red)}
.callout{background:var(--gray);border:1px solid var(--line);border-radius:10px;padding:12px 15px;font-size:.86rem;color:#3a3a40;margin:1.2em 0}
.callout.tip{background:var(--b-soft);border-color:#c3d8ff}
.callout.warn{background:var(--y-soft);border-color:#efdd9a;color:#7a6104}
.eq{background:#faf7fb;border:1px solid #ecd8e6;border-left:4px solid var(--mean);border-radius:8px;padding:9px 13px;font-family:var(--mono);font-size:.84rem;color:#3a2a34;margin:.7em 0;overflow-x:auto}

/* ---------- real figures (production pages) ---------- */
img.fig{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;margin:.8em 0;box-shadow:var(--shadow);display:block}
figure{margin:1.1em 0}
figure img,figure img.fig{margin:0}
figcaption{font-size:.78rem;color:var(--muted);margin-top:.5em;line-height:1.45}
figcaption b{color:#4a4a52}
/* .figph = authoring placeholder ONLY; production pages must not ship these */
.figph{background:var(--gray);border:1px dashed var(--line);border-radius:10px;padding:16px;margin:.8em 0;color:var(--muted);font-size:.82rem;text-align:center}
.figph b{color:#4a4a52}

/* ---------- ruled chart-paper panels + carbon accent bar (DESIGN.md §3) ----------
   .ruled = faint 28px grid, both axes. Applied to the figure containers
   (img.fig gets a padded paper mat so the ruling shows around the plot) and
   the visualizer panel bodies. Prose containers stay plain. */
.ruled,
img.fig,
.widget.visualizer .widget-body,
.widget.inline-tool .widget-body{
  background-color:var(--white);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:28px 28px;
}
img.fig{padding:12px}
.accent-bar{height:8px;background:linear-gradient(90deg,var(--y) 0 25%,var(--b) 25% 50%,var(--p) 50% 75%,var(--o) 75% 100%)}

/* ---------- chapter focal-animation banner (DESIGN.md §4 v2; built by sigma-shell.js) ----------
   Red-gradient block that lives INSIDE the reading column as the first child of
   #content .prose, directly above the chapter <h1> (never spans the TOC sidebar
   or the visualizer panel). Rounded card; column-width canvas; mono caption
   bottom-right; the banner's bottom edge is the page's carbon accent bar (6px
   here vs 8px on the home hero). A top-right .anim-toggle compacts the card;
   collapsed it becomes a slim ~36px bar (caption + toggle + accent stay). If
   the module script 404s or draw() throws, the canvas hides and the plain
   gradient remains — the page never breaks. */
.anim-banner{position:relative;background:linear-gradient(135deg,var(--red),var(--red-dark));border-radius:14px;overflow:hidden;margin:0 0 22px;box-shadow:var(--shadow)}
.anim-banner canvas{display:block;width:100%;height:200px}
.anim-banner .anim-cap{position:absolute;right:14px;bottom:16px;font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.8);pointer-events:none}
.anim-banner .accent-bar{height:6px}
@media (max-width:760px){.anim-banner canvas{height:150px}}

/* collapse control — white-on-translucent pill, reads on the red gradient */
.anim-toggle{position:absolute;top:10px;right:12px;z-index:3;font-family:var(--mono);font-size:.78rem;font-weight:600;line-height:1;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 12px;cursor:pointer;transition:.12s;white-space:nowrap}
.anim-toggle:hover{background:rgba(255,255,255,.32);border-color:#fff}

/* collapsed: slim red bar — canvas hidden; caption + toggle centered above the accent bar */
.anim-banner[data-collapsed="1"]{min-height:36px}
.anim-banner[data-collapsed="1"] canvas{display:none}
.anim-banner[data-collapsed="1"] .anim-cap{top:50%;bottom:auto;transform:translateY(-50%);left:16px;right:auto}
.anim-banner[data-collapsed="1"] .anim-toggle{top:50%;transform:translateY(-50%)}

/* ---------- red focal cards (DESIGN.md §3 v2) ----------
   Feature / section-lead cards on ALL top-level pages share this ONE class:
   red gradient ground, white ink, --y accents. Page-scoped CSS may size a
   .focal, never recolor it. Never body-length text on red — title + at most
   two short lines. */
.focal{position:relative;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;
  border:0;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.focal h1,.focal h2,.focal h3,.focal h4{color:#fff}
.focal a{color:var(--y);font-weight:700}
.focal small,.focal .muted{color:rgba(255,255,255,.78)}

table.tbl{border-collapse:collapse;width:100%;font-size:.84rem;margin:.7em 0;box-shadow:var(--shadow);border-radius:8px;overflow:hidden}
table.tbl th{background:#2a2b33;color:#e9edf2;text-align:left;padding:7px 11px;font-size:.78rem}
table.tbl td{border-bottom:1px solid var(--line);padding:7px 11px;vertical-align:top}
table.tbl tr:nth-child(even) td{background:#fafafb}

/* KaTeX: keep long display equations scrollable instead of overflowing */
.katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}
.katex{font-size:1.02em}

/* ---------- learning-check cards ---------- */
.lc-card{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:18px 20px;margin:1.6em 0;box-shadow:var(--shadow)}
.lc-header{display:flex;align-items:baseline;gap:11px;margin-bottom:11px}
.lc-number{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:3px 8px;border-radius:5px;flex-shrink:0;font-weight:700}
.lc-question{font-size:1rem;line-height:1.45;font-weight:600}
.lc-question .mono{background:var(--gray);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:.85em;font-weight:400}
.lc-body{font-size:.92rem;margin:.4em 0 .8em}
.lc-body ol,.lc-body ul{padding-left:1.3em;margin:.4em 0}
.lc-options{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.lc-option{display:flex;align-items:flex-start;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer;transition:.13s;font-size:.9rem;line-height:1.45;user-select:none}
.lc-option:hover{border-color:var(--red);background:var(--red-tint)}
.lc-option.correct{border-color:var(--g);background:var(--g-soft)}
.lc-option.incorrect{border-color:var(--o);background:var(--o-soft)}
.lc-option.revealed{border-color:var(--g);background:var(--g-soft);box-shadow:inset 0 0 0 1px var(--g)}
.option-letter{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--red);min-width:16px;flex-shrink:0}
.lc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.lc-btn{border:1px solid var(--line);background:var(--white);border-radius:8px;font-size:.8rem;font-weight:600;padding:6px 12px;cursor:pointer;color:#3a3a40;transition:.12s}
.lc-btn:hover{border-color:var(--red);color:var(--red)}
.lc-btn.hint{border-color:#efdd9a;background:var(--y-soft);color:#8a6d05}
.lc-feedback{display:none;font-size:.88rem;padding:12px 15px;border-radius:9px;line-height:1.55;margin-top:11px}
.lc-feedback.show{display:block}
.feedback-hint{background:var(--y-soft);border:1px solid #efdd9a;color:#7a6104}
.feedback-answer{background:var(--g-soft);border:1px solid #b3e0bf;color:#12331d}
.feedback-answer p{margin:.5em 0}
.feedback-answer ol,.feedback-answer ul{padding-left:1.2em}
.feedback-answer pre{background:var(--code-bg);color:var(--code-ink);padding:10px 12px;border-radius:8px;overflow:auto;font-size:.79rem;margin:8px 0}
.feedback-answer pre .cm{color:var(--code-cm)}
/* MCQ lead-in + shell-injected justification row + submission export (specs/LEARNING-CHECKS.md) */
.lc-mc-q{font-size:.9rem;font-weight:600;margin:.2em 0 .6em}
.lc-justify{margin:2px 0 11px}
.lc-justify label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:4px}
.lc-justify textarea{width:100%;box-sizing:border-box;font:inherit;font-size:.86rem;line-height:1.45;border:1px solid var(--line);border-radius:8px;padding:7px 10px;resize:vertical;min-height:2.3em;background:var(--white);color:var(--ink)}
.lc-justify textarea::placeholder{color:var(--muted)}
.lc-justify textarea:focus{outline:none;border-color:var(--red);background:var(--red-tint)}
.lc-export{margin:1.4em 0 0;display:flex;flex-direction:column;gap:9px}
.lc-export-btn{align-self:flex-start}
.lc-export-out{width:100%;box-sizing:border-box;min-height:180px;font-family:var(--mono);font-size:.76rem;line-height:1.5;border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:var(--code-bg);color:var(--code-ink);white-space:pre;overflow:auto}

/* ---------- prev / next footer bar (rendered by the shell from contract order) ---------- */
.prevnext{display:flex;gap:12px;max-width:760px;margin:3em 0 0;border-top:1px solid var(--line);padding-top:20px}
.prevnext a{flex:1;display:block;text-decoration:none;border:1px solid var(--line);border-radius:11px;padding:12px 15px;background:var(--white);transition:.13s;box-shadow:var(--shadow)}
.prevnext a:hover{border-color:var(--red)}
.prevnext a.next{text-align:right}
.prevnext .dir{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.prevnext .pt{display:block;font-weight:700;color:var(--ink);font-size:.94rem;margin-top:3px}
.prevnext .pp{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}
.prevnext .spacerlink{flex:1}

/* ---------- right side panel ---------- */
.side{background:var(--gray);border-left:1px solid var(--line);position:relative;overflow:hidden}
.side-scroll{height:100%;overflow:auto;padding:12px 12px 40px}
.side-toggle{position:absolute;top:12px;left:-1px;z-index:5;width:22px;height:44px;border:1px solid var(--line);border-left:0;background:var(--white);border-radius:0 8px 8px 0;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.side-toggle:hover{color:var(--red)}
.side-reopen{position:fixed;right:0;top:calc(var(--nav-h) + var(--meta-h) + 14px);z-index:38;display:none;background:var(--red);color:#fff;border:0;border-radius:8px 0 0 8px;padding:12px 8px;cursor:pointer;writing-mode:vertical-rl;font-size:.72rem;font-weight:700;letter-spacing:.06em;box-shadow:var(--shadow)}
body.side-closed .side-reopen{display:block}
.fab{position:fixed;right:16px;bottom:16px;z-index:45;display:none;width:54px;height:54px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:1.35rem;cursor:pointer;place-items:center;box-shadow:0 6px 18px rgba(179,27,27,.4)}

.widget{background:var(--white);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.widget-head{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;user-select:none;border-bottom:1px solid var(--line)}
.widget.collapsed .widget-head{border-bottom:0}
.widget-head .ico{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:.8rem;flex-shrink:0}
.widget.visualizer .widget-head .ico{background:var(--p-soft);color:#6f3fd0}
.widget.playground .widget-head .ico{background:var(--red-tint);color:var(--red)}
.widget-title{font-weight:700;font-size:.92rem}
.widget-title small{display:block;font-weight:400;font-size:.7rem;color:var(--muted)}
.widget-head .chev{margin-left:auto;color:var(--muted);transition:transform .18s}
.widget.collapsed .chev{transform:rotate(-90deg)}
.widget-body{padding:13px}
.widget.collapsed .widget-body{display:none}
/* Inline extras (SPEC §7a): a Visualizer-format tool embedded in the prose flow,
   constrained to the prose column, with the purple Visualizer ico treatment. */
.widget.inline-tool{max-width:var(--prose-w,760px);margin:1.7em 0}
.widget.inline-tool .widget-head .ico{background:var(--p-soft);color:#6f3fd0}

/* ---------- Visualizer building blocks (shared; used by chapter visualizers) ---------- */
.vz-hint{font-size:.76rem;color:var(--muted);margin:0 0 10px}
.mini{background:var(--gray);border:1px solid var(--line);border-radius:7px;font-size:.74rem;padding:4px 10px;cursor:pointer;font-weight:600;color:#3a3a40}
.mini:hover{border-color:var(--red);color:var(--red)}
.btn-primary{background:var(--red);color:#fff;border:0;border-radius:8px;font-weight:700;font-size:.82rem;padding:8px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.12s}
.btn-primary:hover{background:var(--red-dark)}
.btn-primary.full{width:100%;justify-content:center}
.btn-ghost{background:var(--white);color:#3a3a40;border:1px solid var(--line);border-radius:8px;font-weight:600;font-size:.8rem;padding:7px 12px;cursor:pointer;transition:.12s}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.genbox{background:var(--code-bg);color:var(--code-ink);border-radius:9px;padding:10px 12px;font-family:var(--mono);font-size:.75rem;white-space:pre;overflow:auto;margin:9px 0}
.genbox .cm{color:var(--code-cm)}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
/* editable numeric-vector chips (distribution-style visualizers) */
.valwrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.valchip{display:inline-flex;align-items:center;background:var(--gray);border:1px solid var(--line);border-radius:7px}
.valchip input{width:46px;border:0;background:transparent;font-family:var(--mono);font-size:.78rem;padding:5px 4px 5px 7px;text-align:center;color:var(--ink)}
.valchip input:focus{outline:2px solid var(--red);border-radius:7px}
.valchip .x{cursor:pointer;color:var(--o);font-weight:700;padding:0 7px 0 1px;font-size:.82rem;opacity:.55}
.valchip .x:hover{opacity:1}
/* editable data.frame builder (table-style visualizers) */
table.df{border-collapse:collapse;width:100%;font-size:.8rem;margin-bottom:9px}
table.df th{background:#2a2b33;color:#bfe9cf;font-family:var(--mono);font-weight:600;text-align:left;padding:5px 8px;font-size:.72rem}
table.df td{border:1px solid var(--line);padding:0}
table.df input{border:0;width:100%;padding:5px 8px;font-family:var(--mono);font-size:.78rem;background:transparent;color:var(--ink)}
table.df input:focus{outline:2px solid var(--red);background:var(--red-tint)}
table.df .del{color:var(--o);cursor:pointer;text-align:center;font-weight:700;padding:5px}
/* stat readout grid */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2px 0 11px}
.stat{background:var(--gray);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.stat .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.stat .v{font-family:var(--mono);font-size:.9rem;font-weight:700}
.stat.hl{background:var(--red-tint);border-color:var(--red-line)} .stat.hl .v{color:var(--mean)}
.stat.hl2{background:var(--b-soft);border-color:#c3d8ff} .stat.hl2 .v{color:var(--median)}
/* histogram svg */
.plot-svg{width:100%;display:block}
.plot-svg .bar{fill:#c9d4e8}
.plot-svg .axis{stroke:#b9b9c0;stroke-width:1}
.plot-svg .mean-line{stroke:var(--mean);stroke-width:2}
.plot-svg .median-line{stroke:var(--median);stroke-width:2;stroke-dasharray:4 3}
.plot-svg text{font-family:var(--sans);font-size:9px;fill:var(--muted)}
.legend{display:flex;gap:14px;font-size:.72rem;margin:4px 0 10px}
.legend b{font-weight:700}
.legend .lmean{color:var(--mean)} .legend .lmed{color:var(--median)}

/* ---------- Playground ---------- */
.editor{width:100%;min-height:150px;background:var(--code-bg);color:var(--code-ink);border:0;border-radius:9px;font-family:var(--mono);font-size:.81rem;padding:12px;resize:vertical;line-height:1.55;tab-size:2}
.pg-row{display:flex;gap:8px;align-items:center;margin:9px 0 0;flex-wrap:wrap}
.pg-hint{font-size:.72rem;color:var(--muted);margin-left:auto}
.btn-live{background:var(--p-soft);color:#6f3fd0;border:1px solid #dbc9ff;border-radius:8px;font-weight:700;font-size:.8rem;padding:7px 12px;cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:5px}
.btn-live:hover{background:var(--p);color:#fff;border-color:var(--p)}
.btn-live.booting{cursor:progress;border-color:var(--p);color:#6f3fd0;animation:pg-pulse 1.1s ease-in-out infinite}
@keyframes pg-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.btn-live.live{background:var(--g-soft);color:#1a7a37;border-color:#a6dfb6;cursor:default;animation:none}
.btn-live.live:hover{background:var(--g-soft);color:#1a7a37;border-color:#a6dfb6}
.btn-live:disabled{cursor:default}
.btn-live.retry{background:var(--y-soft);color:#7a5c00;border-color:#e7d187;cursor:pointer;animation:none}
.btn-live.retry:hover{background:#f3e4a8;color:#5f4800;border-color:#d9be6a}
.pg-clear{color:var(--muted)}
.pg-clear:hover{border-color:var(--red);color:var(--red)}
.pg-clear.armed{background:var(--red-tint);border-color:var(--red);color:var(--red-dark);font-weight:700}
.pg-clear:disabled{opacity:.6;cursor:progress}
.output{margin-top:11px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.out-tabs{display:flex;background:var(--gray);border-bottom:1px solid var(--line)}
.out-tab{padding:7px 13px;font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.out-tab:hover{color:var(--ink)}
.out-tab.active{color:var(--red);border-bottom-color:var(--red);background:var(--white)}
.out-tab .badge{display:inline-block;min-width:16px;text-align:center;background:var(--red);color:#fff;border-radius:9px;font-size:.62rem;padding:0 5px;margin-left:5px}
.out-panes{background:var(--white)}
.out-pane{display:none;padding:11px 13px;min-height:64px;max-height:230px;overflow:auto}
.out-pane.active{display:block}
.console{font-family:var(--mono);font-size:.79rem;white-space:pre-wrap;color:#20331f}
.console .err{color:var(--o)} .console .cmt{color:var(--muted)} .console .prompt{color:var(--red);font-weight:700} .console .note{color:var(--b)}
table.env{width:100%;border-collapse:collapse;font-size:.78rem}
table.env th{text-align:left;color:var(--muted);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--line);font-size:.72rem}
table.env td{padding:4px 8px;border-bottom:1px solid var(--gray-2);font-family:var(--mono);font-size:.76rem}
table.env .cls{color:var(--p)}
.env-empty,.plots-empty{color:var(--muted);font-size:.8rem;font-style:italic}

/* =========================================================================
   HOME PAGE (index.html) — hero, part cards, chapter grid with track badges
   ========================================================================= */
.home{max-width:1040px;margin:0 auto;padding:0 22px 90px}
/* .proto-banner (the "v3 preview" strip) was RETIRED 2026-08-20 - do not re-add. */
.home-nav{position:sticky;top:0;z-index:30;height:var(--nav-h);background:var(--nav-bg);border-bottom:1px solid var(--red-dark);display:flex;align-items:center;gap:12px;padding:0 22px}
/* brand = contents-drawer toggle on top-level pages (SITE.md R6) — stays an
   <a> (keeps the yellow-Σ ::first-letter look); its navigation is cancelled in
   site-nav.js. cursor:pointer + a subtle hover signal it acts as a control. */
.home-nav .sigma{font-weight:800;letter-spacing:.5px;color:var(--nav-ink);font-size:.9rem;text-decoration:none;display:inline-block;cursor:pointer}
.home-nav .sigma::first-letter{color:var(--y)}  /* white brand, yellow Σ (DESIGN.md §3) */
.home-nav .sigma:hover{color:rgba(255,255,255,.85)}
.home-nav .sigma:hover::first-letter{color:var(--y)}

/* ---------- contents drawer (SITE.md R6; built by site-nav.js from the contract) ----------
   Slide-in left drawer of every part → its chapters (R main link + small Py
   alternate for paired chapters). Markup is JS-rendered (verify_site check b
   greps the page source for "navlink"/"aria-current"; drawer links use dl-*). */
.site-drawer{position:fixed;inset:0;z-index:60}
.site-drawer[hidden]{display:none}
.site-drawer-scrim{position:absolute;inset:0;background:rgba(42,20,20,.42);opacity:0;transition:opacity .22s ease}
.site-drawer.open .site-drawer-scrim{opacity:1}
.site-drawer-panel{position:absolute;top:0;left:0;height:100%;width:min(330px,86vw);background:var(--white);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transform:translateX(-100%);transition:transform .22s ease;will-change:transform}
.site-drawer.open .site-drawer-panel{transform:none}
.site-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--nav-bg);color:#fff;flex:none}
.site-drawer-title{font-weight:800;letter-spacing:.5px;font-size:.9rem}
.site-drawer-title::first-letter{color:var(--y)}
.site-drawer-x{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;width:30px;height:30px;border-radius:8px;font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.12s}
.site-drawer-x:hover{background:rgba(255,255,255,.3);border-color:#fff}
.site-drawer-body{overflow:auto;padding:12px 10px 34px;flex:1}
.site-drawer .dl-part{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:800;margin:14px 10px 4px;padding-top:11px;border-top:1px solid var(--gray-2)}
.site-drawer-body > .dl-part:first-child{border-top:0;padding-top:2px;margin-top:2px}
.site-drawer .dl-row{display:flex;align-items:center;gap:4px}
.site-drawer .dl-chap{flex:1;min-width:0;display:block;padding:6px 10px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:.82rem;font-weight:600;line-height:1.32;border-left:2px solid transparent}
.site-drawer .dl-chap:hover{background:var(--gray);border-left-color:var(--red)}
.site-drawer .dl-alt{flex:none;font-size:.78rem;font-weight:700;color:var(--muted);text-decoration:none;padding:3px 9px;border:1px solid var(--line);border-radius:999px;margin-right:8px}
.site-drawer .dl-alt:hover{border-color:var(--red);color:var(--red);background:var(--red-tint)}
.home-nav .spacer{flex:1}
.home-nav a.navlink{color:var(--nav-ink);text-decoration:none;font-size:.84rem;font-weight:600;padding:6px 10px;border-radius:7px}
.home-nav a.navlink:hover{background:rgba(255,255,255,.13);color:#fff}
.home-nav .navlink.current{background:#fff;color:var(--red-dark)}   /* white tab */
.home-nav .navlink.current:hover{background:#fff;color:var(--red-dark)}
.home-nav .navlink .frame-dot{font-size:.55em;vertical-align:super;margin-left:3px;color:var(--y);opacity:.9}
.home-nav .navlink.current .frame-dot{color:var(--red);opacity:.55}
.hero{background:linear-gradient(135deg,#fff 0%,var(--red-tint) 120%);border:1px solid var(--line);border-radius:20px;padding:44px 40px;margin:26px 0 30px;box-shadow:var(--shadow)}
.hero .sig{font-family:var(--mono);font-size:2.4rem;font-weight:800;color:var(--red);line-height:1}
.hero h1{font-size:2rem;margin:.25em 0 .1em;letter-spacing:-.01em}
.hero .tag{color:var(--muted);font-size:1.05rem;max-width:640px;margin:.4em 0 1.3em}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:11px;padding:12px 20px;font-weight:700;font-size:.92rem;transition:.13s}
.cta.primary{background:var(--red);color:#fff}
.cta.primary:hover{background:var(--red-dark)}
.cta.secondary{background:var(--white);color:var(--red);border:1px solid var(--red-line)}
.cta.secondary:hover{border-color:var(--red);background:var(--red-tint)}
.part-card{background:var(--white);border:1px solid var(--line);border-radius:16px;margin:18px 0;box-shadow:var(--shadow);overflow:hidden}
.part-head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--red-tint),#fff 60%)}
.part-head .pn{font-family:var(--mono);font-weight:800;font-size:.8rem;color:#fff;background:var(--red);border-radius:8px;padding:5px 10px;flex-shrink:0}
.part-head h2{font-size:1.14rem;margin:0}
.part-head .count{margin-left:auto;font-size:.74rem;color:var(--muted);font-weight:600;white-space:nowrap}
.ch-grid{display:flex;flex-direction:column}
.ch-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 22px;border-bottom:1px solid var(--gray-2)}
.ch-row:last-child{border-bottom:0}
.ch-row:hover{background:var(--gray)}
.ch-row .ord{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--muted);text-align:center}
.ch-main .ct{font-weight:700;font-size:.96rem;color:var(--ink);line-height:1.3}
a.ct{display:inline-block;text-decoration:none}
a.ct:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.ch-main .cvz{font-size:.74rem;color:var(--muted);margin-top:2px}
.ch-main .cvz b{color:#6f3fd0;font-weight:600}
.ch-right{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ch-time{font-size:.72rem;color:var(--muted);font-family:var(--mono);white-space:nowrap}
.badges{display:inline-flex;gap:6px}
.badge-r,.badge-py{display:inline-flex;align-items:center;text-decoration:none;font-weight:800;font-size:.72rem;border-radius:7px;padding:4px 10px;border:1px solid transparent;transition:.12s}
.badge-r{background:var(--b-soft);color:#1f4fb8;border-color:#c3d8ff}
.badge-r:hover{background:var(--b);color:#fff;border-color:var(--b)}
.badge-py{background:var(--y-soft);color:#8a6d05;border-color:#efdd9a}
.badge-py:hover{background:var(--y);color:#3a2e00;border-color:var(--y)}
.home-footer{max-width:1040px;margin:40px auto 0;padding:24px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:.84rem;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.home-footer a{color:var(--link);text-decoration:none;font-weight:600}
.home-footer a:hover{color:var(--red)}

/* =========================================================================
   DESIGN GUIDE (design.html) — single-column reference using sigma.css
   ========================================================================= */
.guide{max-width:940px;margin:0 auto;padding:30px 24px 90px}
.guide h1{font-size:1.9rem;margin:.2em 0}
.guide h2{font-size:1.3rem;margin:1.8em 0 .5em;padding-bottom:6px;border-bottom:2px solid var(--red)}
.guide h3{font-size:1rem;margin:1.3em 0 .4em;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}
.guide .demo{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px;margin:.8em 0;box-shadow:var(--shadow)}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:.8em 0}
.sw{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white)}
.sw .chip-color{height:56px}
.sw .sw-meta{padding:8px 10px}
.sw .sw-name{font-weight:700;font-size:.8rem}
.sw .sw-hex{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.sw .sw-use{font-size:.7rem;color:var(--muted);margin-top:2px}
.type-row{display:flex;align-items:baseline;gap:14px;margin:.5em 0;border-bottom:1px solid var(--gray-2);padding-bottom:.5em}
.type-row .lbl{font-family:var(--mono);font-size:.7rem;color:var(--muted);width:120px;flex-shrink:0}

@media (max-width:760px){
  .body,.body.no-side{grid-template-columns:1fr;height:auto;display:block}
  .leftpanel,.leftpanel.no-toc{grid-template-columns:1fr;display:block}
  .toc{display:none}
  .content{overflow:visible}
  .side,.body.no-side .side{border-left:0;border-top:2px solid var(--red);height:auto}
  .side-scroll{height:auto}
  .side-toggle{display:none}
  body.side-closed .side-reopen{display:none}
  .fab{display:grid}
  .prevnext{flex-direction:column}
  .hero{padding:30px 22px}
  .ch-row{grid-template-columns:32px minmax(0,1fr);row-gap:8px}
  .ch-right{grid-column:1 / -1;justify-content:flex-start}
  /* top-level nav: wrap links instead of overflowing the body (no fixed height
     dependency here — top-level pages are normal flow, not the chapter grid) */
  .home-nav{height:auto;flex-wrap:wrap;padding:8px 16px;row-gap:4px}
  .home-nav .spacer{display:none}
}