/* CS2 · layout and its pieces (docs/cs2-spec.md, docs/cs2-figma-values.md). Needs tokens.css, shell.css, thread.css,
   story.css, band.css. Desktop default (901–1251 is the stacked desktop: tablet arrangements with desktop values);
   CS2's own switch at 1252 (side-by-side layouts); the shell's 900 and 600 for tablet and mobile. */

/* main is full width with no side padding: 100cqi is the page width */
.cs2 {
  --case: var(--color-case-cs2);
  --off: 80px; /* content column from the page margin: knot column + gutter, 80 / 52 / 40 */
  container-type: inline-size;
}
.cs2 :where(p, h1, h2, h3, figure, ul) { margin: 0; }
.cs2 ul { padding: 0; list-style: none; }
.cs2 .sec { color: var(--color-text-secondary); }
.cs2 .pri { color: var(--color-text-primary); }
.br-d { display: inline; }

/* ---------- Hero (§3) ---------- */
.cs2-hero { padding: 0 var(--in-page-x); }
.hero-main {
  --hero-below: 24px; /* under the lead, inside the text column: 24 / 32 / 24 */
  display: flex;
  flex-direction: column;
  gap: var(--rh-element);
  padding: var(--rh-section) 0 calc(var(--hero-below) + var(--rh-block)); /* lead to Stop 1: 72 / 64 / 48 */
}
/* A plain block (not flex): the h1 is not a flex item, so the QA finds the headline's block and the lead below it (E1) */
.hero-text { max-width: var(--hero-col); }
.hero-text > .t-label { margin-bottom: var(--rh-element); }
.hero-lead { max-width: var(--hero-lead); }
/* Four written lines on every size, never re-flowed */
.hero-title { white-space: nowrap; }

/* "iceberg." carries the underline; the tracking given back as padding (as "why." on CS1) */
.berg {
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin-inline-start: 0.045em; /* "the " is its own Figma node: its space carries no tracking (140 / 93 / 57) */
  padding-inline-end: 0.045em;
}
/* Mark · Underline: 4.43 beyond the word on desktop (Figma 303.85 × 10), 4 on tablet and mobile */
.berg__line {
  --over: 4.43px;
  position: absolute;
  z-index: -1;
  left: calc(0px - var(--over));
  top: 0.908em;
  width: calc(100% + 2 * var(--over));
  height: 10px;
  overflow: visible;
}

/* ---------- Code chip (§7.1) · square, original case ---------- */
.chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
  padding: calc(var(--in-xs-y) + 1px) calc(var(--in-xs-x) + 1px); /* the 1 px line counts in the layout: 28 tall */
  border-radius: var(--radius-xs);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font: 400 11px/18px "Martian Mono", ui-monospace, monospace;
  letter-spacing: 0.88px;
  white-space: nowrap;
}
.chip::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
}
/* Random: 1 px dashed line-hand, dash 3 / 2 (drawn as four dashed edges, a CSS dashed border can't set the dash) */
.chip--random::before {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--color-line-hand) 0 3px, transparent 3px 5px) top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--color-line-hand) 0 3px, transparent 3px 5px) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--color-line-hand) 0 3px, transparent 3px 5px) left / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--color-line-hand) 0 3px, transparent 3px 5px) right / 1px 100% no-repeat;
}
/* Token: soft fill inside a 1.2 case line (two layers): 28.4 tall */
.chip--token {
  --ol-w: var(--stroke-guide);
  --ol-line: var(--color-case-cs2);
  --ol-fill: var(--color-case-cs2-soft);
  padding: calc(var(--in-xs-y) + var(--stroke-guide)) calc(var(--in-xs-x) + var(--stroke-guide));
  background: var(--color-case-cs2);
}
.chip--token::before {
  inset: var(--stroke-guide);
  border-radius: calc(var(--radius-xs) - var(--stroke-guide));
  background: var(--color-case-cs2-soft);
}
/* Question: plain code value, 1 px guide line, secondary text */
.chip--q {
  --ol-w: 1px;
  --ol-line: var(--color-line-guide);
  --ol-fill: var(--color-bg-page);
  background: var(--color-line-guide);
  color: var(--color-text-secondary);
}
.chip--q::before {
  inset: 1px;
  border-radius: calc(var(--radius-xs) - 1px);
  background: var(--color-bg-page);
}
/* Outlines drawn by outline.js (story.css): the two layers off */
.chip--token.has-outline,
.chip--q.has-outline { background: none; }
.chip--token.has-outline::before,
.chip--q.has-outline::before { content: none; }
.chip__sw {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--sw, var(--color-line-hand));
}
.chip__sw--white {
  background: #ffffff;
  outline: 1px solid var(--color-line-guide);
  outline-offset: -1px;
}

