/* ============================================================
   Marketing — the Atlas · shared stylesheet
   Copied from categoryTheory with the "Sand" palette swap +
   light code theme, the hub .part/card rules, ch01 widget rules,
   Then⇄Now case cards, and coming-soon variants.
   ============================================================ */

/* === TOKENS === */
:root {
  --bg: #FAFAF8;
  --bg-card: #FFFFFF;
  --bg-sunken: #F4F3F9;
  --text: #1A1A2E;
  --text-muted: #5C5C7A;

  /* "Sand" palette */
  --accent:                 #A87A4A;
  --accent-dark:            #85603A;
  --accent-light:           #F0E3D2;
  --accent-secondary:       #3F5C7A;
  --accent-secondary-light: #DCE5EE;

  --warn: #D97706;
  --warn-light: #FDF1E0;
  --ok: #2D7D46;
  --ok-light: #E8F5EC;
  --err: #DC2626;
  --err-light: #FEE8E8;

  --grid-line: rgba(168, 122, 74, 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 .mk svg { width: 16px; height: 16px; }
.wordmark span { opacity: 0.5; font-weight: 400; }
header nav { display: flex; gap: 1.2rem; align-items: center; }
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; }
/* back to atlas link */
.back-link {
  font-size: 0.82rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card);
  transition: color 0.15s, border-color 0.15s;
}
.back-link:hover { color: var(--accent-dark); border-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;
}

/* === 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: 600px; margin: 0 auto 2rem;
  animation: fadeUp 0.6s ease-out 0.16s both;
}
.hero-arrows { 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 mono / term chip */
.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.obj { color: var(--accent-secondary); background: var(--accent-secondary-light); }
.m.mor { color: var(--accent-dark); background: var(--accent-light); }

/* === CALLOUT === */
.callout {
  display: flex; gap: 0.85rem;
  background: var(--accent-light);
  border: 1px solid #e6d3ba;
  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); }
/* evidence check — this book's recurring aside */
.callout.evidence { background: var(--accent-secondary-light); border-color: #c4d3e2; border-left-color: var(--accent-secondary); }
.callout.evidence strong { color: var(--accent-secondary); }

/* === 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;
}

/* === CODE / ERA TOGGLE (light theme) === */
.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.82rem; font-weight: 500;
  font-family: var(--mono);
  color: var(--code-cm); background: transparent; border: none;
  padding: 0.6rem 1.05rem; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.code-tab:hover { color: var(--text); }
.code-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.code-tab .lang-ic { opacity: 0.9; margin-right: 0.4rem; }
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; } /* comment */
pre.code .kw { color: var(--code-kw); }                     /* keyword */
pre.code .ty { color: var(--code-ty); }                     /* type */
pre.code .fn { color: var(--code-fn); }                     /* function/value */
pre.code .op { color: var(--code-op); }                     /* operator */
pre.code .st { color: var(--code-st); }                     /* string/literal */
.code-pane { display: none; }
.code-pane.active { display: block; }

/* === THEN ⇄ NOW case card content (structured text on the light code surface) === */
.case {
  margin: 0; padding: 1.1rem 1.2rem;
  background: var(--code-bg);
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.6;
  color: var(--code-fg);
}
.case .case-headline {
  font-size: 1rem; font-weight: 700; color: var(--code-kw);
  margin-bottom: 0.15rem; line-height: 1.35;
}
.case .case-sub { font-size: 0.76rem; color: var(--code-cm); margin-bottom: 0.85rem; }
.case .case-line {
  display: flex; gap: 0.6rem; padding: 0.28rem 0;
  border-top: 1px dashed var(--code-border);
}
.case .case-line:first-of-type { border-top: none; }
.case .case-line .case-key {
  flex-shrink: 0; width: 6.5rem;
  color: var(--code-op); font-weight: 600;
}
.case .case-line .case-val { color: var(--code-fg); }
.case .case-line .case-val em { font-style: normal; color: var(--code-ty); font-weight: 600; }

/* === 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 {
  display: block; 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 #e6d3ba; 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); }
/* coming-soon variant */
.next-card.next-soon { opacity: 0.7; cursor: default; }
.next-card.next-soon:hover { transform: none; box-shadow: none; }
.badge-soon {
  margin-left: auto;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-dark); background: var(--bg-card);
  border: 1px solid #e6d3ba; border-radius: 999px;
  padding: 0.25rem 0.65rem;
}

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;
}

/* ============================================================
   HUB — .part sections + chapter cards
   ============================================================ */
