/* ============================================================
   Thinking, Fast and Slow — shared stylesheet
   Family: categoryTheory. Palette: plum-wine (System 2, slow)
   × warm amber (System 1, fast). All code-like surfaces LIGHT.
   Sibling chapters APPEND widget CSS at the chNN anchors below.
   ============================================================ */

/* === TOKENS === */
:root {
  --bg: #FAFAF8;
  --bg-card: #FFFFFF;
  --bg-sunken: #F4F3F9;
  --text: #1A1A2E;
  --text-muted: #5C5C7A;
  --accent: #6E3A5E;           /* deep plum-wine — System 2, slow & deliberate */
  --accent-dark: #572E4A;
  --accent-light: #F1E5ED;
  --accent-secondary: #D98E32; /* warm amber — System 1, fast & hot */
  --accent-secondary-light: #FAEFDD;
  --warn: #D97706;
  --warn-light: #FDF1E0;
  --ok: #2D7D46;
  --ok-light: #E8F5EC;
  --err: #DC2626;
  --err-light: #FEE8E8;
  --grid-line: rgba(110, 58, 94, 0.06);
  --border: #E5E3EC;
  --shadow: rgba(40, 30, 90, 0.07);
  --radius: 0.75rem;
  --mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;
  /* light code theme — every code-like surface uses these (never dark) */
  --code-bg: #EEF2F5;
  --code-bg-soft: #E1E7EC;
  --code-border: #D3DAE0;
  --code-fg: #1F2533;
  --code-cm: #7A8590;
  --code-kw: #9C2D6E;
  --code-ty: #2D6E78;
  --code-fn: #2F5FA3;
  --code-op: #B5552A;
  --code-st: #3B7A4B;
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === LAYOUT === */
.container { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem; }
.wide { max-width: 1040px; }

/* === HEADER === */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 8px var(--shadow);
}
header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; max-width: 1040px;
}
.wordmark {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.95rem; color: var(--text);
}
.wordmark:hover { text-decoration: none; }
.wordmark .mk {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
}
.wordmark span { opacity: 0.5; font-weight: 400; }
header nav { display: flex; gap: 1.2rem; }
header nav a {
  font-size: 0.85rem; color: var(--text-muted);
  transition: color 0.2s;
}
header nav a:hover { color: var(--accent); text-decoration: none; }
/* scroll progress */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--accent); width: 0%;
  transition: width 0.1s linear;
}

/* === CHAPTER STRIP === */
.ch-strip {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ch-strip::-webkit-scrollbar { display: none; }
.ch-strip .container {
  display: flex; align-items: center; gap: 0.4rem;
  padding-top: 0.55rem; padding-bottom: 0.55rem;
  max-width: 1040px;
}
.ch-pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; color: var(--text-muted);
  padding: 0.32rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card);
  transition: all 0.15s ease-out;
  text-decoration: none;
  white-space: nowrap;
}
.ch-pill:hover { color: var(--accent-dark); border-color: var(--accent); text-decoration: none; }
.ch-pill .ch-num {
  font-family: var(--mono); font-weight: 700; font-size: 0.7rem;
  color: var(--accent);
}
.ch-pill .ch-name { font-weight: 500; }
.ch-pill.current {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.ch-pill.current .ch-num { color: rgba(255,255,255,0.75); }
.ch-pill.current:hover { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }
.ch-divider {
  width: 12px; height: 1px; background: var(--border); flex-shrink: 0;
}
@media (max-width: 767px) {
  .ch-pill .ch-name { display: none; }
  .ch-pill { padding: 0.28rem 0.5rem; }
  .ch-divider { width: 6px; }
}

/* === HERO === */
.hero {
  padding: 4.5rem 0 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-dark);
  background: var(--accent-light);
  padding: 0.35rem 0.8rem; border-radius: 999px;
  margin-bottom: 1.25rem;
  animation: fadeUp 0.6s ease-out both;
}
.hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3rem; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 0.85rem;
  animation: fadeUp 0.6s ease-out 0.08s both;
}
.hero-title em { font-style: italic; color: var(--accent); }
.hero-subtitle {
  font-size: 1.15rem; color: var(--text-muted);
  max-width: 620px; margin: 0 auto 2rem;
  animation: fadeUp 0.6s ease-out 0.16s both;
}
.hero-art { animation: fadeUp 0.6s ease-out 0.28s both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === SECTIONS === */
section.lesson { padding: 1rem 0; }
.block { margin: 2.75rem 0; }
h2.sec {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
  scroll-margin-top: 72px;
}
h2.sec .num {
  font-family: var(--mono); font-size: 0.95rem; font-weight: 500;
  color: var(--accent); margin-right: 0.5rem;
  vertical-align: 0.12em;
}
h3.sub { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
p.lead { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 1rem; }
.prose p { margin-bottom: 0.9rem; }
.prose ul { margin: 0.4rem 0 1rem 1.3rem; }
.prose li { margin-bottom: 0.35rem; }

/* inline term chips */
.m {
  font-family: var(--mono); font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 0.08em 0.38em; border-radius: 4px;
  white-space: nowrap;
}
.m.s1 { color: #9A5E12; background: var(--accent-secondary-light); }
.m.s2 { color: var(--accent-dark); background: var(--accent-light); }

/* === CALLOUT === */
.callout {
  display: flex; gap: 0.85rem;
  background: var(--accent-light);
  border: 1px solid #E4CFDD;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.callout .ic { font-size: 1.2rem; flex-shrink: 0; line-height: 1.5; }
.callout.warn { background: var(--warn-light); border-color: #f3dcb6; border-left-color: var(--warn); }
.callout strong { color: var(--accent-dark); }
.callout.warn strong { color: var(--warn); }

/* === 2026 REPLICATION-CHECK ASIDE === */
.check-2026 {
  background: var(--accent-secondary-light);
  border: 1px solid #F0DCB8;
  border-left: 3px solid var(--accent-secondary);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}
.check-2026 .tag {
  display: block;
  font-variant: all-small-caps;
  letter-spacing: 0.1em;
  font-weight: 700; font-size: 0.92rem;
  color: #9A5E12;
  margin-bottom: 0.3rem;
}
.check-2026 strong { color: #9A5E12; }

/* === FIGURE / WIDGET === */
.widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px var(--shadow);
}
.widget-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.widget-title {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 0.45rem;
}
.widget-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hint { font-size: 0.8rem; color: var(--text-muted); }

svg.diagram { width: 100%; height: auto; display: block; touch-action: none; user-select: none; }
.diagram-wrap { background: var(--bg-sunken); border-radius: 0.5rem; padding: 0.5rem; }

/* === BUTTONS / CONTROLS === */
.controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; align-items: center; }
.btn {
  font: inherit; font-size: 0.85rem; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); border-radius: 8px;
  padding: 0.45rem 0.85rem; cursor: pointer;
  transition: all 0.15s ease-out;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-dark); color: #fff; }
.btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.readout {
  font-family: var(--mono); font-size: 0.85rem;
  color: var(--text-muted); margin-left: auto;
}
select.pick {
  font: inherit; font-family: var(--mono); font-size: 0.85rem;
  padding: 0.3rem 0.5rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  cursor: pointer;
}
input[type="range"].slider { accent-color: var(--accent); }

/* === CODE-CARD PATTERN (LIGHT — never dark) ===
   In this book the card is repurposed as the "Fast ⇄ Slow" prose card:
   tab 1 "⚡ System 1 says", tab 2 "🧠 System 2 checks". Panes hold
   .fs-pane prose on the light --code-bg surface. */
.code-card { border: 1px solid var(--code-border); border-radius: var(--radius); overflow: hidden; margin: 1.5rem 0; }
.code-tabs { display: flex; background: var(--code-bg-soft); border-bottom: 1px solid var(--code-border); }
.code-tab {
  font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--text-muted); background: transparent; border: none;
  padding: 0.6rem 1.05rem; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.code-tab:hover { color: var(--accent-dark); }
.code-tab.active { color: var(--accent-dark); background: var(--code-bg); border-bottom-color: var(--accent); }
.code-pane { display: none; }
.code-pane.active { display: block; }
/* mono surface, kept LIGHT, for any code-ish material siblings need */
pre.code {
  margin: 0; padding: 1.1rem 1.2rem;
  background: var(--code-bg); color: var(--code-fg);
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.7;
  overflow-x: auto;
}
pre.code .cm { color: var(--code-cm); font-style: italic; }
pre.code .kw { color: var(--code-kw); }
pre.code .ty { color: var(--code-ty); }
pre.code .fn { color: var(--code-fn); }
pre.code .op { color: var(--code-op); }
pre.code .st { color: var(--code-st); }
/* Fast ⇄ Slow prose pane — normal Inter on the light code surface */
.fs-pane {
  background: var(--code-bg); color: var(--code-fg);
  padding: 1.15rem 1.35rem;
  font-size: 0.95rem; line-height: 1.7;
}
.fs-pane p { margin-bottom: 0.85rem; }
.fs-pane p:last-child { margin-bottom: 0; }
.fs-pane strong { color: var(--accent-dark); }
.fs-pane .fs-math {
  font-family: var(--mono); font-size: 0.87em;
  background: var(--code-bg-soft); border: 1px solid var(--code-border);
  padding: 0.08em 0.4em; border-radius: 4px;
}

/* === QUIZ === */
.quiz-q { margin-bottom: 1.4rem; }
.quiz-q:last-child { margin-bottom: 0; }
.quiz-q .q { font-weight: 600; margin-bottom: 0.6rem; }
.quiz-q .q .qn {
  font-family: var(--mono); color: var(--accent); font-size: 0.85rem; margin-right: 0.4rem;
}
.opt {
  width: 100%; text-align: left;
  font: inherit; font-size: 0.92rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.6rem 0.85rem; margin-bottom: 0.5rem;
  cursor: pointer; transition: all 0.12s ease-out;
  display: flex; align-items: center; gap: 0.6rem;
}
.opt:hover:not(.locked) { border-color: var(--accent); background: var(--accent-light); }
.opt .mark { width: 18px; flex-shrink: 0; font-weight: 700; }
.opt.correct { border-color: var(--ok); background: var(--ok-light); color: #1b5e2e; }
.opt.wrong { border-color: var(--err); background: var(--err-light); color: #b91c1c; }
.opt.locked { cursor: default; }
.quiz-fb { font-size: 0.88rem; margin-top: 0.4rem; min-height: 1.2em; color: var(--text-muted); }
.quiz-fb.show.ok { color: var(--ok); }
.quiz-fb.show.no { color: var(--err); }

/* === NEXT / FOOTER === */
.next-card {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-secondary-light));
  border: 1px solid #E4CFDD; border-radius: var(--radius);
  padding: 1.25rem 1.4rem; margin: 2.5rem 0 1rem;
}
.next-card .big { font-size: 1.6rem; }
.next-card .t1 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 600; }
.next-card .t2 { font-weight: 600; font-size: 1.05rem; }
.next-card .t3 { font-size: 0.88rem; color: var(--text-muted); }
.next-card .lock { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); }
a.next-card { color: inherit; text-decoration: none; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
a.next-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); text-decoration: none; }
.next-card .arrow { margin-left: auto; font-size: 1.4rem; color: var(--accent-dark); transition: transform 0.2s ease-out; }
a.next-card:hover .arrow { transform: translateX(4px); }
/* series-complete finale (Ch.12) */
.next-card.finale {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-secondary-light));
  border-color: #E0C9D6;
  padding: 1.6rem 1.7rem;
}
.next-card.finale .big { font-size: 2.3rem; }
.next-card.finale .t2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em;
}