/* ---------- Button spec (§7.2) · 30 tall, radius 8, caption 13 ---------- */
.bspec {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 30px;
  border-radius: var(--radius-m);
  background: var(--bs, var(--color-case-cs2));
  color: var(--color-text-on-ink);
  white-space: nowrap;
}
.bspec--outline {
  --ol-w: var(--stroke-hand);
  --ol-line: var(--color-case-cs2);
  --ol-fill: var(--color-bg-page);
  background: var(--color-case-cs2);
  color: var(--color-case-cs2);
}
.bspec--outline.has-outline { background: none; }
.bspec--outline.has-outline::before { content: none; }
.bspec--outline::before {
  content: "";
  position: absolute;
  inset: var(--stroke-hand);
  z-index: -1;
  border-radius: calc(var(--radius-m) - var(--stroke-hand));
  background: var(--color-bg-page);
}

/* ---------- Clean screen (§7.2) · the 140 × 280 master, used scaled ---------- */
.cscreen {
  --ol-w: var(--stroke-guide);
  --ol-line: var(--color-line-exact);
  --ol-fill: var(--color-bg-page);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 140px;
  height: 280px;
  padding: calc(24px + var(--stroke-guide)) calc(12px + var(--stroke-guide)) calc(20px + var(--stroke-guide));
  border-radius: var(--radius-tile);
  background: var(--color-line-exact);
}
.cscreen::before {
  content: "";
  position: absolute;
  inset: var(--stroke-guide);
  z-index: -1;
  border-radius: calc(var(--radius-tile) - var(--stroke-guide));
  background: var(--color-bg-page);
}
.cscreen.has-outline { background: none; }
.cscreen.has-outline::before { content: none; }
.cscreen__title {
  color: var(--color-text-primary);
  font: 500 17px/1.4 "Funnel Display", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.cscreen__bar { flex: none; width: 90px; height: 6px; border-radius: var(--radius-xs); background: var(--color-line-guide); }
.cscreen__bar + .cscreen__bar { width: 72px; }
.cscreen__bar + .cscreen__bar + .cscreen__bar { width: 54px; }
.cscreen__btn {
  margin-top: auto;
  font: 400 13px/1.5 "Funnel Sans", system-ui, sans-serif;
}

/* ---------- The iceberg (§6) · one SVG per state, 640 × 700 component units; strokes scale with it ---------- */
/* The root is filled --color-bg-page (also as a CSS background: the QA's E5 reads it; the line runs behind it on mobile) */
.ice {
  display: block;
  width: min(576px, 100%);
  height: auto;
  overflow: hidden;
  background: var(--color-bg-page);
}
.ice text {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.88px;
  dominant-baseline: central;
}
.ice .i-bg { fill: var(--color-bg-page); }
.ice .i-tint { fill: var(--color-case-cs2-soft); }
.ice .i-berg {
  fill: var(--color-bg-page);
  stroke: var(--color-line-exact);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ice .i-berg--tokens { stroke-width: 1.92; }
.ice .i-wave {
  fill: none;
  stroke: var(--color-line-hand);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ice .i-exact { fill: none; stroke: var(--color-line-exact); stroke-width: 1.6; }
.ice .i-guide { fill: var(--color-line-guide); }
.ice .i-cr { fill: var(--color-bg-page); stroke: var(--color-line-hand); stroke-width: 1; stroke-dasharray: 3 2; }
.ice .i-sw { fill: var(--color-line-hand); }
.ice .i-tk { fill: var(--color-case-cs2-soft); stroke: var(--color-case-cs2); stroke-width: 1.2; }
.ice .i-ct { fill: var(--color-text-primary); }
.ice .i-lb { fill: var(--color-text-secondary); }
.ice .i-bs1 { fill: var(--color-case-cs2); }
.ice .i-bs2 { fill: var(--color-bg-page); stroke: var(--color-case-cs2); stroke-width: 1.4; }
.ice .i-bs3 { fill: var(--color-work-danger); }
.ice .i-bt {
  fill: var(--color-text-on-ink);
  font-family: "Funnel Sans", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-anchor: middle;
}
.ice .i-bt2 { fill: var(--color-case-cs2); }
.ice .i-clean { fill: var(--color-bg-page); stroke: var(--color-line-exact); stroke-width: 0.24; }
/* HUD (Update 9 Nov 2026, Eden): the number again, static. Desktop (≥ 901) 48 units, tablet 36; no HUD on mobile */
.ice .i-num {
  fill: var(--color-text-primary);
  font-family: "Funnel Display", system-ui, sans-serif;
  font-weight: 500;
  dominant-baseline: alphabetic;
}
.ice .i-num--48 { font-size: 48px; letter-spacing: -1.92px; }
.ice .i-num--36 { font-size: 36px; letter-spacing: -1.44px; }
.ice .i-hud--t { display: none; }

/* ---------- Chapter 1 · the stops (§5.1) ----------
   Default: the stacked desktop (901–1251): text, then the iceberg 576 × 630 centred */
.stop {
  --stop-pt: var(--rh-block);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--rh-block);
  padding: var(--stop-pt) var(--in-page-x) var(--rh-block) calc(var(--in-page-x) + var(--off));
}
/* Knot centre on --thread-x and on the label's centre (label line 17.6) */
.stop__knot {
  position: absolute;
  left: calc(var(--thread-x) - 12px);
  top: calc(var(--stop-pt) + 8.8px - 12px);
}
/* The sweep ends 8 px into Stop 1 (§4): the module lands 16 above this point */
.stop__start {
  position: absolute;
  left: var(--thread-x);
  top: 24px;
  width: 0;
  height: 0;
}
.stop__text {
  display: flex;
  flex-direction: column;
  gap: var(--rh-element);
  min-width: 0;
}
.stop__title,
.stop__sub { max-width: 680px; }
.stop__stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

.cost { display: flex; flex-direction: column; gap: var(--space-12); }
.cost li { display: flex; flex-direction: column; gap: var(--space-4); }

.count {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-8);
}
.above {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
}
.results {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

/* ---------- Chapters 2–4 (§8–§10) ---------- */
.chap {
  --chap-gap: var(--space-16);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--chap-gap);
  padding: var(--rh-chapter) var(--in-page-x) 0 calc(var(--in-page-x) + var(--off));
}
.chap--tracks { --chap-gap: var(--rh-element); }
.chap--learned { padding-bottom: var(--rh-chapter); }
.chap__knot {
  position: absolute;
  left: calc(var(--thread-x) - 12px);
  top: calc(var(--rh-chapter) + 8.8px - 12px);
}
.chap--team .chap__title { max-width: 820px; }
.chap--tracks .chap__sub { max-width: 640px; }

/* ---------- Chapter 2 · the team (§8) ---------- */
.team {
  display: flex;
  flex-direction: column;
  gap: var(--rh-block);
  padding-top: var(--space-40);
}
.scene {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}
.scene__board {
  position: relative;
  height: 282px;
  overflow: hidden;
  background: var(--color-bg-surface);
}
/* A drawing at its Figma size, centred in its board; below 390 cs2.js scales it to fit (--fit) */
.draw {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--fit, 1));
}
.draw > * { position: absolute; }
/* Stacked Steps (Update 9 Nov 2026, Eden): cs2.js centres them on their real bounds and scales them (inline transform) */
.draw--m { transform-origin: 0 0; }
.draw--d { display: none; }
.draw .t-label { line-height: 18px; white-space: nowrap; }
.draw__eq {
  width: 10px;
  color: var(--color-text-primary);
  font: 500 17px/24px "Funnel Display", system-ui, sans-serif;
  letter-spacing: -0.01em;
  text-align: center;
}
.draw__lines { overflow: visible; }
.draw__lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.draw__guide { stroke: var(--color-line-guide); }
.draw__ink { stroke: var(--color-line-exact); }
.draw__knot { fill: var(--case); }
/* Pawns scale with their stroke (1.4 × the drawing scale, as in Figma); Waiting is the outline pawn */
/* Update 13 Nov 2026 (Eden): scaled drawings keep their weight on screen. Every stroke in them is non-scaling,
   the outlines (outline.js) and the drawing's own lines alike */
