/* =====================================================================
   CINEMATIC EDITORIAL FIGURE PRIMITIVES — v1
   Universal stylesheet for bespoke article diagrams.
   Pattern-based selectors that style ANY class matching:
     -diagram, -callout, -grid, -panel, -bar, -ladder, -step, -headline,
     -title, -subtitle, -footer, -stack, -flow, -timeline, -matrix,
     -funnel, -spectrum, -rings, -flywheel, -pillars, -node, -tier, -row
   Aesthetic: paper slab + Newsreader/Inter/Mono + series accent (--color-model).
   Mobile-first: every grid collapses, every bar stays inside its container.
   ===================================================================== */

/* ---------- 1. CHASSIS: anything ending in -diagram is a paper slab ---------- */
[class$="-diagram"],
[class*="-diagram "],
[class$="-grid"][class*="diagram"],
.diagram-wrap, .figure-slab {
  background: var(--bg-paper, #FCFDFD);
  color: #0B0F14;
  border-radius: 18px;
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.1rem, 3.5vw, 2.2rem);
  margin: clamp(2rem, 5vw, 3rem) 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(11,15,20,.06);
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
[class$="-diagram"]::before,
.diagram-wrap::before, .figure-slab::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--color-model, #06B6D4), transparent);
  opacity: .65;
}

/* nested diagrams shouldn't double-wrap */
[class$="-diagram"] [class$="-diagram"] {
  background: transparent; box-shadow: none; padding: 0; margin: 0;
  border-radius: 0;
}
[class$="-diagram"] [class$="-diagram"]::before { display: none; }

/* ---------- 2. TITLE / HEADLINE / SUBTITLE / LABEL ---------- */
[class$="-title"]:not(h1):not(h2):not(h3),
[class$="-fig-label"],
[class$="-label"][class*="diagram"],
.diagram-title, .diagram-fig-label {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: #6B7280; margin-bottom: .9rem; font-weight: 700;
  display: block;
}

[class$="-headline"],
.diagram-headline {
  font-family: 'Instrument Serif', 'Newsreader', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.15;
  color: #0B0F14; margin-bottom: 1.4rem; font-weight: 400;
  letter-spacing: -0.01em; display: block;
}

[class$="-subtitle"],
.diagram-subtitle {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: clamp(.95rem, 1.6vw, 1.1rem); color: #4B5563;
  margin-bottom: 1.4rem; line-height: 1.5; display: block;
}