.part { padding: 2rem 0; }
.part + .part { border-top: 1px solid var(--border); }
.part .part-label {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-secondary);
  background: var(--accent-secondary-light);
  padding: 0.25rem 0.6rem; border-radius: 999px;
  margin-bottom: 0.7rem;
}
.part .part-intro { color: var(--text-muted); margin-bottom: 1.5rem; max-width: 660px; }

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* live chapter card (anchor) */
.chapter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  position: relative;
  color: inherit; text-decoration: none;
  transition: box-shadow 0.25s ease-out, transform 0.25s ease-out, border-color 0.25s ease-out;
}
a.chapter-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px var(--shadow);
  border-color: var(--accent);
  border-left-color: var(--accent);
}
.chapter-card .cc-head { display: flex; align-items: baseline; gap: 0.6rem; }
.chapter-card .cc-num {
  flex-shrink: 0;
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem;
  color: var(--accent);
}
.chapter-card .cc-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.08rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25;
}
.chapter-card .cc-hook { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.chapter-card .cc-foot {
  margin-top: 0.2rem;
  font-size: 0.8rem; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.chapter-card .cc-foot .arrow { transition: transform 0.2s ease-out; }
a.chapter-card:hover .cc-foot .arrow { transform: translateX(4px); }

/* coming-soon card (div, muted, dashed) */
.chapter-card.soon {
  border: 1px dashed var(--border);
  border-left: 3px dashed #cdc7d6;
  background: var(--bg);
  opacity: 0.82;
}
.chapter-card.soon .cc-num { color: var(--text-muted); }
.chapter-card.soon .cc-title { font-weight: 600; }
.chapter-card.soon .cc-badge {
  align-self: flex-start; margin-top: 0.15rem;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.12rem 0.5rem;
}

/* ============================================================
   CH01 widget-specific rules (uniquely named)
   ============================================================ */
/* perceptual map */
.pmap-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.pmap-readout .pmap-tag { color: var(--accent-dark); font-weight: 700; }
.pmap-readout.crowded { border-color: #e6d3ba; background: var(--accent-light); }
.pmap-readout.open { border-color: #bcd0b8; background: var(--ok-light); }
.pmap-readout.open .pmap-tag { color: var(--ok); }

/* ladder */
.ladder-stage { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ladder-col { flex: 1 1 240px; min-width: 0; }
.attack-narr {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.attack-narr.win { border-color: #bcd0b8; background: var(--ok-light); }
.attack-narr.flat { border-color: #f0c9c9; background: var(--err-light); }

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

/* === RESPONSIVE === */
@media (max-width: 1023px) {
  .hero-title { font-size: 2.5rem; }
}
@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%; }
  .chapter-grid { grid-template-columns: 1fr; }
  .ladder-stage { flex-direction: column; }
}

/* ---------- Chapter 2 widgets ---------- */
/* ============================================================
   CH02 widget-specific rules (uniquely named, ch2- prefix)
   ============================================================ */
/* anchoring demo */
.ch2-anchor-chip {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px dashed var(--accent);
  background: var(--accent-light); color: var(--accent-dark);
}
.ch2-anchor-chip.ch2-quiet {
  border-style: solid; border-color: var(--border);
  background: var(--bg-sunken); color: var(--text-muted); font-weight: 500;
}
.ch2-slider-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.75rem; margin-top: 0.85rem;
}
.ch2-slider-label { font-size: 0.8rem; color: var(--text-muted); }
.ch2-slider {
  flex: 1 1 200px; min-width: 140px;
  accent-color: var(--accent); cursor: pointer;
}
.ch2-val {
  font-family: var(--mono); font-size: 0.95rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.6rem; text-align: right;
}
@media (max-width: 767px) {
  .ch2-slider { flex-basis: 100%; order: 3; }
}

/* ---------- Chapter 3 widgets ---------- */
/* ============================================================
   CH03 widget-specific rules (uniquely prefixed ch3- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* — widget 3 · the verdict sorter — */
.ch3-tray {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  background: var(--bg-sunken); border: 1px dashed var(--border);
  border-radius: 8px; padding: 0.7rem; min-height: 3.2rem;
  margin-bottom: 0.7rem;
}
.ch3-chip {
  font: inherit; font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.32rem 0.7rem; cursor: grab;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ch3-chip:hover { border-color: var(--accent); }
.ch3-chip.ch3-sel {
  border-color: var(--accent); background: var(--accent-light);
  color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(168, 122, 74, 0.18);
}
.ch3-chip.ch3-right { border-color: var(--ok); background: var(--ok-light); color: #1b5e2e; }
.ch3-chip.ch3-wrong { border-color: var(--err); background: var(--err-light); color: #b91c1c; }
.ch3-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.ch3-bin {
  background: var(--bg-sunken); border: 1px dashed var(--border); border-radius: 8px;
  padding: 0.6rem; min-height: 8rem;
  display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ch3-bin:hover, .ch3-bin:focus-visible, .ch3-bin.ch3-over {
  border-color: var(--accent); background: var(--accent-light);
}
.ch3-bin-head {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.ch3-bin[data-bin="survived"] .ch3-bin-head { color: var(--ok); }
.ch3-bin[data-bin="amended"]  .ch3-bin-head { color: var(--warn); }
.ch3-bin[data-bin="busted"]   .ch3-bin-head { color: var(--err); }
/* revealed verdict table */
.ch3-verdicts {
  margin-top: 0.85rem; font-size: 0.86rem; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.8rem; background: var(--bg-card);
}
.ch3-v { display: flex; gap: 0.6rem; padding: 0.38rem 0; border-top: 1px dashed var(--border); flex-wrap: wrap; }
.ch3-v:first-child { border-top: none; }
.ch3-v-law { flex-shrink: 0; width: 11rem; font-family: var(--mono); font-size: 0.76rem; font-weight: 700; }
.ch3-v-tag {
  flex-shrink: 0; width: 5.4rem;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ch3-v-survived { color: var(--ok); }
.ch3-v-amended  { color: var(--warn); }
.ch3-v-busted   { color: var(--err); }
.ch3-v-why { flex: 1 1 16rem; color: var(--text-muted); }

/* — §8 · the distilled modern lawbook — */
.ch3-laws { list-style: none; margin: 1rem 0 0.5rem; padding: 0; counter-reset: ch3law; }
.ch3-laws li { position: relative; padding: 0.6rem 0 0.6rem 2.7rem; border-top: 1px dashed var(--border); }
.ch3-laws li:first-child { border-top: none; }
.ch3-laws li::before {
  counter-increment: ch3law;
  content: counter(ch3law, decimal-leading-zero);
  position: absolute; left: 0; top: 0.68rem;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  color: var(--accent);
}
.ch3-laws li strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; }

@media (max-width: 767px) {
  .ch3-bins { grid-template-columns: 1fr; }
  .ch3-bin { min-height: 4.5rem; }
  .ch3-v-law { width: 100%; }
}

/* ---------- Chapter 4 widgets ---------- */
/* ============================================================
   CH04 widget-specific rules (uniquely named, ch4- prefix)
   ============================================================ */
/* widget 1 · the fixed customer card */
.ch4-persona {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.4rem 1.3rem;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.6rem 0.95rem; margin-bottom: 0.6rem;
}
.ch4-persona-name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.02rem; }
.ch4-persona-name span {
  font-family: var(--mono); font-weight: 400; font-size: 0.7rem;
  color: var(--text-muted); letter-spacing: 0.04em;
}
.ch4-persona-grid { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-family: var(--mono); font-size: 0.78rem; }
.ch4-pair { display: inline-flex; gap: 0.35rem; align-items: baseline; }
.ch4-pk { color: var(--text-muted); }
.ch4-pv { font-weight: 600; color: var(--text); }

/* shared mono readout for ch4 widgets (state via ch4-good / ch4-bad) */
.ch4-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch4-readout strong { color: var(--accent-dark); font-weight: 700; }
.ch4-readout.ch4-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch4-readout.ch4-good strong { color: var(--ok); }
.ch4-readout.ch4-bad { border-color: #f0c9c9; background: var(--err-light); }
.ch4-readout.ch4-bad strong { color: var(--err); }

/* widget 2 · job-zone color key chips */
.ch4-zone-key {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted);
}
.ch4-zone-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ch4-zone-key .ch4-zi-am { background: rgba(168, 122, 74, 0.45); }
.ch4-zone-key .ch4-zi-pm { background: rgba(63, 92, 122, 0.45); }

/* widget 3 · budget slider */
.ch4-range {
  flex: 1 1 170px; min-width: 140px; max-width: 320px;
  accent-color: var(--accent); cursor: pointer;
}
.ch4-range-label { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); }
.ch4-split { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--accent-dark); }
@media (max-width: 767px) {
  .ch4-range { flex-basis: 100%; order: 3; }
}

/* ---------- Chapter 5 widgets ---------- */
/* ============================================================
   CH05 widget-specific rules (uniquely prefixed ch5-)
   ============================================================ */
/* mono readout box under each ch5 widget */
.ch5-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch5-readout.ok   { border-color: #bcd0b8; background: var(--ok-light); }
.ch5-readout.warn { border-color: #f3dcb6; background: var(--warn-light); }

/* strategy scoreboard chips (histogram widget) */
.ch5-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.ch5-stat {
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--text-muted); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.ch5-stat b { color: var(--accent-dark); font-weight: 700; }
.ch5-stat.lit-ok   { border-color: #bcd0b8; background: var(--ok-light); }
.ch5-stat.lit-warn { border-color: #f3dcb6; background: var(--warn-light); }

/* two-levers sliders */
.ch5-slider-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; }
.ch5-slider-row label {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
  width: 10.5rem; flex-shrink: 0;
}
.ch5-range { flex: 1; min-width: 120px; accent-color: var(--accent); cursor: pointer; }
.ch5-range.mind { accent-color: var(--accent-secondary); }
.ch5-slider-val {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  color: var(--accent-dark); width: 3.2rem; text-align: right; flex-shrink: 0;
}

/* occasion-grid legend */
.ch5-legend {
  display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem;
  font-family: var(--mono); font-size: 0.76rem; color: var(--text-muted);
}
.ch5-legend .ch5-sw {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 0.35rem; vertical-align: -1px; border: 1px solid var(--border);
}

/* SVG interaction affordances */
.ch5-drag { cursor: grab; }
.ch5-drag:active { cursor: grabbing; }
.ch5-bar { cursor: pointer; }

@media (max-width: 767px) {
  .ch5-slider-row { flex-wrap: wrap; }
  .ch5-slider-row label { width: 100%; }
}

/* ---------- Chapter 6 widgets ---------- */
/* ============================================================
   CH06 widget-specific rules (uniquely named, ch6- prefix)
   ============================================================ */
/* asset grid (widget 1) — draggable chips */
.ch6-chip { cursor: grab; }
.ch6-chip rect {
  fill: var(--bg-card); stroke: var(--border); stroke-width: 1.25;
  transition: stroke 0.15s, fill 0.15s;
}
.ch6-chip:hover rect { stroke: var(--accent); }
.ch6-chip.ch6-sel rect { stroke: var(--accent); stroke-width: 2; fill: var(--accent-light); }
.ch6-chip text { pointer-events: none; }

/* thumbnail test (widget 2) — squint filter + control groups */
.ch6-shelf { transition: filter 0.35s ease; }
.ch6-shelf.ch6-blurred { filter: blur(2.6px) saturate(0.85); }
.ch6-ctlgroup {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 0.45rem; margin-right: 0.5rem;
}
.ch6-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* consistency compound (widget 3) — scrub + legend */
.ch6-scrub { flex: 1 1 200px; min-width: 150px; accent-color: var(--accent); }
.ch6-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted);
  margin-top: 0.6rem;
}
.ch6-key { display: inline-flex; align-items: center; gap: 0.4rem; }
.ch6-swatch { width: 22px; border-top: 3px solid var(--text-muted); border-radius: 2px; }
.ch6-swatch.ch6-line-a { border-color: var(--accent-secondary); }
.ch6-swatch.ch6-line-b { border-color: var(--accent); }
.ch6-swatch.ch6-line-c { border-color: var(--err); border-top-style: dashed; }

@media (prefers-reduced-motion: reduce) {
  .ch6-shelf { transition: none; }
  .ch6-chip rect { transition: none; }
}

/* ---------- Chapter 7 widgets ---------- */
/* ============================================================
   CH07 widget-specific rules (uniquely prefixed ch7- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch7 widget (state via win / flat / loss) */
.ch7-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch7-readout b { color: var(--accent-dark); }
.ch7-readout.ch7-win  { border-color: #bcd0b8; background: var(--ok-light); }
.ch7-readout.ch7-win b { color: var(--ok); }
.ch7-readout.ch7-flat { border-color: #f3dcb6; background: var(--warn-light); }
.ch7-readout.ch7-flat b { color: var(--warn); }
.ch7-readout.ch7-loss { border-color: #f0c9c9; background: var(--err-light); }
.ch7-readout.ch7-loss b { color: var(--err); }

/* small control-group label ("your position" / "your move") */
.ch7-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-right: 0.2rem;
}

/* — widget 2 · ESOV dial sliders — */
.ch7-slider-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; }
.ch7-slider-row label {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
  width: 10.5rem; flex-shrink: 0;
}
.ch7-range { flex: 1; min-width: 120px; accent-color: var(--accent); cursor: pointer; }
.ch7-range.ch7-som { accent-color: var(--accent-secondary); }
.ch7-slider-val {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  color: var(--accent-dark); width: 3.2rem; text-align: right; flex-shrink: 0;
}

/* — widget 3 · the bad-strategy detector — */
.ch7-tray {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  background: var(--bg-sunken); border: 1px dashed var(--border);
  border-radius: 8px; padding: 0.7rem; min-height: 3.2rem;
  margin-bottom: 0.7rem;
}
.ch7-chip {
  font: inherit; font-family: var(--mono); font-size: 0.76rem; font-weight: 600;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.32rem 0.7rem; cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ch7-chip:hover { border-color: var(--accent); }
.ch7-chip.ch7-sel {
  border-color: var(--accent); background: var(--accent-light);
  color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(168, 122, 74, 0.18);
}
.ch7-chip.ch7-right { border-color: var(--ok); background: var(--ok-light); color: #1b5e2e; }
.ch7-chip.ch7-wrong { border-color: var(--err); background: var(--err-light); color: #b91c1c; }
.ch7-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.ch7-bin {
  background: var(--bg-sunken); border: 1px dashed var(--border); border-radius: 8px;
  padding: 0.6rem; min-height: 8rem;
  display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ch7-bin:hover, .ch7-bin:focus-visible { border-color: var(--accent); background: var(--accent-light); }
.ch7-bin-head {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); pointer-events: none;
}
.ch7-bin[data-ch7bin="real"]  .ch7-bin-head { color: var(--ok); }
.ch7-bin[data-ch7bin="goal"]  .ch7-bin-head { color: var(--warn); }
.ch7-bin[data-ch7bin="fluff"] .ch7-bin-head { color: var(--err); }

/* revealed per-chip verdicts */
.ch7-verdicts {
  margin-top: 0.85rem; font-size: 0.85rem; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.8rem; background: var(--bg-card);
}
.ch7-v { display: flex; gap: 0.6rem; padding: 0.38rem 0; border-top: 1px dashed var(--border); flex-wrap: wrap; }
.ch7-v:first-child { border-top: none; }
.ch7-v-chip { flex: 1 1 15rem; font-family: var(--mono); font-size: 0.74rem; font-weight: 700; }
.ch7-v-tag {
  flex-shrink: 0; width: 8.2rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ch7-v-real  { color: var(--ok); }
.ch7-v-goal  { color: var(--warn); }
.ch7-v-fluff { color: var(--err); }
.ch7-v-why { flex: 1 1 14rem; color: var(--text-muted); }

/* — §8 · the one-page strategy — */
.ch7-kernel { list-style: none; margin: 1rem 0 0.5rem; padding: 0; counter-reset: ch7k; }
.ch7-kernel li { position: relative; padding: 0.6rem 0 0.6rem 2.7rem; border-top: 1px dashed var(--border); }
.ch7-kernel li:first-child { border-top: none; }
.ch7-kernel li::before {
  counter-increment: ch7k;
  content: counter(ch7k, decimal-leading-zero);
  position: absolute; left: 0; top: 0.68rem;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  color: var(--accent);
}
.ch7-kernel li strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; }

@media (max-width: 767px) {
  .ch7-bins { grid-template-columns: 1fr; }
  .ch7-bin { min-height: 4.5rem; }
  .ch7-slider-row { flex-wrap: wrap; }
  .ch7-slider-row label { width: 100%; }
  .ch7-v-chip { flex-basis: 100%; }
}

/* ---------- Chapter 8 widgets ---------- */
/* ============================================================
   CH08 widget-specific rules (uniquely prefixed ch8- ;
   merged into style.css by the orchestrator)
   ============================================================ */
/* mono readout box under each ch8 widget */
.ch8-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch8-readout strong { color: var(--accent-dark); font-weight: 700; }
.ch8-readout.ch8-ok   { border-color: #bcd0b8; background: var(--ok-light); }
.ch8-readout.ch8-ok strong { color: var(--ok); }
.ch8-readout.ch8-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch8-readout.ch8-warn strong { color: var(--warn); }
.ch8-readout.ch8-bad  { border-color: #f0c9c9; background: var(--err-light); }
.ch8-readout.ch8-bad strong { color: var(--err); }

/* mix-equalizer faders */
.ch8-knob { cursor: grab; }
.ch8-knob:active { cursor: grabbing; }
.ch8-track { cursor: pointer; }

/* channel-toggle cost chip (arm's-reach widget) */
.ch8-cost {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  color: var(--text-muted); background: var(--bg-sunken);
  border-radius: 999px; padding: 0.08rem 0.45rem;
}

/* slider rows (loop-vs-megaphone widget) */
.ch8-slider-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; }
.ch8-slider-row label {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
  width: 10.5rem; flex-shrink: 0;
}
.ch8-range { flex: 1; min-width: 120px; accent-color: var(--accent); cursor: pointer; }
.ch8-range.ch8-alt { accent-color: var(--accent-secondary); }
.ch8-slider-val {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  color: var(--accent-dark); width: 3.4rem; text-align: right; flex-shrink: 0;
}

/* one-page mix canvas (§8) */
.ch8-canvas {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); padding: 0.5rem 0.9rem;
  margin: 1rem 0 0.5rem; font-size: 0.9rem; line-height: 1.55;
}
.ch8-canvas-row { display: flex; gap: 0.7rem; padding: 0.45rem 0; border-top: 1px dashed var(--border); }
.ch8-canvas-row:first-child { border-top: none; }
.ch8-cp {
  flex-shrink: 0; width: 6.2rem;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 700;
  color: var(--accent-dark); padding-top: 0.15rem;
}
.ch8-canvas-row.ch8-coh .ch8-cp { color: var(--accent-secondary); }

@media (max-width: 767px) {
  .ch8-slider-row { flex-wrap: wrap; }
  .ch8-slider-row label { width: 100%; }
  .ch8-canvas-row { flex-wrap: wrap; }
  .ch8-cp { width: 100%; padding-top: 0; }
}

/* ---------- Chapter 9 widgets ---------- */
/* ============================================================
   CH09 widget-specific rules (uniquely prefixed ch9- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* — widget 2 · tier workbench — */
.ch9-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.6rem; margin-bottom: 0.75rem;
}
.ch9-tier {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.7rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ch9-tier.ch9-hot {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 122, 74, 0.16);
}
.ch9-tier.ch9-dead { opacity: 0.72; }
.ch9-tier.ch9-decoy {
  border-style: dashed; border-color: var(--warn);
  background: var(--warn-light);
}
.ch9-tier-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-size: 0.98rem; line-height: 1.25;
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem;
}
.ch9-tier-tag {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--warn);
}
.ch9-price-row { display: flex; align-items: center; gap: 0.35rem; }
.ch9-step {
  font: inherit; font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-sunken);
  color: var(--text); cursor: pointer; line-height: 1;
  transition: border-color 0.15s, color 0.15s;
}
.ch9-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); }
.ch9-step:disabled { opacity: 0.4; cursor: not-allowed; }
.ch9-price {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.3rem; text-align: center;
}
.ch9-price-per { font-family: var(--mono); font-size: 0.66rem; color: var(--text-muted); }
.ch9-feat {
  display: flex; align-items: center; gap: 0.42rem;
  font-size: 0.79rem; color: var(--text); cursor: pointer;
  line-height: 1.35;
}
.ch9-feat input { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.ch9-feat input:disabled { cursor: not-allowed; }
.ch9-feat.ch9-off { color: var(--text-muted); }

/* — widget 3 · demand curve — */
.ch9-slider-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.75rem; margin-top: 0.85rem;
}
.ch9-slider-label { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); }
.ch9-range {
  flex: 1 1 190px; min-width: 140px; max-width: 340px;
  accent-color: var(--accent); cursor: pointer;
}
.ch9-val {
  font-family: var(--mono); font-size: 0.92rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.4rem; text-align: right;
}
.ch9-drag { cursor: grab; }
.ch9-drag:active { cursor: grabbing; }

/* — §8 · the pricing checklist — */
.ch9-check { list-style: none; margin: 1rem 0 0.5rem; padding: 0; counter-reset: ch9chk; }
.ch9-check li { position: relative; padding: 0.6rem 0 0.6rem 2.7rem; border-top: 1px dashed var(--border); }
.ch9-check li:first-child { border-top: none; }
.ch9-check li::before {
  counter-increment: ch9chk;
  content: counter(ch9chk, decimal-leading-zero);
  position: absolute; left: 0; top: 0.68rem;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  color: var(--accent);
}
.ch9-check li strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; }

@media (max-width: 767px) {
  .ch9-tiers { grid-template-columns: repeat(2, 1fr); }
  .ch9-range { flex-basis: 100%; order: 3; max-width: none; }
}
@media (max-width: 480px) {
  .ch9-tiers { grid-template-columns: 1fr; }
}

/* ---------- Chapter 10 widgets ---------- */
/* ============================================================
   CH10 widget-specific rules (uniquely prefixed ch10- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* shared mono readout box under each ch10 widget
   (state via ch10-good / ch10-bad / ch10-warn) */
.ch10-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch10-readout strong { color: var(--accent-dark); font-weight: 700; }
.ch10-readout.ch10-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch10-readout.ch10-good strong { color: var(--ok); }
.ch10-readout.ch10-bad { border-color: #f0c9c9; background: var(--err-light); }
.ch10-readout.ch10-bad strong { color: var(--err); }
.ch10-readout.ch10-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch10-readout.ch10-warn strong { color: var(--warn); }

/* — widget 1 · say–do gap — */
.ch10-gaprow { cursor: pointer; }
.ch10-gaprow text { pointer-events: none; }
.ch10-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  font-family: var(--mono); font-size: 0.76rem; color: var(--text-muted);
}
.ch10-legend .ch10-sw {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 0.35rem; vertical-align: -1px;
}
.ch10-sw-claim { background: rgba(63, 92, 122, 0.72); }
.ch10-sw-did   { background: rgba(168, 122, 74, 0.92); }

/* — widget 2 · noise machine — */
.ch10-runchip {
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--text-muted); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.ch10-runchip b { color: var(--accent-dark); font-weight: 700; }

/* — widget 3 · triangulation board — */
.ch10-chipg { cursor: pointer; }
.ch10-chipg rect {
  fill: var(--bg-card); stroke: var(--border); stroke-width: 1.25;
  transition: stroke 0.15s, fill 0.15s;
}
.ch10-chipg:hover rect { stroke: var(--accent); }
.ch10-chipg.ch10-sel rect { stroke: var(--accent); stroke-width: 2; fill: var(--accent-light); }
.ch10-chipg.ch10-spot rect  { stroke: var(--ok);   fill: var(--ok-light); }
.ch10-chipg.ch10-close rect { stroke: var(--warn); fill: var(--warn-light); }
.ch10-chipg.ch10-off rect   { stroke: var(--err);  fill: var(--err-light); }
.ch10-chipg text { pointer-events: none; }
.ch10-cell { cursor: pointer; transition: fill 0.15s; }
.ch10-arm .ch10-cell:hover { fill: var(--accent-light); }

/* revealed grading table */
.ch10-verdicts {
  margin-top: 0.85rem; font-size: 0.86rem; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.8rem; background: var(--bg-card);
}
.ch10-v { display: flex; gap: 0.6rem; padding: 0.38rem 0; border-top: 1px dashed var(--border); flex-wrap: wrap; }
.ch10-v:first-child { border-top: none; }
.ch10-v-name { flex-shrink: 0; width: 12rem; font-family: var(--mono); font-size: 0.76rem; font-weight: 700; }
.ch10-v-tag {
  flex-shrink: 0; width: 5.4rem;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ch10-v-spot  { color: var(--ok); }
.ch10-v-close { color: var(--warn); }
.ch10-v-off   { color: var(--err); }
.ch10-v-why { flex: 1 1 16rem; color: var(--text-muted); }

@media (max-width: 767px) {
  .ch10-v-name { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ch10-chipg rect { transition: none; }
  .ch10-cell { transition: none; }
}

/* ---------- Chapter 11 widgets ---------- */
/* ============================================================
   CH11 widget-specific rules (uniquely prefixed ch11- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* shared mono readout for ch11 widgets (state via ch11-good / ch11-bad) */
.ch11-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch11-readout b, .ch11-readout strong { color: var(--accent-dark); font-weight: 700; }
.ch11-readout.ch11-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch11-readout.ch11-good b { color: var(--ok); }
.ch11-readout.ch11-bad { border-color: #f0c9c9; background: var(--err-light); }
.ch11-readout.ch11-bad b { color: var(--err); }

/* — widget 1 · the curve and the gap — */
.ch11-token { cursor: grab; }
.ch11-token:active { cursor: grabbing; }

/* — widget 2 · bowling-pin planner — */
.ch11-pin { cursor: pointer; }
.ch11-pin .ch11-pin-body {
  fill: var(--bg-card); stroke: var(--border); stroke-width: 1.5;
  transition: stroke 0.15s, fill 0.15s;
}
.ch11-pin:hover .ch11-pin-body { stroke: var(--accent); }
.ch11-pin.ch11-won .ch11-pin-body { fill: var(--accent-light); stroke: var(--accent); stroke-width: 2; }
.ch11-pin text { pointer-events: none; }

/* revealed pick-by-pick plan inside the readout */
.ch11-plan { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.ch11-plan li { padding: 0.34rem 0; border-top: 1px dashed var(--border); }
.ch11-plan li:first-child { border-top: none; }
.ch11-pts {
  display: inline-block; min-width: 2rem; text-align: center;
  font-weight: 700; font-size: 0.76rem;
  border-radius: 999px; padding: 0.06rem 0.4rem; margin-right: 0.45rem;
  background: var(--accent-light); color: var(--accent-dark);
  border: 1px solid #e6d3ba;
}
.ch11-pts.ch11-pts-3 { background: var(--ok-light); color: var(--ok); border-color: #bcd0b8; }
.ch11-pts.ch11-pts-1 { background: var(--warn-light); color: var(--warn); border-color: #f3dcb6; }
.ch11-pts.ch11-pts-0 { background: var(--err-light); color: var(--err); border-color: #f0c9c9; }
.ch11-plan-verdict {
  margin-top: 0.6rem; padding-top: 0.55rem;
  border-top: 1px solid var(--border); font-weight: 600;
}

/* — widget 3 · name the problem — */
#ch11ScenRoot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.4rem; }
.ch11-scen {
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.75rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.ch11-scen-prod { font-size: 0.9rem; line-height: 1.45; margin-bottom: 0.15rem; }
.ch11-scen-prod span {
  display: inline-block; margin-right: 0.4rem;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-dark); background: var(--accent-light);
  border-radius: 999px; padding: 0.08rem 0.5rem;
}
.ch11-frame {
  font: inherit; font-size: 0.85rem; text-align: left;
  display: flex; align-items: baseline; gap: 0.55rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.7rem; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ch11-frame:hover:not(.ch11-locked) { border-color: var(--accent); background: var(--accent-light); }
.ch11-frame .ch11-ft {
  flex-shrink: 0; width: 6.6rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.ch11-frame.ch11-locked { cursor: default; }
.ch11-frame.ch11-best { border-color: var(--ok); background: var(--ok-light); color: #1b5e2e; }
.ch11-frame.ch11-best .ch11-ft { color: var(--ok); }
.ch11-frame.ch11-mid { border-color: var(--warn); background: var(--warn-light); color: #8a4b04; }
.ch11-frame.ch11-mid .ch11-ft { color: var(--warn); }
.ch11-frame.ch11-poor { border-color: var(--err); background: var(--err-light); color: #b91c1c; }
.ch11-frame.ch11-poor .ch11-ft { color: var(--err); }
.ch11-frame.ch11-key { border-color: var(--ok); border-style: dashed; }
.ch11-scen-fb {
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.5;
  color: var(--text-muted); min-height: 1.1em;
}
.ch11-scen-fb.ch11-show { color: var(--text); }

/* — §8 · the playbook checklist — */
.ch11-checklist { list-style: none; margin: 1rem 0 0.5rem; padding: 0; counter-reset: ch11step; }
.ch11-checklist li { position: relative; padding: 0.6rem 0 0.6rem 2.7rem; border-top: 1px dashed var(--border); }
.ch11-checklist li:first-child { border-top: none; }
.ch11-checklist li::before {
  counter-increment: ch11step;
  content: counter(ch11step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.68rem;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  color: var(--accent);
}
.ch11-checklist li strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; }

@media (max-width: 767px) {
  #ch11ScenRoot { grid-template-columns: 1fr; }
  .ch11-frame .ch11-ft { width: 5.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ch11-pin .ch11-pin-body, .ch11-frame { transition: none; }
}

/* ---------- Chapter 12 widgets ---------- */
/* ============================================================
   CH12 widget-specific rules (uniquely prefixed ch12- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch12 widget
   (state via ch12-good / ch12-warn / ch12-bad) */
.ch12-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch12-readout.ch12-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch12-readout.ch12-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch12-readout.ch12-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group (preset row) */
.ch12-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* toggle buttons carry their answer in a <b class="ch12-tv"> — style it as the value */
.ch12-tv {
  font-weight: 700; color: var(--accent-dark);
  font-family: var(--mono); font-size: 0.8rem;
}

@media (max-width: 767px) {
  .ch12-readout { font-size: 0.8rem; }
}

/* ============================================================
   CH13 widget-specific rules (uniquely prefixed ch13- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch13 widget
   (state via ch13-good / ch13-warn / ch13-bad) */
.ch13-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch13-readout.ch13-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch13-readout.ch13-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch13-readout.ch13-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group */
.ch13-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* the ad copy under inspection in the principle spotter —
   a quote card sitting above the lever board */
.ch13-msg {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-secondary);
  border-radius: 8px;
  padding: 0.8rem 1rem; margin: 0.75rem 0;
  font-size: 0.95rem; line-height: 1.55;
}
.ch13-msg .ch13-msg-tag {
  display: block;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 0.25rem;
}

/* lever buttons after the reveal: hit / false alarm.
   (missed levers are shown on the SVG board, not the buttons) */
.btn.ch13-hit   { background: var(--ok-light); border-color: var(--ok); color: var(--ok); }
.btn.ch13-false { background: var(--err-light); border-color: var(--err); color: var(--err); }

/* labeled slider row used by the proof-curve and scarcity widgets */
.ch13-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 260px; min-width: 220px;
}
.ch13-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch13-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch13-slider .ch13-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.4rem; text-align: right;
}

@media (max-width: 767px) {
  .ch13-readout { font-size: 0.8rem; }
  .ch13-slider { flex: 1 1 100%; }
}

/* ---------- Chapter 14 widgets ---------- */
/* ============================================================
   CH14 widget-specific rules (uniquely prefixed ch14- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch14 widget
   (state via ch14-good / ch14-warn / ch14-bad) */
.ch14-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch14-readout.ch14-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch14-readout.ch14-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch14-readout.ch14-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group */
.ch14-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* clickable regions of the ad-anatomy diagram */
.ch14-zone { fill: transparent; stroke: transparent; cursor: pointer; }
.ch14-zone:hover { fill: rgba(168, 122, 74, 0.07); }
.ch14-zone.ch14-zsel {
  fill: rgba(168, 122, 74, 0.10);
  stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4;
}

/* intent slider row for the attention-budget widget */
.ch14-slider { display: flex; align-items: center; gap: 0.7rem; flex: 1 1 260px; min-width: 220px; }
.ch14-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 120px; }
.ch14-slider .ch14-sv {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.2rem; text-align: right;
}

@media (max-width: 767px) {
  .ch14-readout { font-size: 0.8rem; }
}

/* ============================================================
   CH15 widget-specific rules (uniquely prefixed ch15- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch15 widget
   (state via ch15-good / ch15-warn / ch15-bad) */
.ch15-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch15-readout.ch15-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch15-readout.ch15-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch15-readout.ch15-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group */
.ch15-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* slider grid (split-run lab + honesty gap) */
.ch15-sliders {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem 1.25rem; margin-top: 0.85rem;
}
.ch15-sliders.ch15-sliders-1 { grid-template-columns: minmax(0, 420px); }
.ch15-slider label {
  display: block; font-family: var(--mono); font-size: 0.78rem;
  color: var(--text-muted); margin-bottom: 0.25rem;
}
.ch15-slider input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.ch15-sv { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--accent-dark); }

/* claim scorer: the claim under the lens */
.ch15-claim {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; font-weight: 600;
  line-height: 1.4; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 0.75rem 1rem; margin-top: 0.85rem;
}

/* scored-feature chips */
.ch15-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.ch15-chip {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600;
  border-radius: 999px; padding: 0.18rem 0.6rem;
  border: 1px solid var(--border); background: var(--bg-sunken); color: var(--text-muted);
}
.ch15-chip.ch15-plus  { border-color: #bcd0b8; background: var(--ok-light); color: var(--ok); }
.ch15-chip.ch15-minus { border-color: #f0c9c9; background: var(--err-light); color: var(--err); }

/* "score your own claim" row */
.ch15-tryrow { display: flex; gap: 0.5rem; margin-top: 0.85rem; flex-wrap: wrap; }
.ch15-tryrow input[type="text"] {
  flex: 1 1 260px; min-width: 0;
  font: inherit; font-family: var(--mono); font-size: 0.85rem;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.45rem 0.7rem;
}
.ch15-tryrow input[type="text"]:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }

@media (max-width: 767px) {
  .ch15-readout { font-size: 0.8rem; }
  .ch15-sliders { grid-template-columns: 1fr; }
  .ch15-claim { font-size: 1.02rem; }
}

/* ============================================================
   CH16 widget-specific rules (uniquely prefixed ch16- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch16 widget
   (state via ch16-good / ch16-warn / ch16-bad) */
.ch16-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch16-readout.ch16-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch16-readout.ch16-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch16-readout.ch16-bad  { border-color: #f0c9c9; background: var(--err-light); }
.ch16-readout strong { color: var(--accent-dark); }

/* small uppercase label introducing a control group */
.ch16-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* the guess slider (tapper widget) */
.ch16-range {
  flex: 1 1 200px; min-width: 150px; max-width: 320px;
  accent-color: var(--accent);
}
.ch16-rangeval {
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.4ch;
}

/* quoted message under test (stickiness scorer) */
.ch16-msgbox {
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.55;
  color: var(--code-fg); background: var(--code-bg);
  border: 1px solid var(--code-border); border-radius: 8px;
  padding: 0.7rem 0.9rem; margin-top: 0.85rem;
}
.ch16-msgbox .ch16-src { color: var(--code-cm); font-size: 0.76rem; }

/* the six SUCCESs rating chips (toggle state via .on) */
.ch16-chip {
  font: inherit; font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.32rem 0.75rem; cursor: pointer;
  transition: all 0.15s ease-out;
}
.ch16-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.ch16-chip.on {
  color: var(--accent-dark); background: var(--accent-light);
  border-color: var(--accent);
}

@media (max-width: 767px) {
  .ch16-readout { font-size: 0.8rem; }
  .ch16-msgbox { font-size: 0.78rem; }
  .ch16-range { max-width: none; }
}

/* ============================================================
   CH17 widget-specific rules (uniquely prefixed ch17- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch17 widget
   (state via ch17-good / ch17-warn / ch17-bad) */
.ch17-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch17-readout.ch17-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch17-readout.ch17-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch17-readout.ch17-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* — hero-vs-guide flip · homepage copy mock — */
.ch17-copy {
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 0.5rem;
  padding: 1.1rem 1.25rem; margin-bottom: 0.75rem;
}
.ch17-copy .ch17-line { font-size: 0.92rem; margin-bottom: 0.55rem; line-height: 1.55; }
.ch17-copy .ch17-line.ch17-h {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 0.7rem; line-height: 1.25;
}
.ch17-copy .ch17-cta {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.85rem; font-weight: 600;
  color: var(--accent-dark); background: var(--accent-light);
  border: 1px solid #e6d3ba; border-radius: 8px;
  padding: 0.45rem 0.9rem;
}
/* pronoun highlights: brand-pronouns vs customer-pronouns */
.ch17-we {
  background: var(--err-light); color: #b91c1c;
  border-radius: 4px; padding: 0.04em 0.22em; font-weight: 600;
}
.ch17-you {
  background: var(--ok-light); color: #1b5e2e;
  border-radius: 4px; padding: 0.04em 0.22em; font-weight: 600;
}

/* — BrandScript builder · beat grid + option cards — */
.ch17-beats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem; margin-top: 0.85rem;
}
.ch17-beat {
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.7rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.ch17-beat-label {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-secondary);
  margin-bottom: 0.15rem;
}
.btn.ch17-opt {
  display: block; width: 100%; text-align: left;
  font-size: 0.8rem; line-height: 1.4;
  padding: 0.45rem 0.6rem;
}
.btn.ch17-opt.ch17-trapped {
  background: var(--err-light); border-color: var(--err); color: #b91c1c;
}
.btn.ch17-opt.ch17-weak {
  background: var(--warn-light); border-color: var(--warn); color: #92590a;
}

/* the assembled script — serif, reads like a story */
.ch17-script {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.02rem; font-style: italic; line-height: 1.6;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px dashed var(--border); border-radius: 8px;
  padding: 0.85rem 1rem; margin-top: 0.85rem;
}
.ch17-script.ch17-live {
  color: var(--text);
  border-style: solid; border-color: #e6d3ba;
  background: var(--accent-light);
}
.ch17-script strong { font-style: normal; color: var(--accent-dark); }

@media (max-width: 767px) {
  .ch17-readout { font-size: 0.8rem; }
  .ch17-beats { grid-template-columns: 1fr; }
  .ch17-copy .ch17-line.ch17-h { font-size: 1.1rem; }
}

/* ============================================================
   CH18 widget-specific rules (uniquely prefixed ch18- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch18 widget
   (state via ch18-good / ch18-warn / ch18-bad) */
.ch18-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch18-readout.ch18-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch18-readout.ch18-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch18-readout.ch18-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group */
.ch18-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* toggle buttons carry their answer in a <b class="ch18-tv"> */
.ch18-tv {
  font-weight: 700; color: var(--accent-dark);
  font-family: var(--mono); font-size: 0.8rem;
}

/* signaling-calculator slider */
.ch18-range {
  flex: 1 1 200px; min-width: 140px; max-width: 340px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* logical-vs-psychological sorter */
.ch18-sort { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ch18-sort-item {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-sunken);
  padding: 0.75rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.ch18-sort-q { font-size: 0.9rem; line-height: 1.5; }
.ch18-sort-n {
  font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
  color: var(--accent); margin-right: 0.45rem;
}
.ch18-sort-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.ch18-sort-row .btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
.ch18-sort-verdict {
  display: none;
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.5;
  border-radius: 6px; padding: 0.5rem 0.65rem;
}
.ch18-sort-verdict.show { display: block; }
.ch18-sort-verdict.ch18-v-ok { background: var(--ok-light); color: #1b5e2e; border: 1px solid #bcd0b8; }
.ch18-sort-verdict.ch18-v-no { background: var(--err-light); color: #b91c1c; border: 1px solid #f0c9c9; }
.ch18-sort-tally {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 0.85rem;
}
.ch18-sort-tally svg { flex-shrink: 0; }
.ch18-sort-tally .ch18-readout { margin-top: 0; flex: 1; }

@media (max-width: 767px) {
  .ch18-readout { font-size: 0.8rem; }
  .ch18-sort { grid-template-columns: 1fr; }
  .ch18-sort-tally { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   CH19 widget-specific rules (uniquely prefixed ch19-)
   ============================================================ */
/* shared mono readout box under each ch19 widget */
.ch19-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch19-readout.ch19-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch19-readout.ch19-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch19-readout.ch19-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small label chip in control rows */
.ch19-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

/* slider rows */
.ch19-sliderrow {
  display: flex; align-items: center; gap: 0.7rem;
  flex-wrap: wrap; margin-top: 0.85rem;
}
.ch19-sliderrow label {
  font-family: var(--mono); font-size: 0.82rem; color: var(--text-muted);
  flex-shrink: 0;
}
.ch19-sliderrow input[type="range"] {
  flex: 1 1 200px; min-width: 140px;
  accent-color: var(--accent);
}
.ch19-sv { color: var(--accent-dark); font-weight: 700; }

/* budget split bar under the two-clocks slider */
.ch19-splitbar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--border); margin-top: 0.5rem;
}
.ch19-splitbar .ch19-sb-brand { background: var(--accent-secondary); }
.ch19-splitbar .ch19-sb-act   { background: var(--accent); }
.ch19-splitkey {
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted);
  margin-top: 0.35rem;
}
.ch19-splitkey .ch19-k::before {
  content: ''; display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px;
  background: var(--accent);
}
.ch19-splitkey .ch19-k.ch19-k-brand::before { background: var(--accent-secondary); }

@media (max-width: 767px) {
  .ch19-readout { font-size: 0.8rem; }
  .ch19-sliderrow label { font-size: 0.76rem; }
}

/* ============================================================
   CH20 widget-specific rules (uniquely prefixed ch20-)
   ============================================================ */
/* shared mono readout box under each ch20 widget */
.ch20-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch20-readout.ch20-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch20-readout.ch20-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch20-readout.ch20-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* control-row label chip */
.ch20-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}
.ch20-tv { font-weight: 700; color: var(--accent-dark); }

/* slider rows (auction + time machine) */
.ch20-sliderrow {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 0.85rem; flex-wrap: wrap;
}
.ch20-sliderrow label {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
  flex-shrink: 0;
}
.ch20-sliderrow input[type="range"] {
  flex: 1 1 160px; min-width: 120px;
  accent-color: var(--accent);
}
.ch20-sv { font-family: var(--mono); font-weight: 700; color: var(--accent-dark); }

/* intent router */
.ch20-qcard {
  background: var(--code-bg); border: 1px solid var(--code-border);
  border-radius: 8px; padding: 0.75rem 0.9rem; margin-bottom: 0.8rem;
}
.ch20-qcard .ch20-qlabel {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--code-cm); display: block;
}
.ch20-qcard .ch20-qtext {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 700; color: var(--code-fg);
}
.ch20-step {
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  margin: 0.7rem 0 0.35rem;
}
.ch20-opts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ch20-opts .btn.ch20-right { background: var(--ok-light); border-color: var(--ok); color: #1b5e2e; }
.ch20-opts .btn.ch20-wrong { background: var(--err-light); border-color: var(--err); color: #b91c1c; }
.ch20-opts .btn.ch20-dim { opacity: 0.55; pointer-events: none; }
.ch20-fb {
  font-size: 0.86rem; color: var(--text-muted);
  margin-top: 0.6rem; line-height: 1.55; min-height: 1.2em;
}
.ch20-dots { display: flex; gap: 0.35rem; margin-top: 0.75rem; align-items: center; }
.ch20-dots .ch20-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-sunken); border: 1px solid var(--border);
}
.ch20-dots .ch20-dot.ch20-d2 { background: var(--ok); border-color: var(--ok); }
.ch20-dots .ch20-dot.ch20-d1 { background: var(--warn); border-color: var(--warn); }
.ch20-dots .ch20-dot.ch20-d0 { background: var(--err); border-color: var(--err); }
.ch20-dots .ch20-dotlbl {
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); margin-left: 0.3rem;
}

@media (max-width: 767px) {
  .ch20-readout { font-size: 0.8rem; }
  .ch20-qcard .ch20-qtext { font-size: 0.92rem; }
}

/* ============================================================
   CH21 widget-specific rules (uniquely prefixed ch21-)
   ============================================================ */
/* shared mono readout box under each ch21 widget */
.ch21-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch21-readout.ch21-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch21-readout.ch21-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch21-readout.ch21-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small control-group label */
.ch21-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* slider rows (auction widget + year scrubber) */
.ch21-slider-row {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 250px; min-width: 0;
}
.ch21-slider-row label {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
  white-space: nowrap;
}
.ch21-slider-row input[type="range"] {
  flex: 1 1 90px; min-width: 0; accent-color: var(--accent);
}
.ch21-sv { color: var(--accent-dark); font-weight: 700; }

@media (max-width: 767px) {
  .ch21-readout { font-size: 0.8rem; }
  .ch21-slider-row { flex: 1 1 100%; }
}

/* ============================================================
   CH22 widget-specific rules (uniquely prefixed ch22-)
   ============================================================ */
/* shared mono readout box under each ch22 widget */
.ch22-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch22-readout.ch22-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch22-readout.ch22-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch22-readout.ch22-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* control-group label chip */
.ch22-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* bold live value inside buttons / slider rows */
.ch22-tv { color: var(--accent-dark); font-weight: 700; }

/* budget slider rows (reach planner) */
.ch22-slrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
  border: 1px solid var(--border); background: var(--bg-card);
  border-radius: 8px; padding: 0.35rem 0.7rem;
}
.ch22-slrow input[type="range"] { width: 128px; accent-color: var(--accent); }
.ch22-slrow .ch22-tv { min-width: 3.2ch; text-align: right; }

@media (max-width: 767px) {
  .ch22-readout { font-size: 0.8rem; }
  .ch22-slrow { width: 100%; justify-content: space-between; }
  .ch22-slrow input[type="range"] { flex: 1; width: auto; }
}

/* ============================================================
   CH23 widget-specific rules (uniquely prefixed ch23-)
   ============================================================ */
/* shared mono readout box under each ch23 widget */
.ch23-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch23-readout.ch23-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch23-readout.ch23-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch23-readout.ch23-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* control-row label chip */
.ch23-ctl {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* slider value readout */
.ch23-sv {
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  color: var(--accent-dark);
  min-width: 2.2em; text-align: center;
}

/* range sliders in the list health simulator */
.controls input[type="range"]#lhFreq,
.controls input[type="range"]#lhRel {
  flex: 1 1 130px; min-width: 110px; max-width: 220px;
  accent-color: var(--accent);
}

@media (max-width: 767px) {
  .ch23-readout { font-size: 0.8rem; }
  .controls input[type="range"]#lhFreq,
  .controls input[type="range"]#lhRel { max-width: none; }
}

/* ============================================================
   CH24 widget-specific rules (uniquely prefixed ch24- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch24 widget
   (state via ch24-good / ch24-warn / ch24-bad) */
.ch24-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch24-readout.ch24-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch24-readout.ch24-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch24-readout.ch24-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group */
.ch24-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* labeled slider row used by all three ch24 widgets */
.ch24-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 260px; min-width: 220px;
}
.ch24-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch24-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch24-slider .ch24-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.2rem; text-align: right;
  margin-right: 1.1rem;
}
.ch24-slider:last-child .ch24-val, .ch24-slider:last-of-type .ch24-val { margin-right: 0; }

@media (max-width: 767px) {
  .ch24-readout { font-size: 0.8rem; }
  .ch24-slider { flex: 1 1 100%; }
}

/* ============================================================
   CH25 widget-specific rules (uniquely prefixed ch25-)
   ============================================================ */
/* mono readout box under each ch25 widget */
.ch25-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch25-readout.ch25-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch25-readout.ch25-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch25-readout.ch25-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* control-row label chip + value */
.ch25-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}
.ch25-val {
  font-family: var(--mono); font-size: 0.82rem; color: var(--text-muted);
  white-space: nowrap;
}
.ch25-val b { color: var(--accent-dark); }
.ch25-tv { font-weight: 700; }

/* unit-economics legend chips */
.ch25-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  margin-top: 0.6rem;
}
.ch25-key {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted);
}
.ch25-key i {
  width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid var(--border); flex-shrink: 0;
}

/* range sliders on ch25 control rows */
.controls input[type="range"]#shelfK,
.controls input[type="range"]#taxM,
.controls input[type="range"]#roasS {
  flex: 1 1 160px; min-width: 120px; max-width: 300px;
  accent-color: var(--accent);
}

@media (max-width: 767px) {
  .ch25-readout { font-size: 0.8rem; }
  .ch25-ctl { width: 100%; }
}

/* ============================================================
   CH26 widget-specific rules (uniquely prefixed ch26- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch26 widget
   (state via ch26-good / ch26-warn / ch26-bad) */
.ch26-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch26-readout.ch26-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch26-readout.ch26-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch26-readout.ch26-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group (preset row) */
.ch26-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* labeled slider row used by all three ch26 widgets */
.ch26-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 230px; min-width: 200px;
}
.ch26-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch26-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch26-slider .ch26-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.4rem; text-align: right;
  margin-right: 1.1rem;
}
.ch26-slider:last-child .ch26-val, .ch26-slider:last-of-type .ch26-val { margin-right: 0; }

@media (max-width: 767px) {
  .ch26-readout { font-size: 0.8rem; }
  .ch26-slider { flex: 1 1 100%; }
}

/* ============================================================
   CH27 widget-specific rules (uniquely prefixed ch27- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch27 widget
   (state via ch27-good / ch27-warn / ch27-bad) */
.ch27-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch27-readout.ch27-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch27-readout.ch27-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch27-readout.ch27-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group */
.ch27-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* toggle buttons carry their answer in a <b class="ch27-tv"> */
.ch27-tv {
  font-weight: 700; color: var(--accent-dark);
  font-family: var(--mono); font-size: 0.8rem;
}

/* labeled slider row (label · range · live value) */
.ch27-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 260px; min-width: 220px;
}
.ch27-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch27-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch27-slider .ch27-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.6rem; text-align: right;
}

@media (max-width: 767px) {
  .ch27-readout { font-size: 0.8rem; }
}

/* ============================================================
   CH28 widget-specific rules (uniquely prefixed ch28- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch28 widget
   (state via ch28-good / ch28-warn / ch28-bad) */
.ch28-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch28-readout.ch28-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch28-readout.ch28-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch28-readout.ch28-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group */
.ch28-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* labeled slider row (winner's-curse widget) */
.ch28-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 240px; min-width: 210px;
}
.ch28-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch28-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch28-slider .ch28-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3rem; text-align: right;
}

/* triager list */
.ch28-triage { display: flex; flex-direction: column; gap: 0.6rem; }
.ch28-titem {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-sunken); padding: 0.7rem 0.85rem;
}
.ch28-thead {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-bottom: 0.5rem;
}
.ch28-tname { font-weight: 600; font-size: 0.92rem; }
.ch28-tmeta { font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted); }
.ch28-tbtns { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ch28-tb { font-size: 0.78rem; padding: 0.32rem 0.65rem; }
.ch28-tb:disabled { opacity: 0.55; }
/* the reader's pick: right or wrong; the true answer always outlined */
.ch28-tb.ch28-pick-ok  { background: var(--ok-light); border-color: var(--ok); color: var(--ok); opacity: 1; font-weight: 600; }
.ch28-tb.ch28-pick-no  { background: var(--err-light); border-color: var(--err); color: var(--err); opacity: 1; font-weight: 600; }
.ch28-tb.ch28-pick-ans { border-color: var(--ok); opacity: 1; }
.ch28-tverdict {
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.55;
  border-radius: 7px; padding: 0.5rem 0.65rem; margin-top: 0.55rem;
}
.ch28-tverdict.ch28-v-ok { background: var(--ok-light); border: 1px solid #bcd0b8; }
.ch28-tverdict.ch28-v-no { background: var(--err-light); border: 1px solid #f0c9c9; }

/* verdict legend chips */
.ch28-key {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  padding: 0.18rem 0.55rem; border-radius: 999px; border: 1px solid var(--border);
}
.ch28-key-a { background: var(--ok-light); border-color: #bcd0b8; color: var(--ok); }
.ch28-key-b { background: var(--warn-light); border-color: #f3dcb6; color: var(--warn); }
.ch28-key-c { background: var(--accent-secondary-light); border-color: #c4d3e2; color: var(--accent-secondary); }

@media (max-width: 767px) {
  .ch28-readout { font-size: 0.8rem; }
  .ch28-thead { flex-direction: column; }
}

/* ============================================================
   CH29 widget-specific rules (uniquely prefixed ch29-)
   ============================================================ */

/* mono readout box under each ch29 widget
   (state via ch29-good / ch29-warn / ch29-bad) */
.ch29-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch29-readout.ch29-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch29-readout.ch29-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch29-readout.ch29-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group */
.ch29-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* toggle buttons carry their state in a <b class="ch29-tv"> */
.ch29-tv {
  font-weight: 700; color: var(--accent-dark);
  font-family: var(--mono); font-size: 0.8rem;
}

/* labeled slider row (ghost-ad lab) */
.ch29-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 240px; min-width: 210px;
}
.ch29-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch29-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch29-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.4rem; text-align: right;
}

@media (max-width: 767px) {
  .ch29-readout { font-size: 0.8rem; }
}

/* ============================================================
   CH30 widget-specific rules (uniquely prefixed ch30- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch30 widget
   (state via ch30-good / ch30-warn / ch30-bad) */
.ch30-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch30-readout.ch30-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch30-readout.ch30-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch30-readout.ch30-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group (preset row) */
.ch30-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* labeled slider rows used by the ch30 widgets */
.ch30-sliders {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.6rem; margin-top: 0.85rem;
}
.ch30-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 240px; min-width: 200px;
}
.ch30-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch30-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch30-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 3.4rem; text-align: right;
}

/* allocator legend chips (per-channel spend → sales · mROI) */
.ch30-legend {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.2rem; margin-top: 0.7rem;
}
.ch30-chip {
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.ch30-chip .sw {
  width: 14px; height: 4px; border-radius: 2px;
  display: inline-block; flex-shrink: 0;
}

/* the one long inline formula may wrap (the shared .m chip is nowrap) */
.ch30-eq { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .ch30-readout { font-size: 0.8rem; }
  .ch30-sliders { gap: 0.4rem 1rem; }
}

/* ============================================================
   CH31 widget-specific rules (uniquely prefixed ch31-)
   ============================================================ */

/* mono readout box under each ch31 widget (state via good / warn / bad) */
.ch31-readout {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.55;
  background: var(--bg-sunken);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.7rem 0.9rem; margin-top: 0.85rem;
  color: var(--text-muted);
}
.ch31-readout.ch31-good { border-left-color: var(--ok); background: var(--ok-light); color: #1b5e2e; }
.ch31-readout.ch31-warn { border-left-color: var(--warn); background: var(--warn-light); color: #8a5a10; }
.ch31-readout.ch31-bad  { border-left-color: var(--err); background: var(--err-light); color: #b91c1c; }

/* small control-group label chip */
.ch31-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* yes/no value inside toggle buttons */
.btn .ch31-tv { font-family: var(--mono); font-weight: 700; }

/* labeled slider row used by the friction stack */
.ch31-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 180px; min-width: 170px;
}
.ch31-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch31-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch31-sv {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 1.6rem; text-align: right;
}

@media (max-width: 767px) {
  .ch31-readout { font-size: 0.78rem; }
  .ch31-slider { flex: 1 1 100%; }
}

/* ============================================================
   CH32 widget-specific rules (uniquely prefixed ch32-)
   ============================================================ */
/* mono readout box under each ch32 widget */
.ch32-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch32-readout.ch32-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch32-readout.ch32-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch32-readout.ch32-bad  { border-color: #f0c9c9; background: var(--err-light); }
.ch32-readout em { font-style: normal; color: var(--accent-dark); font-weight: 600; }

/* control-row label chip */
.ch32-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* labeled slider rows (variant-economy widget) */
.ch32-srow {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 260px; min-width: 220px;
}
.ch32-srow label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch32-srow input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch32-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 2.4rem; text-align: right;
}

@media (max-width: 767px) {
  .ch32-readout { font-size: 0.8rem; }
}

/* ============================================================
   CH33 widget-specific rules (uniquely prefixed ch33-)
   ============================================================ */
/* shared mono readout box under each ch33 widget */
.ch33-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch33-readout.ch33-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch33-readout.ch33-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch33-readout.ch33-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small caps label that prefixes a control row */
.ch33-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-right: 0.2rem;
}

/* bold yes/no state inside pipeline toggle buttons */
.btn .ch33-tv { color: var(--accent-dark); }

/* labeled slider row used by the mixer and the consent dial */
.ch33-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 250px; min-width: 210px;
}
.ch33-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch33-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch33-slider .ch33-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 2.6rem; text-align: right;
}

@media (max-width: 767px) {
  .ch33-readout { font-size: 0.8rem; }
}


/* ============================================================
   CH34 widget-specific rules (uniquely prefixed ch34- ;
   merged into style.css by the orchestrator)
   ============================================================ */

/* mono readout box under each ch34 widget (state via good / warn / bad) */
.ch34-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch34-readout.ch34-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch34-readout.ch34-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch34-readout.ch34-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* labeled slider rows (flywheel widget) */
.ch34-slider {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 240px; min-width: 210px;
}
.ch34-slider label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
}
.ch34-slider input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.ch34-slider .ch34-val {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--accent-dark); min-width: 2rem; text-align: right;
}