:is(.draw, .illus__in) :is(path, line, polyline, polygon, circle, ellipse, rect) { vector-effect: non-scaling-stroke; }
.pawn--waiting * { fill: var(--color-bg-page); stroke: var(--color-line-exact); }

/* ---------- Chapter 3 · six tracks (§9) ---------- */
.tracks {
  display: flex;
  flex-direction: column;
  gap: var(--rh-element);
}
/* Below 1252 the tabs hug their text and the row scrolls sideways inside itself; 4 px of room keeps the focus ring */
.tabs {
  display: flex;
  gap: var(--space-24);
  margin: 0 -4px -4px;
  padding: var(--rh-block) 4px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs.is-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
}
.tab__num { color: var(--color-text-secondary); }
.tab__name { position: relative; color: var(--color-text-secondary); white-space: nowrap; }
/* Selected: name primary, the underline 4 below it, the name's width + 4, 8 tall */
.tab[aria-selected="true"] { padding: 0 4px 12px 0; } /* the tab hugs its underline (Figma: Color 47 wide) */
.tab[aria-selected="true"] .tab__name { color: var(--color-text-primary); }
.tab__line {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: calc(100% + 4px);
  height: 8px;
  overflow: visible;
}
.tab[aria-selected="false"] .tab__line { display: none; }

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--rh-block);
  padding-top: var(--rh-element);
}
.panel[hidden] { display: none; }

/* The drawn track screen inside Compare · Before/After (Update 13 Nov 2026, Eden; Figma CS2 · Track screen 765:1402):
   280 × 609, padding 48 / 16 / 40 / 16, gap 8, rows filling the width. The template (story.css) gives the frame and
   scales the whole screen as one picture on mobile. */