/* ---------- 3. CALLOUT — dark slab inside the paper slab ---------- */
[class$="-callout"],
.diagram-callout {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  background: #0B0F14; color: #F4F6F8;
  border-radius: 12px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(.92rem, 1.5vw, 1.02rem); line-height: 1.55;
  display: block;
}
[class$="-callout"] strong,
[class$="-callout"] span[class*="num"],
[class$="-callout"] [class*="badge"] {
  color: var(--color-model, #06B6D4); font-weight: 700;
  font-family: var(--font-mono, monospace);
}
[class$="-callout"] em { color: #FFF; font-style: italic; }

/* badge + text inline pattern (callout-badge / callout-text / callout-pct) */
[class*="callout-badge"], [class*="callout-pct"], [class*="callout-num"] {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .16em; font-weight: 800;
  background: var(--color-model, #06B6D4); color: #FFF;
  padding: .3rem .55rem; border-radius: 999px; text-transform: uppercase;
  margin-right: .65rem; vertical-align: middle;
}
[class*="callout-text"], [class*="callout-sub"] {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(.92rem, 1.5vw, 1rem); color: inherit; line-height: 1.5;
}

/* ---------- 4. GRIDS — auto-fit, mobile collapse ---------- */
[class$="-grid"]:not([class*="layer-grid"]),
.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(.8rem, 2vw, 1.4rem);
  align-items: stretch;
  margin: 1rem 0;
}

/* Two-column comparisons (before/after, old/new) */
[class*="compare-grid"], [class*="comparison-grid"], [class*="versus-grid"],
[class*="sbs"], [class*="sidebyside-grid"], [class*="dual-panel"],
[class*="contrast-grid"] {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* ---------- 5. PANELS — interior cards on the slab ---------- */
[class$="-panel"],
.figure-panel {
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%);
  border: 1px solid rgba(11,15,20,.08);
  border-radius: 14px;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  display: flex; flex-direction: column;
  min-width: 0;
}
[class$="-panel-header"],
[class$="-panel-label"],
[class$="-panel-tag"] {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7280; font-weight: 700; margin-bottom: .55rem;
}
[class$="-panel-title"] {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: #0B0F14;
  margin-bottom: .55rem; line-height: 1.25;
}
[class$="-panel-desc"], [class$="-panel-sub"] {
  font-family: 'Inter', sans-serif; font-size: .88rem;
  color: #4B5563; line-height: 1.55;
}
[class*="panel-verdict"], [class*="panel-metrics"] {
  margin-top: .8rem; padding-top: .8rem;
  border-top: 1px dashed rgba(11,15,20,.15);
  font-family: var(--font-mono, monospace);
  font-size: .78rem; color: #0B0F14; font-weight: 700;
}

/* before / after / fail / success / clean / cluttered semantic tinting */
[class*="panel-before"], [class*="panel-old"], [class*="panel-fail"],
[class*="panel-cluttered"], [class*="panel-blind"], [class*="panel-freeform"] {
  background: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%);
  border-color: rgba(225,29,72,.18);
}
[class*="panel-after"], [class*="panel-new"], [class*="panel-success"],
[class*="panel-clean"], [class*="panel-observable"], [class*="panel-structured"] {
  background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
  border-color: rgba(5,150,105,.18);
}

/* ---------- 6. BARS (token bars, budget bars, comparison bars) ---------- */
[class$="-bar"]:not([class*="-bar-"]):not([class*="navbar"]):not([class*="sidebar"]):not([class*="topbar"]),
.figure-bar {
  display: flex; height: clamp(40px, 6vw, 56px);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(11,15,20,.08);
  background: #F3F4F6;
  margin: .8rem 0;
}
[class*="-bar-fill"], [class*="bar-inner"] {
  background: var(--color-model, #06B6D4);
  height: 100%; border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  color: #FFF; font-family: var(--font-mono, monospace);
  font-size: .78rem; font-weight: 700;
  transition: width .6s var(--ease-cinematic, cubic-bezier(.16,1,.3,1));
}
[class*="-bar-track"] {
  background: #F3F4F6; height: clamp(8px, 1.4vw, 14px);
  border-radius: 999px; overflow: hidden; margin: .5rem 0;
}
[class*="-bar-header"], [class*="-bar-meta"] {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .5rem;
  font-family: var(--font-mono, monospace); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
[class*="-bar-label"] {
  font-family: var(--font-mono, monospace); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
[class*="-bar-total"], [class*="-bar-amount"] {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: #0B0F14;
}

/* segment tinting for multi-color bars */
[class*="seg-c"], [class*="bar-purple"]  { background: #9D4EDD; color: #FFF; }
[class*="seg-o"], [class*="bar-cyan"]    { background: #06B6D4; color: #FFF; }
[class*="seg-n"], [class*="bar-amber"]   { background: #F59E0B; color: #FFF; }
[class*="seg-t"], [class*="bar-green"]   { background: #10B981; color: #FFF; }
[class*="seg-e"], [class*="bar-red"]     { background: #F43F5E; color: #FFF; }
[class*="seg-x"], [class*="bar-indigo"]  { background: #6366F1; color: #FFF; }
[class*="seg-overflow"]                  { background: #EF4444; color: #FFF; }

/* ---------- 7. STACKS / LAYERS (vertical lists of layers) ---------- */
[class$="-stack"]:not([class*="guardrail-stack"]),
[class*="layer-stack"], [class*="context-stack"], [class*="control-stack"],
[class*="harness-stack"], [class*="lesson-comp-stack"] {
  display: flex; flex-direction: column; gap: .5rem;
  margin: .8rem 0;
}
[class*="stack-layer"], [class*="layer-row"], [class*="ls-bar"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem; align-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(11,15,20,.07);
  border-left: 3px solid var(--color-model, #06B6D4);
  border-radius: 10px;
  padding: .7rem .9rem;
  font-family: 'Inter', sans-serif; font-size: .9rem; color: #0B0F14;
  transition: transform .25s ease, box-shadow .25s ease;
}
[class*="stack-layer"]:hover { transform: translateX(3px); box-shadow: 0 6px 18px rgba(11,15,20,.08); }

/* ---------- 8. LADDERS (steps with vertical line) ---------- */
[class$="-ladder"], [class*="ladder-diagram"], [class*="ladder-steps"],
[class*="ladder-body"] {
  display: flex; flex-direction: column;
  position: relative;
  padding-left: clamp(1rem, 3vw, 2rem);
  margin: 1rem 0;
  gap: 1rem;
}
[class$="-ladder"]::before, [class*="ladder-steps"]::before {
  content: ""; position: absolute; left: clamp(.4rem, 1vw, .8rem);
  top: .4rem; bottom: .4rem; width: 2px;
  background: linear-gradient(180deg, var(--color-model, #06B6D4), rgba(11,15,20,.1));
  border-radius: 2px;
}
[class*="ladder-step"], [class*="ladder-stage"] {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(11,15,20,.08);
  border-radius: 12px;
  padding: clamp(.8rem, 2vw, 1.1rem) clamp(1rem, 2.5vw, 1.3rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem; align-items: start;
}
[class*="ladder-step"]::before, [class*="ladder-stage"]::before {
  content: ""; position: absolute; left: calc(-1 * clamp(.95rem, 2.4vw, 1.6rem));
  top: 1.2rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-model, #06B6D4);
  box-shadow: 0 0 0 4px var(--bg-paper, #FCFDFD);
}
[class*="ladder-num"] {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--color-model, #06B6D4);
  line-height: 1; font-weight: 400;
}
[class*="ladder-name"], [class*="ladder-title"] {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(.95rem, 1.7vw, 1.05rem); color: #0B0F14;
  margin-bottom: .25rem;
}
[class*="ladder-desc"], [class*="ladder-detail"], [class*="ladder-question"],
[class*="ladder-info"] {
  font-family: 'Inter', sans-serif; font-size: .86rem;
  color: #4B5563; line-height: 1.55;
}
[class*="ladder-meta"], [class*="ladder-cost"], [class*="ladder-formula"],
[class*="ladder-analogy"], [class*="ladder-reliability"] {
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px dashed rgba(11,15,20,.12);
  font-family: var(--font-mono, monospace); font-size: .76rem;
  color: #0B0F14; font-weight: 600;
}
[class*="ladder-headline"] {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: #0B0F14;
  margin-bottom: 1rem; line-height: 1.2;
}
[class*="ladder-footer"] {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px dashed rgba(11,15,20,.18);
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: .95rem; color: #4B5563;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
[class*="ladder-footer-stat"] {
  font-family: var(--font-mono, monospace); font-style: normal;
  color: var(--color-model, #06B6D4); font-weight: 800;
}

/* ---------- 9. STEPS / FLOW (horizontal pipelines) ---------- */
[class*="-steps"]:not([class*="ladder"]):not([class*="rollout"]):not([class*="progression"]):not([class*="prog-"]),
[class*="-flow"]:not([class*="-flow-"]):not([class*="workflow"]),
[class*="flow-steps"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: clamp(.6rem, 1.6vw, 1rem);
  margin: 1rem 0;
  align-items: stretch;
}
[class*="flow-node"], [class*="flow-step"], [class*="pipeline-node"],
[class*="model-node"], [class*="agent-node"], [class*="hub-node"],
[class*="spoke-node"], [class*="trigger-node"], [class*="tool-node"],
[class*="fw-node"] {
  background: #FFFFFF;
  border: 1px solid rgba(11,15,20,.08);
  border-top: 3px solid var(--color-model, #06B6D4);
  border-radius: 10px;
  padding: clamp(.7rem, 1.6vw, 1rem);
  font-family: 'Inter', sans-serif; font-size: .85rem;
  color: #0B0F14; line-height: 1.45;
  display: flex; flex-direction: column; gap: .35rem;
  min-width: 0;
}
[class*="node-name"], [class*="node-step"], [class*="fw-node-label"] {
  font-weight: 700; font-size: .92rem; color: #0B0F14;
}
[class*="node-annotation"], [class*="node-latency"], [class*="fw-node-sub"] {
  font-family: var(--font-mono, monospace);
  font-size: .7rem; color: #6B7280; letter-spacing: .04em;
}

/* ---------- 10. TIMELINE ---------- */
[class*="timeline"]:not([class*="timeline-"]) {
  display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0;
}
[class*="timeline-item"], [class*="timeline-row"], [class*="timeline-event"] {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem; align-items: start;
  background: #FFFFFF;
  border: 1px solid rgba(11,15,20,.07);
  border-radius: 10px; padding: .8rem 1rem;
}
[class*="timeline-dot"] {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-model, #06B6D4); margin-top: .35rem;
  box-shadow: 0 0 0 3px rgba(6,182,212,.15);
}
[class*="timeline-label"], [class*="timeline-badge"] {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
[class*="timeline-title"] {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: .95rem; color: #0B0F14;
}
[class*="timeline-desc"] {
  font-family: 'Inter', sans-serif; font-size: .85rem;
  color: #4B5563; line-height: 1.5;
}
[class*="timeline-stat"], [class*="timeline-stats"] {
  font-family: var(--font-mono, monospace); font-weight: 700;
  color: var(--color-model, #06B6D4); font-size: .85rem;
}
[class*="timeline-fill"] {
  height: 8px; background: var(--color-model, #06B6D4);
  border-radius: 999px;
}

/* ---------- 11. MATRIX (rows x cells) ---------- */
[class*="matrix-diagram"], [class*="matrix-grid"] {
  display: grid; gap: 1px; background: rgba(11,15,20,.08);
  border: 1px solid rgba(11,15,20,.08); border-radius: 12px;
  overflow: hidden; margin: 1rem 0;
}
[class*="matrix-header-row"], [class*="matrix-row"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px; background: rgba(11,15,20,.08);
}
[class*="matrix-header-cell"] {
  background: #0B0F14; color: #F4F6F8;
  font-family: var(--font-mono, monospace);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; padding: .8rem .9rem;
}
[class*="matrix-cell"] {
  background: #FFF; padding: .9rem;
  font-family: 'Inter', sans-serif; font-size: .85rem;
  color: #0B0F14; line-height: 1.45;
}
[class*="matrix-check"] { color: var(--color-model, #06B6D4); font-weight: 800; }
[class*="matrix-stat-num"] {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1;
  color: var(--color-model, #06B6D4);
}
[class*="matrix-stat-label"] {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; margin-top: .25rem;
}
[class*="matrix-stat-coral"]   { color: #F43F5E; }
[class*="matrix-stat-glacier"] { color: #06B6D4; }
[class*="matrix-stat-moss"]    { color: #10B981; }

/* ---------- 12. FUNNEL ---------- */
[class*="funnel-diagram"], [class*="funnel-container"] {
  display: flex; flex-direction: column;
  align-items: center; gap: .4rem; margin: 1rem 0;
}
[class*="funnel-tier"], [class*="funnel-stage"] {
  width: 100%; max-width: 100%;
  background: var(--color-model, #06B6D4); color: #FFF;
  padding: clamp(.7rem, 1.6vw, 1rem) 1.2rem;
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: .8rem; align-items: center;
  font-family: 'Inter', sans-serif; font-size: .9rem;
  box-shadow: 0 4px 12px rgba(11,15,20,.1);
}
[class*="funnel-tier-1"] { width: 100%; }
[class*="funnel-tier-2"] { width: 80%; opacity: .85; }
[class*="funnel-tier-3"] { width: 60%; opacity: .75; }
[class*="funnel-num"], [class*="funnel-tier-count"] {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 400;
}
[class*="funnel-label"], [class*="funnel-tier-desc"] {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; opacity: .9;
}
[class*="funnel-arrow"] {
  color: var(--color-model, #06B6D4); font-size: 1.4rem; line-height: 1;
}
[class*="funnel-bottom"], [class*="funnel-callout"] {
  margin-top: 1rem; padding: 1rem 1.2rem;
  background: #0B0F14; color: #F4F6F8; border-radius: 12px;
  font-family: 'Newsreader', Georgia, serif; font-size: 1rem;
  line-height: 1.55; width: 100%;
}
[class*="funnel-filter"] {
  font-family: var(--font-mono, monospace); font-size: .72rem;
  color: #6B7280; letter-spacing: .12em; text-transform: uppercase;
  padding: .25rem 0;
}

/* ---------- 13. SPECTRUM (horizontal scale) ---------- */
[class*="spectrum-bar"], [class*="cost-spectrum"], [class*="compression-spectrum"] {
  position: relative; height: clamp(40px, 6vw, 56px);
  background: linear-gradient(90deg, #10B981 0%, #F59E0B 50%, #F43F5E 100%);
  border-radius: 10px; margin: 1.2rem 0 .5rem;
  box-shadow: 0 2px 6px rgba(11,15,20,.08);
}
[class*="spectrum-labels"], [class*="spectrum-endpoints"] {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
[class*="spectrum-label"] { padding: 0 .25rem; }
[class*="threshold-line"], [class*="prod-threshold"], [class*="rot-threshold"],
[class*="trust-threshold"] {
  position: absolute; top: -8px; bottom: -8px; width: 2px;
  background: #0B0F14; border-radius: 2px; left: 50%;
}
[class*="threshold-label"], [class*="threshold-text"], [class*="rot-threshold-text"] {
  position: absolute; top: -1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono, monospace);
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: #0B0F14; background: var(--bg-paper, #FCFDFD);
  padding: .15rem .4rem; border-radius: 4px;
  white-space: nowrap; font-weight: 700;
}

/* ---------- 14. RINGS / FLYWHEEL / PILLARS ---------- */
[class*="rings-diagram"], [class*="pillars-diagram"], [class*="flywheel-diagram"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1rem; margin: 1rem 0;
}
[class*="pillars-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 1rem;
}
[class*="foundation-bar"], [class*="architrave-bar"] {
  background: #0B0F14; color: #F4F6F8;
  padding: .8rem 1.2rem; border-radius: 10px;
  font-family: var(--font-mono, monospace);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; font-weight: 700;
  margin: .8rem 0;
}

/* ---------- 15. MISC: dots, separators, footer ---------- */
[class$="-footer"]:not(footer):not([class*="ladder-footer"]) {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px dashed rgba(11,15,20,.18);
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: .95rem; color: #4B5563; line-height: 1.55;
}
[class*="-connector"], [class*="-line"]:not([class*="threshold"]):not([class*="timeline"]):not([class*="key-line"]):not([class*="caption-line"]):not([class*="last-line"]) {
  height: 2px; background: rgba(11,15,20,.1); margin: .25rem 0;
}
[class*="-dot"]:not([class*="timeline-dot"]):not([class*="ladder-dot"]) {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-model, #06B6D4); margin-right: .4rem;
  vertical-align: middle;
}

/* ---------- 16. MOBILE OVERRIDES ---------- */
@media (max-width: 720px) {
  [class$="-diagram"] { padding: 1.4rem 1rem; margin: 1.5rem 0; }
  [class$="-headline"] { font-size: 1.3rem; margin-bottom: 1rem; }
  [class$="-grid"], [class*="matrix-row"], [class*="matrix-header-row"] {
    grid-template-columns: 1fr !important;
  }
  [class$="-ladder"], [class*="ladder-steps"] { padding-left: 1.4rem; }
  [class*="ladder-step"], [class*="ladder-stage"] {
    grid-template-columns: 1fr; gap: .4rem;
  }
  [class*="ladder-num"] { font-size: 1.4rem; }
  [class*="funnel-tier"] { width: 100% !important; opacity: 1 !important; }
  [class*="ladder-footer"] { flex-direction: column; gap: .5rem; }
  [class$="-stack"] [class*="stack-layer"] { padding: .55rem .7rem; font-size: .82rem; }
}

@media (max-width: 480px) {
  [class$="-headline"] { font-size: 1.15rem; }
  [class$="-callout"] { padding: .85rem 1rem; font-size: .9rem; }
  [class$="-panel"] { padding: .85rem; }
}

/* ---------- 17. PRINT-SAFE OVERFLOW GUARDS ---------- */
[class$="-diagram"] * { max-width: 100%; }
[class$="-diagram"] pre, [class$="-diagram"] code {
  white-space: pre-wrap; word-break: break-word;
}
[class$="-diagram"] svg { max-width: 100%; height: auto; }

/* =====================================================================
   v2 — Bespoke bar / curve / chart patterns
   Targets the long tail: step-chart, compare-bar, budget-bar, loss-bar,
   ret-bar, e2e-bar, zone-bar, reset-bar, failure-bar, analogy-bar,
   passk-diagram, weaklink-diagram, learning-curve-diagram,
   relay-bar, permanent-bar, summary-bar, loop-bottom-bar
   ===================================================================== */

/* ---------- 18. CHART CONTAINERS (rows of horizontal bars) ---------- */
[class*="step-chart"],
[class*="loss-bars"],
[class*="reset-bars"],
[class*="e2e-bars"],
[class*="failure-bar-wrapper"],
[class*="quality-bars"],
[class*="compression-spectrum"],
[class*="passk-diagram"]:not([class$="-diagram"]),
[class*="weaklink-diagram"]:not([class$="-diagram"]),
[class*="learning-curve-diagram"]:not([class$="-diagram"]),
[class*="window-diagram"]:not([class$="-diagram"]) {
  display: flex; flex-direction: column; gap: .55rem;
  margin: 1rem 0;
}

/* row inside a chart: label | bar track | value */
[class*="step-bar"]:not([class*="step-bar-fill"]):not([class*="step-bars"]),
[class*="compare-bar"]:not([class*="compare-bar-"]),
[class*="budget-bar"]:not([class*="budget-bar-"]):not([class*="budget-bars"]),
[class*="loss-bar"]:not([class*="loss-bars"]):not([class*="loss-bar-"]),
[class*="ret-bar"]:not([class*="ret-bar-"]):not([class*="ret-bars"]),
[class*="e2e-bar-row"],
[class*="zone-bar"]:not([class*="zone-bars"]),
[class*="reset-bar-unit"],
[class*="failure-bar"]:not([class*="failure-bar-wrapper"]),
[class*="analogy-bar"]:not([class*="analogy-bars"]),
[class*="rb-bar"]:not([class*="rb-bars"]),
[class*="pipeline-bar"]:not([class*="pipeline-bar-"]),
[class*="pipeline-input-bar"], [class*="pipeline-gen-bar"],
[class*="run-bar"]:not([class*="run-bar-"]):not([class*="run-bars"]),
[class*="harness-model-bar"],
[class*="bridge-bar"]:not([class*="bridge-bar-"]),
[class*="comp-bar"]:not([class*="comp-bar-"]):not([class*="comp-bars"]),
[class*="tool-bar"]:not([class*="tool-bars"]):not([class*="tool-bar-"]),
[class*="summary-bar"]:not([class*="summary-bars"]),
[class*="loop-bottom-bar"],
[class*="permanent-bar"]:not([class*="permanent-bars"]),
[class*="relay-bar"]:not([class*="relay-bars"]),
[class*="spoke-bar"]:not([class*="spoke-bar-"]),
[class*="ls-bar"]:not([class*="ls-bars"]),
[class*="run-bar-track"] {
  display: grid;
  grid-template-columns: minmax(110px, 22%) 1fr minmax(70px, auto);
  gap: .8rem; align-items: center;
  background: transparent;
  height: auto; padding: .35rem 0;
  box-shadow: none; border-radius: 0;
  font-family: 'Inter', sans-serif; font-size: .82rem;
  color: #0B0F14;
}

/* the visible track inside a row — uses ::before for the rail, fill via inline width */
[class*="step-bar"]:not([class*="step-bar-fill"])::before,
[class*="compare-bar"]:not([class*="compare-bar-"])::before,
[class*="budget-bar"]:not([class*="budget-bar-"])::before,
[class*="loss-bar"]:not([class*="loss-bars"])::before,
[class*="ret-bar"]:not([class*="ret-bar-"])::before,
[class*="zone-bar"]::before,
[class*="failure-bar"]:not([class*="failure-bar-wrapper"])::before,
[class*="analogy-bar"]::before,
[class*="rb-bar"]::before,
[class*="pipeline-bar"]::before,
[class*="harness-model-bar"]::before,
[class*="bridge-bar"]::before,
[class*="comp-bar"]:not([class*="comp-bar-"])::before,
[class*="summary-bar"]::before,
[class*="permanent-bar"]::before,
[class*="relay-bar"]::before,
[class*="spoke-bar"]::before {
  content: "";
  grid-column: 2 / 3;
  height: clamp(14px, 2.2vw, 22px);
  background: linear-gradient(90deg,
    var(--color-model, #06B6D4) 0%,
    var(--color-model, #06B6D4) var(--bar-fill, 60%),
    rgba(11,15,20,.08) var(--bar-fill, 60%),
    rgba(11,15,20,.08) 100%);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(11,15,20,.08);
  align-self: center;
  min-width: 0;
}

/* fill helper used by inline style="--bar-fill:75%" or by .seg-* classes inside */
[class*="-bar-fill"], [class*="step-bar-fill"], [class*="bar-inner"],
[class*="run-bar-fill"], [class*="spoke-bar-fill"], [class*="quality-progress-bar"],
[class*="timeline-fill"], [class*="progress-track-bar"] {
  display: block;
  height: clamp(14px, 2.2vw, 22px);
  background: var(--color-model, #06B6D4);
  border-radius: 999px;
  min-width: 4px;
  transition: width .8s var(--ease-cinematic, cubic-bezier(.16,1,.3,1));
}

/* labels inside bar rows */
[class*="bar-label"]:not([class*="bar-labels"]) {
  font-family: 'Inter', sans-serif; font-size: .82rem;
  font-weight: 600; color: #0B0F14;
  letter-spacing: 0; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[class*="bar-inner-label"], [class*="bar-perm"], [class*="bar-temp"] {
  font-family: var(--font-mono, monospace); font-size: .72rem;
  color: #0B0F14; font-weight: 700;
  white-space: nowrap;
}
[class*="ret-bar-89"]::before { --bar-fill: 89%; }
[class*="ret-bar-97"]::before { --bar-fill: 97%; }

/* ---------- 19. ATTENTION CURVE / LEARNING CURVE (SVG-less) ---------- */
[class*="attention-diagram"]:not([class$="-diagram"]),
[class*="learning-curve-diagram"]:not([class$="-diagram"]) {
  position: relative;
  height: clamp(140px, 22vw, 200px);
  background:
    linear-gradient(180deg, rgba(6,182,212,0) 0%, rgba(6,182,212,.06) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(11,15,20,.06) calc(20% - 1px) 20%);
  border-radius: 12px;
  border: 1px solid rgba(11,15,20,.08);
  margin: 1rem 0;
  overflow: hidden;
}
/* U-shape attention curve drawn with conic + radial */
[class*="attention-diagram"]:not([class$="-diagram"])::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 100%;
  background:
    radial-gradient(ellipse 28% 90% at 12% 0%, var(--color-model, #06B6D4) 0%, transparent 70%),
    radial-gradient(ellipse 28% 90% at 88% 0%, var(--color-model, #06B6D4) 0%, transparent 70%);
  opacity: .55;
  pointer-events: none;
}

/* ---------- 20. GENERIC GRIDS the audit named ---------- */
[class*="trap-grid"], [class*="health-grid"], [class*="attack-grid"],
[class*="arch-grid"], [class*="ratio-grid"], [class*="run-grid"],
[class*="ownership-grid"], [class*="quad-grid"], [class*="prac-grid"],
[class*="four-grid"], [class*="six-grid"], [class*="loop-grid"],
[class*="dash-grid"], [class*="triad-grid"], [class*="mode-grid"],
[class*="path-flow"], [class*="layer-grid"], [class*="steps-grid"],
[class*="rewrite-grid"], [class*="quality-grid"], [class*="components-grid"],
[class*="lesson-grid"], [class*="versus-timeline"], [class*="pillars-grid"],
[class*="role-grid"], [class*="shift-grid"], [class*="comparison-grid"],
[class*="harness-grid"], [class*="layers-diagram"]:not([class$="-diagram"]),
[class*="three-harness-diagram"]:not([class$="-diagram"]),
[class*="versus-diagram"]:not([class$="-diagram"]),
[class*="deadzone-grid"], [class*="contrast-grid"], [class*="comparison-diagram"]:not([class$="-diagram"]),
[class*="comp-stack"], [class*="hub-diagram"]:not([class$="-diagram"]),
[class*="memory-hub-diagram"]:not([class$="-diagram"]),
[class*="lifecycle-flow"], [class*="lifecycle-diagram"]:not([class$="-diagram"]),
[class*="decay-timeline"], [class*="state-types-diagram"]:not([class$="-diagram"]),
[class*="rot-diagram"]:not([class$="-diagram"]),
[class*="reset-diagram"]:not([class$="-diagram"]),
[class*="economy-diagram"]:not([class$="-diagram"]),
[class*="cost-spectrum-diagram"]:not([class$="-diagram"]),
[class*="hidden-cost-diagram"]:not([class$="-diagram"]),
[class*="boundary-diagram"]:not([class$="-diagram"]),
[class*="rollout-ladder"]:not([class$="-ladder"]),
[class*="protocol-cross-diagram"]:not([class$="-diagram"]),
[class*="trust-arch"]:not([class$="-diagram"]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(.7rem, 1.6vw, 1rem);
  margin: 1rem 0;
  align-items: stretch;
}

/* ---------- 21. WB-PANEL / EVAL-PANEL / DUAL-PANEL inner cards ---------- */
[class*="wb-panel"], [class*="eval-panel"]:not([class*="eval-panels"]),
[class*="comp-panel"], [class*="dual-panel"]:not([class*="dual-panels"]),
[class*="role-panel"], [class*="shift-panel"], [class*="versus-panel"],
[class*="contrast-panel"], [class*="lesson-panel"], [class*="map-side"],
[class*="side-panel"], [class*="cost-panel"]:not([class*="cost-panels"]),
[class*="ret-panel"], [class*="agent-node"]:not([class*="agent-nodes"]),
[class*="lever-card"], [class*="dz-callout"]:not([class*="dz-callouts"]) {
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%);
  border: 1px solid rgba(11,15,20,.08);
  border-radius: 12px;
  padding: clamp(.85rem, 2vw, 1.2rem);
  display: flex; flex-direction: column; gap: .4rem;
  min-width: 0;
}
[class*="role-panel-old"], [class*="shift-panel-code"]:not([class*="-new"]),
[class*="ret-panel-std"], [class*="versus-panel-atlas"] {
  background: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%);
  border-color: rgba(225,29,72,.18);
}
[class*="role-panel-new"], [class*="ret-panel-agent"],
[class*="versus-panel-beacon"] {
  background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
  border-color: rgba(5,150,105,.18);
}

/* ---------- 22. LEVERS / FLYWHEEL nodes ---------- */
[class*="lever-icon"] {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1;
}
[class*="lever-name"] {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: .95rem; color: #0B0F14;
}
[class*="lever-action"], [class*="lever-savings"] {
  font-family: var(--font-mono, monospace); font-size: .76rem;
  color: var(--color-model, #06B6D4); font-weight: 700;
}
[class*="lever-badge"] {
  display: inline-block;
  background: var(--color-model, #06B6D4); color: #FFF;
  font-family: var(--font-mono, monospace); font-size: .65rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
  padding: .25rem .5rem; border-radius: 999px;
  align-self: flex-start;
}

/* ---------- 23. SAFETY net — anything inside a -diagram remains readable ---------- */
[class$="-diagram"] p,
[class$="-diagram"] li,
[class$="-diagram"] span:not([class*="badge"]):not([class*="pct"]):not([class*="num"]) {
  font-family: 'Inter', sans-serif;
  color: #0B0F14;
  line-height: 1.55;
}
[class$="-diagram"] strong { color: #0B0F14; font-weight: 700; }
[class$="-diagram"] em { color: #4B5563; font-style: italic; }
[class$="-diagram"] hr {
  border: 0; height: 1px; background: rgba(11,15,20,.12);
  margin: 1rem 0;
}

/* ---------- 24. MOBILE additional safety ---------- */
@media (max-width: 720px) {
  [class*="step-bar"], [class*="compare-bar"], [class*="budget-bar"],
  [class*="loss-bar"], [class*="ret-bar"], [class*="zone-bar"],
  [class*="failure-bar"], [class*="comp-bar"], [class*="summary-bar"],
  [class*="permanent-bar"], [class*="relay-bar"], [class*="spoke-bar"] {
    grid-template-columns: minmax(90px, 35%) 1fr auto;
    gap: .55rem;
    font-size: .76rem;
  }
  [class*="attention-diagram"]:not([class$="-diagram"]),
  [class*="learning-curve-diagram"]:not([class$="-diagram"]) {
    height: 120px;
  }
}

/* =====================================================================
   v3 — Segmented bars (parent has flex children with inline flex:N)
   This is the L1-T02 / L1-T01 pattern: a bar parent containing color-coded
   segment children. The parent becomes a flex strip; each child fills its
   share automatically based on inline `flex` style or a semantic class.
   ===================================================================== */

/* Override the v1 row-style for these ones so they render as segmented strips */
.compare-bar, .budget-bar, .token-bar,
.zone-bar-strip, .e2e-bar,
.harness-bar, .reset-bar-strip, .span-timeline,
.run-bar, .quality-bar-strip, .savings-callout-bar {
  display: flex !important;
  width: 100%;
  height: clamp(38px, 5.5vw, 52px);
  border-radius: 10px;
  overflow: hidden;
  background: #F3F4F6;
  box-shadow: 0 2px 6px rgba(11,15,20,.08);
  margin: .6rem 0;
  grid-template-columns: none !important;
  padding: 0 !important;
  align-items: stretch;
}
.compare-bar::before, .budget-bar::before { content: none !important; }

/* Direct children of segmented bars become the colored segments */
.compare-bar > *, .budget-bar > * {
  display: flex; align-items: center; justify-content: center;
  color: #FFF; font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(.85rem, 1.5vw, 1.05rem); font-weight: 400;
  border-right: 1px solid rgba(255,255,255,.18);
  min-width: 0;
  height: 100%;
}
.compare-bar > *:last-child, .budget-bar > *:last-child { border-right: none; }

/* Compare-bar semantic colors */
.compare-bar .safe    { background: #10B981; }
.compare-bar .danger  { background: #F43F5E; }
.compare-bar .recency { background: #06B6D4; }
.compare-bar .warn    { background: #F59E0B; }
.compare-bar .neutral { background: #64748B; }

/* Budget-bar segment colors (CONTEXT layers) */
.budget-seg            { color: #FFF; }
.budget-seg.seg-const  { background: #9D4EDD; flex: 22; }
.budget-seg.seg-know   { background: #F59E0B; flex: 28; }
.budget-seg.seg-tracks { background: #10B981; flex: 8; }
.budget-seg.seg-equip  { background: #6366F1; flex: 14; }
.budget-seg.seg-tmpl   { background: #64748B; flex: 4; }
.budget-seg.seg-user   { background: #06B6D4; flex: 6; }
.budget-seg.seg-buffer { background: #E5E7EB; color: #9CA3AF; flex: 18; }
.budget-seg.seg-overflow { background: #EF4444; flex: 14; }

/* Budget meta row (label + percentage) */
.budget-bar-meta, .budget-row-header, .delta-strip {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-top: .55rem;
  font-family: var(--font-mono, monospace);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
.budget-row { margin-bottom: 1.2rem; }
.budget-row-label, .budget-row-label.designed, .budget-row-label.overfilled {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: .9rem;
  text-transform: none; letter-spacing: 0; color: #0B0F14;
}
.budget-row-label.overfilled { color: #B91C1C; }
.budget-row-label.designed { color: #047857; }

.quality-badge {
  display: inline-block;
  font-family: var(--font-mono, monospace); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--color-model, #06B6D4); color: #FFF;
}
.quality-badge.high { background: #10B981; color: #FFF; }
.quality-badge.low  { background: #F43F5E; color: #FFF; }

.headroom-note, .savings-callout {
  display: block; margin-top: .6rem; padding: .7rem 1rem;
  background: rgba(11,15,20,.04);
  border-left: 3px solid var(--color-model, #06B6D4);
  border-radius: 6px;
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: .92rem; color: #374151; line-height: 1.5;
}
.savings-callout { background: #0B0F14; color: #F4F6F8; font-style: normal;
  font-family: 'Newsreader', Georgia, serif; padding: 1rem 1.2rem;
  border-left: none; border-radius: 12px; }
.savings-callout strong { color: var(--color-model, #06B6D4); font-family: var(--font-mono, monospace); }

.delta-strip { justify-content: center; gap: 1.4rem; padding-top: 1rem;
  border-top: 1px dashed rgba(11,15,20,.18); margin-top: 1.2rem; }
.delta-item.negative { color: #B91C1C; }
.delta-item.positive { color: #047857; }

/* ---------- v3.b — ATTENTION CURVE (zone-bar trio with U-shape) ---------- */
.curve-container {
  position: relative; padding: 2rem 0 .5rem; margin-top: .5rem;
}
.curve-y-label {
  position: absolute; left: -.5rem; top: 50%;
  transform: rotate(-90deg) translateX(50%); transform-origin: left center;
  font-family: var(--font-mono, monospace); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: #9CA3AF;
  font-weight: 700; white-space: nowrap;
}
.curve-zones {
  display: grid; grid-template-columns: 1fr 2fr 1fr;
  gap: 6px; align-items: end;
  height: clamp(140px, 22vw, 200px);
  position: relative;
}
.curve-zones .threshold-line {
  position: absolute; left: 0; right: 0; top: 35%;
  border-top: 1px dashed rgba(11,15,20,.3);
  pointer-events: none;
}
.curve-zone {
  display: flex; align-items: flex-end;
  height: 100%; min-width: 0;
}
.curve-zone .zone-bar {
  width: 100%; border-radius: 10px 10px 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: .5rem;
  font-family: var(--font-mono, monospace); font-size: .82rem;
  color: #FFF; font-weight: 800;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15);
}
.zone-primacy .zone-bar { height: 92%; background: #10B981; }
.zone-middle  .zone-bar { height: 55%; background: #F43F5E; }
.zone-recency .zone-bar { height: 90%; background: #06B6D4; }

.threshold-line .threshold-label {
  position: absolute; right: 0; top: -.9rem;
  font-family: var(--font-mono, monospace); font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: #6B7280;
  background: var(--bg-paper, #FCFDFD); padding: 0 .4rem; font-weight: 700;
}

.zone-label-row {
  display: grid; grid-template-columns: 1fr 2fr 1fr;
  gap: .7rem; margin-top: .8rem;
}
.zone-label-cell {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .65rem .8rem; background: #FFF;
  border: 1px solid rgba(11,15,20,.07);
  border-top: 3px solid var(--color-model, #06B6D4);
  border-radius: 8px; min-width: 0;
}
.zl-primacy { border-top-color: #10B981; }
.zl-middle  { border-top-color: #F43F5E; }
.zl-recency { border-top-color: #06B6D4; }
.zone-label-name {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: .82rem; color: #0B0F14;
}
.zone-label-desc {
  font-family: 'Inter', sans-serif; font-size: .72rem;
  color: #6B7280; line-height: 1.45;
}
.zone-score { font-family: var(--font-mono, monospace); font-size: .85rem; }

.window-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem; margin: 1.4rem 0 .4rem;
}
.compare-item { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.compare-label {
  font-family: var(--font-mono, monospace); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
.compare-stat {
  font-family: var(--font-mono, monospace); font-size: .76rem;
  color: #0B0F14; font-weight: 700;
}

/* ---------- v3.c — STEP CHART (vertical bars) ---------- */
.step-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: clamp(.5rem, 1.4vw, .9rem);
  align-items: end;
  height: clamp(140px, 18vw, 180px);
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.step-chart::before { content: none !important; }
.step-col {
  display: flex; flex-direction: column-reverse; align-items: stretch;
  gap: .35rem; height: 100%; min-width: 0;
}
.step-col .step-bar-fill {
  width: 100%; border-radius: 6px 6px 0 0;
  background: var(--color-model, #06B6D4);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
  transition: height .8s var(--ease-cinematic, cubic-bezier(.16,1,.3,1));
}
.step-col:nth-child(1) .step-bar-fill { height: 94%; background: #10B981; }
.step-col:nth-child(2) .step-bar-fill { height: 82%; background: #06B6D4; }
.step-col:nth-child(3) .step-bar-fill { height: 65%; background: #F59E0B; }
.step-col:nth-child(4) .step-bar-fill { height: 48%; background: #F43F5E; }
.step-col .step-score {
  font-family: var(--font-mono, monospace); font-size: .78rem;
  font-weight: 800; text-align: center;
}
.step-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: clamp(.5rem, 1.4vw, .9rem);
  margin-top: .5rem;
}
.step-lbl {
  font-family: var(--font-mono, monospace); font-size: .65rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: #6B7280; font-weight: 700; text-align: center;
}

/* ---------- v3.d — ATTENTION-DIAGRAM container override ---------- */
/* The v18 rule turned attention-diagram into a curve renderer; here the article
   uses it as the slab wrapper. Force slab look. */
.attention-diagram {
  height: auto !important;
  background: var(--bg-paper, #FCFDFD) !important;
  border: none !important;
}
.attention-diagram::after { content: none !important; }

.attention-title, .budget-title {
  font-family: var(--font-mono, monospace); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: #6B7280; margin-bottom: .9rem; font-weight: 700; display: block;
}
.attention-headline, .budget-headline {
  font-family: 'Instrument Serif', 'Newsreader', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.15;
  color: #0B0F14; margin-bottom: 1.4rem; font-weight: 400;
  letter-spacing: -0.01em; display: block;
}

.attention-callout {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  background: #0B0F14; color: #F4F6F8;
  border-radius: 12px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(.92rem, 1.5vw, 1.02rem); line-height: 1.55;
}
.attention-callout span { color: var(--color-model, #06B6D4); font-weight: 700; }

/* ---------- v3.e — MOBILE for segmented bars ---------- */
@media (max-width: 720px) {
  .compare-bar, .budget-bar { height: 36px; }
  .compare-bar > *, .budget-bar > * { font-size: .75rem; }
  .curve-zones { height: 130px; }
  .zone-label-row { grid-template-columns: 1fr; }
  .window-compare { grid-template-columns: 1fr; }
  .step-chart { height: 120px; }
  .budget-row-header, .budget-bar-meta { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .delta-strip { flex-direction: column; gap: .35rem; align-items: center; }
  .delta-strip > [style*="ink-muted"] { display: none; }
}
/* =====================================================================
   FIGURE PRIMITIVES — v4 (targeted gap closure)
   Adds selectors for 30 bespoke classes flagged in audit pass 4 that
   the v1–v3 wildcards don't reach. Aesthetic stays paper-slab + series.
   ===================================================================== */

/* ---- panel atoms used by assembly / tools / 3c-lifecycle ---- */
.panel-header {
  display: flex; flex-direction: column; gap: .15rem;
  padding-bottom: .65rem; margin-bottom: .8rem;
  border-bottom: 1px dashed rgba(11,15,20,.12);
  font-family: var(--font-mono, monospace);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: #0B0F14;
}
.panel-header-sub, .panel-sub {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: .85rem; letter-spacing: 0; text-transform: none;
  color: #6B7280; font-weight: 400; margin-top: .15rem;
}
.panel-body {
  display: flex; flex-direction: column; gap: .45rem;
  font-family: 'Inter', sans-serif; font-size: .88rem; color: #0B0F14;
  min-width: 0;
}
.panel-total {
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px dashed rgba(11,15,20,.18);
  display: flex; flex-direction: column; gap: .1rem; align-items: flex-start;
}
.total-time, .total-label {
  font-family: var(--font-mono, monospace);
}
.total-time {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: var(--color-model, #06B6D4);
}
.total-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}

/* sequential / parallel stage rows */
.seq-stage, .par-phase, .par-stage {
  display: flex; justify-content: space-between; align-items: baseline;
  background: #FFF; border: 1px solid rgba(11,15,20,.07);
  border-left: 3px solid var(--color-model, #06B6D4);
  border-radius: 8px; padding: .55rem .8rem;
  font-family: 'Inter', sans-serif; font-size: .86rem; color: #0B0F14;
}
.seq-stage-name, .par-stage-name { font-weight: 600; }
.seq-stage-time, .par-stage-time {
  font-family: var(--font-mono, monospace);
  font-size: .78rem; color: var(--color-model, #06B6D4); font-weight: 700;
}
.seq-arrow {
  text-align: center; color: #9CA3AF; font-size: 1rem; line-height: 1;
  padding: .15rem 0;
}
.par-phase-label {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700; margin: .4rem 0 .25rem;
}

/* ---- 3C lifecycle compress/reset panels ---- */
.panel-compress, .panel-reset, .reset-panel {
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%);
  border: 1px solid rgba(11,15,20,.08);
  border-radius: 14px;
  padding: clamp(1rem, 2.2vw, 1.4rem);
}
.panel-compress { border-left: 3px solid #F43F5E; }
.panel-reset    { border-left: 3px solid #10B981; }
.reset-panel-label, .reset-panel-desc {
  display: block;
}
.reset-panel-label {
  font-family: var(--font-mono, monospace);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: #0B0F14; font-weight: 700; margin-bottom: .25rem;
}
.reset-panel-desc {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: .9rem; color: #6B7280; margin-bottom: .9rem;
}

/* ---- tools-shape-behavior: clean vs cluttered tool grids ---- */
.tool-grid-clean {
  display: grid; grid-template-columns: 1fr; gap: .45rem;
  margin: .6rem 0;
}
.tool-card-clean {
  display: grid; grid-template-columns: minmax(0,160px) minmax(0,1fr); gap: .8rem;
  background: #FFF; border: 1px solid rgba(11,15,20,.08);
  border-left: 3px solid #10B981;
  border-radius: 8px; padding: .55rem .8rem;
  font-family: 'Inter', sans-serif; font-size: .82rem;
}
.tool-card-clean .tc-name {
  font-family: var(--font-mono, monospace); font-weight: 700;
  color: #0B0F14; font-size: .8rem;
}
.tool-card-clean .tc-desc {
  font-size: .76rem; color: #6B7280; line-height: 1.4;
}
.tool-grid-cluttered {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 4px; margin: .6rem 0;
}
.tool-rect {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #F43F5E 0%, #DC2626 100%);
  border-radius: 3px; opacity: .85;
}

/* ---- structure-as-control: panel-annotation ---- */
.panel-annotation {
  margin-top: .6rem; padding: .5rem .7rem;
  background: rgba(244,63,94,.08); border-left: 2px solid #F43F5E;
  border-radius: 4px;
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: .82rem; color: #4B5563; line-height: 1.45;
}

/* ---- context-rot: whiteboard-strip ---- */
.whiteboard-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: .6rem; margin: 1rem 0;
}
.wb-panel {
  background: #FFF; border: 1px solid rgba(11,15,20,.08);
  border-radius: 8px; padding: .7rem .8rem;
  display: flex; flex-direction: column; gap: .35rem;
  min-height: 96px;
}
.wb-panel:nth-child(2) { background: #FEFCE8; }
.wb-panel:nth-child(3) { background: #FEF3C7; }
.wb-panel:nth-child(4) { background: #FED7AA; }
.wb-panel:nth-child(5) { background: #FECACA; }
.wb-day {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
.wb-text {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: .85rem; color: #0B0F14; line-height: 1.4;
}

/* ---- context-stack: stack-summary ---- */
.stack-summary {
  margin-top: 1rem; padding: .9rem 1rem;
  background: #0B0F14; color: #F4F6F8; border-radius: 10px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: .95rem; line-height: 1.55;
}
.stack-summary strong { color: var(--color-model, #06B6D4); }

/* ---- context-observability: rag-funnel + trace-tree ---- */
.rag-funnel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem; margin: 1rem 0;
}
.rag-funnel .funnel-stage {
  width: auto; min-width: 110px;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  background: var(--color-model, #06B6D4); color: #FFF;
  padding: .8rem 1rem; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(11,15,20,.1);
}
.trace-tree {
  display: flex; flex-direction: column; gap: .35rem; margin: .8rem 0;
}
.trace-span {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: .7rem; align-items: center;
  background: #FFF; border: 1px solid rgba(11,15,20,.08);
  border-radius: 8px; padding: .55rem .8rem;
  font-family: 'Inter', sans-serif; font-size: .85rem; color: #0B0F14;
}
.span-letter {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0B0F14; color: #FFF; font-family: var(--font-mono, monospace);
  font-weight: 800; font-size: .82rem;
}
.span-c { background: #9D4EDD; }
.span-o { background: #06B6D4; }
.span-n { background: #F59E0B; }
.span-t { background: #10B981; }
.span-e { background: #F43F5E; }
.span-x { background: #6366F1; }
.span-info { font-size: .85rem; line-height: 1.4; min-width: 0; }
.span-info strong { color: #0B0F14; }
.span-time {
  font-family: var(--font-mono, monospace); font-weight: 700;
  font-size: .78rem; color: var(--color-model, #06B6D4);
}
.span-bar-detail {
  display: block; margin-top: .25rem; font-size: .76rem; color: #6B7280;
  font-family: var(--font-mono, monospace);
}

/* ---- evaluating-the-harness: flow-arrow + flow-path ---- */
.flow-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 1rem 0;
}
.flow-arrow {
  color: var(--color-model, #06B6D4); font-size: 1.1rem; line-height: 1;
  font-family: var(--font-mono, monospace); font-weight: 700;
}

/* ---- architecture-patterns: savings-panel + flow pct badges ---- */
.savings-panel {
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%);
  border: 1px solid rgba(11,15,20,.08);
  border-radius: 12px; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.savings-panel-orch { border-left: 3px solid #F43F5E; }
.savings-panel-route { border-left: 3px solid #10B981; }
.savings-panel-header {
  font-family: var(--font-mono, monospace);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: #0B0F14; font-weight: 700;
}
.savings-panel-desc {
  font-family: 'Inter', sans-serif; font-size: .85rem; color: #4B5563;
  line-height: 1.5;
}
.savings-flow-pct {
  display: inline-block; min-width: 42px; padding: .2rem .45rem;
  border-radius: 6px; text-align: center;
  font-family: var(--font-mono, monospace); font-size: .78rem; font-weight: 800;
  color: #FFF; background: #6B7280; margin-right: .5rem;
}
.flow-safe       { background: #10B981; }
.flow-border     { background: #F59E0B; }
.flow-violating  { background: #F43F5E; }

/* ---- autonomy-design: matrix-stats + matrix-graduation ---- */
.matrix-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: .8rem; margin: 1rem 0;
}
.matrix-stat {
  background: #FFF; border: 1px solid rgba(11,15,20,.08);
  border-radius: 10px; padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.matrix-graduation {
  margin-top: 1rem; padding: .9rem 1.1rem;
  background: #0B0F14; color: #F4F6F8; border-radius: 10px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: .92rem; line-height: 1.55;
}
.matrix-graduation strong { color: var(--color-model, #06B6D4); }

/* ---- agent-economics: spectrum-container ---- */
.spectrum-container {
  display: flex; flex-direction: column; gap: .8rem;
  margin: 1.5rem 0;
}
.spectrum-container .spectrum-endpoints {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono, monospace); font-weight: 700;
}
.endpoint-low, .endpoint-high {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: #0B0F14;
}
.endpoint-badge {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  background: #0B0F14; color: #F4F6F8;
  padding: .25rem .5rem; border-radius: 999px; font-weight: 700;
}
.tier-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: .8rem; margin-top: .8rem;
}
.tier-card {
  background: #FFF; border: 1px solid rgba(11,15,20,.08);
  border-radius: 10px; padding: .9rem;
  display: flex; flex-direction: column; gap: .3rem;
  font-family: 'Inter', sans-serif;
}
.tier-card .tier-icon { font-size: 1.4rem; }
.tier-card .tier-label {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
.tier-card .tier-cost {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.2rem; color: var(--color-model, #06B6D4);
}
.tier-card .tier-desc { font-size: .82rem; color: #4B5563; line-height: 1.45; }

/* ---- non-determinism: run-dot stable / flipped ---- */
.run-dot {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; margin: 1px;
}
.run-dot.stable  { background: #10B981; }
.run-dot.flipped { background: #F43F5E; }

/* ---- three-gulfs / two-axes: dashboard-block (terminal-style) ---- */
.dashboard-block {
  background: #0B0F14; color: #D1FAE5;
  font-family: var(--font-mono, monospace);
  font-size: .82rem; line-height: 1.65;
  padding: 1.1rem 1.2rem; border-radius: 10px;
  border: 1px solid rgba(16,185,129,.25);
  margin: 1rem 0; overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
}
.dashboard-block br + br { line-height: .8; }

/* ---- saturation-chart (eval flywheel SVG container) ---- */
.saturation-chart {
  background: var(--bg-paper, #FCFDFD); color: #0B0F14;
  border-radius: 18px; padding: clamp(1.4rem, 4vw, 2.6rem);
  margin: 2rem 0; box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(11,15,20,.06);
  position: relative; overflow: hidden;
}
.saturation-chart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--color-model, #9D4EDD), transparent);
  opacity: .65;
}
.sat-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .4rem;
}
.sat-subtitle {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: .95rem; color: #4B5563; margin-bottom: 1.2rem; line-height: 1.5;
}
.sat-graph {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  min-height: 280px;
}
.sat-y-label, .sat-x-label {
  font-family: var(--font-mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7280; font-weight: 700;
}
.sat-y-label { position: absolute; left: 0; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left top; }
.sat-x-label { display: block; text-align: center; margin-top: .6rem; }
.sat-zone {
  position: absolute; right: 8px; top: 8px;
  background: rgba(244,63,94,.12); color: #F43F5E;
  padding: .25rem .5rem; border-radius: 4px;
  font-family: var(--font-mono, monospace); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
}
.sat-line { width: 100%; height: 280px; display: block; }

/* ---- generic data tables (cost-table, deploy-table) ---- */
.cost-table, .deploy-table, table.figure-table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  font-family: 'Inter', sans-serif; font-size: .86rem;
  background: #FFF; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(11,15,20,.06);
}
.cost-table th, .deploy-table th {
  background: #0B0F14; color: #F4F6F8;
  font-family: var(--font-mono, monospace);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; padding: .7rem .8rem; text-align: left;
}
.cost-table td, .deploy-table td {
  padding: .7rem .8rem;
  border-top: 1px solid rgba(11,15,20,.08);
  color: #0B0F14;
}
.cost-table tr.cost-bad td  { background: rgba(244,63,94,.06); }
.cost-table tr.cost-mid td  { background: rgba(245,158,11,.06); }
.cost-table tr.cost-good td { background: rgba(16,185,129,.06); }
.cost-result {
  font-family: var(--font-mono, monospace); font-weight: 800;
  color: var(--color-model, #06B6D4);
}
.deploy-table td.yes      { color: #10B981; font-weight: 700; }
.deploy-table td.partial  { color: #F59E0B; font-weight: 700; }
.deploy-table td.na       { color: #9CA3AF; }
@media (max-width: 720px) {
  .cost-table, .deploy-table { font-size: .78rem; }
  .cost-table th, .deploy-table th, .cost-table td, .deploy-table td { padding: .5rem .55rem; }
  .tool-grid-cluttered { grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); }
  .rag-funnel { flex-direction: column; }
  .rag-funnel .funnel-arrow { transform: rotate(90deg); }
  .trace-span { grid-template-columns: 24px minmax(0, 1fr); }
  .trace-span .span-time { grid-column: 2; justify-self: end; font-size: .72rem; }
  .seq-stage, .par-stage { font-size: .8rem; }
  .saturation-chart { padding: 1.2rem 1rem; }
  .sat-line { height: 220px; }
}

/* exact-match fallback for bare panel-desc (not suffix-anchored) */
.panel-desc {
  font-family: 'Inter', sans-serif; font-size: .88rem;
  color: #4B5563; line-height: 1.55;
}

/* =====================================================================
   HERO TEXT LEGIBILITY — applies to all 112 articles
   Backgrounds were brightened to 0.72 opacity / 28% grayscale, so the
   topic pill, title and meta row need stronger scrims to stay readable.
   These overrides match the existing dark-on-light editorial system.
   ===================================================================== */

/* Topic pill — was rgba(255,255,255,0.03); now a true dark scrim chip */
.topic-pill {
  background: rgba(8, 10, 14, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Article title — keep transparent, add a soft dark glow halo so the
   white serif reads on any photo without flattening the background */
.article-title {
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 8px 30px rgba(0, 0, 0, 0.75),
    0 24px 80px rgba(0, 0, 0, 0.55) !important;
}

/* Hero content — radial darken behind the text block only.
   Pseudo-element so it doesn't affect the photo's visible edges. */
.hero-content { position: relative; }
.hero-content::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    rgba(3, 4, 7, 0.55) 0%,
    rgba(3, 4, 7, 0.32) 38%,
    rgba(3, 4, 7, 0) 72%
  );
  pointer-events: none;
  border-radius: 40%;
  filter: blur(8px);
}

/* Meta row — already strong; nudge contrast for any series that
   overrode it lighter, and ensure the env-tone dots stay visible */
.meta-row {
  background: rgba(8, 10, 14, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

@media (max-width: 720px) {
  .hero-content::before { inset: -4% -6%; filter: blur(6px); }
  .topic-pill {
    padding: 0.55rem 1.1rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
  }
}

/* ============================================================
   ANTI-PATTERN WATERMARK — global override (consistent + visible)
   Applies to every .mistake-card across all 100+ articles.
   Replaces the per-article rgba(...,0.03) ghost with a legible,
   diagonally-stamped watermark that reads as an editorial seal.
   ============================================================ */
.mistake-card { position: relative; isolation: isolate; overflow: hidden; }
.mistake-card::before {
  content: 'ANTI-PATTERN' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) rotate(-6deg) !important;
  transform-origin: center center !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2.4rem, 6.5vw, 5.25rem) !important;
  line-height: 0.85 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  color: rgba(225, 29, 72, 0.10) !important;
  -webkit-text-stroke: 1px rgba(225, 29, 72, 0.32) !important;
  text-stroke: 1px rgba(225, 29, 72, 0.32) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  pointer-events: none !important;
  z-index: 0 !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  user-select: none;
  width: max-content;
  max-width: none;
}
/* Ensure the card content always paints above the watermark */
.mistake-card > * { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .mistake-card::before {
    font-size: clamp(1.8rem, 9vw, 3.2rem) !important;
    -webkit-text-stroke-width: 0.8px !important;
  }
}

/* ============================================================
   FIGURE SYSTEM v2 — QA-HARDENED CHASSIS (Nov 2026)
   Loaded after the v1 primitives above. Adds:
     - calm reveal override (no blur/scale -> no mid-flight collisions)
     - shared neutral chip for values over light bars (no white-on-white)
     - shared anchored threshold pattern
     - global figure mobile defaults (<=720px)
   Apply by adding `.fig-v2` to a figure container. Bespoke per-figure
   CSS in the article still wins via specificity; this is only the floor.
   ============================================================ */

/* ---- Per-series 6-7 color systems + shared neutrals (IDEO/Apple-grade) ---- */
.fig-v2 {
  /* Shared neutrals — same across all series */
  --ink-1: #0B0F14;
  --ink-2: #384150;
  --ink-3: #5B6573;
  --paper: #FCFDFD;
  --paper-2: #F4F5F7;
  --rule: rgba(11,15,20,.10);
  --chip-dark: rgba(8,10,14,.72);
  --alert: #BE123C;
  --alert-bg: #FFF5F5;
  --alert-edge: rgba(244,63,94,.35);
  --alert-line: rgba(244,63,94,.55);
  --success: #0E9F6E;

  /* Reset inherited font-style. Prose upstream sometimes has an unclosed
     <em>/<i>; without this, the figure and every SVG <text> inside would
     render italic. Elements that set font-style="italic" as their own
     attribute still render italic — this only kills inheritance. */
  font-style: normal;

  /* Default series = Agentic cyan; per-series wrappers below override */
  --s-primary: #06B6D4;
  --s-deep:    #155E75;
  --s-soft:    #67E8F9;
  --s-tint:    #ECFEFF;
  --s-edge:    rgba(6,182,212,.35);
  --s-glow:    rgba(6,182,212,.18);

  font-variant-numeric: tabular-nums;
}
/* Evals — Purple */
.series-evals .fig-v2,
.fig-v2.series-evals {
  --s-primary: #9D4EDD; --s-deep: #6B21A8; --s-soft: #C4A7E7;
  --s-tint: #F3EAFB;    --s-edge: rgba(157,78,221,.35); --s-glow: rgba(157,78,221,.18);
}
/* Harness — Red */
.series-harness .fig-v2,
.fig-v2.series-harness {
  --s-primary: #F43F5E; --s-deep: #9F1239; --s-soft: #FDA4AF;
  --s-tint: #FFF1F2;    --s-edge: rgba(244,63,94,.35);  --s-glow: rgba(244,63,94,.18);
}
/* AI PM OS — Amber */
.series-ai-pm-os .fig-v2,
.fig-v2.series-ai-pm-os {
  --s-primary: #F59E0B; --s-deep: #B45309; --s-soft: #FCD34D;
  --s-tint: #FEF3C7;    --s-edge: rgba(245,158,11,.35); --s-glow: rgba(245,158,11,.18);
}
/* Agentic — Cyan (explicit, matches default) */
.series-agentic .fig-v2,
.fig-v2.series-agentic {
  --s-primary: #06B6D4; --s-deep: #155E75; --s-soft: #67E8F9;
  --s-tint: #ECFEFF;    --s-edge: rgba(6,182,212,.35);  --s-glow: rgba(6,182,212,.18);
}

.fig-v2.reveal,
.fig-v2 .reveal {
  filter: none !important;
  transform: translateY(12px) !important;
  transition: opacity .6s ease, transform .6s ease !important;
}
.fig-v2.reveal.visible,
.fig-v2 .reveal.visible { transform: translateY(0) !important; }

/* Neutral value chip — always legible over any light bar */
.fig-v2 .chip-neutral,
.chip-neutral {
  display: inline-flex; align-items: center;
  background: rgba(8,10,14,.72);
  color: #FFFFFF;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1;
}

/* Threshold annotation — anchor INSIDE chart canvas */
.fig-v2 .threshold-line,
.threshold-line {
  position: absolute; left: 14px; right: 14px; height: 0;
  border-top: 2px dashed rgba(244,63,94,.55);
  pointer-events: none; z-index: 2;
}
.fig-v2 .threshold-chip,
.threshold-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: #BE123C; font-weight: 700;
  padding: 2px .55rem;
  border: 1px solid rgba(244,63,94,.35);
  border-radius: 4px;
  background: #FFF5F5;
}

/* Axis row above chart — never rotate y-label inside overflow:hidden */
.fig-v2 .axis-row,
.axis-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .5rem; gap: 1rem; flex-wrap: wrap;
}
.fig-v2 .axis-y,
.axis-y {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: #5B6573; font-weight: 700;
}

/* Side-by-side rows: enough breathing room so wrapped text never collides */
.fig-v2 .sbs-line {
  display: grid; grid-template-columns: 22px 1fr; gap: .55rem;
  align-items: start; line-height: 1.45; word-break: break-word;
}
.fig-v2 .sbs-line + .sbs-line {
  padding-top: .15rem;
  border-top: 1px solid rgba(11,15,20,.04);
}

/* Mobile floor — every v2 figure inherits these */
@media (max-width: 720px) {
  .fig-v2 [class*="-grid"],
  .fig-v2 .side-by-side,
  .fig-v2 .section-cards,
  .fig-v2 .two-col { grid-template-columns: 1fr !important; }

  .fig-v2 .axis-y,
  .fig-v2 .threshold-chip { font-size: .52rem !important; }

  .fig-v2 .chip-neutral { font-size: .64rem; padding: 2px 7px; }

  .fig-v2 [class*="-bars"],
  .fig-v2 [class*="-chart"] { min-height: 220px; }

  .fig-v2 .sbs-line { grid-template-columns: 18px 1fr; word-break: break-word; }
}

/* ---- v2 figure chrome — eyebrow / headline / caption ---- */
.fig-v2 .fig-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .55rem; font-weight: 700;
}
.fig-v2 .fig-headline {
  font-family: 'Instrument Serif', 'Newsreader', Georgia, serif;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.18;
  color: var(--ink-1); font-weight: 400; letter-spacing: -0.01em;
  margin: 0 0 1.25rem; max-width: 64ch;
}
.fig-v2 .fig-caption {
  display: block; margin-top: 1rem;
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: clamp(.9rem, 1.5vw, 1rem); color: var(--ink-2);
  line-height: 1.55; max-width: 70ch;
}
/* Rebuild figures (Pass A) use figcaption > .fig-eyebrow / .fig-title / .fig-note.
   Alias the styles so the two naming conventions coexist. */
.fig-v2 figcaption {
  display: block; margin-top: 1.25rem;
  max-width: 72ch;
}
.fig-v2 figcaption .fig-title {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  line-height: 1.35; color: var(--ink-1);
  font-weight: 500; letter-spacing: -0.005em;
  margin: .35rem 0 .55rem;
}
.fig-v2 figcaption .fig-note {
  display: block;
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: clamp(.88rem, 1.4vw, .98rem);
  line-height: 1.55; color: var(--ink-2);
}
/* Neutralize legacy mobile horizontal-scroll wrappers when they sit inside a
   v2 figure — v2 diagrams are composed to reflow, never to scroll. */
.fig-v2 .svg-scroll-wrap { overflow: visible !important; }
.fig-v2 .svg-scroll-wrap > svg { min-width: 0 !important; width: 100% !important; height: auto !important; }
/* Let labels/titles rendered near the viewBox edges paint fully instead of
   being clipped by the SVG's user-agent overflow:hidden default. */
.fig-v2 svg,
.fig-v2 .svg-scroll-wrap > svg { overflow: visible; }
.fig-v2 .svg-scroll-hint,
.fig-v2 .svg-expand-btn { display: none !important; }

/* The .sig-svg-eyebrow / .sig-svg-heading blocks that sit above each
   signature figure duplicate the eyebrow + headline already rendered
   inside the SVG. Keep them in the DOM for screen readers, but hide
   them visually so the figure reads once, not twice. */
.sig-svg-frame .sig-svg-eyebrow,
.sig-svg-frame .sig-svg-heading {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* G5 responsive rescue: at ≤640px the desktop viewBox shrinks below the 14px
   label floor. Restore controlled horizontal scroll so labels stay legible
   instead of vanishing into sub-pixel type. */
@media (max-width: 640px) {
  .fig-v2 .svg-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .fig-v2 .svg-scroll-wrap > svg {
    min-width: 720px !important;
    width: 720px !important;
    height: auto !important;
  }
  .fig-v2 .svg-scroll-hint {
    display: block !important;
    position: absolute; top: .6rem; right: .8rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-2, #5F6B7A); opacity: .85;
    pointer-events: none;
  }
  .fig-v2 .svg-scroll-wrap { position: relative; }
}
/* ensure v2 figures get a paper slab even when not using -diagram suffix */
figure.fig-v2 {
  background: var(--paper);
  color: var(--ink-1);
  border-radius: 18px;
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.1rem, 3.5vw, 2.2rem);
  margin: clamp(2rem, 5vw, 3rem) 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(11,15,20,.06);
  position: relative; overflow: hidden;
}
figure.fig-v2::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--s-primary), transparent);
  opacity: .7;
}

/* ============================================================
   FIGURE LIGHTBOX — click any .fig-v2 to zoom (paired w/ article.js)
   ============================================================ */
figure.fig-zoomable {
  cursor: zoom-in;
  position: relative;
  outline: none;
  transition: box-shadow .2s ease;
}
figure.fig-zoomable:focus-visible {
  box-shadow: 0 0 0 3px rgba(157,78,221,.55), 0 30px 80px rgba(0,0,0,.35);
}
.fig-zoom-hint {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  background: rgba(10,12,18,.78);
  color: #FCFDFD;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 3;
}
.fig-zoom-hint svg { display: block; }
figure.fig-zoomable:hover .fig-zoom-hint,
figure.fig-zoomable:focus-visible .fig-zoom-hint {
  opacity: 1; transform: translateY(0);
}
@media (hover: none) {
  .fig-zoom-hint { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-zoom-hint { transition: none; }
}

/* Dialog ------------------------------------------------------ */
dialog#fig-zoom {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0;
  border: 0; background: rgba(3,4,7,.97);
  color: #FCFDFD;
  overflow: hidden;
}
dialog#fig-zoom::backdrop {
  background: rgba(3,4,7,.97);
}
dialog#fig-zoom .fz-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
  touch-action: none;
  overflow: hidden;
}
dialog#fig-zoom .fz-img {
  max-width: 92vw; max-height: 88vh;
  width: auto; height: auto;
  user-select: none; -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
  transition: transform .12s ease-out;
}
dialog#fig-zoom .fz-dom {
  max-width: 92vw; max-height: 88vh;
  display: none;
  overflow: visible;
  user-select: none;
  transform-origin: center center;
  will-change: transform;
  transition: transform .12s ease-out;
  background: #FCFDFD;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
dialog#fig-zoom .fz-dom > * {
  max-width: 100%;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  dialog#fig-zoom .fz-img,
  dialog#fig-zoom .fz-dom { transition: none; }
}
dialog#fig-zoom .fz-cap {
  position: absolute; left: 50%; bottom: 76px;
  transform: translateX(-50%);
  max-width: min(720px, 88vw);
  text-align: center;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px; line-height: 1.5;
  color: rgba(252,253,253,.78);
  pointer-events: none;
  z-index: 2;
}
dialog#fig-zoom .fz-close {
  position: absolute; top: 18px; right: 18px;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; font-weight: 300;
  background: #FCFDFD;
  color: #0B0F14;
  border: 1.5px solid #FCFDFD;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  z-index: 10;
}
dialog#fig-zoom .fz-close:hover,
dialog#fig-zoom .fz-close:focus-visible {
  background: #9F1239;
  color: #FCFDFD;
  border-color: #9F1239;
  outline: none;
}
dialog#fig-zoom .fz-controls {
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px;
  background: rgba(252,253,253,.06);
  border: 1px solid rgba(252,253,253,.14);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
}
dialog#fig-zoom .fz-btn {
  min-width: 44px; height: 36px;
  padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: #FCFDFD;
  border: 0;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .12s ease;
}
dialog#fig-zoom .fz-btn:hover,
dialog#fig-zoom .fz-btn:focus-visible {
  background: rgba(252,253,253,.14);
  outline: none;
}
dialog#fig-zoom .fz-reset { min-width: 56px; }

@media (max-width: 640px) {
  dialog#fig-zoom .fz-cap { bottom: 84px; font-size: 13px; }
  dialog#fig-zoom .fz-close { width: 48px; height: 48px; top: 12px; right: 12px; }
  dialog#fig-zoom .fz-btn { min-width: 48px; height: 40px; font-size: 14px; }
  .fig-zoom-hint { right: 10px; bottom: 10px; font-size: 10px; padding: 5px 9px; }
}

/* ============================================================
   READABILITY UTILITIES — Harness Engineering (scoped)
   Scoped to .series-harness so other series are untouched.
   .lede     — scannable section opener (one hook per H2)
   .key-line — single bold sticky takeaway, accent rule
   plus calmer mobile rhythm for the reading column
   ============================================================ */
.series-harness .lede{
  font-family:var(--font-body);
  font-size:1.5rem; line-height:1.55;
  color:var(--ink-main); font-weight:400;
  letter-spacing:-0.01em; margin:0 0 2rem;
}
.series-harness .key-line{
  display:block;
  font-family:var(--font-sans);
  font-size:1.22rem; line-height:1.5; font-weight:700;
  color:var(--ink-main); letter-spacing:-0.01em;
  border-left:3px solid var(--color-harness);
  padding:0.15rem 0 0.15rem 1.15rem;
  margin:2.4rem 0;
}
.series-harness .text-col ul,
.series-harness .text-col ol{ max-width:660px; }
.series-harness .text-col li{ margin-bottom:0.85rem; }
.series-harness .text-col li:last-child{ margin-bottom:0; }

@media (max-width:480px){
  .series-harness .lede{ font-size:1.22rem; line-height:1.5; margin-bottom:1.6rem; }
  .series-harness .key-line{ font-size:1.08rem; padding-left:0.95rem; margin:2rem 0; }
  .series-harness .text-col p{ margin-bottom:1.55rem; }
  .series-harness .text-col li{ margin-bottom:0.7rem; }
}