/* toggle buttons carry their state in a <b class="ch34-tv"> */
.ch34-tv {
  font-weight: 700; color: var(--accent-dark);
  font-family: var(--mono); font-size: 0.8rem;
}

@media (max-width: 767px) {
  .ch34-readout { font-size: 0.8rem; }
}

/* ============================================================
   CH35 widget-specific rules (uniquely prefixed ch35-)
   ============================================================ */
/* mono readout box under each ch35 widget
   (state via ch35-good / ch35-warn / ch35-bad) */
.ch35-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.55;
}
.ch35-readout.ch35-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch35-readout.ch35-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch35-readout.ch35-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase label introducing a control group (preset row) */
.ch35-ctl {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* toggle buttons carry their answer in a <b class="ch35-tv"> — style it as the value */
.ch35-tv {
  font-weight: 700; color: var(--accent-dark);
  font-family: var(--mono); font-size: 0.8rem;
}

@media (max-width: 767px) {
  .ch35-readout { font-size: 0.8rem; }
}

/* ============================================================
   CH36 widget-specific rules (uniquely prefixed ch36- ;
   the synthesis finale: sorter, atlas map, stack builder)
   ============================================================ */

/* shared mono readout box under each ch36 widget */
.ch36-readout {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.75rem; line-height: 1.5;
}
.ch36-readout.ch36-good { border-color: #bcd0b8; background: var(--ok-light); }
.ch36-readout.ch36-warn { border-color: #f3dcb6; background: var(--warn-light); }
.ch36-readout.ch36-bad  { border-color: #f0c9c9; background: var(--err-light); }

/* small uppercase control-group label (scenario row) */
.ch36-ctl {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* layer-cycle buttons in the stack builder — current choice emphasized */
.ch36-cycle { font-family: var(--mono); font-size: 0.78rem; }
.ch36-cycle b { color: var(--accent-dark); font-weight: 700; }

@media (max-width: 767px) {
  .ch36-readout { font-size: 0.8rem; }
  .ch36-cycle { font-size: 0.72rem; }
}