.tscreen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding: 48px 16px 40px;
  overflow: hidden;
  background: var(--color-bg-page);
}
/* Options: neutral, the screen's width × 40 (1.2 guide line), with a chip (vertical), feedback (1.5 line in --line) */
.opt {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: none;
  width: 100%;
  min-height: 40px;
  padding: 0 calc(8px + var(--stroke-guide)) 0 calc(12px + var(--stroke-guide));
  border-radius: var(--radius-m);
  background: var(--color-line-guide);
  color: var(--color-text-primary);
  --ol-w: var(--stroke-guide);
  --ol-line: var(--color-line-guide);
  --ol-fill: var(--color-bg-page);
}
.opt::before {
  content: "";
  position: absolute;
  inset: var(--stroke-guide);
  z-index: -1;
  border-radius: calc(var(--radius-m) - var(--stroke-guide));
  background: var(--color-bg-page);
}
.opt--stack,
.opt--fb {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: calc(8px + var(--stroke-guide)) calc(8px + var(--stroke-guide)) calc(8px + var(--stroke-guide)) calc(12px + var(--stroke-guide));
}
.opt--fb {
  padding: 9.5px 9.5px 9.5px 13.5px;
  background: var(--line);
}
.opt--fb::before { inset: 1.5px; border-radius: 6.5px; }
.opt--fb { --ol-w: 1.5px; --ol-line: var(--line); }
.opt.has-outline { background: none; }
.opt.has-outline::before { content: none; }

.annot { display: flex; align-items: flex-start; gap: var(--space-8); }
.annot__text { flex: none; width: 160px; }

.mrow-end { display: flex; justify-content: flex-end; align-self: stretch; }
.mfoot { display: flex; align-items: flex-start; gap: var(--space-8); }
.mfoot--fill { align-self: stretch; }
.mfoot--fill .mcol { flex: 1; min-width: 0; }
.mfoot--fill .bspec { align-self: stretch; }
.mcol { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.mcol--fill { align-self: stretch; }
.mcol--fill .bspec { align-self: stretch; }

/* Spacing lists: no gap, the gaps drawn as bands with their number 8 right of the band */
.slist { display: flex; flex-direction: column; }
.slist__row { display: flex; }
.sband {
  position: relative;
  flex: none;
  width: 196px;
  background: var(--color-case-cs2-soft);
}
.sband--hand { background: var(--color-work-danger-soft); }
.sband > span {
  position: absolute;
  left: 204px;
  top: 50%;
  color: var(--color-text-secondary);
  transform: translateY(-50%);
}

/* Feedback panel (Responsive): 12 padding inside a 1.5 line */
.fbp {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: none;
  padding: 13.5px;
  border-radius: var(--radius-m);
  background: var(--line);
  --ol-w: 1.5px;
  --ol-line: var(--line);
  --ol-fill: var(--fill);
}
.fbp::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  border-radius: 6.5px;
  background: var(--fill);
}
.fbp.has-outline { background: none; }
.fbp.has-outline::before { content: none; }

/* What I saw */
.saw {
  display: flex;
  flex-direction: column;
  gap: var(--rh-element);
  min-width: 0;
}
/* Full width; the 1.6 line counts in the layout here (Figma 636 × 67.2 on desktop, 694 × 63.2 on tablet) */
.saw .bubble {
  width: 100%;
  padding: calc(var(--in-m-y) + var(--stroke-exact)) calc(var(--in-m-x) + var(--stroke-exact));
}

/* Code card (§9.4): real text */
.code {
  --kw: 64px; /* key column */
  --bw: 200px; /* before column */
  --rg: 8px; /* row and header gap */
  display: flex;
  flex-direction: column;
  gap: var(--rh-tight);
  min-height: 278px;
  padding: var(--in-m-y) var(--in-m-x);
  border-radius: var(--radius-m);
  background: var(--color-bg-surface);
}
.code--buttons { --bw: 175px; }
.code--spacing { --kw: 80px; --bw: 184px; }
.code--access { --kw: 84px; --bw: 166px; }
.code__head,
.code__row {
  display: flex;
  align-items: flex-start;
  gap: var(--rg);
}
.code__key { flex: none; width: var(--kw); }
.code__row .code__key,
.code__row .code__arrow,
.code__plain {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.code__before {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  flex: none;
  width: var(--bw);
}
.code__arrow { flex: none; justify-content: center; width: 16px; }
/* Arrow + After. Update 8 Nov 2026 (Eden): when a row doesn't fit (tablet 601–767), cs2.js sets .is-wrap and this
   part moves to its own line, at the key column */
.code__to {
  display: flex;
  align-items: flex-start;
  gap: var(--rg);
  min-width: 0;
}
.code__head.is-wrap,
.code__row.is-wrap { flex-wrap: wrap; row-gap: var(--space-8); }
.is-wrap > .code__to { flex-basis: 100%; padding-left: calc(var(--kw) + var(--rg)); }
.code__after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}
.code__plain { flex: none; width: 100px; }
.k-m { display: none; }
.code__same {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}
.code__pair {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  min-width: 0;
}
/* Accessibility on desktop: "In Figma" over "In code", no "=" */
.code__same--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}
.code__same--stack .code__eq { display: none; }