footer {
  padding: 2.5rem 0; text-align: center;
  font-size: 0.8rem; color: var(--text-muted);
  border-top: 1px solid var(--border); margin-top: 1rem;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
  .hero { padding: 3rem 0 2rem; }
  .hero-title { font-size: 2.1rem; }
  .hero-subtitle { font-size: 1rem; }
  h2.sec { font-size: 1.4rem; }
  header nav a:not(.nav-keep) { display: none; }
  .readout { margin-left: 0; width: 100%; }
}

/* ===== ch01 widgets ===== */
/* trap tester (CRT) */
.ch01-crt-q { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.ch01-crt-q .qn { font-family: var(--mono); font-weight: 500; color: var(--accent); font-size: 0.85rem; margin-right: 0.45rem; }
.ch01-answer-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ch01-num {
  font: inherit; font-family: var(--mono); font-size: 0.95rem;
  width: 7.5rem; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
}
.ch01-num:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
.ch01-unit { font-size: 0.9rem; color: var(--text-muted); }
.ch01-fb { margin-top: 0.85rem; font-size: 0.92rem; }
.ch01-fb .verdict { font-weight: 600; }
.ch01-fb .verdict.v-s1 { color: #9A5E12; }
.ch01-fb .verdict.v-s2 { color: var(--accent-dark); }
.ch01-algebra {
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.8;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.7rem 1rem; margin-top: 0.6rem; overflow-x: auto;
}
.ch01-tally { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ch01-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600; padding: 0.22rem 0.65rem; border-radius: 999px;
}
.ch01-chip.s1 { background: var(--accent-secondary-light); color: #9A5E12; border: 1px solid #F0DCB8; }
.ch01-chip.s2 { background: var(--accent-light); color: var(--accent-dark); border: 1px solid #E4CFDD; }
/* Müller-Lyer */
.ch01-muller-lbl { font-size: 0.8rem; color: var(--text-muted); }
/* effort meter (pupil) */
.ch01-pupil-stage { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin-top: 0.5rem; }
.ch01-pupil-eye { flex: 0 0 210px; background: var(--bg-sunken); border-radius: 0.5rem; padding: 0.5rem; }
.ch01-pupil-eye svg { width: 100%; height: auto; display: block; }
.ch01-pupil-task { flex: 1; min-width: 250px; }
.ch01-digits {
  font-family: var(--mono); font-size: 1.55rem; font-weight: 600;
  letter-spacing: 0.4em; text-indent: 0.4em; text-align: center;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.55rem 0; margin-bottom: 0.75rem; min-height: 3.1rem;
}
@media (max-width: 767px) {
  .ch01-pupil-eye { flex-basis: 100%; }
}

/* ===== ch02 widgets ===== */
/* ===== ch02 widgets ===== */
/* bananas ⇄ vomit big-type pair */
.ch02-pair {
  display: flex; align-items: baseline; justify-content: center; gap: 1.6rem; flex-wrap: wrap;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 6vw, 2.8rem); font-weight: 600; letter-spacing: -0.01em;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2.1rem 1rem; margin: 1.4rem 0;
}
.ch02-pair .w1 { color: #9A5E12; }
.ch02-pair .w2 { color: var(--accent-dark); }
.ch02-pair .sep { font-family: var(--mono); font-size: 1rem; color: var(--text-muted); font-weight: 400; align-self: center; }

/* widget 1 — association network */
.ch02-net-node { cursor: pointer; outline: none; }
.ch02-net-node circle { transition: fill 0.35s ease-out, stroke 0.35s ease-out; }
.ch02-net-node text { font-family: var(--mono); pointer-events: none; user-select: none; }
.ch02-net-node:focus-visible circle { stroke: var(--accent); stroke-width: 3; }
.ch02-net-edge { transition: stroke 0.4s ease-out; }
.ch02-ring {
  transform-box: fill-box; transform-origin: center;
  animation: ch02-pulse 0.9s ease-out forwards;
  pointer-events: none;
}
@keyframes ch02-pulse {
  from { transform: scale(1); opacity: 0.75; }
  to   { transform: scale(1.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ch02-ring { display: none; } }
.ch02-net-out { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.85rem; min-height: 1.8rem; }
.ch02-net-note { font-size: 0.85rem; color: var(--text-muted); }
.ch02-prime-chip {
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600;
  padding: 0.16rem 0.55rem; border-radius: 999px;
  background: var(--accent-light); border: 1px solid #E4CFDD; color: var(--accent-dark);
}
.ch02-prime-chip.src { background: var(--accent-secondary-light); border-color: #F0DCB8; color: #9A5E12; }

/* widget 2 — the ease dial */
.ch02-ease-stage { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.ch02-ease-left { flex: 1 1 300px; min-width: 260px; }
.ch02-ease-right { flex: 0 1 260px; min-width: 220px; }
.ch02-stmt {
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 0.5rem;
  min-height: 7.5rem; display: grid; place-items: center; text-align: center;
  font-family: 'Fraunces', Georgia, serif; font-size: 1.45rem; font-weight: 500;
  padding: 1rem 1.2rem; color: var(--text);
  transition: color 0.3s ease-out;
}
.ch02-stmt.dim { color: #C9C9D3; }
.ch02-flash { animation: ch02-flash 0.5s ease-out; }
@keyframes ch02-flash {
  from { background: var(--accent-secondary-light); }
  to   { background: var(--bg-sunken); }
}
.ch02-seen { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); margin-top: 0.45rem; }
.ch02-gauge-svg { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; }
.ch02-ease-read { font-family: var(--mono); font-size: 0.85rem; text-align: center; line-height: 1.9; }
.ch02-ease-read .feels { color: var(--accent-dark); font-weight: 700; }
.ch02-gauge-caption { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.6rem; }

/* widget 3 — the illusion-of-truth game */
.ch02-truth-stmt {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 500;
  text-align: center; background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 0.5rem; padding: 1.7rem 1.2rem;
}
.ch02-truth-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.6rem; }
.ch02-truth-inter { font-size: 0.95rem; margin-bottom: 0.8rem; }
.ch02-bars { margin: 0.4rem 0 0.9rem; }
.ch02-bar-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.ch02-bar-lbl { flex: 0 0 10.5rem; text-align: right; font-size: 0.78rem; color: var(--text-muted); }
.ch02-bar-track { flex: 1; height: 16px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.ch02-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; width: 0; transition: width 0.7s ease-out; }
.ch02-bar-fill.fresh { background: var(--accent-secondary); }
.ch02-bar-fill.typ { opacity: 0.45; }
.ch02-bar-val { flex: 0 0 3rem; font-family: var(--mono); font-size: 0.78rem; }
.ch02-truth-verdict { font-size: 0.92rem; margin: 0.6rem 0 0.4rem; }
.ch02-key { margin-top: 0.9rem; font-size: 0.88rem; }
.ch02-key summary { cursor: pointer; font-weight: 600; color: var(--accent-dark); }
.ch02-key ul { list-style: none; margin: 0.6rem 0 0; }
.ch02-key li { margin-bottom: 0.3rem; }
.ch02-key .ok { color: var(--ok); font-weight: 700; font-family: var(--mono); font-size: 0.8rem; }
.ch02-key .no { color: var(--err); font-weight: 700; font-family: var(--mono); font-size: 0.8rem; }
@media (max-width: 767px) {
  .ch02-bar-lbl { flex-basis: 7.5rem; }
}

/* ===== ch03 widgets ===== */
/* ===== ch03 widgets ===== */
/* (merge into style.css at the "ch03 widgets" anchor) */

/* — shared ch03 bits — */
.ch03-pane { display: none; }
.ch03-pane.active { display: block; }
.ch03-lbl {
  font-size: 0.8rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.ch03-cap { font-size: 0.84rem; color: var(--text-muted); margin-top: 0.85rem; }

/* — widget 1 · the ambiguity you never saw (ch03-ambigu) — */
.ch03-amb-note { margin-top: 0.85rem; font-size: 0.92rem; }
.ch03-amb-note strong { color: var(--accent-dark); }
.ch03-bank {
  background: var(--bg-sunken); border-radius: 0.5rem;
  padding: 1.6rem 1.2rem 1.4rem; text-align: center;
}
.ch03-bank-sent {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem; line-height: 1.55; margin-bottom: 1rem;
}
.ch03-bank-ctx { color: var(--text-muted); }
.ch03-bank-word {
  background: var(--accent-secondary-light); color: #9A5E12;
  padding: 0.02em 0.28em; border-radius: 5px;
}
.ch03-bank-meaning {
  font-family: var(--mono); font-size: 0.85rem; color: var(--text-muted);
  margin-top: 0.9rem;
}
.ch03-bank-meaning strong { color: var(--accent-dark); font-weight: 600; }

/* — widget 2 · the halo machine (ch03-halo) — */
.ch03-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 1.1rem; }
.ch03-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 1px solid var(--border); background: var(--bg-card);
  border-radius: 999px; padding: 0.28rem 0.4rem 0.28rem 0.6rem;
  font-size: 0.88rem; font-weight: 500; cursor: grab; user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.ch03-chip:hover { border-color: var(--accent); }
.ch03-chip.ch03-dragging { opacity: 0.4; border-style: dashed; cursor: grabbing; }
.ch03-chip .ch03-posn {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  color: var(--accent); margin-right: 0.15rem;
}
.ch03-chip .ch03-tilde {
  font-family: var(--mono); font-size: 0.75rem; color: var(--accent-secondary);
  cursor: help;
}
.ch03-arr {
  font: inherit; font-size: 0.7rem; line-height: 1;
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; padding: 0.18rem 0.24rem; border-radius: 5px;
}
.ch03-arr:hover:not(:disabled) { background: var(--accent-light); color: var(--accent-dark); }
.ch03-arr:disabled { opacity: 0.25; cursor: default; }
.ch03-halo-read {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.ch03-score-lbl {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-muted);
}
.ch03-score-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.1rem; font-weight: 600; line-height: 1.1; min-width: 4rem;
}
.ch03-meter {
  flex: 1; min-width: 170px; height: 10px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden;
}
.ch03-meter-fill {
  height: 100%; width: 50%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-secondary), var(--accent));
  transition: width 0.4s ease-out;
}
.ch03-halo-verdict { flex-basis: 100%; font-size: 0.9rem; color: var(--text-muted); }
.ch03-halo-verdict strong { color: var(--accent-dark); }
.ch03-bars { display: grid; gap: 0.32rem; }
.ch03-bar-row {
  display: grid; grid-template-columns: 6.4rem 1fr 3.4rem;
  align-items: center; gap: 0.6rem;
}
.ch03-bar-lbl {
  font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted);
  text-align: right;
}
.ch03-bar-track { position: relative; height: 13px; background: var(--bg-sunken); border-radius: 6px; }
.ch03-bar-track::before {
  content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: var(--border);
}
.ch03-bar-fill {
  position: absolute; top: 2px; bottom: 2px; border-radius: 4px;
  transition: width 0.4s ease-out;
}
.ch03-bar-fill.ch03-fpos { left: 50%; background: var(--ok); opacity: 0.8; }
.ch03-bar-fill.ch03-fneg { right: 50%; background: var(--err); opacity: 0.65; }
.ch03-bar-val { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); }

/* — widget 3 · the substitution machine (ch03-subst) — */
.ch03-pipe { display: flex; align-items: stretch; gap: 0.8rem; margin-top: 1rem; }
.ch03-pipe-arrow { align-self: center; font-size: 1.3rem; color: var(--text-muted); flex-shrink: 0; }
.ch03-q-card {
  flex: 1; min-width: 0;
  border: 1px solid var(--border); background: var(--bg-card);
  border-radius: var(--radius); padding: 0.85rem 1rem;
  font-size: 0.93rem; line-height: 1.5;
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.ch03-q-tag {
  display: block; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-bottom: 0.35rem;
}
.ch03-q-hard { border-left: 3px solid var(--accent); }
.ch03-q-hard .ch03-q-tag { color: var(--accent-dark); }
.ch03-q-hard.ch03-fly { opacity: 0.4; transform: translateX(12px); }
.ch03-q-easy {
  border-left: 3px solid var(--accent-secondary);
  background: var(--accent-secondary-light); border-color: #F0DCB8;
  opacity: 0; transform: translateX(-14px);
}
.ch03-q-easy .ch03-q-tag { color: #9A5E12; }
.ch03-q-easy.ch03-show { opacity: 1; transform: none; }
.ch03-s1box {
  flex: 0 0 auto; align-self: center;
  display: grid; place-items: center;
  width: 90px; min-height: 74px; border-radius: 14px; padding: 0.4rem;
  background: var(--accent-secondary-light); border: 1px solid #F0DCB8;
  font-size: 0.7rem; font-weight: 700; color: #9A5E12;
  text-align: center; line-height: 1.25;
}
.ch03-s1box .ch03-bolt { display: block; font-size: 1.25rem; }
.ch03-s1box.ch03-firing { animation: ch03-pulse 0.6s ease-out; }
@keyframes ch03-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 142, 50, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(217, 142, 50, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ch03-s1box.ch03-firing { animation: none; }
  .ch03-q-card, .ch03-q-easy, .ch03-meter-fill, .ch03-bar-fill { transition: none; }
}
.ch03-mm {
  margin-top: 1.15rem; padding-top: 0.95rem;
  border-top: 1px dashed var(--border);
  opacity: 0.35; pointer-events: none; transition: opacity 0.3s;
}
.ch03-mm.ch03-live { opacity: 1; pointer-events: auto; }
.ch03-mm .ch03-lbl { width: 100%; }
.ch03-mm .slider { flex: 1; min-width: 140px; }
.ch03-mm-read {
  font-family: var(--mono); font-size: 0.88rem;
  background: var(--code-bg); border: 1px solid var(--code-border);
  color: var(--code-fg); border-radius: 8px;
  padding: 0.6rem 0.9rem; margin-top: 0.6rem; overflow-x: auto;
}
@media (max-width: 767px) {
  .ch03-pipe { flex-direction: column; }
  .ch03-pipe-arrow { transform: rotate(90deg); align-self: center; }
  .ch03-s1box { width: 100%; min-height: 54px; }
  .ch03-bar-row { grid-template-columns: 5.4rem 1fr 3rem; }
}

/* ===== ch04 widgets ===== */
/* ===== ch04 widgets ===== */
/* rigged wheel */
.ch04-wheel-stage { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin-top: 0.5rem; }
.ch04-wheel-box { flex: 0 0 240px; background: var(--bg-sunken); border-radius: 0.5rem; padding: 0.5rem; }
.ch04-wheel-box svg { width: 100%; height: auto; display: block; }
.ch04-wheel-side { flex: 1; min-width: 260px; }
.ch04-wheel-num {
  font-family: var(--mono); font-size: 1.15rem; font-weight: 600; text-align: center;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.55rem 0.8rem; min-height: 2.6rem;
}
.ch04-est-lbl { font-size: 0.8rem; color: var(--text-muted); }
.ch04-fb { margin-top: 0.85rem; font-size: 0.92rem; }
.ch04-fb strong { color: var(--accent-dark); }
.ch04-scatter-wrap { margin-top: 1rem; }
.ch04-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600; padding: 0.22rem 0.65rem; border-radius: 999px;
}
.ch04-chip.lo { background: var(--accent-secondary-light); color: #9A5E12; border: 1px solid #F0DCB8; }
.ch04-chip.hi { background: var(--accent-light); color: var(--accent-dark); border: 1px solid #E4CFDD; }
.ch04-chip.you { background: var(--bg-card); color: var(--accent-dark); border: 1px solid var(--accent-dark); }
.ch04-chip.truth { background: var(--ok-light); color: var(--ok); border: 1px solid #BFDEC9; }
/* gandhi paired anchors */
.ch04-g-q { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.ch04-g-q .qn { font-family: var(--mono); font-weight: 500; color: var(--accent); font-size: 0.85rem; margin-right: 0.45rem; }
.ch04-num {
  font: inherit; font-family: var(--mono); font-size: 0.95rem;
  width: 7.5rem; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
}
.ch04-num:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
.ch04-g-estlbl { font-size: 0.88rem; color: var(--text-muted); }
.ch04-g-item {
  margin-top: 1.1rem; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.9rem 1rem; background: var(--bg-card);
}
.ch04-g-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-weight: 600; }
.ch04-g-idx {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  background: var(--accent-light); color: var(--accent-dark);
  padding: 0.18rem 0.6rem; border-radius: 999px;
}
.ch04-g-sub { font-size: 0.82rem; color: var(--text-muted); font-family: var(--mono); margin: 0.25rem 0 0.7rem; }
.ch04-g-row {
  display: grid; grid-template-columns: 6.8rem 1fr 5.6rem; gap: 0.6rem;
  align-items: center; margin-bottom: 0.55rem; font-size: 0.8rem;
}
.ch04-g-lbl { font-family: var(--mono); color: var(--text-muted); text-align: right; }
.ch04-g-track { position: relative; height: 20px; background: var(--bg-sunken); border-radius: 4px; }
.ch04-g-bar { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 3px; transition: width 0.8s ease-out; }
.ch04-g-bar.lo { background: var(--accent-secondary); opacity: 0.8; }
.ch04-g-bar.hi { background: var(--accent); opacity: 0.8; }
.ch04-g-anchor { position: absolute; top: -4px; bottom: -4px; width: 0; }
.ch04-g-anchor.lo { border-left: 2px dashed var(--accent-secondary); }
.ch04-g-anchor.hi { border-left: 2px dashed var(--accent); }
.ch04-g-truth { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px solid var(--ok); }
.ch04-g-you {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent-dark);
  top: 50%; transform: translate(-50%, -50%); box-sizing: border-box;
}
.ch04-g-val { font-family: var(--mono); font-size: 0.78rem; color: var(--text); }
.ch04-g-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; }
/* negotiation sim */
.ch04-transcript {
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.8;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.7rem 1rem; margin-top: 0.85rem; overflow-x: auto;
}
@media (max-width: 767px) {
  .ch04-wheel-box { flex-basis: 100%; }
  .ch04-g-row { grid-template-columns: 5.2rem 1fr 4.6rem; gap: 0.45rem; }
}

/* ===== ch05 widgets ===== */
/* ===== ch05 widgets ===== */
/* --- widget 1: the frequency quiz (ch05-deaths) --- */
.ch05-pair-q { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.ch05-pair-q .ch05-qn { font-family: var(--mono); font-weight: 500; color: var(--accent); font-size: 0.85rem; margin-right: 0.45rem; }
.ch05-choice { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ch05-ratio-row {
  margin-top: 0.85rem; display: flex; align-items: center; gap: 0.7rem;
  flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted);
}
.ch05-ratio-row .slider { flex: 1; min-width: 140px; }
.ch05-ratio-val { font-family: var(--mono); font-size: 0.85rem; color: var(--accent-dark); min-width: 4.5rem; }
.ch05-bars { margin-top: 1rem; }
.ch05-ends {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.ch05-brow { display: grid; grid-template-columns: 6.6rem 1fr; gap: 0.6rem; align-items: center; margin-bottom: 0.45rem; }
.ch05-blbl { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); text-align: right; }
.ch05-track {
  position: relative; height: 16px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden;
}
.ch05-track::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--border);
}
.ch05-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 999px; }
.ch05-bar.ch05-guess { background: var(--accent); }
.ch05-bar.ch05-actual { background: var(--ok); }
.ch05-bar.ch05-news { background: var(--accent-secondary); }
.ch05-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
.ch05-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.ch05-key::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.ch05-key.ch05-guess::before { background: var(--accent); }
.ch05-key.ch05-actual::before { background: var(--ok); }
.ch05-key.ch05-news::before { background: var(--accent-secondary); }
.ch05-nums {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.7;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.55rem 0.85rem; margin-top: 0.7rem; overflow-x: auto;
}
.ch05-fb { margin-top: 0.85rem; font-size: 0.92rem; }
.ch05-hit { color: var(--ok); font-weight: 600; }
.ch05-miss { color: #9A5E12; font-weight: 600; }

/* --- widget 2: six or twelve (ch05-fluency) --- */
.ch05-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.5rem; margin-top: 0.85rem;
}
.ch05-slot {
  font: inherit; font-size: 0.85rem; padding: 0.42rem 0.6rem;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text);
}
.ch05-slot:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
.ch05-slot.ch05-hard { border-style: dashed; border-color: #F0DCB8; background: #FFFDF7; }
.ch05-hard-note {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 0.72rem; color: #9A5E12;
  text-align: center; margin: 0.15rem 0 -0.1rem;
}
.ch05-meter-wrap { margin-top: 1.1rem; }
.ch05-meter {
  position: relative; height: 14px; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--border); overflow: hidden;
}
.ch05-meter-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0%;
  background: linear-gradient(90deg, var(--accent-secondary), var(--accent));
  border-radius: 999px;
  transition: width 0.45s ease-out;
}
.ch05-meter-lab {
  display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;
}
.ch05-cond-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.ch05-chip {
  font-size: 0.78rem; font-weight: 600; padding: 0.22rem 0.65rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-sunken); color: var(--text-muted);
}
.ch05-chip.ch05-on { background: var(--accent-light); border-color: #E4CFDD; color: var(--accent-dark); }
.ch05-caption { margin-top: 0.8rem; font-size: 0.88rem; color: var(--text-muted); }

/* --- widget 3: the cascade loop (ch05-cascade) --- */
.ch05-cascade-grid { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; margin-top: 0.5rem; }
.ch05-loop { flex: 0 0 280px; background: var(--bg-sunken); border-radius: 0.5rem; padding: 0.5rem; display: flex; align-items: center; }
.ch05-chart { flex: 1; min-width: 280px; background: var(--bg-sunken); border-radius: 0.5rem; padding: 0.5rem; }
.ch05-loop svg, .ch05-chart svg { width: 100%; height: auto; display: block; }
.ch05-node rect { fill: var(--bg-card); stroke: var(--border); }
.ch05-node text { fill: var(--text); }
.ch05-node.ch05-lit rect { fill: var(--accent-secondary-light); stroke: var(--accent-secondary); }
.ch05-slider-lab {
  font-size: 0.8rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.ch05-slider-lab .slider { width: 130px; }
@media (max-width: 767px) {
  .ch05-loop { flex-basis: 100%; }
  .ch05-brow { grid-template-columns: 5.2rem 1fr; }
}

/* ===== ch06 widgets ===== */
/* ch06 — Representativeness: widget styles (merged at the ch06 anchor) */

/* personality-sketch vignette */
.ch06-vignette {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 1.02rem; line-height: 1.7;
  background: var(--bg-sunken);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem; margin: 1rem 0 1.25rem;
}
.ch06-vignette .src {
  display: block; margin-top: 0.55rem;
  font-family: 'Inter', system-ui, sans-serif; font-style: normal;
  font-size: 0.78rem; color: var(--text-muted);
}

/* shared widget feedback + inputs */
.ch06-q { font-weight: 600; margin: 0.9rem 0 0.6rem; }
.ch06-fb { margin-top: 0.85rem; font-size: 0.92rem; }
.ch06-fb .v-ok { font-weight: 600; color: var(--accent-dark); }
.ch06-fb .v-s1 { font-weight: 600; color: #9A5E12; }
.ch06-num {
  font: inherit; font-family: var(--mono); font-size: 0.95rem;
  width: 6.5rem; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
}
.ch06-num:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }

/* Linda: Gigerenzer frequency re-ask */
.ch06-freq { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.ch06-freq.show { display: block; }
.ch06-freq-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center;
  font-size: 0.92rem; margin-top: 0.5rem;
}
.ch06-freq-row label { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Bayes box: sliders + icon array */
.ch06-slider-lbl {
  font-size: 0.8rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.ch06-slider-lbl .v {
  font-family: var(--mono); font-weight: 600; color: var(--accent-dark);
  min-width: 3.4ch; text-align: right;
}
.ch06-dots {
  display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px;
  max-width: 600px; margin: 1rem auto 0.5rem;
}
.ch06-dot {
  aspect-ratio: 1; border-radius: 50%;
  background: var(--accent-secondary); opacity: 0.16;
  transition: opacity 0.45s ease, background-color 0.45s ease;
}
.ch06-dot.cs { background: var(--accent); }
.ch06-dot.fit { opacity: 1; }
.ch06-key {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem;
  font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.6rem;
}
.ch06-key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ch06-key i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.ch06-key i.k-cs { background: var(--accent); }
.ch06-key i.k-non { background: var(--accent-secondary); }
.ch06-key i.k-pale { background: var(--accent-secondary); opacity: 0.16; }
.ch06-bayes-read { font-size: 0.95rem; margin-top: 0.4rem; }
.ch06-post {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 0.98rem;
  background: var(--accent-light); color: var(--accent-dark);
  border: 1px solid #E4CFDD; border-radius: 8px; padding: 0.18rem 0.6rem;
}
.ch06-cap { font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-top: 0.6rem; }

/* hospital tally chips (widget head) */
.ch06-tally { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ch06-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600; padding: 0.22rem 0.65rem; border-radius: 999px;
}
.ch06-chip.s1 { background: var(--accent-secondary-light); color: #9A5E12; border: 1px solid #F0DCB8; }
.ch06-chip.s2 { background: var(--accent-light); color: var(--accent-dark); border: 1px solid #E4CFDD; }

@media (max-width: 767px) {
  .ch06-dots { gap: 3px; }
  .ch06-freq-row label { width: 100%; justify-content: space-between; }
}

/* ===== ch07 widgets ===== */
/* ===== ch07 widgets ===== */
/* two days of golf */
.ch07-golf-lbl { font-size: 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.5rem; }
.ch07-legend {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center;
  margin-top: 0.55rem; font-size: 0.78rem; color: var(--text-muted);
}
.ch07-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.ch07-key .sw { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ch07-golf-note { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.6rem; }
.ch07-golf-note strong { color: var(--accent-dark); }
.ch07-arrow-anim { animation: ch07-dash 0.7s ease-out both; }
@keyframes ch07-dash {
  from { stroke-dashoffset: var(--ch07-len, 140); }
  to   { stroke-dashoffset: 0; }
}

/* the screaming instructor */
.ch07-lesson {
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.8rem 1.05rem; margin-top: 0.85rem; font-size: 0.92rem;
}
.ch07-lesson .tag {
  display: block; font-variant: all-small-caps; letter-spacing: 0.09em;
  font-weight: 700; color: #9A5E12; margin-bottom: 0.15rem;
}
.ch07-lesson strong { color: var(--accent-dark); }
.ch07-truth { border-top: 1px dashed var(--code-border); margin-top: 0.65rem; padding-top: 0.6rem; }
.ch07-truth .tag { color: var(--accent-dark); }

/* green cabs, blue cabs */
.ch07-premise {
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.8rem 1.05rem; margin-bottom: 0.85rem; font-size: 0.93rem;
}
.ch07-premise .base { font-weight: 600; color: var(--accent-dark); }
.ch07-premise strong { color: var(--accent-dark); }
.ch07-frame-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.45rem; font-weight: 400; }
.ch07-cab-caption { font-size: 0.9rem; margin-top: 0.7rem; min-height: 2.6em; }
.ch07-cab-caption strong { color: var(--accent-dark); }
.ch07-cab-dot { transition: cx 0.55s ease, cy 0.55s ease, opacity 0.35s ease; }
@media (max-width: 767px) {
  .ch07-cab-caption { min-height: 0; }
}

/* ===== ch08 widgets ===== */
/* ===== ch08 widgets ===== */
/* dice-roll fund managers — leaderboard */
.ch08-lb { overflow-x: auto; margin-top: 0.25rem; }
.ch08-lb-inner { min-width: 540px; }
.ch08-lb-row {
  display: grid;
  grid-template-columns: 2rem minmax(10rem, 1fr) auto 3.2rem 4.6rem;
  align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.ch08-lb-row.head {
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.ch08-lb-row.ch08-star {
  background: var(--accent-secondary-light);
  border-radius: 6px;
  border-bottom-color: transparent;
}
.ch08-rank { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); }
.ch08-fname { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch08-star .ch08-fname { color: #9A5E12; }
.ch08-years { display: flex; gap: 0.22rem; }
.ch08-yr { width: 0.95rem; height: 0.95rem; border-radius: 3px; flex-shrink: 0; }
.ch08-yr.w { background: var(--ok-light); border: 1px solid #A9D6B8; }
.ch08-yr.l { background: var(--err-light); border: 1px solid #F0BDBD; }
.ch08-wins { font-family: var(--mono); font-size: 0.8rem; text-align: right; }
.ch08-total { font-family: var(--mono); font-size: 0.8rem; text-align: right; }
.ch08-total.up { color: var(--ok); }
.ch08-total.dn { color: var(--err); }
.ch08-lb-foot { font-size: 0.8rem; color: var(--text-muted); padding: 0.5rem 0.5rem 0.1rem; }
@keyframes ch08RowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ch08-anim { animation: ch08RowIn 0.35s ease-out both; }
.ch08-audit {
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.75;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.7rem 1rem; margin-top: 0.85rem; overflow-x: auto;
}
.ch08-audit .r { color: var(--code-kw); font-weight: 700; }
.ch08-note { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.6rem; }

/* shared chip row (hindsight + trust) */
.ch08-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0 0.9rem; }
.ch08-chip {
  font: inherit; font-size: 0.82rem; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  border-radius: 999px; padding: 0.32rem 0.8rem; cursor: pointer;
  transition: all 0.15s ease-out; white-space: nowrap;
}
.ch08-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.ch08-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* hindsight machine */
.ch08-hs-q { font-weight: 600; margin-bottom: 0.35rem; }
.ch08-hs-sub { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.ch08-slider-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0.5rem 0 0.8rem; }
.ch08-slider-row input[type="range"] { flex: 1; min-width: 170px; }
.ch08-pct { font-family: var(--mono); font-weight: 600; min-width: 3.4rem; text-align: right; }
.ch08-outcome {
  border-radius: 8px; padding: 0.7rem 1rem; margin: 0.9rem 0;
  font-size: 0.95rem; border: 1px solid;
}
.ch08-outcome.good { background: var(--ok-light); border-color: #BFE3CB; }
.ch08-outcome.bad { background: var(--err-light); border-color: #F3C2C2; }
.ch08-bars { margin: 0.9rem 0 0.4rem; display: grid; gap: 0.55rem; }
.ch08-bar-row {
  display: grid; grid-template-columns: 13rem 1fr 3.2rem;
  gap: 0.6rem; align-items: center; font-size: 0.82rem;
}
.ch08-bar-track {
  height: 0.85rem; background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.ch08-bar-fill { height: 100%; border-radius: 999px; width: 0%; transition: width 0.5s ease-out; }
.ch08-bar-fill.before { background: var(--accent); }
.ch08-bar-fill.after { background: var(--accent-secondary); }
.ch08-bar-val { font-family: var(--mono); font-weight: 600; text-align: right; }
.ch08-hs-verdict { font-size: 0.92rem; margin-top: 0.8rem; }
@media (max-width: 560px) {
  .ch08-bar-row { grid-template-columns: 7.6rem 1fr 3rem; font-size: 0.75rem; }
}

/* trust dial */
.ch08-trust-wrap { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-start; }
.ch08-gauge { flex: 0 0 240px; background: var(--bg-sunken); border-radius: 0.5rem; padding: 0.6rem; }
.ch08-gauge svg { width: 100%; height: auto; display: block; }
.ch08-needle {
  transition: transform 0.6s cubic-bezier(0.34, 1.35, 0.64, 1);
  transform-box: view-box;
  transform-origin: 130px 120px;
}
.ch08-trust-ctrl { flex: 1; min-width: 260px; }
.ch08-trust-lbl { display: block; font-size: 0.8rem; color: var(--text-muted); margin: 0.55rem 0 0.15rem; }
.ch08-trust-lbl input[type="range"] { width: 100%; }
.ch08-trust-verdict {
  margin-top: 0.85rem; font-size: 0.92rem;
  background: var(--bg-sunken); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 0.7rem 0.9rem;
}
.ch08-trust-verdict strong { color: var(--accent-dark); }
@media (max-width: 640px) {
  .ch08-gauge { flex-basis: 100%; }
}

/* ===== ch09 widgets ===== */
/* plan vs reference class (ch09-estimate) */
.ch09-est-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.85rem; }
.ch09-est-lbl { font-size: 0.8rem; color: var(--text-muted); }
.ch09-num {
  font: inherit; font-family: var(--mono); font-size: 0.95rem;
  width: 7.5rem; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
}
.ch09-num:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
.ch09-num.sm { width: 6.4rem; font-size: 0.85rem; padding: 0.3rem 0.5rem; }
.ch09-unit { font-size: 0.88rem; color: var(--text-muted); font-family: var(--mono); }
.ch09-fine { margin-top: 0.6rem; font-size: 0.78rem; color: var(--text-muted); }
/* the 80% interval game (ch09-interval) */
.ch09-iv-item {
  border: 1px solid var(--border); border-radius: 0.6rem;
  background: var(--bg-card); padding: 0.75rem 0.9rem; margin-bottom: 0.7rem;
}
.ch09-iv-q { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; }
.ch09-iv-q .ch09-iv-n { font-family: var(--mono); font-weight: 500; color: var(--accent); font-size: 0.82rem; margin-right: 0.45rem; }
.ch09-iv-q .ch09-iv-unit { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; }
.ch09-iv-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.ch09-iv-tag {
  font-family: var(--mono); font-size: 0.72rem; width: 2.6rem; flex-shrink: 0;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.ch09-iv-row input[type="range"] { flex: 1; min-width: 130px; accent-color: var(--accent); }
.ch09-iv-verdict { font-family: var(--mono); font-size: 0.82rem; margin-top: 0.35rem; color: var(--text-muted); }
.ch09-iv-verdict.ok { color: var(--ok); }
.ch09-iv-verdict.miss { color: var(--err); }
.ch09-iv-summary {
  margin-top: 0.9rem; padding: 0.9rem 1.05rem; border-radius: 0.6rem;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  font-size: 0.92rem;
}
.ch09-iv-summary strong { color: var(--accent-dark); }
/* the premortem dealer (ch09-premortem) */
.ch09-pm-scene { font-size: 0.92rem; color: var(--text-muted); font-style: italic; margin: 0.75rem 0 0.25rem; }
.ch09-pm-deck {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 0.7rem; margin-top: 0.9rem;
}
.ch09-pm-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.6rem;
  padding: 0.8rem 0.9rem; font-size: 0.88rem; line-height: 1.5;
  display: flex; flex-direction: column; gap: 0.55rem;
  box-shadow: 0 1px 3px var(--shadow);
  transition: opacity 0.2s ease-out, border-color 0.2s ease-out, background 0.2s ease-out;
}
.ch09-pm-card.dealt { animation: ch09-deal 0.45s ease-out both; }
@keyframes ch09-deal {
  from { opacity: 0; transform: translateY(16px) rotate(-1.4deg); }
  to   { opacity: 1; transform: none; }
}
.ch09-pm-card.kept { border-color: var(--accent); background: var(--accent-light); }
.ch09-pm-card.passed { opacity: 0.35; }
.ch09-pm-actions { display: flex; gap: 0.4rem; margin-top: auto; }
.ch09-pm-actions .btn { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
.ch09-pm-input {
  font: inherit; font-size: 0.84rem; width: 100%;
  padding: 0.4rem 0.55rem; border-radius: 6px;
  border: 1px solid #E4CFDD; background: var(--bg-card); color: var(--text);
}
.ch09-pm-input:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
.ch09-pm-out {
  margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 0.6rem;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  font-size: 0.92rem;
}
.ch09-pm-out-title { font-weight: 700; color: var(--accent-dark); margin-bottom: 0.3rem; }
.ch09-pm-out ol { margin: 0.5rem 0 0.8rem 1.3rem; }
.ch09-pm-out li { margin-bottom: 0.4rem; }
.ch09-pm-out li em { color: var(--code-cm); }
.ch09-pm-out-count { font-size: 0.88rem; color: var(--text-muted); }
.ch09-pm-out-count strong { color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .ch09-pm-card.dealt { animation: none; }
}
@media (max-width: 767px) {
  .ch09-pm-deck { grid-template-columns: 1fr; }
}

/* ===== ch10 widgets ===== */
/* ===== ch10 widgets ===== */
/* widget 1 · the value curve — slider label */
.ch10-lam-lbl {
  font-size: 0.8rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
/* widget 2 · measure your λ */
.ch10-offer {
  background: var(--code-bg); border: 1px solid var(--code-border);
  color: var(--code-fg); border-radius: 8px;
  padding: 0.95rem 1.15rem; font-size: 1rem;
}
.ch10-offer .ch10-x { font-family: var(--mono); font-weight: 700; color: var(--accent-dark); }
.ch10-round { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.ch10-gauge { width: 100%; height: auto; display: block; margin-top: 0.5rem; }
.ch10-small { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.7rem; }
/* widget 3 · fourfold */
.ch10-ff-cell { cursor: pointer; }
.ch10-ff-cell rect.ch10-ff-bg {
  fill: var(--bg-card); stroke: var(--border); stroke-width: 1.5;
  transition: fill 0.15s ease-out, stroke 0.15s ease-out;
}
.ch10-ff-cell:hover rect.ch10-ff-bg,
.ch10-ff-cell:focus-visible rect.ch10-ff-bg { stroke: var(--accent); fill: var(--accent-light); }
.ch10-ff-cell.sel rect.ch10-ff-bg { stroke: var(--accent); stroke-width: 2.5; fill: var(--accent-light); }
.ch10-ff-cell:focus { outline: none; }
.ch10-ff-panel { margin-top: 0.9rem; font-size: 0.95rem; }
.ch10-ff-scn { font-weight: 600; }
.ch10-verdict { font-weight: 600; margin-top: 0.7rem; }
.ch10-verdict.match { color: var(--ok); }
.ch10-verdict.differ { color: #9A5E12; }
.ch10-math {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.75;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.7rem 1rem; margin-top: 0.7rem;
  overflow-x: auto; white-space: pre;
}

/* ===== ch11 widgets ===== */
/* ===== ch11 widgets ===== */
/* frame flipper */
.ch11-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  padding: 0.22rem 0.65rem; border-radius: 999px;
  background: var(--accent-light); color: var(--accent-dark); border: 1px solid #E4CFDD;
}
.ch11-flipcard {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 1.1rem 1.2rem;
  transition: transform 0.2s ease-in-out;
}
.ch11-flipcard.ch11-flipping { transform: rotateY(90deg); }
.ch11-scen-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem;
}
.ch11-scen-n { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); }
.ch11-frame-tag {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.16rem 0.6rem; border-radius: 999px;
}
.ch11-frame-tag.ch11-gain { background: var(--accent-secondary-light); color: #9A5E12; border: 1px solid #F0DCB8; }
.ch11-frame-tag.ch11-loss { background: var(--accent-light); color: var(--accent-dark); border: 1px solid #E4CFDD; }
.ch11-setup { font-size: 0.95rem; margin-bottom: 0.7rem; }
.ch11-sign {
  font-family: var(--mono); font-size: 0.88rem; line-height: 1.7;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.55rem 0.85rem; margin: 0.45rem 0 0.85rem;
}
.ch11-verdict { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.75rem; }
.ch11-hit { color: var(--accent-dark); }
.ch11-miss { color: #9A5E12; }
.ch11-eq {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem; align-items: center; margin-bottom: 0.5rem;
}
.ch11-eq .ch11-sign { margin: 0.35rem 0 0; }
.ch11-eqsym {
  font-family: Georgia, serif; font-size: 1.6rem; color: var(--text-muted);
  text-align: center;
}
.ch11-algebra {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.8;
  white-space: pre; overflow-x: auto;
  background: var(--code-bg); border: 1px solid var(--code-border); color: var(--code-fg);
  border-radius: 8px; padding: 0.7rem 1rem; margin: 0.75rem 0;
}
.ch11-bars { display: grid; gap: 0.55rem; margin: 0.85rem 0; }
.ch11-bar-lbl {
  display: flex; justify-content: space-between; gap: 0.6rem;
  font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.2rem;
}
.ch11-bar-lbl span:last-child { font-family: var(--mono); font-weight: 600; }
.ch11-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
}
.ch11-fill { height: 100%; border-radius: 999px; }
.ch11-fill.ch11-gain { background: var(--accent-secondary); }
.ch11-fill.ch11-loss { background: var(--accent); }
.ch11-note { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; }
.ch11-summary { font-size: 0.95rem; margin-top: 0.85rem; }
.ch11-next { margin-top: 0.9rem; }

/* mug market */
.ch11-role {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 700;
  padding: 0.28rem 0.75rem; border-radius: 999px;
}
.ch11-role.ch11-owner { background: var(--accent-light); color: var(--accent-dark); border: 1px solid #E4CFDD; }
.ch11-role.ch11-buyer { background: var(--accent-secondary-light); color: #9A5E12; border: 1px solid #F0DCB8; }
.ch11-slider-lbl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--text-muted);
}
.ch11-slider-lbl .slider { width: 170px; }
.ch11-price { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; min-width: 3.4rem; }
.ch11-mech {
  font-size: 0.9rem; margin-top: 0.85rem;
  background: var(--accent-light); border: 1px solid #E4CFDD;
  border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 0.7rem 0.95rem;
}
.ch11-mech strong { color: var(--accent-dark); }

/* one flip or a hundred */
.ch11-offer {
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 0.6rem; padding: 1rem 1.15rem; margin-bottom: 0.9rem;
}
.ch11-stage-tag {
  display: block;
  font-variant: all-small-caps; letter-spacing: 0.1em;
  font-weight: 700; font-size: 0.92rem;
  color: var(--text-muted); margin-bottom: 0.2rem;
}
.ch11-offer-headline {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 600;
  margin-bottom: 0.35rem;
}
.ch11-offer-sub { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.ch11-verdict-box {
  font-size: 0.95rem;
  background: var(--accent-light); border: 1px solid #E4CFDD;
  border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 0.85rem;
}
.ch11-verdict-box strong { color: var(--accent-dark); }
.ch11-policy {
  font-size: 0.9rem;
  background: var(--ok-light); border: 1px solid #CFE8D8;
  border-left: 3px solid var(--ok);
  border-radius: 8px; padding: 0.8rem 1rem;
}
.ch11-policy strong { color: var(--ok); }
.ch11-policy ul { margin: 0.4rem 0 0.6rem 1.15rem; }
.ch11-policy li { margin-bottom: 0.3rem; }
.ch11-policy p { margin: 0; }

@media (max-width: 767px) {
  .ch11-eq { grid-template-columns: 1fr; gap: 0.3rem; }
  .ch11-eqsym { padding: 0.1rem 0; }
  .ch11-slider-lbl .slider { width: 120px; }
}

/* ===== ch12 widgets ===== */
/* ===== ch12 widgets ===== */
/* --- shared --- */
.ch12-hidden { display: none; }

/* --- pain painter --- */
.ch12-pain-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.85rem; }
.ch12-pain-card {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.65rem 0.9rem; background: var(--bg-card);
}
.ch12-pain-card.a { border-left: 3px solid var(--accent-secondary); }
.ch12-pain-card.b { border-left: 3px solid var(--accent); }
.ch12-pain-card h4 {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 0.35rem;
}
.ch12-pain-stat { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.15rem; }
.ch12-pain-stat .who { color: var(--text-muted); }
.ch12-pain-stat .val { font-family: var(--mono); font-weight: 600; }
.ch12-pain-banner {
  display: none; margin-top: 0.8rem;
  background: var(--warn-light); border: 1px solid #f3dcb6; border-left: 3px solid var(--warn);
  border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.88rem;
}
.ch12-pain-banner.show { display: block; }
.ch12-pain-banner strong { color: var(--warn); }
@media (max-width: 620px) { .ch12-pain-readouts { grid-template-columns: 1fr; } }

/* --- cold hand --- */
.ch12-ch-trials { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.ch12-ch-lbl {
  display: flex; justify-content: space-between; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.ch12-ch-track {
  position: relative; height: 34px; border-radius: 8px;
  background: var(--bg-sunken); border: 1px solid var(--border);
  overflow: hidden;
}
.ch12-ch-seg {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
}
.ch12-ch-seg.cold { background: #3D7A85; color: #fff; }
.ch12-ch-seg.mild { background: #9EC4CB; color: #1F2533; }
.ch12-ch-veil { position: absolute; top: 0; bottom: 0; right: 0; background: var(--bg-sunken); opacity: 0.92; }
.ch12-ch-choice { margin-top: 1rem; }
.ch12-ch-choice p { font-weight: 600; margin-bottom: 0.5rem; }
.ch12-ch-tally { font-size: 0.9rem; margin-top: 0.85rem; }
.ch12-ch-tally strong { color: var(--accent-dark); }
.ch12-ch-decomp-wrap { overflow-x: auto; margin-top: 0.9rem; }
.ch12-ch-decomp {
  display: grid; grid-template-columns: auto repeat(4, minmax(88px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; font-size: 0.84rem; min-width: 560px;
}
.ch12-ch-decomp > div { background: var(--bg-card); padding: 0.45rem 0.65rem; }
.ch12-ch-decomp .hd {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); background: var(--bg-sunken);
}
.ch12-ch-decomp .dur { text-decoration: line-through; color: var(--text-muted); }
.ch12-ch-decomp .mem { font-family: var(--mono); font-weight: 600; }
.ch12-ch-decomp .mem.bad { color: var(--err); }
.ch12-ch-decomp .mem.good { color: var(--ok); }

/* --- spotlight / focusing illusion --- */
.ch12-fx-q { font-weight: 600; margin-bottom: 0.35rem; }
.ch12-fx-lbl { font-size: 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.5rem; }
.ch12-day-strip {
  display: flex; height: 46px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); margin-top: 1rem;
}
.ch12-day-seg { min-width: 2px; transition: width 0.55s ease; }
.ch12-day-seg.weather { box-shadow: inset 0 0 0 2px rgba(154, 94, 18, 0.55); }
.ch12-day-legend {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem;
  font-size: 0.76rem; color: var(--text-muted); margin-top: 0.5rem;
}
.ch12-day-legend i {
  width: 10px; height: 10px; border-radius: 3px;
  display: inline-block; margin-right: 0.32rem; vertical-align: -1px;
}
.ch12-fx-result { margin-top: 1rem; }
.ch12-fx-bars { display: grid; gap: 0.45rem; margin-top: 0.6rem; }
.ch12-fx-bar {
  display: grid; grid-template-columns: 175px 1fr; align-items: center;
  gap: 0.6rem; font-size: 0.82rem;
}
.ch12-fx-bar .nm { color: var(--text-muted); text-align: right; }
.ch12-fx-bar .tr { display: flex; align-items: center; gap: 0.5rem; }
.ch12-fx-bar .bar { height: 15px; border-radius: 4px; min-width: 3px; }
.ch12-fx-bar .bar.guess { background: var(--accent-secondary); }
.ch12-fx-bar .bar.pred { background: var(--accent); }
.ch12-fx-bar .bar.act { background: var(--ok); }
.ch12-fx-bar .v { font-family: var(--mono); font-size: 0.8rem; }
.ch12-fx-note { font-size: 0.9rem; margin-top: 0.7rem; }
@media (max-width: 620px) { .ch12-fx-bar { grid-template-columns: 110px 1fr; } }

/* --- scorecard --- */
.ch12-sc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 0.5rem; margin-top: 0.5rem;
}
.ch12-sc-chip {
  font: inherit; font-size: 0.82rem; font-weight: 600; text-align: left;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.7rem; cursor: pointer;
  display: flex; align-items: center; gap: 0.5rem;
  transition: border-color 0.15s, background 0.15s;
}
.ch12-sc-chip:hover { border-color: var(--accent); }
.ch12-sc-chip.sel { border-color: var(--accent); background: var(--accent-light); }
.ch12-sc-chip .st { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ch12-sc-chip.ok .st { background: var(--ok); }
.ch12-sc-chip.warn .st { background: var(--warn); }
.ch12-sc-chip.plum .st { background: var(--accent); }
.ch12-sc-card {
  margin-top: 0.85rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); padding: 0.9rem 1.1rem; font-size: 0.92rem;
}
.ch12-sc-card .ttl { font-weight: 700; margin-bottom: 0.25rem; }
.ch12-sc-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.16rem 0.55rem; border-radius: 999px; margin-bottom: 0.45rem;
}
.ch12-sc-badge.ok { background: var(--ok-light); color: var(--ok); }
.ch12-sc-badge.warn { background: var(--warn-light); color: var(--warn); }
.ch12-sc-badge.plum { background: var(--accent-light); color: var(--accent-dark); }
.ch12-sc-card .chlink { font-size: 0.82rem; margin-top: 0.4rem; display: block; }