/* ---------- Chapter 4 · what I learned (§10) ---------- */
.lesson {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rh-block);
  padding: var(--rh-block) 0;
}
.lesson__text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--rh-element);
}
/* The illustration: 447.6 × 209.29, scaled by cs2.js to fit its column (--fit) */
.illus {
  position: relative;
  flex: none;
  width: calc(447.6px * var(--fit, 1));
  height: calc(209.29px * var(--fit, 1));
}
.illus__in {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  width: 447.6px;
  transform: scale(var(--fit, 1));
  transform-origin: 0 0;
}
.illus__screens { display: flex; gap: var(--space-8); }
.cscreen-wrap { flex: none; width: 77px; height: 154px; }
.cscreen-wrap .cscreen { transform: scale(0.55); transform-origin: 0 0; }
.illus__wave { display: block; width: 360px; height: 2.89px; overflow: visible; }
.illus__wave path {
  fill: none;
  stroke: var(--color-line-hand);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.illus__chips { display: flex; gap: var(--space-8); }

.notes {
  display: flex;
  flex-direction: column;
  gap: var(--rh-element);
}
.note {
  display: flex;
  flex-direction: column;
  gap: var(--rh-element);
}

/* ---------- Desktop ≥ 1252: the side-by-side layouts ---------- */
@media (min-width: 1252px) {
  .stop {
    --stop-pt: 140px;
    grid-template-columns: minmax(0, 1fr) 588px;
    column-gap: var(--space-24);
    row-gap: 0;
    height: 694px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .stop__text {
    gap: var(--space-20);
    padding: var(--space-140) 0 var(--space-48);
  }
  .stop__title,
  .stop__sub { max-width: 480px; }
  .stop--1 .stop__sub,
  .stop--2 .stop__title { max-width: none; }
  .stop__stage { padding: var(--space-32) 0; }

  .team {
    flex-direction: row;
    gap: var(--space-32);
  }
  .scene { flex: 1; }
  .scene__board { height: 252px; }
  .scene__title { min-height: 62px; }
  .draw--d { display: block; }
  .draw--m { display: none; }

  .tracks { gap: 0; }
  .tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: var(--rh-block) 0 0;
    overflow: visible;
  }
  .lesson {
    flex-direction: row;
    gap: var(--space-48);
    padding: var(--space-64) 0 var(--space-32);
  }
  .lesson__text { flex: 1; align-self: auto; gap: var(--space-12); }
  .lesson__body { max-width: 520px; }

  .notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-48);
    padding-top: var(--space-24);
  }
  .note { gap: var(--space-8); }
}

/* Update 8 Nov 2026 (Eden): the track panel sits side by side from 1400, where What I saw reaches the code card's
   widest rows (Buttons, 596); from 901 to 1399 it is stacked with desktop values */
@media (min-width: 1400px) {
  .panel {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-64);
  }
  .panel .cmp { flex: none; width: 592px; }
  .saw { flex: 1; }
}

/* Above 1440 the page lays out as at 1440, centred (--in-page-x); the stop text column stays 668 */

/* ---------- Tablet · 601–900 ---------- */
@media (max-width: 900px) {
  .cs2 { --off: 52px; }
  .br-d { display: none; }
  .hero-main { --hero-below: 32px; }
  .berg__line { --over: 4px; }

  .stop__title,
  .stop__sub { max-width: none; }
  .stop--6 { padding-bottom: 0; }
  .cost { gap: var(--rh-element); }
  .cost li { gap: var(--rh-tight); }
  .above { gap: var(--rh-tight); padding-top: 0; }
  .results { gap: var(--rh-element); }

  .chap { --chap-gap: var(--rh-element); }
  .chap--team .chap__title,
  .chap--tracks .chap__sub { max-width: none; }
  .team { padding-top: var(--space-32); }

  .saw__asked { display: none; }
  .ice .i-d { display: none; } /* the iceberg's top and bottom captions are desktop only (§6) */
  .ice .i-hud--d { display: none; }
  .ice .i-hud--t { display: inline; }

  .code { --kw: 76px; --bw: 200px; --rg: 12px; min-height: 273px; }
  .code--spacing { --kw: 96px; }
  .code__same--stack { flex-direction: row; align-items: center; gap: var(--space-12); }
  .code__same--stack .code__eq { display: inline; }
}

/* ---------- Mobile · up to 600 ---------- */
@media (max-width: 600px) {
  .cs2 { --off: 40px; }
  /* Update 8 Nov 2026 (Eden): headline to lead 20 on mobile (Figma 16), so the line's start keeps E1's 16 px from the lead */
  .hero-main { --hero-below: 24px; gap: var(--space-20); }

  /* The stop: the row (knot · text) on the page margins, then the iceberg at full page width */
  .stop {
    --stop-pt: var(--rh-block);
    row-gap: 0;
    padding: var(--stop-pt) 0 0;
  }
  .stop--1 { --stop-pt: 0px; }
  .stop--6 { padding-bottom: 0; }
  .stop__knot { top: calc(var(--stop-pt) + var(--rh-block) + 8.8px - 12px); }
  .stop__text { padding: var(--rh-block) var(--in-page-x) var(--rh-block) calc(var(--in-page-x) + var(--off)); }
  .cost__desc,
  .count,
  .above { display: none; }
  .cost { gap: var(--space-16); }
  .results { gap: var(--space-16); }

  .team { padding-top: 0; }

  .tabs { gap: var(--space-20); }
  .ice .i-hud--t { display: none; } /* no HUD on mobile (Update 9 Nov 2026, Eden) */

  /* Code card: the After side only; each key on its own line above its chip; chips wrap inside themselves */
  .code { min-height: 0; }
  .code__head .code__key,
  .code__head .code__before,
  .code__head .code__arrow,
  .code__before,
  .code__row .code__arrow,
  .code__plain,
  .k-d { display: none; }
  .k-m { display: inline; }
  .code__row { flex-wrap: wrap; gap: var(--space-8); }
  .code__row .code__key { width: 100%; min-height: 0; }
  .code__same { margin-top: 6px; gap: var(--space-8) var(--space-12); }
  .code .chip {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* =====================================================================================================
   Stage B · motion (docs/cs2-spec.md §16). Every start state sits under html.cs2-motion, set before the first paint
   by js/cs2-early.js and kept in sync by cs2.js (reduced motion, also switched live). Without it: the Stage A page.
   Only opacity, transform, clip-path and SVG presentation values move. E = cubic-bezier(.65, 0, .35, 1).
   ===================================================================================================== */
.cs2 { --cs2-e: cubic-bezier(0.65, 0, 0.35, 1); }

/* ---------- Load (§16.2) ---------- */
@keyframes cs2-rise {
  from { transform: translateY(0.25em); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes cs2-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes cs2-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cs2-motion .hero-title { animation: cs2-rise 0.6s ease 0.2s both; }
.cs2-motion .berg__line { animation: cs2-draw 0.7s cubic-bezier(0.5, 0, 0.2, 1) 0.65s both; }
.cs2-motion .hero-lead { animation: cs2-fade 0.8s ease 1.45s both; }

/* ---------- The pinned iceberg story (§16.3) ----------
   cs2.js builds section.cs2-story from the six stops and hides them; until then they keep their place unseen */
.cs2 .stop[hidden] { display: none; }
.cs2-motion:not(.cs2-nopin) .stop { visibility: hidden; }
/* html.cs2-nopin (Update 10 Nov 2026, Eden): the last resort, the Stage A stops (cs2.js) */

.cs2-story { position: relative; }
.cs2-story__start {
  position: absolute;
  left: var(--thread-x);
  top: 24px; /* the hero sweep ends 8 px into the story, as into Stop 1 (§16.3.8) */
  width: 0;
  height: 0;
}
/* Update 12 Nov 2026 (Eden): this height is the fit's budget; cs2.js then sets the box to its content's height */
.cs2-pin {
  position: sticky;
  top: var(--nav-height);
  height: calc(100svh - var(--nav-height));
}
/* Default: the stacked layouts (below 1252): thread column beside both rows; iceberg, then the text */
.cs2-pin__in {
  --pin-pt: 32px;
  --pin-gap: 32px;
  position: relative;
  display: grid;
  grid-template-columns: var(--knot-column) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  column-gap: var(--grid-gutter);
  row-gap: var(--pin-gap);
  height: 100%;
  padding: var(--pin-pt) var(--in-page-x) 0;
  overflow: hidden;
}
/* The thread column: the full height of the pin, beside every layout (its grid track keeps the room) */
.cs2-col {
  position: absolute;
  left: var(--in-page-x);
  top: 0;
  bottom: 0;
  width: var(--knot-column);
}
.cs2-stage {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: var(--iw, 576px);
  height: var(--ih, 630px);
}
.cs2-stage .ice { width: 100%; height: 100%; }
.cs2-texts {
  position: relative;
  display: grid;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}
.cs2-texts > .stop__text {
  position: relative;
  grid-area: 1 / 1;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cs2-texts > .stop__text.is-on { opacity: 1; pointer-events: auto; }

/* The line and the six knots in the pin (Update 10 Nov 2026, Eden): placed and drawn by cs2.js; the line as the
   page thread's (thread.css), over a page-coloured strip that hides the page thread inside the pin */
.cs2-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cs2-line__mask { fill: var(--color-bg-page); }
.cs2-line__path {
  fill: none;
  stroke: var(--color-line-exact);
  stroke-width: var(--stroke-exact);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
/* One knot (Reached) on the current label's centre; it moves at a stop change (Update 10 Nov 2026, Eden) */
.cs2-col .knot {
  position: absolute;
  top: 0;
  transition: transform 0.5s var(--cs2-e);
}

/* The one iceberg (§16.3.6): a World group in Hero-local units, the camera a transform on it */
.cs2-ice .w { transition: transform 1.1s var(--cs2-e); }
.cs2-ice .i-tint { transition: transform 0.8s var(--cs2-e); }
.cs2-ice .berg { transform-origin: 0 46px; transition: transform 1.1s var(--cs2-e); }
.cs2-ice .mask { transition: opacity 0.6s ease; }
.cs2-ice .i-wave,
.cs2-ice .i-exact { transition: opacity 0.8s ease; }
.cs2-ice .tip { transition: transform 0.8s var(--cs2-e); }
.cs2-ice .tip rect { transition: fill 0.8s var(--cs2-e), stroke 0.8s var(--cs2-e), width 0.8s var(--cs2-e), rx 0.8s var(--cs2-e), ry 0.8s var(--cs2-e); }
.cs2-ice .chip-g { transition: transform 0.9s var(--cs2-e), opacity 0.6s ease; }
.cs2-ice .cap { opacity: 0; transition: opacity 0.6s ease; }
.cs2-ice .lbls { opacity: 0; transition: opacity 0.5s ease; }
.cs2-ice .lbls.is-on { transition-delay: 0.3s; }
.cs2-ice .bspecs {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cs2-ice .cleans { opacity: 0; transition: opacity 0.6s ease; }
.cs2-ice .bspecs.is-on,
.cs2-ice .cleans.is-on { transition-delay: 0.3s; }
.cs2-ice .is-on { opacity: 1; transform: none; }
.cs2-ice .i-num { font-variant-numeric: tabular-nums; }

/* First build, a layout switch or a resize: the current stop at once, no transitions (§16.3.2) */
.cs2-story.is-instant,
.cs2-story.is-instant * { transition: none !important; }

/* Desktop ≥ 1252: thread column · text (480–668) · stage, the iceberg right-aligned in its 588 */
@media (min-width: 1252px) {
  .cs2-pin__in {
    grid-template-columns: var(--knot-column) minmax(0, 1fr) 588px;
    grid-template-rows: auto;
  }

  .cs2-texts {
    grid-column: 2;
    grid-row: 1;
    max-width: 668px;
    padding-top: var(--tpad, 108px);
  }
  .cs2-stage { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 600px) {
  .cs2-pin__in { --pin-pt: 16px; --pin-gap: 24px; }
}
/* Update 10 Nov 2026 (Eden): below 1252, side by side when it gives the taller iceberg (cs2.js sets .is-side):
   thread column · text (min 320) · iceberg, as ≥ 1252 */
.cs2-pin__in.is-side {
  --pin-pt: 32px;
  grid-template-columns: var(--knot-column) minmax(320px, 1fr) var(--iw);
  grid-template-rows: auto;
}

.cs2-pin__in.is-side .cs2-texts { grid-column: 2; grid-row: 1; max-width: 668px; padding-top: var(--tpad, 108px); }
.cs2-pin__in.is-side .cs2-stage { grid-column: 3; grid-row: 1; justify-self: end; }
/* Short side-by-side screens: the mobile hides, step by step, until the text fits (never clipped) */
.cs2-pin__in[data-hide="1"] .cost__desc,
.cs2-pin__in[data-hide="2"] .cost__desc,
.cs2-pin__in[data-hide="2"] .above { display: none; }

/* ---------- Team scenes (§16.4) ---------- */
.team__pin { display: contents; }
.team__steps { display: none; }
.cs2-motion .scene__board[role="button"] { cursor: pointer; }
.cs2-motion .scene .chip,
.cs2-motion .scene .chip::before { transition: background-color 0.4s ease, color 0.4s ease; }
.cs2-dot { fill: var(--color-line-exact); }
.cs2-motion .scene.is-prime *,
.cs2-motion .scene.is-prime *::before { transition: none !important; }
/* cs2.js measures the stacked drawings on their end state (§16.4) */
.draw.is-measure > * { transform: none !important; }
.draw.is-measure .chip--q { padding: calc(var(--in-xs-y) + var(--stroke-guide)) calc(var(--in-xs-x) + var(--stroke-guide)); }

/* Mobile ≤ 600: the three scenes share one sticky box, one at a time, with the step bars */
@media (max-width: 600px) {
  /* Update 12 Nov 2026 (Eden, B6): the scenes sit at the top of the box, 16 px below the nav (no centring); the box
     ends at the scenes (cs2.js). The 16 px is pulled back above the box, so before the pin the space from the lead
     to the first scene stays the chapter's normal gap */
  .cs2-motion .team.is-pinned { display: block; margin-top: -16px; }
  .cs2-motion .team.is-pinned .team__pin {
    position: sticky;
    top: var(--nav-height);
    display: grid;
    align-content: start;
    padding-top: 16px;
    height: calc(100svh - var(--nav-height)); /* the budget; cs2.js ends the box at the scenes */
  }
  .cs2-motion .team.is-pinned .scene {
    grid-area: 1 / 1;
    align-self: start;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .cs2-motion .team.is-pinned .scene.is-active { opacity: 1; transform: none; pointer-events: auto; }
  .cs2-motion .team.is-pinned .team__steps { display: flex; gap: var(--space-4); }
  .team__steps span {
    width: 22px;
    height: 3px;
    background: var(--color-line-guide);
    transition: background-color 0.4s ease;
  }
  .team[data-step="0"] .team__steps span:nth-child(-n + 1),
  .team[data-step="1"] .team__steps span:nth-child(-n + 2),
  .team[data-step="2"] .team__steps span:nth-child(-n + 3) { background: var(--color-bg-ink); }
}

/* ---------- Six tracks (§16.5) ---------- */
@keyframes cs2-tabline {
  from { clip-path: inset(-4px calc(100% + 4px) -4px -4px); }
  to { clip-path: inset(-4px -4px -4px -4px); }
}
.cs2-motion .tab__name { transition: color 0.3s ease; }
.cs2-motion .tab.is-draw .tab__line { animation: cs2-tabline 0.6s var(--cs2-e) both; }
.cs2-motion .panel { transition: opacity 0.35s ease, transform 0.35s ease; }
.cs2-motion .panel.is-out { opacity: 0; transform: translateY(10px); }
.cs2-motion .panel.is-prep { transition: none; }

/* ---------- The lesson (§16.6): messy until it calms on entry; the wave stays as Figma ---------- */
.cs2-motion .illus[role="button"] { cursor: pointer; }
.cs2-motion .illus .cscreen::before { background: var(--cs-fill, var(--color-bg-page)); }
.cs2-motion .illus .cscreen { --ol-fill: var(--cs-fill, var(--color-bg-page)); }
.cs2-motion .illus .cscreen__btn {
  background: var(--cs-btn, var(--color-case-cs2));
  border-radius: var(--cs-r, var(--radius-m));
}
.cs2-motion .illus:not([data-calm="1"]) .cscreen-wrap:nth-child(1) { transform: rotate(-7deg) translateY(8px); --cs-fill: #EDE7FB; --cs-btn: #7C3AED; --cs-r: 8px; }
.cs2-motion .illus:not([data-calm="1"]) .cscreen-wrap:nth-child(2) { transform: rotate(5deg) translateY(-6px); --cs-fill: #FFEDD5; --cs-btn: #F97316; --cs-r: 0px; }
.cs2-motion .illus:not([data-calm="1"]) .cscreen-wrap:nth-child(3) { transform: rotate(-3deg) translateY(4px); --cs-btn: #10B981; --cs-r: 7px; }
.cs2-motion .illus:not([data-calm="1"]) .cscreen-wrap:nth-child(4) { transform: rotate(8deg) translateY(-2px); --cs-btn: #1E3A8A; --cs-r: 1px; }
.cs2-motion .illus:not([data-calm="1"]) .illus__chips .chip { opacity: 0; transform: translateY(6px); }
.cs2-motion .illus[data-calm="1"] .cscreen-wrap { transition: transform 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) calc(0.5s + var(--i) * 0.14s); }
.cs2-motion .illus[data-calm="1"] .cscreen::before,
.cs2-motion .illus[data-calm="1"] .cscreen__btn {
  transition: background-color 0.6s ease calc(0.5s + var(--i) * 0.14s), border-radius 0.6s ease calc(0.5s + var(--i) * 0.14s);
}
.cs2-motion .illus[data-calm="1"] .cscreen > .ol path { transition: fill 0.6s ease calc(0.5s + var(--i) * 0.14s); }
.cs2-motion .illus .cscreen-wrap:nth-child(1) { --i: 0; }
.cs2-motion .illus .cscreen-wrap:nth-child(2) { --i: 1; }
.cs2-motion .illus .cscreen-wrap:nth-child(3) { --i: 2; }
.cs2-motion .illus .cscreen-wrap:nth-child(4) { --i: 3; }
.cs2-motion .illus[data-calm="1"] .illus__chips .chip { transition: opacity 0.5s ease, transform 0.5s ease; }
.cs2-motion .illus[data-calm="1"] .illus__chips .chip:nth-child(1) { transition-delay: 0.8s; }
.cs2-motion .illus[data-calm="1"] .illus__chips .chip:nth-child(2) { transition-delay: 0.9s; }
.cs2-motion .illus[data-calm="1"] .illus__chips .chip:nth-child(3) { transition-delay: 1s; }
.cs2-motion .illus[data-calm="1"] .illus__chips .chip:nth-child(4) { transition-delay: 1.1s; }
.cs2-motion .illus.is-instant,
.cs2-motion .illus.is-instant * { transition: none !important; }

/* ---------- Chapters 2–4 open when the line reaches their knot (§16.7), once ---------- */
.cs2-motion .chap.is-open > :is(.t-label, h2, .t-sub) {
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cs2-motion .chap.is-open > h2 { transition-delay: 0.08s; }
.cs2-motion .chap.is-open > .t-sub { transition-delay: 0.18s; }
.cs2-motion .chap:not(.is-open) > :is(.t-label, h2, .t-sub) {
  opacity: 0;
  transform: translateY(12px);
}
.cs2-motion .chap.is-open.is-instant > * { transition: none; }