/* main.css — shared styling for the EM interactives shell.
   Mobile-first. Color is never the only signal: every state also carries a
   glyph and a word. Focus indicators are strong and always visible. */

:root {
  --ink: #1a1d21;
  --muted: #5a6472;
  --line: #d7dce2;        /* decorative hairlines only: table rules, panel edges, dividers */
  /* The visible boundary of anything a student has to find and operate.
     WCAG 1.4.11 requires 3:1 against the adjacent colour; --line is 1.38:1 and
     fails. This is 3.09:1 on white. Do not use --line on a control, and do not
     use this on a hairline — at 3:1 a table full of them looks like a cage. */
  --control-line: #909397;
  --bg: #ffffff;
  --panel: #f6f8fa;

  /* Exhibit 2-9 palette */
  --center-fill: #ffface;   /* cream centre disc */
  --env-fill: #fbf4dc;      /* pale cream field */
  --env-bar: #9d0e16;       /* deep-red External Market Environment */

  /* The feedback tags are 0.78rem bold — about 13px — which is below WCAG's
     "large text" threshold of 18.66px bold, so they need the full 4.5:1 rather
     than 3:1. --correct was 4.42:1 on its own tint and --misplaced 4.22:1.
     These two values are 2% and 5% darker; the palette is unchanged to the eye
     and both now clear the bar (4.60:1 and 4.58:1). Measure, do not eyeball,
     if either is ever retuned. */
  --correct: #197c4a;
  --correct-bg: #e6f4ea;
  --conflict: #b02a37;
  --conflict-bg: #fbe9eb;
  --misplaced: #926500;
  --misplaced-bg: #fbf1da;
  --selected: #1f5fbf;
  --selected-bg: #e6eefb;

  --focus: #1f5fbf;
  --radius: 10px;
  --touch: 44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.em-exercise { max-width: 1040px; margin: 0 auto; padding: 1rem 1rem 4rem; }

/* Top nav (back to menu) on standalone exercise pages */
.em-topnav { max-width: 1040px; margin: 0 auto; padding: .8rem 1rem 0; }
.em-topnav a { color: var(--selected); text-decoration: none; font-weight: 600; }
.em-topnav a:hover { text-decoration: underline; }
.em-topnav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Screen-reader-only live region */
.sr-live {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.em-instructions { background: #eef3fb; border: 1px solid #c9d8ef; border-radius: var(--radius);
  padding: .7rem 1rem; margin: 0 0 1rem; }
.em-instructions p { margin: .3rem 0; }
.em-instructions-lead strong { color: var(--ink); }

.em-title { font-size: 1.5rem; margin: .2rem 0 .4rem; }
.em-brief { font-size: 1.05rem; color: var(--ink); background: var(--panel);
  border-left: 4px solid var(--selected); padding: .8rem 1rem; border-radius: var(--radius); }
.em-subhead { font-size: 1.1rem; margin: 1rem 0 .5rem; }

.em-main { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 760px) {
  .em-main:not(.em-main--stacked) { grid-template-columns: minmax(320px, 1fr) 1fr; align-items: start; }
}
/* Full-model exercises: the wide model spans the top, controls sit below it. */
.em-main--stacked { grid-template-columns: 1fr; }

/* ---------- Wheel ---------- */
.em-wheel-host { max-width: 460px; margin: 0 auto; }
/* Full model: cap its width so it doesn't balloon on desktop; pan on small screens. */
.em-wheel-host--full { max-width: 720px; margin: 0 auto; overflow-x: auto; }
.wheel { width: 100%; height: auto; display: block; }
.em-wheel-host--full .wheel { min-width: 500px; }

/* Environment band — echoes Exhibit 2-9's cream field and maroon frame. */
.wheel-env { fill: var(--env-fill); stroke: var(--env-bar); stroke-width: 1.5; }
.wheel-env-inner { fill: var(--bg); stroke: none; }
.wheel-env-label { fill: var(--env-bar); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.wheel-force { fill: #7a6a4f; font-size: 10.5px; }

/* P wedges — fill is set inline from the book's colours; the P label is the
   text channel, so which-P is never carried by colour alone. */
.wheel-wedge { stroke: #ffffff; stroke-width: 3; transition: filter .12s; }
.wheel-p-label { fill: #ffffff; font-size: 24px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; pointer-events: none; }
.wheel-count { fill: #ffffff; font-size: 17px; font-weight: 700; pointer-events: none; }
.wheel-count-center { fill: var(--env-bar); }
.wheel-glyph { font-size: 17px; font-weight: 800; pointer-events: none; }

.wheel-center-disc { fill: var(--center-fill); stroke: var(--env-bar); stroke-width: 2; }
.wheel-center-label { fill: var(--env-bar); font-size: 26px; font-weight: 800; pointer-events: none; }

.wheel-region { cursor: pointer; }
.wheel-region:hover .wheel-wedge { filter: brightness(1.08); }
.wheel-region:focus { outline: none; }
.wheel-region:focus-visible .wheel-wedge,
.wheel-region:focus-visible .wheel-center-disc {
  stroke: var(--focus); stroke-width: 5;
}
.wheel-region[aria-disabled="true"] { cursor: default; }

/* State is a SECOND channel over the book colours: a white badge with a glyph,
   plus a heavy outline ring. The wedge fill (its book colour) never changes. */
.wheel-badge { fill: #ffffff; stroke: #333; stroke-width: 1.5; opacity: 0; }
.wheel-region[data-state] .wheel-badge { opacity: 1; }
.wheel-region[data-state="default"] .wheel-badge { opacity: 0; }
.wheel-region[data-state="selected"] .wheel-wedge { stroke: var(--selected); stroke-width: 5; }
.wheel-region[data-state="correct"] .wheel-wedge,
.wheel-region[data-state="correct"] .wheel-center-disc { stroke: var(--correct); stroke-width: 5; }
.wheel-region[data-state="misplaced"] .wheel-wedge { stroke: var(--misplaced); stroke-width: 5; }
.wheel-region[data-state="conflict"] .wheel-wedge,
.wheel-region[data-state="misconception"] .wheel-wedge,
.wheel-region[data-state="misconception"] .wheel-center-disc { stroke: var(--conflict); stroke-width: 5; }
.wheel-region[data-state="correct"] .wheel-glyph { fill: var(--correct); }
.wheel-region[data-state="selected"] .wheel-glyph { fill: var(--selected); }
.wheel-region[data-state="misplaced"] .wheel-glyph { fill: var(--misplaced); }
.wheel-region[data-state="conflict"] .wheel-glyph,
.wheel-region[data-state="misconception"] .wheel-glyph { fill: var(--conflict); }

/* ---------- Full model (funnel layout) ---------- */
.wheel-funnel { max-width: 100%; }

/* Muted regions: visible as context, but dimmed and out of interaction. */
.wheel-region.is-muted { opacity: .3; filter: grayscale(.55); pointer-events: none; }
.funnel-field { fill: var(--env-fill); stroke: #d9c9a0; stroke-width: 1.5; }
.funnel-arrow { stroke: #2a2a2a; stroke-width: 2.5; fill: none; }
.funnel-arrow.is-muted { opacity: .18; } /* muted with its source node (incl. arrowhead) */
.funnel-shape { stroke: rgba(0, 0, 0, .28); stroke-width: 1.5; }
.funnel-label { font-size: 15px; font-weight: 700; pointer-events: none; }
.funnel-label-sm { font-size: 13px; }  /* compact (phone) funnel labels */
.funnel-node { cursor: pointer; }
.funnel-node:hover .funnel-shape { filter: brightness(1.06); }
.funnel-node:focus { outline: none; }
.funnel-node:focus-visible .funnel-shape { stroke: var(--focus); stroke-width: 4; }
.funnel-node[aria-disabled="true"] { cursor: default; }
.funnel-node[data-state="selected"] .funnel-shape { stroke: var(--selected); stroke-width: 4; }
.funnel-node[data-state="correct"] .funnel-shape { stroke: var(--correct); stroke-width: 4; }
.funnel-node[data-state="conflict"] .funnel-shape,
.funnel-node[data-state="misconception"] .funnel-shape { stroke: var(--conflict); stroke-width: 4; }

/* ---------- Cards / tray ---------- */
.em-progress { font-weight: 600; color: var(--muted); margin: .2rem 0 .6rem; }
.em-tray { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.em-card {
  width: 100%; min-height: var(--touch); text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border: 2px solid var(--control-line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); font: inherit;
}
.em-card:hover { border-color: var(--muted); }
.em-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.em-card-label { font-weight: 600; }
.em-card-where { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.em-card.is-held { border-color: var(--selected); background: var(--selected-bg); box-shadow: 0 0 0 2px var(--selected); }
.em-card.is-placed .em-card-where { color: var(--correct); font-weight: 700; }
.em-card:disabled { opacity: .7; cursor: default; }

/* Find the Broken P: each row shows a P name and its decision, and is selectable. */
.em-diag-row { flex-direction: column; align-items: flex-start; gap: .15rem; }
.em-diag-p { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.em-diag-decision { font-weight: 600; }
.em-diag-row.is-held .em-diag-p { color: var(--selected); }

/* Decorative wheel (display-only reference image). */
.wheel-decorative .wheel-region { cursor: default; }
.wheel-decorative .wheel-region:hover .wheel-wedge { filter: none; }
.em-ref-wheel { max-width: 320px; margin: 0 auto .4rem; }
.em-ref-caption { text-align: center; color: var(--ink); font-size: 1rem; font-weight: 600; margin: .2rem auto 1.2rem; max-width: 40rem; }

/* Retailer Mix Builder: the two retailer sort-targets, and P-tagged cards. */
.em-retailers { display: grid; grid-template-columns: 1fr; gap: .7rem; margin: .5rem 0 1.2rem; }
@media (min-width: 620px) { .em-retailers { grid-template-columns: 1fr 1fr; } }
.em-retailer-panel { text-align: left; cursor: pointer; padding: .8rem 1rem; border: 2px solid var(--control-line);
  border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; }
.em-retailer-panel:hover { border-color: var(--muted); }
.em-retailer-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.em-retailer-name { margin: 0 0 .2rem; font-size: 1.1rem; }
.em-retailer-target { margin: 0 0 .4rem; color: var(--muted); font-size: .92rem; }
.em-retailer-count { font-weight: 700; color: var(--selected); font-size: .85rem; }
.em-retailer-panel:disabled { opacity: .8; cursor: default; }
.em-retail-card .em-card-main { display: flex; flex-direction: column; gap: .1rem; }
.em-retail-p { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Strategy Funnel: stage context/prompt and option states after commit. */
.em-stage-context { background: var(--panel); border-radius: var(--radius); padding: .6rem .8rem; color: var(--ink); }
.em-stage-prompt { font-weight: 700; }
.em-card.em-opt-best { border-color: var(--correct); }
.em-card.em-opt-best .em-card-label::before { content: "✓ "; color: var(--correct); font-weight: 800; }
.em-card.em-opt-weak { border-color: var(--misplaced); }
.em-card.em-opt-weak .em-card-label::before { content: "✗ "; color: var(--misplaced); font-weight: 800; }

/* ---------- Buttons ---------- */
.em-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0; }
.em-btn {
  min-height: var(--touch); padding: .5rem 1rem; font: inherit; font-weight: 600;
  border-radius: 8px; border: 2px solid transparent; cursor: pointer;
}
.em-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.em-btn-commit { background: var(--selected); color: #fff; }
/* Disabled controls are formally exempt from the contrast rules, but this is
   the button a student stares at while working out why they cannot submit yet,
   so it should be readable: 5.64:1. The old value was 1.41:1 — near-white text
   on pale grey — and was only ever hidden by the duplicate rule below it. */
.em-btn-commit:disabled { background: var(--line); color: #4a5361; cursor: not-allowed; }
.em-btn-hint { background: var(--bg); color: var(--ink); border-color: var(--control-line); }
.em-btn-reset { background: var(--bg); color: var(--ink); border-color: var(--selected); }

.em-hint { background: #fff8e6; border: 1px solid #e9d8a6; border-radius: var(--radius);
  padding: .6rem .9rem; margin-top: .4rem; }
.em-hint-line { margin: .2rem 0; }

/* ---------- Synchronized table ---------- */
.em-table-wrap { margin-top: 1.4rem; }
.em-table { width: 100%; border-collapse: collapse; }
.em-table th, .em-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.em-table th { color: var(--muted); font-size: .9rem; }

/* ---------- Feedback ---------- */
.em-feedback { margin-top: 1.6rem; padding: 1rem 1.1rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); }
.em-feedback:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.em-feedback-summary { font-weight: 700; font-size: 1.05rem; }
.em-fb-head { font-size: 1rem; margin: 1rem 0 .4rem; }
.em-fb-row { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line); }
.em-fb-tag { flex: 0 0 auto; font-size: .78rem; font-weight: 800; padding: .18rem .5rem;
  border-radius: 999px; white-space: nowrap; border: 2px solid; }
.em-fb-body { flex: 1 1 auto; }
.em-fb-item { font-weight: 600; margin: 0 0 .2rem; }
.em-fb-why { margin: 0; color: var(--ink); }

.em-fb-correct .em-fb-tag, .em-fb-confirmation .em-fb-tag { color: var(--correct); border-color: var(--correct); background: var(--correct-bg); }
.em-fb-misplaced .em-fb-tag { color: var(--misplaced); border-color: var(--misplaced); background: var(--misplaced-bg); }
.em-fb-conflict .em-fb-tag, .em-fb-misconception .em-fb-tag { color: var(--conflict); border-color: var(--conflict); background: var(--conflict-bg); }

/* Phones: let the full model scale down to fit the screen (no horizontal scroll). */
@media (max-width: 640px) {
  .em-wheel-host--full { max-width: 100%; overflow-x: hidden; }
  .em-wheel-host--full .wheel { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ===================================================================
   Pricing Workbench (CL-A) — tabs, tables, equation, Exhibit 2-9 header
   =================================================================== */

.pw-model-section { margin: 1rem 0 1.5rem; }
.pw-model-caption { color: var(--muted); font-size: .95rem; max-width: 720px; margin: .5rem auto 0; }

.pw-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .5rem 0 1rem; }
.pw-fact { display: flex; flex-direction: column; }
.pw-fact-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.pw-fact-value { font-weight: 600; }

/* Tab bar */
.pw-tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 2px solid var(--line); margin: 1rem 0 0; }
.pw-tab {
  appearance: none; border: 2px solid transparent; border-bottom: none;
  background: var(--panel); color: var(--ink); font: inherit; font-weight: 600;
  padding: .6rem 1rem; min-height: var(--touch); border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer; margin-bottom: -2px;
}
.pw-tab[aria-selected="true"] {
  background: var(--bg); border-color: var(--control-line); border-bottom: 2px solid var(--bg);
  color: var(--selected);
}
.pw-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.pw-panel { padding: 1.25rem .25rem; }
.pw-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.pw-lead { font-size: 1.05rem; max-width: 760px; }
.pw-h3 { font-size: 1.02rem; margin: 1.5rem 0 .4rem; }

/* Tables */
.pw-table { border-collapse: collapse; width: 100%; margin: .75rem 0 1rem; font-variant-numeric: tabular-nums; }
.pw-table caption { text-align: left; font-weight: 600; color: var(--muted); padding-bottom: .4rem; }
.pw-table th, .pw-table td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: right; }
.pw-table thead th { background: var(--panel); text-align: right; }
.pw-table th[scope="row"] { text-align: left; font-weight: 600; }
.pw-table--trap td, .pw-table--trap th { text-align: right; }
.pw-row-profit th, .pw-row-profit td { border-top: 2px solid var(--ink); font-weight: 700; }
.pw-row-best { background: var(--correct-bg); }
.pw-row-best th, .pw-row-best td { border-color: var(--correct); }
.pw-pos { color: var(--correct); }
.pw-neg { color: var(--conflict); font-weight: 600; }

/* Break-even equation */
.pw-equation {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; margin: .5rem 0 1rem; font-size: 1.05rem;
}
.pw-eq-lhs { font-weight: 700; }
.pw-frac { display: inline-flex; flex-direction: column; text-align: center; }
.pw-frac-num { padding: 0 .5rem .15rem; }
.pw-frac-den { padding: .15rem .5rem 0; border-top: 2px solid var(--ink); }

.pw-takeaway {
  background: var(--selected-bg); border-left: 4px solid var(--selected);
  padding: .7rem .9rem; border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 820px; margin: 1rem 0;
}

/* Break-even controls (price slider + prediction commit gate) */
.pw-controls { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin: 1rem 0; }
.pw-control-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .4rem 0; }
.pw-control-label { font-weight: 600; }
.pw-slider { flex: 1 1 200px; min-width: 180px; height: var(--touch); accent-color: var(--selected); }
.pw-price-out { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.5rem; }
.pw-predict-input {
  font: inherit; padding: .45rem .5rem; width: 8rem; min-height: var(--touch);
  border: 2px solid var(--control-line); border-radius: 8px;
}
.pw-predict-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--selected); }
/* Button rules live once, in the Buttons section above. A duplicate set used
   to sit here and silently override them. */

.pw-fb-host { margin: 1rem 0; }
.pw-fb-host:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.pw-fb-calc { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .75rem; font-variant-numeric: tabular-nums; }
.pw-fb-compare { font-weight: 600; }
.pw-readout { font-variant-numeric: tabular-nums; font-weight: 600; }
.pw-fb-hint { color: var(--muted); }

/* Break-even chart (Exhibit 18-8 style) */
.pw-chart-host { margin: 1rem 0; }
.pw-chart { width: 100%; height: auto; max-width: 640px; display: block; }
.pw-band-loss { fill: var(--conflict-bg); }
.pw-band-profit { fill: var(--correct-bg); }
.pw-grid { stroke: var(--line); stroke-width: 1; }
.pw-axis { stroke: var(--ink); stroke-width: 1.5; }
.pw-tick { fill: var(--muted); font-size: 12px; }
.pw-axis-title { fill: var(--ink); font-size: 12px; font-weight: 600; }
.pw-line-tfc { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.pw-line-tc { stroke: var(--misplaced); stroke-width: 3; }
.pw-line-tr { stroke: var(--selected); stroke-width: 3; }
.pw-line-label { font-size: 12px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.pw-region-label { font-size: 13px; font-weight: 700; fill: var(--ink); opacity: .55; letter-spacing: .05em; }
.pw-drop { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; }
.pw-bep-dot { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.pw-bep-label { font-size: 12.5px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px; }

/* Marginal + demand chart series and markers */
.pw-chart polyline { fill: none; }
.pw-line-profit { stroke: var(--correct); stroke-width: 3; }
.pw-line-demand { stroke: var(--selected); stroke-width: 3; }
.pw-zero { stroke: var(--ink); stroke-width: 1.5; }
.pw-gap { stroke: var(--correct); stroke-width: 3; stroke-dasharray: 2 3; }
.pw-mark-actual { fill: var(--conflict); stroke: var(--bg); stroke-width: 2; }
.pw-mark-planned { fill: var(--bg); stroke: var(--misplaced); stroke-width: 2.5; }
.pw-row-mine th, .pw-row-mine td { background: var(--misplaced-bg); }
.pw-options { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.pw-options .em-card { text-align: center; justify-content: center; }
.em-actions { margin: .75rem 0; }
.pw-note { color: var(--muted); font-size: .95rem; max-width: 820px; margin: .4rem 0 0; }

/* ===================================================================
   Placement Canvas (CL-F) — 2D grid, segment dots, four-criteria feedback
   =================================================================== */

/* Segment palette. Color is only a THIRD, redundant cue — segment identity is
   carried by shape + numeral, so these hues never stand alone. */
:root {
  --seg-1: #1f5fbf; --seg-2: #c26a12; --seg-3: #1a7f4b;
  --seg-4: #7b3fb0; --seg-5: #0f7d84; --seg-6: #b0338a;
}

.pc-def { color: var(--muted); font-style: italic; max-width: 760px; margin: .4rem 0 0; }
.pc-model-section { margin: 1rem 0 1.25rem; }
.pc-model-caption { color: var(--muted); font-size: .95rem; max-width: 720px; margin: .5rem auto 0; }
.pc-help { color: var(--muted); font-size: .95rem; margin: .4rem 0 0; }

/* Segment toolbar (doubles as the shape legend). */
.pc-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.pc-brush {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--touch);
  padding: .35rem .7rem; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--bg); color: var(--ink); border: 2px solid var(--control-line); border-radius: var(--radius);
}
.pc-brush:hover { border-color: var(--muted); }
.pc-brush:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pc-brush.is-held { border-color: var(--selected); background: var(--selected-bg); box-shadow: 0 0 0 2px var(--selected); }
.pc-brush:disabled { opacity: .5; cursor: not-allowed; }
.pc-brush-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-swatch { width: 26px; height: 26px; flex: 0 0 auto; }

/* The grid. */
.pc-grid-host { margin: .5rem 0 1rem; }
.pc-grid { width: 100%; height: auto; max-width: 520px; display: block; margin: 0 auto; touch-action: manipulation; }
.pc-frame { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.pc-mid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.pc-axis-title { fill: var(--ink); font-size: 13px; font-weight: 700; }
.pc-axis-end { fill: var(--muted); font-size: 11.5px; font-weight: 600; }

/* Dots. Each is a keyboard-focusable button; the focus ring is drawn on the mark. */
.pc-dot { cursor: pointer; }
.pc-dot:focus { outline: none; }
.pc-dot.is-locked { cursor: default; }
.pc-dot-ring { fill: var(--bg); stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 3; }
.pc-dot-num { fill: #fff; font-size: 14px; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: .5px; }
.pc-mark { stroke: #fff; stroke-width: 1.5; }
.pc-dot:hover .pc-mark { filter: brightness(1.08); }
.pc-dot:hover .pc-dot-ring { stroke: var(--ink); }
.pc-dot:focus-visible .pc-mark,
.pc-dot:focus-visible .pc-dot-ring { stroke: var(--focus); stroke-width: 4; }

.pc-seg-fill-1 { fill: var(--seg-1); } .pc-seg-fill-2 { fill: var(--seg-2); }
.pc-seg-fill-3 { fill: var(--seg-3); } .pc-seg-fill-4 { fill: var(--seg-4); }
.pc-seg-fill-5 { fill: var(--seg-5); } .pc-seg-fill-6 { fill: var(--seg-6); }

/* Post-commit overlay: segment centres and their member-spread rings. */
.pc-overlay { pointer-events: none; }
.pc-centroid { stroke: var(--ink); stroke-width: 2.5; }
.pc-spread { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: .5; }
.pc-seg-line-1 { stroke: var(--seg-1); } .pc-seg-line-2 { stroke: var(--seg-2); }
.pc-seg-line-3 { stroke: var(--seg-3); } .pc-seg-line-4 { stroke: var(--seg-4); }
.pc-seg-line-5 { stroke: var(--seg-5); } .pc-seg-line-6 { stroke: var(--seg-6); }

/* List view (the parallel, drop-down assignment path). */
.pc-list { margin: .5rem 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem .8rem; }
.pc-list-summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.pc-list-table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.pc-list-table caption { text-align: left; color: var(--muted); padding-bottom: .3rem; }
.pc-list-table th, .pc-list-table td { border-bottom: 1px solid var(--line); padding: .35rem .5rem; text-align: left; }
.pc-list-table th[scope="col"] { color: var(--muted); font-size: .9rem; }
.pc-select { font: inherit; min-height: 40px; padding: .25rem .4rem; border: 2px solid var(--control-line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.pc-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pc-select:disabled { opacity: .7; }

/* Feedback. */
.pc-fb-host { margin: 1rem 0; }
.pc-fb-host:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.pc-fb-summary { font-weight: 600; max-width: 820px; }
.pc-crit { border-left: 4px solid var(--line); background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; padding: .6rem .9rem; margin: .7rem 0; max-width: 860px; }
.pc-crit--ok { border-left-color: var(--correct); }
.pc-crit--warn { border-left-color: var(--misplaced); }
.pc-crit--reflect { border-left-color: var(--selected); }
.pc-crit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .2rem; }
.pc-crit-tag { font-size: .78rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; border: 2px solid; white-space: nowrap; }
.pc-crit--ok .pc-crit-tag { color: var(--correct); border-color: var(--correct); background: var(--correct-bg); }
.pc-crit--warn .pc-crit-tag { color: var(--misplaced); border-color: var(--misplaced); background: var(--misplaced-bg); }
.pc-crit--reflect .pc-crit-tag { color: var(--selected); border-color: var(--selected); background: var(--selected-bg); }
.pc-crit-term { font-weight: 800; }
.pc-crit-def { margin: .1rem 0; color: var(--muted); font-style: italic; }
.pc-crit-find { margin: .2rem 0 0; }

.pc-h3 { font-size: 1.02rem; margin: 1.3rem 0 .4rem; }
.pc-push { margin-top: 1.2rem; padding: .9rem 1rem; background: var(--selected-bg); border-radius: var(--radius); }
.pc-push-q { font-weight: 700; font-size: 1.05rem; }
.pc-compare { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.pc-compare-list { margin: .3rem 0 0; padding-left: 1.2rem; }
.pc-compare-list li { margin: .25rem 0; }
.pc-takeaway { background: var(--selected-bg); border-left: 4px solid var(--selected);
  padding: .7rem .9rem; border-radius: 0 var(--radius) var(--radius) 0; max-width: 860px; margin: 1.2rem 0; }

/* Stage 3 — implications for the marketing mix. */
.pc-impl-host { margin: 1.5rem 0; }
.pc-impl-host:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.pc-lead { font-size: 1.05rem; max-width: 820px; }
.pc-h4 { font-size: .98rem; margin: 1rem 0 .3rem; }

.pc-seg-ref { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .35rem; }
.pc-seg-ref li { padding: .45rem .7rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); }
.pc-seg-ref-item { display: flex; align-items: center; gap: .6rem; }
.pc-seg-ref-item .pc-swatch { width: 28px; height: 28px; flex: 0 0 auto; }

/* Targeting reminder — you don't have to serve every segment. */
.pc-targeting { max-width: 860px; margin: .6rem 0 1rem; padding: .7rem .9rem;
  background: #fff8e6; border-left: 4px solid var(--misplaced); border-radius: 0 var(--radius) var(--radius) 0; }

/* Reference map of the three-segment solution. */
.pc-refmap-wrap { display: flex; justify-content: center; margin: .5rem 0; }
.pc-refmap { width: 100%; max-width: 340px; height: auto; display: block; }

/* Reflection (3-vs-6) + segue into Stage 3. */
.pc-reflect { margin-top: 1.2rem; padding: .9rem 1rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); }
.pc-reflect-q { font-weight: 700; font-size: 1.05rem; }
.pc-reflect .pc-oe-input { width: 100%; }
.pc-segue { margin-top: .8rem; padding: .7rem .9rem; background: var(--selected-bg);
  border-left: 4px solid var(--selected); border-radius: 0 var(--radius) var(--radius) 0; font-weight: 600; }

/* Whole-mix strategy cards stack the text above the segment picker. */
.pc-card--strategy { flex-direction: column; align-items: stretch; gap: .5rem; }
.pc-card--strategy .pc-card-text { margin: 0; }
.pc-card--strategy .pc-card-assign { align-self: flex-start; }

/* Match-the-mix cards. */
.pc-cards { display: grid; gap: .6rem; margin: .6rem 0 1rem; }
.pc-card { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; justify-content: space-between;
  padding: .7rem .9rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.pc-card-body { flex: 1 1 260px; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pc-card-p { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--selected); padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; }
.pc-card-text { margin: 0; }
.pc-card-assign { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; white-space: nowrap; }
.pc-card-select { font: inherit; min-height: 40px; padding: .25rem .4rem; border: 2px solid var(--control-line);
  border-radius: 8px; background: var(--bg); color: var(--ink); }
.pc-card-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pc-card-select:disabled { opacity: .8; }
.pc-card.is-correct { border-color: var(--correct); background: var(--correct-bg); }
.pc-card.is-reconsider { border-color: var(--misplaced); background: var(--misplaced-bg); }
.pc-card.is-correct .pc-card-text::before { content: "✓ "; color: var(--correct); font-weight: 800; }
.pc-card.is-reconsider .pc-card-text::before { content: "△ "; color: var(--misplaced); font-weight: 800; }

.pc-match-fb { margin-top: 1rem; }
.pc-card-echo { margin: .1rem 0; color: var(--muted); font-style: italic; }

/* Your turn — open-ended reflect-then-compare. */
.pc-openended { margin-top: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--line); }
.pc-oe-pick-row { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; margin: .3rem 0 .8rem; }
.pc-oe-pick { font: inherit; min-height: 40px; padding: .25rem .4rem; border: 2px solid var(--control-line);
  border-radius: 8px; background: var(--bg); color: var(--ink); }
.pc-oe-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pc-oe-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 620px) { .pc-oe-grid { grid-template-columns: 1fr 1fr; } }
.pc-oe-field { display: flex; flex-direction: column; gap: .25rem; }
.pc-oe-p { font-weight: 800; }
.pc-oe-hint { margin: 0; color: var(--muted); font-size: .9rem; }
.pc-oe-input { font: inherit; padding: .5rem; border: 2px solid var(--control-line); border-radius: 8px;
  background: var(--bg); color: var(--ink); resize: vertical; min-height: 3rem; }
.pc-oe-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--selected); }
.pc-oe-input:read-only { background: var(--panel); }
.pc-oe-fb { margin-top: 1rem; }
.pc-oe-model { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.pc-oe-model th, .pc-oe-model td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; vertical-align: top; }
.pc-oe-model th[scope="row"] { width: 7rem; background: var(--panel); font-weight: 700; }
.pc-oe-note { color: var(--muted); font-style: italic; margin: .4rem 0 0; }

/* ===================================================================
   Retention Lab (CL-D) — cohort/CLV engine: tiers, predict-commit,
   divergence chart, year table, free-explore slider
   =================================================================== */

.rl-model-section { margin: 1rem 0 1.5rem; }
.rl-model-caption { color: var(--muted); font-size: .95rem; max-width: 720px; margin: .5rem auto 0; }

.rl-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .5rem 0 1.2rem; }
.rl-fact { display: flex; flex-direction: column; }
.rl-fact-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rl-fact-value { font-weight: 600; }

.rl-lead { font-size: 1.05rem; max-width: 760px; }
.rl-h3 { font-size: 1.02rem; margin: 1.5rem 0 .4rem; }
.rl-note { color: var(--muted); font-size: .95rem; max-width: 760px; }

/* Tables (tier table, per-strategy summary, year-by-year detail) */
.rl-table { border-collapse: collapse; width: 100%; margin: .75rem 0 1rem; font-variant-numeric: tabular-nums; }
.rl-table caption { text-align: left; font-weight: 600; color: var(--muted); padding-bottom: .4rem; }
.rl-table th, .rl-table td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: right; }
.rl-table thead th { background: var(--panel); text-align: right; }
.rl-table th[scope="row"] { text-align: left; font-weight: 600; }
.rl-table--years { font-size: .92rem; }
.rl-row-best { background: var(--correct-bg); }
.rl-row-best th, .rl-row-best td { border-color: var(--correct); }
.rl-row-mine th, .rl-row-mine td { background: var(--misplaced-bg); }
.rl-pos { color: var(--correct); }
.rl-neg { color: var(--conflict); font-weight: 600; }

/* Predict — three named allocation cards */
.rl-options { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rl-strategy-card { flex-direction: column; align-items: flex-start; gap: .2rem; }
.rl-strategy-card .em-card-where { white-space: normal; }

.rl-fb-host { margin: 1rem 0; }
.rl-fb-host:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.rl-fb-compare { font-weight: 600; }
.rl-takeaway {
  background: var(--selected-bg); border-left: 4px solid var(--selected);
  padding: .7rem .9rem; border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 820px; margin: 1rem 0;
}

/* Divergence chart */
.rl-chart { width: 100%; height: auto; max-width: 680px; display: block; }
.rl-grid { stroke: var(--line); stroke-width: 1; }
.rl-axis { stroke: var(--ink); stroke-width: 1.5; }
.rl-zero { stroke: var(--ink); stroke-width: 1.5; }
.rl-tick { fill: var(--muted); font-size: 12px; }
.rl-axis-title { fill: var(--ink); font-size: 12px; font-weight: 600; }
.rl-chart polyline.rl-line { fill: none; stroke-width: 3; }
.rl-line-a { stroke: var(--selected); }
.rl-line-b { stroke: var(--misplaced); }
.rl-line-c { stroke: var(--conflict); }
text.rl-line-label { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
text.rl-line-label.rl-line-a { fill: var(--selected); }
text.rl-line-label.rl-line-b { fill: var(--misplaced); }
text.rl-line-label.rl-line-c { fill: var(--conflict); }

/* Exhibit loop diagram (e.g. Exhibit 1-6) — accessible SVG, not a static image */
.rl-exhibit-section { margin: 1.2rem 0 1.6rem; }
.rl-exhibit-svg { width: 100%; height: auto; max-width: 560px; display: block; margin: .5rem auto 1rem; }
.rl-exhibit-arrow { fill: none; stroke: var(--env-bar); stroke-width: 2.5; opacity: .85; }
.rl-exhibit-arrowhead { fill: var(--env-bar); }
.rl-exhibit-node-rect { fill: var(--selected-bg); stroke: var(--selected); stroke-width: 1.5; }
.rl-exhibit-node-text { fill: var(--ink); font-size: 12.5px; font-weight: 700; }
.rl-exhibit-badge { fill: var(--selected); }
.rl-exhibit-badge-text { fill: #fff; font-size: 10px; font-weight: 800; }
.rl-exhibit-mapping { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; max-width: 820px; }

/* Free-explore slider (after reveal) */
.rl-explore { margin-top: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--line); }
.rl-control-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0; }
.rl-control-label { font-weight: 600; }
.rl-slider { flex: 1 1 200px; min-width: 180px; height: var(--touch); accent-color: var(--selected); }
.rl-share-out { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3rem; }

/* Four key numbers, one per row. Colour is emphasis only — each row's label
   is the primary channel, so this stays meaningful with the colour removed. */
.rl-explore-stats { display: flex; flex-direction: column; gap: .5rem; margin: .9rem 0 .3rem; max-width: 420px; }
.rl-stat { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.rl-stat-label { font-weight: 600; }
.rl-stat-value {
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: .3rem .7rem; border-radius: 999px;
}
.rl-stat-retention { background: #e3ecfb; color: #1f5fbf; }
.rl-stat-acquisition { background: #dcf2ee; color: #0b6358; }
.rl-stat-members { background: #efe7fb; color: #5f4485; }
.rl-stat-profit { background: #fbeecd; color: #7a5400; }

/* ------------------------------------------------------------------ */
/* Scenario Judge (CL-E)                                              */
/* The cluster's shared shell: vignette deck, forced choice, feedback */
/* keyed to an exhibit row. Colour never carries meaning alone — every */
/* state also carries a word and a glyph.                             */

.sj-model-section { margin: 1.2rem 0 1.4rem; }

/* Reference card — native <details> so it is keyboard-operable and
   screen-reader-announced with no custom widget code. */
.sj-ref, .sj-fullex {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: .6rem .9rem; margin: 1rem 0 1.3rem;
}
.sj-ref-summary {
  font-weight: 700; font-size: 1.05rem; cursor: pointer;
  padding: .35rem 0; min-height: var(--touch); display: flex; align-items: center;
}
.sj-ref-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sj-ref-body { padding-top: .3rem; }
.sj-ref-intro { color: var(--muted); margin: .2rem 0 .7rem; }
.sj-ref-note { color: var(--muted); font-size: .9rem; margin: .6rem 0 .2rem; }

.sj-ref-table { width: 100%; border-collapse: collapse; margin: .4rem 0; }
.sj-ref-caption { text-align: left; font-weight: 700; padding: .3rem 0 .5rem; color: var(--ink); }
.sj-ref-table th, .sj-ref-table td {
  border: 1px solid var(--line); padding: .55rem .65rem;
  text-align: left; vertical-align: top; font-size: .95rem;
}
.sj-ref-th { background: #eef3fb; font-weight: 700; }
.sj-ref-def { background: var(--bg); }
.sj-ref-contrast { background: var(--bg); font-weight: 700; }

/* Vignette stage */
.em-progress { font-variant-numeric: tabular-nums; }
.sj-stage { margin: .4rem 0 1rem; }
.sj-company { margin-top: .2rem; }
.sj-stem { margin: .6rem 0; max-width: 60rem; }
.sj-prompt { font-weight: 700; margin: 1rem 0 .5rem; }

.sj-choices { gap: .55rem; }
.sj-choice { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15rem; }
.sj-choice-short { font-size: .88rem; color: var(--muted); }
.sj-choice.is-held .sj-choice-short { color: var(--selected); }
.sj-choice:disabled { opacity: 1; }
.sj-choice.em-opt-best { background: var(--correct-bg); }
.sj-choice.em-opt-weak { background: var(--misplaced-bg); }

/* Feedback */
.sj-feedback { margin-top: 1.2rem; }
.sj-verdict { display: flex; align-items: center; gap: .1rem; margin-top: .2rem; }
.sj-verdict-mark { font-weight: 900; font-size: 1.2rem; }

/* The one exhibit row this scenario turns on */
.sj-exrow { margin: 1.1rem 0 .3rem; }
.sj-exrow-table { margin-top: .2rem; }
.sj-exrow-cell { background: var(--bg); }
/* The answer column is marked with a left rule and bold text, not colour
   alone, so it survives greyscale and high-contrast modes. */
.sj-exrow-cell--answer {
  background: var(--correct-bg); font-weight: 700;
  border-left: 4px solid var(--correct);
}
.sj-exrow-note { color: var(--muted); font-size: .92rem; margin: .5rem 0 0; max-width: 60rem; }

/* Summary */
.sj-summary { margin-top: 1.4rem; }
.sj-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sj-recap { width: 100%; border-collapse: collapse; margin: .8rem 0 1.4rem; }
.sj-recap caption { text-align: left; font-weight: 700; padding: .3rem 0 .5rem; }
.sj-recap th, .sj-recap td {
  border: 1px solid var(--line); padding: .5rem .6rem; text-align: left; font-size: .95rem;
}
.sj-recap thead th { background: #eef3fb; }
.sj-recap-hit td:last-child { color: var(--correct); font-weight: 700; }
.sj-recap-miss td:last-child { color: var(--conflict); font-weight: 700; }

/* Full exhibit, shown only after every judgment is committed */
.sj-fullex-scroll { overflow-x: auto; }
.sj-fullex-table { min-width: 640px; }
.sj-fullex-table th[scope="row"] { background: var(--panel); font-weight: 700; white-space: nowrap; }
.sj-fullex-met th[scope="row"] { background: #eef3fb; }
.sj-seen-tag {
  display: inline-block; margin-left: .4rem; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: #1f5fbf; background: #e3ecfb; border: 1px solid #b9cdf0;
  border-radius: 999px; padding: .05rem .4rem; vertical-align: middle;
}
.sj-takeaway { max-width: 60rem; margin: .5rem 0; }

@media (min-width: 720px) {
  .sj-choices { gap: .6rem; }
}

/* Reference card, row layout — used when a pack has more options than fit
   as table columns on a phone (e.g. the five AI types of Exhibit 3-6). */
.sj-ref-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.sj-ref-item {
  background: var(--bg); border: 1px solid var(--line);
  border-left: 4px solid var(--selected);
  border-radius: 8px; padding: .6rem .75rem;
}
.sj-ref-item-label { font-weight: 700; margin: 0 0 .2rem; }
.sj-ref-item-def { margin: 0; font-size: .95rem; }
.sj-ref-item-contrast { margin: .45rem 0 0; font-size: .95rem; font-weight: 600; }
.sj-ref-job-tag {
  display: inline-block; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: #7a5400; background: #fbeecd; border: 1px solid #e6cf95;
  border-radius: 999px; padding: .05rem .45rem; margin-right: .15rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Funnel Lab (CL-B)                                                  */
/* Multiplicative conversion funnel: predict, reveal, then manipulate. */
/* The chart is decorative — every number in it is also in a table.    */

.fl-model-section { margin: 1.2rem 0 1.4rem; }
.fl-lead { max-width: 60rem; }

.fl-facts {
  display: grid; grid-template-columns: 1fr auto; gap: .35rem .9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; margin: .5rem 0 1.2rem; max-width: 46rem;
}
.fl-facts dt { color: var(--ink); }
.fl-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* Wide tables scroll inside their own box instead of pushing the page
   sideways on a phone. The table sizes to its content but never narrower
   than the box, so tables that already fit look exactly as they did. */
.fl-table-wrap { overflow-x: auto; margin: .6rem 0 1.2rem; }
.fl-table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fl-table-wrap > .fl-table { width: auto; min-width: 100%; margin: 0; }

.fl-table { width: 100%; border-collapse: collapse; margin: .6rem 0 1.2rem; }
.fl-table caption { text-align: left; font-weight: 700; padding: .3rem 0 .5rem; }
.fl-table th, .fl-table td {
  border: 1px solid var(--line); padding: .5rem .65rem;
  text-align: left; vertical-align: top; font-size: .95rem;
}
.fl-table thead th { background: #eef3fb; }
.fl-table th[scope="row"] { background: var(--panel); font-weight: 700; }
.fl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-pos { color: var(--correct); font-weight: 700; }
.fl-neg { color: var(--conflict); }
.fl-row-best { background: var(--correct-bg); }
.fl-row-best th, .fl-row-best td { border-color: var(--correct); }
.fl-row-mine { background: var(--selected-bg); }

/* Predict */
.fl-predict { margin-top: 1.2rem; }
.fl-guess-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; }
.fl-guess-label { font-weight: 600; }
.fl-guess {
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  min-height: var(--touch); width: 11rem; padding: .4rem .6rem;
  border: 2px solid var(--control-line); border-radius: 8px; background: var(--bg); color: var(--ink);
}
.fl-guess:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fl-guess:disabled { background: var(--panel); }

/* Reveal */
.fl-reveal { margin-top: 1.4rem; }
.fl-chart-wrap { margin: .8rem 0 1.1rem; overflow-x: auto; }
.fl-chart { width: 100%; min-width: 460px; height: auto; display: block; }
.fl-bar { fill: #cfdcf0; stroke: #6f8fc4; stroke-width: 1; }
.fl-bar-start { fill: #dfe6ee; stroke: var(--muted); }
.fl-bar-final { fill: #cfe6d8; stroke: var(--correct); }
.fl-bar-label { fill: var(--ink); font-size: 13px; font-weight: 700; }
.fl-bar-note { fill: var(--muted); font-size: 11.5px; }
.fl-overall { max-width: 60rem; font-weight: 600; }
.fl-takeaway { max-width: 60rem; margin: .7rem 0; }

/* Act 2 */
.fl-act2 { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 2px solid var(--line); }
.fl-prompt { font-weight: 700; margin: 1rem 0 .5rem; }
.fl-options { gap: .55rem; }
.fl-option { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15rem; }
.fl-option-blurb { font-size: .88rem; color: var(--muted); }
.fl-option.is-held .fl-option-blurb { color: var(--selected); }
.fl-option:disabled { opacity: 1; }
.fl-option.em-opt-best { background: var(--correct-bg); }
.fl-option.em-opt-weak { background: var(--misplaced-bg); }
.fl-mark { font-weight: 900; font-size: 1.15rem; }
.fl-act2-out { margin-top: 1rem; }
.fl-act2-out:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* An exhibit reproduced from the book, inside the explanatory text. Capped in
   width so it stays legible rather than stretching across a desktop column,
   and it scales down to a phone without its own scrollbar. */
.fl-exhibit { margin: 1rem 0 1.3rem; padding: 0; max-width: 34rem; }
.fl-exhibit-img {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
/* Left-aligned and lighter than the shared caption style: this one is two
   sentences of explanation, not a one-line label under a centred diagram. */
.fl-exhibit figcaption { margin: .45rem 0 0; text-align: left; font-weight: 400; color: var(--muted); }

/* Stage prediction and the objectives act (Chapter 13).
   Every state below carries a glyph as well as a colour — the marks are
   printed by the shell, so nothing here is the only cue for anything. */
.fl-bench { color: var(--muted); }

.fl-choice-set { border: 0; margin: .9rem 0; padding: 0; min-width: 0; }
.fl-choice-legend { font-weight: 700; padding: 0 0 .45rem; }
.fl-stage-tray, .fl-obj-tray { gap: .55rem; }
.fl-stage-option, .fl-obj-option {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15rem;
}
.fl-stage-option .fl-option-blurb, .fl-obj-option .fl-option-blurb { font-size: .88rem; color: var(--muted); }
.fl-stage-option.is-held .fl-option-blurb, .fl-obj-option.is-held .fl-option-blurb { color: var(--selected); }
.fl-stage-option:disabled, .fl-obj-option:disabled { opacity: 1; }
.fl-stage-option.em-opt-best, .fl-obj-option.em-opt-best { background: var(--correct-bg); }
.fl-stage-option.em-opt-weak, .fl-obj-option.em-opt-weak { background: var(--misplaced-bg); }

/* A defensible answer is not a wrong one. It gets the collection's purple
   rather than a paler version of the "wrong" treatment, so a student who
   reasoned well never sees a failure cue. Matches .cw-fb-item--defensible. */
.fl-verdict { border-left: 5px solid var(--line); padding: .1rem 0 .1rem .9rem; margin: .6rem 0 1rem; }
.fl-verdict--correct { border-left-color: var(--correct); }
.fl-verdict--defensible { border-left-color: #5a3fa0; background: #f2eefb; padding: .6rem .9rem; border-radius: .3rem; }
.fl-verdict--off { border-left-color: var(--misplaced); }
.fl-counter { max-width: 60rem; margin: .5rem 0 0; }
.fl-row-worst { background: var(--correct-bg); }
.fl-row-worst th, .fl-row-worst td { border-color: var(--correct); }

.fl-rule { background: var(--panel); border: 1px solid var(--line); border-radius: .4rem; padding: .8rem 1rem; margin: 1rem 0; }
.fl-rule-head { font-size: 1rem; margin: 0 0 .4rem; }
.fl-rule p { max-width: 60rem; margin: 0 0 .5rem; }
.fl-rule-list { margin: 0; padding-left: 1.2rem; }
.fl-rule-list li { margin: .2rem 0; }

.fl-judgments { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.fl-judgment { border-left: 5px solid var(--line); padding: .1rem 0 .1rem .9rem; }
.fl-judgment--correct { border-left-color: var(--correct); }
.fl-judgment--defensible { border-left-color: #5a3fa0; background: #f2eefb; padding: .6rem .9rem; border-radius: .3rem; }
.fl-judgment--off { border-left-color: var(--misplaced); }
.fl-judgment-head { margin: 0 0 .25rem; font-weight: 700; }
.fl-judgment--correct .fl-judgment-word { color: var(--correct); }
.fl-judgment--defensible .fl-judgment-word { color: #4a3286; }
.fl-judgment--off .fl-judgment-word { color: var(--misplaced); }
.fl-judgment-body { margin: 0; max-width: 60rem; }

/* Allocation control */
.fl-remain { font-weight: 700; margin: .6rem 0; }
.fl-remain-value {
  display: inline-block; min-width: 1.6rem; text-align: center;
  font-variant-numeric: tabular-nums;
  background: #e3ecfb; color: #1f5fbf; border-radius: 999px; padding: .15rem .6rem;
}
.fl-remain.is-spent .fl-remain-value { background: #e6f4ea; color: #15683d; }
.fl-alloc { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-width: 40rem; }
.fl-alloc-row {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; background: var(--bg);
}
.fl-alloc-label { display: flex; flex-direction: column; }
.fl-alloc-stage { font-weight: 600; }
.fl-alloc-base { font-size: .85rem; color: var(--muted); }
.fl-alloc-ctrl { display: flex; align-items: center; gap: .25rem; }
.fl-alloc-plus { font-weight: 700; color: var(--muted); }
.fl-alloc-input {
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  width: 4.2rem; min-height: var(--touch); padding: .3rem .4rem; text-align: right;
  border: 2px solid var(--control-line); border-radius: 8px; background: var(--bg); color: var(--ink);
}
.fl-alloc-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fl-alloc-unit { font-size: .85rem; color: var(--muted); }
.fl-alloc-new {
  font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.4rem; text-align: right;
  color: #1f5fbf;
}
.fl-alloc-result { font-weight: 700; font-size: 1.05rem; margin: .6rem 0; }

/* Multi-step scenarios, multi-select, reflection, comparison matrix (CL-E) */
.sj-facts {
  list-style: none; margin: .6rem 0 1rem; padding: .7rem .9rem;
  background: var(--panel); border-left: 4px solid var(--selected); border-radius: var(--radius);
  max-width: 60rem;
}
.sj-facts li { margin: .2rem 0; font-size: .95rem; }
.sj-facts li::before { content: "— "; color: var(--muted); }
.sj-step-host { margin-top: .4rem; }

/* Choose-several. The box glyph is the primary "selected" signal; colour
   only reinforces it, so this survives greyscale. */
.sj-multi { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sj-multi-option { align-items: flex-start; justify-content: flex-start; gap: .6rem; text-align: left; }
.sj-multi-box {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .15rem;
  border: 2px solid var(--muted); border-radius: 4px; background: var(--bg);
}
.sj-multi-option.is-held .sj-multi-box { border-color: var(--selected); background: var(--selected); }
.sj-multi-option.is-held .sj-multi-box::after {
  content: "✓"; display: block; color: #fff; font-size: 14px; font-weight: 800;
  line-height: 16px; text-align: center;
}
.sj-multi-body { display: flex; flex-direction: column; gap: .1rem; }
.sj-multi-option:disabled { opacity: 1; }
.sj-multi-option.em-opt-best { background: var(--correct-bg); }
.sj-multi-option.em-opt-weak { background: var(--conflict-bg); }
.sj-multi-option.em-opt-ok { background: var(--selected-bg); }
.sj-multi-count { color: var(--muted); font-weight: 600; margin: .4rem 0 0; min-height: 1.2em; }
.sj-multi-note { color: var(--muted); margin: .3rem 0 .6rem; max-width: 60rem; }

/* Write-your-own answer */
.sj-reflect-input {
  width: 100%; max-width: 60rem; font: inherit; line-height: 1.5;
  padding: .7rem .8rem; border: 2px solid var(--control-line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); resize: vertical;
}
.sj-reflect-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sj-reflect-input:disabled { background: var(--panel); }
/* Tells the student why the save button is off. Not colour alone: the text
   itself changes, and the check glyph carries the "ready" meaning. */
.sj-reflect-gauge { margin: .4rem 0 .2rem; max-width: 60rem; color: var(--muted); font-weight: 600; }
.sj-reflect-gauge.is-ready { color: var(--ink); }
.sj-reflect-echo {
  margin: .5rem 0 0; padding: .7rem .9rem; max-width: 60rem;
  background: var(--panel); border-left: 4px solid var(--muted); border-radius: var(--radius);
  white-space: pre-wrap; font-style: italic;
}

/* Comparison matrix */
.sj-matrix-scroll { overflow-x: auto; margin: .6rem 0 1.2rem; }
.sj-matrix { min-width: 640px; }
.sj-matrix th[scope="row"] { background: var(--panel); font-weight: 700; }
.sj-copy-fallback {
  width: 100%; max-width: 60rem; margin-top: .8rem; font: inherit; font-size: .9rem;
  padding: .6rem; border: 2px solid var(--control-line); border-radius: var(--radius);
}

/* Printable answer sheet (CL-E). On screen it is a plain panel the student
   can check and fill in; in print it is the only thing on the page. */
.sj-print-sheet {
  margin-top: 1.6rem; padding: 1.2rem 1.3rem;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.sj-print-sheet:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sj-print-title { font-size: 1.2rem; margin: 0 0 .8rem; }
.sj-print-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.2rem; }
.sj-print-field { display: flex; flex-direction: column; gap: .2rem; }
.sj-print-field span { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.sj-print-input {
  font: inherit; min-height: var(--touch); min-width: 14rem;
  padding: .35rem .5rem; border: 2px solid var(--control-line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
.sj-print-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sj-print-stamp { color: var(--muted); font-size: .88rem; margin: 0; align-self: flex-end; }
.sj-print-block { margin: 0 0 1.2rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.sj-print-company { font-size: 1.05rem; margin: 0 0 .5rem; }
.sj-print-q { font-weight: 700; margin: .6rem 0 .2rem; font-size: .95rem; }
.sj-print-a { margin: 0; }
.sj-print-list { margin: .2rem 0 0; padding-left: 1.2rem; }
.sj-print-list li { margin: .15rem 0; }
.sj-print-reflect { margin: .2rem 0 0; white-space: pre-wrap; }
.sj-print-note { color: var(--muted); font-size: .9rem; max-width: 60rem; }

@media print {
  /* Everything except the sheet comes off the page. */
  .em-topnav, .em-header, .em-instructions, .sj-model-section, .sj-ref, .em-progress,
  .sj-stage, .sj-feedback, .sj-matrix-scroll, .sj-recap, .sj-fullex, .sj-takeaway,
  .sj-summary > h2, .sj-summary > h3, .sj-summary > p, .sj-print-hide { display: none !important; }

  .sj-print-sheet { border: none; padding: 0; margin: 0; }
  .sj-print-input {
    border: none; border-bottom: 1px solid #000; border-radius: 0;
    min-height: 0; padding: 0 0 2px; min-width: 16rem;
  }
  .sj-print-block { break-inside: avoid; page-break-inside: avoid; }
  .sj-print-company { break-after: avoid; page-break-after: avoid; }
  body { background: #fff; }
  .em-exercise { max-width: none; padding: 0; }
  a[href]::after { content: ""; }
}

/* ------------------------------------------------------------------ */
/* Research Lab (Chapter 7)                                           */
/* Exhibit 7-5 as a progress rail, a budget ledger, and a notebook.   */

.rl7-rail { margin: 1rem 0 .8rem; }
.rl7-rail-title { font-weight: 700; margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; }
.rl7-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: none; }
.rl7-rail-step {
  display: flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem .25rem .3rem;
  background: var(--bg); font-size: .88rem; color: var(--muted);
}
.rl7-rail-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--line); color: var(--ink); font-weight: 800; font-size: .75rem;
}
/* The active step carries a filled badge AND a border AND bold text, so it
   is not identified by colour alone. */
.rl7-rail-step.is-active {
  border-color: var(--selected); border-width: 2px; background: var(--selected-bg);
  color: var(--ink); font-weight: 700;
}
.rl7-rail-step.is-active .rl7-rail-num { background: var(--selected); color: #fff; }

.rl7-ledger { margin: .6rem 0 1rem; }
.rl7-ledger-row { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.rl7-ledger-item { display: flex; flex-direction: column; gap: .1rem; }
.rl7-ledger-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rl7-ledger-value { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rl7-cash { color: #15683d; }
.rl7-weeks { color: #1f5fbf; }
.rl7-count { color: var(--ink); }

.rl7-notebook {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: .5rem .9rem; margin: 0 0 1.2rem;
}
.rl7-notebook-summary { font-weight: 700; cursor: pointer; padding: .35rem 0; min-height: var(--touch); display: flex; align-items: center; }
.rl7-notebook-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.rl7-note { padding: .5rem 0; border-top: 1px solid var(--line); }
.rl7-note-source { font-weight: 700; margin: 0 0 .2rem; }
.rl7-note-list { margin: .2rem 0 0; padding-left: 1.1rem; }
.rl7-note-list li { margin: .2rem 0; }
.rl7-note-quality {
  display: inline-block; margin-left: .5rem; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: .05rem .5rem;
  vertical-align: middle;
}
.rl7-q-strong { color: #15683d; background: #e6f4ea; border: 1px solid #a8d5ba; }
.rl7-q-weak { color: #8a4b00; background: #fbf1da; border: 1px solid #e6cf95; }

.rl7-body { max-width: 60rem; }
.rl7-muted { color: var(--muted); max-width: 60rem; }
.rl7-prompt { font-weight: 700; margin: 1rem 0 .5rem; }
.rl7-quote {
  margin: .8rem 0; padding: .8rem 1rem; max-width: 60rem;
  background: var(--panel); border-left: 4px solid var(--env-bar); border-radius: var(--radius);
}
.rl7-quote p { margin: 0 0 .4rem; font-style: italic; font-size: 1.05rem; }
.rl7-quote footer { color: var(--muted); font-size: .9rem; }
.rl7-facts {
  list-style: none; margin: .6rem 0 1rem; padding: .7rem .9rem; max-width: 60rem;
  background: var(--panel); border-left: 4px solid var(--selected); border-radius: var(--radius);
}
.rl7-facts li { margin: .2rem 0; font-size: .95rem; }
.rl7-facts li::before { content: "— "; color: var(--muted); }

.rl7-options { gap: .55rem; }
.rl7-option { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15rem; }
.rl7-option-short { font-size: .88rem; color: var(--muted); }
.rl7-option.is-held .rl7-option-short { color: var(--selected); }
.rl7-option:disabled { opacity: 1; }

/* The study menu — costs always visible, per Joe's requirement. */
.rl7-studies { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rl7-study { align-items: flex-start; justify-content: flex-start; gap: .6rem; text-align: left; }
.rl7-study-box {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .15rem;
  border: 2px solid var(--muted); border-radius: 4px; background: var(--bg);
}
.rl7-study.is-held .rl7-study-box { border-color: var(--selected); background: var(--selected); }
.rl7-study.is-held .rl7-study-box::after {
  content: "✓"; display: block; color: #fff; font-size: 14px; font-weight: 800; line-height: 16px; text-align: center;
}
.rl7-study-body { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; }
.rl7-study-kind { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #5f4485; }
.rl7-study-note { font-size: .88rem; color: var(--muted); }
.rl7-study-cost { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.rl7-study-cash { font-weight: 800; font-variant-numeric: tabular-nums; }
.rl7-study-weeks { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.rl7-study.is-unaffordable { opacity: .55; }
.rl7-study.is-unaffordable .rl7-study-cash { color: var(--conflict); }
.rl7-tally { font-weight: 700; margin: .5rem 0; min-height: 1.3em; }

.rl7-feedback { margin-top: 1.2rem; }
.rl7-verdict { display: flex; align-items: center; gap: .2rem; }
.rl7-verdict-mark { font-weight: 900; font-size: 1.2rem; }
.rl7-result { padding: .6rem 0; border-top: 1px solid var(--line); }
.rl7-result-head { margin: 0 0 .2rem; font-size: 1rem; }
.rl7-caveat { margin: .1rem 0 .3rem; color: var(--muted); font-style: italic; }

.rl7-debrief { margin-top: 1.6rem; }
.rl7-debrief:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rl7-missed { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.rl7-missed li {
  padding: .6rem .8rem; margin-bottom: .5rem;
  border: 1px solid var(--line); border-left: 4px solid var(--misplaced); border-radius: 0 8px 8px 0;
  background: var(--bg);
}
.rl7-missed-label { font-weight: 700; }
.rl7-missed-cost { float: right; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.rl7-missed-why { margin: .3rem 0 0; clear: both; }
.rl7-takeaway { max-width: 60rem; margin: .7rem 0; }

/* Stage-gate: idea cards with colleague voices and advance/kill buttons */
.rl7-ideas { list-style: none; margin: .6rem 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.rl7-idea {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  padding: .8rem .9rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start;
}
.rl7-idea-body { flex: 1 1 22rem; min-width: 0; }
.rl7-idea-label { font-weight: 700; font-size: 1.05rem; margin: 0 0 .2rem; }
.rl7-idea-blurb { margin: 0 0 .5rem; color: var(--ink); }
.rl7-idea-known { list-style: none; margin: .3rem 0 .5rem; padding: 0; }
.rl7-idea-known li { font-size: .93rem; margin: .15rem 0; }
.rl7-idea-known li::before { content: "— "; color: var(--muted); }

.rl7-voices { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.rl7-voice {
  display: flex; flex-direction: column; gap: .1rem;
  border-left: 3px solid var(--line); padding: .2rem 0 .2rem .6rem;
}
.rl7-voice-who { font-weight: 700; font-size: .88rem; }
.rl7-voice-role {
  font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  color: #5f4485; margin-left: .4rem;
}
.rl7-voice-text { font-size: .95rem; font-style: italic; color: var(--ink); }

.rl7-idea-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: .35rem; min-width: 8rem; }
.rl7-idea-cost { font-size: .82rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.rl7-adv, .rl7-kill { min-height: var(--touch); font-size: .95rem; }
/* Selected state carries a border, a fill AND a glyph — never colour alone. */
.rl7-adv { background: var(--bg); color: var(--ink); border-color: var(--correct); }
.rl7-adv.is-held { background: var(--correct-bg); border-width: 3px; font-weight: 800; }
.rl7-adv.is-held::before { content: "✓ "; }
.rl7-kill { background: var(--bg); color: var(--ink); border-color: var(--conflict); }
.rl7-kill.is-held { background: var(--conflict-bg); border-width: 3px; font-weight: 800; }
.rl7-kill.is-held::before { content: "✗ "; }
.rl7-adv:disabled, .rl7-kill:disabled { opacity: .75; cursor: default; }

.rl7-idealog { width: 100%; border-collapse: collapse; margin: .6rem 0 1.2rem; }
.rl7-idealog caption { text-align: left; font-weight: 700; padding: .3rem 0 .5rem; }
.rl7-idealog th, .rl7-idealog td {
  border: 1px solid var(--line); padding: .5rem .65rem; text-align: left; font-size: .95rem;
}
.rl7-idealog thead th { background: #eef3fb; }
.rl7-idealog th[scope="row"] { background: var(--panel); font-weight: 700; }
.rl7-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl7-row-launched { background: var(--correct-bg); }
.rl7-row-launched th, .rl7-row-launched td { border-color: var(--correct); }
.rl7-row-alive { background: var(--misplaced-bg); }

@media (min-width: 720px) {
  .rl7-idea-actions { flex-direction: row; align-items: center; }
  .rl7-idea-cost { min-width: 5rem; text-align: right; }
}

/* Forward-looking budget warning at a gate. Carries an icon glyph and a
   border as well as colour, so it reads without colour perception. */
.rl7-warn {
  margin: .5rem 0; padding: .7rem .9rem; max-width: 60rem;
  background: #fbf1da; border: 2px solid #b8860b; border-radius: var(--radius);
  color: #6b3f00; font-weight: 600;
}
.rl7-warn::before { content: "⚠ "; font-weight: 800; }
.rl7-model-section { margin: 1.2rem 0 1.4rem; }
.sj-recap-ok td:last-child { color: #1f5fbf; font-weight: 700; }


/* ============================================================
   CL-J — Channel Walk (.cw-)
   Chapter 10: who in the channel performs which regrouping activity.
   Native checkboxes in a labelled grid; no canvas, no drag, no
   numbers. Every verdict carries a glyph and a word, so colour is
   only ever the third, redundant cue.
   ============================================================ */

.cw-model { max-width: 560px; margin: 0 auto; }
.cw-model-section { margin: 1.2rem 0 1.4rem; }
.cw-model-caption { color: var(--muted); font-size: .92rem; margin: .4rem 0 0; }

/* --- the two discrepancies --- */
.cw-disc { margin: 1.4rem 0; }
.cw-disc-lead { margin: .2rem 0 .7rem; }
.cw-disc-list { margin: 0; padding-left: 1.2rem; }
.cw-disc-list li { margin: .5rem 0; }

/* --- the channel, stop by stop --- */
.cw-channel { margin: 1.6rem 0; }
.cw-channel-lead { margin: .2rem 0 .8rem; }
.cw-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.cw-stop {
  display: flex; gap: .8rem; align-items: flex-start;
  border: 1px solid var(--line); border-left: 4px solid var(--control-line);
  border-radius: 6px; padding: .7rem .9rem; background: var(--bg);
}
.cw-stop--intermediary { border-left-color: var(--selected); background: var(--panel); }
.cw-stop-num {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 2px solid var(--control-line); display: grid; place-items: center;
  font-weight: 700; font-size: .9rem;
}
.cw-stop--intermediary .cw-stop-num { border-color: var(--selected); }
.cw-stop-body { flex: 1 1 auto; }
.cw-stop-name { margin: 0 0 .25rem; font-size: 1rem; }
.cw-stop-state { margin: 0 0 .35rem; }
.cw-stop-tag { margin: 0; font-size: .88rem; font-weight: 700; color: var(--selected); }
.cw-stop-tag--fixed { font-weight: 400; font-style: italic; color: var(--muted); }

/* --- the task --- */
.cw-task { margin: 1.6rem 0; }
.cw-task-lead { margin: .2rem 0 .9rem; }
.cw-fieldset {
  border: 1px solid var(--control-line); border-radius: 6px;
  padding: .7rem .9rem .9rem; margin: 0 0 1rem;
}
.cw-legend { font-weight: 700; padding: 0 .35rem; font-size: 1.02rem; }
.cw-choice { display: flex; align-items: flex-start; gap: .55rem; margin: .5rem 0; }
.cw-choice input { margin-top: .3rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.cw-choice label { cursor: pointer; }
.cw-choice input:disabled + label { cursor: default; color: var(--muted); }
.cw-choice-label { font-weight: 700; display: block; }
.cw-choice-def { color: var(--muted); font-size: .92rem; }
.cw-commit-note { color: var(--muted); font-size: .92rem; margin: .2rem 0 .6rem; }

/* --- hint --- */
.cw-hint-host { margin: .8rem 0 1.2rem; }
.cw-hint:empty { display: none; }
.cw-hint { margin: .5rem 0 0; padding: .55rem .7rem; background: var(--misplaced-bg); border-radius: 6px; }

/* --- feedback --- */
.cw-fb:focus { outline: none; }
.cw-fb-box { border: 2px solid var(--selected); border-radius: 8px; padding: 1rem 1.1rem; margin: 1rem 0; }
.cw-fb-stop { margin: 1.3rem 0 .5rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.cw-fb-item { margin: .7rem 0; padding: .6rem .75rem; border-radius: 6px; border-left: 4px solid var(--control-line); background: var(--panel); }
.cw-fb-item--ok { border-left-color: var(--correct); background: var(--correct-bg); }
.cw-fb-item--missed { border-left-color: var(--misplaced); background: var(--misplaced-bg); }
.cw-fb-item--wrong { border-left-color: var(--conflict); background: var(--conflict-bg); }
.cw-fb-item-head { margin: 0 0 .3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.cw-fb-mark { font-weight: 800; font-size: 1.05rem; }
.cw-fb-act { font-weight: 700; }
.cw-fb-verdict { font-size: .88rem; font-weight: 700; }
.cw-fb-item--ok .cw-fb-verdict { color: var(--correct); }
.cw-fb-item--missed .cw-fb-verdict { color: var(--misplaced); }
.cw-fb-item--wrong .cw-fb-verdict { color: var(--conflict); }
.cw-fb-item--agreed .cw-fb-verdict { color: var(--muted); }
.cw-fb-text { margin: 0; }
.cw-fb-disc { margin: .35rem 0 0; font-size: .9rem; font-weight: 600; color: var(--muted); }
.cw-fb-close { margin-top: 1.4rem; }
.cw-fb-punch { margin-top: 1.2rem; font-weight: 700; border-top: 1px solid var(--line); padding-top: .7rem; }

/* --- the grades table --- */
.cw-grades { margin: 1rem 0 1.2rem; overflow-x: auto; }
.cw-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 34rem; }
.cw-table th, .cw-table td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.cw-table thead th { background: var(--panel); font-weight: 700; }
.cw-table tbody th { font-weight: 600; }
.cw-table-caption { text-align: left; font-weight: 600; padding-bottom: .45rem; }
.cw-grade-followed th, .cw-grade-followed td { background: var(--correct-bg); }
.cw-lesson { margin-top: .9rem; padding: .7rem .9rem; border: 1px dashed var(--control-line); border-radius: 6px; }
.cw-lesson-head { margin: 0 0 .35rem; font-size: 1rem; }

/* --- the transformation --- */
.cw-transform { margin: 1.4rem 0 0; }
.cw-transform-list { margin: 0; padding-left: 1.3rem; }
.cw-transform-list li { margin: .45rem 0; }
.cw-transform-where { font-weight: 700; }

@media (min-width: 700px) {
  .cw-task .cw-fieldset { display: inline-block; width: calc(50% - .6rem); vertical-align: top; margin-right: .5rem; }
}

/* A defensible cell is not a wrong answer. It gets its own neutral-but-present
   treatment — deliberately NOT the red of .cw-fb-item--wrong — because a
   student who ticked it reasoned correctly and should not see a failure cue. */
.cw-fb-item--defensible { border-left-color: #5a3fa0; background: #f2eefb; }
.cw-fb-item--defensible .cw-fb-verdict { color: #4a3286; }
.cw-fb-counter { margin: .45rem 0 0; padding-top: .4rem; border-top: 1px dotted var(--control-line); }

/* ------------------------------------------------------------------------- */
/* CL-A cost-curve shell (src/costcurve.js) — Chapter 11 service level.       */
/* Reuses the pw-* table, chart and takeaway vocabulary; adds the stepper,    */
/* the three-state verdict block, and the multi-line cost chart.              */

.cc-setup { max-width: 780px; margin: 1rem 0 0; }
.cc-text { max-width: 780px; }
.cc-prompt { font-weight: 600; max-width: 780px; margin: 1rem 0 .5rem; }

/* One step = one commitment gate. Later steps are not in the DOM at all until
   the step before them is committed, so the border is a cue, not the barrier. */
.cc-step { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem 1.25rem; margin: 1.25rem 0; background: var(--bg); }
.cc-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cc-step.is-done { background: var(--panel); }
.cc-step-count { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; margin: 0; }
.cc-step-title { margin-top: .2rem; }
.cc-end { border-style: dashed; }

.cc-options { grid-template-columns: 1fr; gap: .45rem; }
.cc-options .em-card { text-align: left; }
.cc-options--levels { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.cc-options--levels .em-card { text-align: center; justify-content: center; }
.em-card.em-opt-arguable { border-color: #5a3fa0; }
.em-card.em-opt-arguable .em-card-label::before { content: "~ "; color: #4a3286; font-weight: 800; }

/* Three verdict states, never two. Each carries a glyph and a word before it
   carries any colour; "defensible" gets its own treatment rather than a softer
   version of wrong, because the student who lands there reasoned well. */
.cc-verdict { border-left: 4px solid var(--line); background: var(--panel);
  border-radius: 0 8px 8px 0; padding: .7rem .9rem; margin: 1rem 0; max-width: 820px; }
.cc-verdict-head { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .35rem; }
.cc-verdict-mark { font-weight: 800; font-size: 1.05rem; }
.cc-verdict-word { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.cc-verdict-lead { font-weight: 600; margin: 0 0 .4rem; }
.cc-verdict-text, .cc-verdict-counter { margin: .4rem 0 0; }
.cc-verdict-counter { padding-top: .4rem; border-top: 1px dotted var(--control-line); }
.cc-verdict--core { border-left-color: var(--correct); background: var(--correct-bg); }
.cc-verdict--core .cc-verdict-word { color: #12603a; }
.cc-verdict--defensible { border-left-color: #5a3fa0; background: #f2eefb; }
.cc-verdict--defensible .cc-verdict-word { color: #4a3286; }
.cc-verdict--no { border-left-color: var(--misplaced); background: var(--misplaced-bg); }
.cc-verdict--no .cc-verdict-word { color: #6f4c00; }
.cc-why { max-width: 820px; }

.cc-table-host { overflow-x: auto; }
.cc-table { font-variant-numeric: tabular-nums; }
.cc-table--compare { font-size: .9rem; min-width: 640px; }
.cc-col-total { border-left-width: 2px; font-weight: 700; }
.cc-cell-best { color: var(--correct); }
.cc-foot { text-align: left; font-size: .8rem; color: var(--muted); border: 0; padding-top: .5rem; }

.cc-figure { margin: 1.25rem 0; }
.cc-figcaption { font-size: .85rem; color: var(--muted); max-width: 620px; margin-top: .35rem; }
.cc-chart { max-width: 100%; }
/* Four lines, four dash patterns. Colour is the third cue after the end-of-line
   text label and the dash pattern — the chart reads in greyscale. */
.cc-line { fill: none; stroke-width: 2.5; }
.cc-line--c0 { stroke: var(--selected); stroke-dasharray: 7 4; }
.cc-line--c1 { stroke: var(--misplaced); stroke-dasharray: 2 3; }
.cc-line--c2 { stroke: var(--correct); stroke-dasharray: 11 4 2 4; }
.cc-line--total { stroke: var(--ink); stroke-width: 3.5; }

.cc-factors { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .5rem; }
.cc-factor { display: flex; align-items: flex-start; gap: .6rem;
  border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; }
.cc-factor input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: none; accent-color: var(--selected); }
.cc-factor label { cursor: pointer; }
.cc-factor input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cc-factor-note { border-left: 4px solid var(--line); padding: .55rem .8rem; margin: .6rem 0; max-width: 820px; }
.cc-factor-note.is-mine { border-left-color: var(--selected); background: var(--selected-bg); }
.cc-factor-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: 0 0 .3rem; font-weight: 600; }
.cc-factor-mark { font-weight: 800; }
.cc-factor-tag { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.cc-factor-text { margin: 0; }

@media (max-width: 520px) {
  .cc-step { padding: .85rem .8rem 1rem; }
  .cc-options--levels { grid-template-columns: repeat(3, 1fr); }
}
/* The student's own row in a revealed cost table. A defensible pick gets the
   same purple as its verdict block, never the amber that reads as "wrong". */
.cc-row-mine--no th, .cc-row-mine--no td { background: var(--misplaced-bg); }
.cc-row-mine--defensible th, .cc-row-mine--defensible td { background: #f2eefb; }

/* ============================================================
   CL-F — 2×2 Quadrant Sorter (.qs-)
   Chapter 14, Exhibit 14-3: when technology replaces vs. supports
   personal selling. The student makes two axis judgments per card
   and the quadrant falls out of them, so the feedback is keyed to
   the axes, not to a label.

   No drag, no canvas, no pointer precision: native radios and
   selects drive everything, and the 2×2 is a real <table> with row
   and column headers. Every verdict carries a glyph and a word
   before it carries any colour.
   ============================================================ */

.qs-model { max-width: 560px; margin: 0 auto; }
.qs-model-section { margin: 1.2rem 0 1.4rem; }
.qs-model-caption { color: var(--muted); font-size: .92rem; margin: .4rem 0 0; }
.qs-text { max-width: 780px; }

/* --- the two axes, stated once up front --- */
.qs-axes { margin: 1.4rem 0; max-width: 820px; }
.qs-axes-lead { margin: .2rem 0 .7rem; font-weight: 600; }
.qs-axes-list { margin: 0; padding-left: 1.3rem; }
.qs-axes-list li { margin: .55rem 0; }
.qs-axes-note { margin: .8rem 0 0; padding: .55rem .75rem; background: var(--panel);
  border-left: 4px solid var(--control-line); border-radius: 0 6px 6px 0; }

/* --- stepper: one step = one commitment gate. Later steps are not in the
   DOM at all until the step before commits, so the border is a cue, not
   the barrier. --- */
.qs-step { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem 1.25rem; margin: 1.25rem 0; background: var(--bg); }
.qs-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.qs-step.is-done { background: var(--panel); }
.qs-step-count { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; margin: 0; }
.qs-step-title { margin-top: .2rem; }
.qs-prompt { display: block; font-weight: 600; max-width: 780px; margin: 1rem 0 .5rem; }
.qs-commit-note { color: var(--muted); font-size: .92rem; margin: .6rem 0 .2rem; max-width: 780px; }

/* --- step 1: the prior. Three statements, one click, nothing scored. --- */
.qs-choices-fs { border: 0; margin: 0; padding: 0; }
.qs-choices { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem;
  max-width: 780px; }
.qs-choice { display: flex; align-items: flex-start; gap: .6rem; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px; padding: .65rem .8rem; }
.qs-choice input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: none;
  accent-color: var(--selected); }
.qs-choice input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.qs-choice label { cursor: pointer; }
.qs-choice input:disabled + label { cursor: default; color: var(--muted); }
.qs-choice:has(input:checked) { border-color: var(--selected); background: var(--selected-bg); }
.qs-held { margin: .8rem 0 0; padding: .6rem .8rem; background: var(--selected-bg);
  border-left: 4px solid var(--selected); border-radius: 0 6px 6px 0; max-width: 780px; }

/* --- step 2: the eight situations --- */
.qs-cards { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .9rem; counter-reset: qs; }
.qs-card { border: 1px solid var(--line); border-left: 4px solid var(--selected);
  border-radius: 6px; padding: .8rem .95rem 1rem; counter-increment: qs; }
.qs-card-name { margin: 0 0 .35rem; font-size: 1.02rem; }
.qs-card-name::before { content: counter(qs) ". "; color: var(--muted); }
.qs-card-text { margin: 0 0 .8rem; }
.qs-axis-fs { border: 0; margin: .55rem 0 0; padding: 0; }
.qs-axis-legend { font-size: .9rem; font-weight: 700; color: var(--muted); padding: 0; }
.qs-axis-row { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .3rem; }
.qs-axis-opt { display: flex; align-items: center; gap: .4rem; min-height: var(--touch); }
.qs-axis-opt input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--selected); }
.qs-axis-opt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.qs-axis-opt label { cursor: pointer; }
.qs-axis-opt input:disabled + label { cursor: default; color: var(--muted); }

/* --- the 2×2 itself --- */
.qs-board-head { margin: 1.4rem 0 .5rem; font-size: 1.02rem; }
/* The table is allowed to be wider than a phone and scroll inside this box.
   `min-width: 0` is what makes that work: a grid or flex child defaults to
   min-width:auto, refuses to shrink below its content, and pushes the whole
   page sideways instead of scrolling here. */
.qs-grid-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.qs-grid { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 20rem; }
.qs-grid-caption { text-align: left; font-size: .88rem; color: var(--muted); padding-bottom: .4rem; }
.qs-grid th, .qs-grid td { border: 1px solid var(--control-line); padding: .5rem .6rem;
  text-align: left; vertical-align: top; }
.qs-grid thead th { background: var(--panel); font-weight: 700; font-size: .85rem; }
.qs-grid tbody th { background: var(--panel); font-weight: 700; font-size: .85rem;
  width: 6.5rem; vertical-align: middle; }
.qs-corner { border: 0; background: transparent; font-size: .78rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.qs-axis-head { text-align: center !important; }
.qs-cell { width: 40%; }
.qs-cell-name { margin: 0 0 .35rem; font-weight: 700; font-size: .85rem; color: var(--muted); }
.qs-cell-empty { margin: 0; color: var(--muted); }
.qs-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.qs-chip { border: 1px solid var(--control-line); border-radius: 4px; padding: .2rem .4rem;
  background: var(--bg); font-size: .88rem; }
/* On the "where you put them" board after commit, a card that the chapter
   places elsewhere is marked by a word, not by colour alone. */
.qs-chip--moved { border-left: 4px solid var(--misplaced); background: var(--misplaced-bg); }
.qs-chip--held { border-left: 4px solid var(--correct); background: var(--correct-bg); }
/* A defensibly placed card is in a different cell from the chapter's, and that
   is not a mistake. Its own treatment, never the amber that reads as wrong. */
.qs-chip--arguable { border-left: 4px solid #5a3fa0; background: #f2eefb; }
.qs-chip-tag { font-size: .78rem; font-weight: 700; color: var(--muted); }
.qs-progress { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
.qs-boards { display: grid; gap: 1.2rem; margin: .5rem 0 1.4rem; }
.qs-board { min-width: 0; }
.qs-board-label { margin: 0 0 .4rem; font-size: .95rem; }

/* --- hint --- */
.qs-hint-host { margin: 1rem 0 .4rem; }
.qs-hint:empty { display: none; }
.qs-hint { margin: .5rem 0 0; padding: .55rem .7rem; background: var(--misplaced-bg);
  border-radius: 6px; max-width: 780px; }

/* --- feedback: three verdict states, never two --- */
.qs-fb-head { margin: 1.5rem 0 .6rem; font-size: 1.05rem; border-bottom: 1px solid var(--line);
  padding-bottom: .3rem; }
.qs-verdict { border-left: 4px solid var(--line); background: var(--panel);
  border-radius: 0 8px 8px 0; padding: .7rem .9rem; margin: .9rem 0; max-width: 860px; }
.qs-verdict-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .5rem; }
.qs-verdict-mark { font-weight: 800; font-size: 1.05rem; }
.qs-verdict-name { font-weight: 700; }
.qs-verdict-word { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.qs-verdict--core { border-left-color: var(--correct); background: var(--correct-bg); }
.qs-verdict--core .qs-verdict-word { color: #12603a; }
/* A defensible reading is NOT a wrong answer, and must never get the cue that
   says failure. Its own treatment, deliberately not the amber of --no. */
.qs-verdict--defensible { border-left-color: #5a3fa0; background: #f2eefb; }
.qs-verdict--defensible .qs-verdict-word { color: #4a3286; }
.qs-verdict--no { border-left-color: var(--misplaced); background: var(--misplaced-bg); }
.qs-verdict--no .qs-verdict-word { color: #6f4c00; }
.qs-verdict-note { margin: .6rem 0 0; font-size: .92rem; font-style: italic; }

/* one line per axis, inside a card's verdict */
.qs-axis-fb { background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: .55rem .7rem; margin: .5rem 0; }
.qs-axis-fb--off { border-left: 4px solid var(--misplaced); }
.qs-axis-fb--arguable { border-left: 4px solid #5a3fa0; }
.qs-axis-fb--match { border-left: 4px solid var(--correct); }
.qs-axis-fb-head { margin: 0 0 .3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.qs-axis-fb-mark { font-weight: 800; }
.qs-axis-fb-name { font-weight: 700; }
.qs-axis-fb-said { font-size: .9rem; color: var(--muted); font-weight: 600; }
.qs-axis-fb-why { margin: 0; }
.qs-arg, .qs-arg-flag { margin: .5rem 0 0; padding-top: .4rem; border-top: 1px dotted var(--control-line); }
.qs-arg-flag { font-size: .92rem; color: #4a3286; font-weight: 600; }

.qs-takeaway { margin: 1.4rem 0 .4rem; padding: .8rem 1rem; max-width: 860px;
  border: 2px solid var(--selected); border-radius: 8px; background: var(--selected-bg);
  font-weight: 600; }

/* --- step 3: the AI matching --- */
.qs-roles { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .8rem; }
/* min-width:0 for the same reason as .qs-grid-scroll: without it a grid child
   refuses to shrink below the widest option in its <select>, and a phone gets a
   sideways-scrolling page instead of a full-width dropdown. */
.qs-role { border: 1px solid var(--line); border-radius: 6px; padding: .75rem .9rem; min-width: 0; }
.qs-role-text { margin: 0 0 .6rem; }
.qs-role-label { display: block; font-size: .88rem; font-weight: 700; color: var(--muted); margin-bottom: .25rem; }
.qs-select { font: inherit; padding: .45rem .5rem; min-height: var(--touch);
  width: 100%; max-width: 100%;
  border: 2px solid var(--control-line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.qs-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.qs-reckoning { margin: 1.6rem 0 0; }
.qs-reckon-said { margin: .2rem 0 .5rem; padding: .55rem .75rem; background: var(--selected-bg);
  border-left: 4px solid var(--selected); border-radius: 0 6px 6px 0; max-width: 860px; }
.qs-reckon-line { font-weight: 700; font-variant-numeric: tabular-nums; margin: .2rem 0 .6rem; }

@media (min-width: 760px) {
  .qs-boards { grid-template-columns: 1fr 1fr; }
  .qs-axis-row { gap: .35rem 1.4rem; }
}
@media (max-width: 520px) {
  .qs-step { padding: .85rem .8rem 1rem; }
  /* The board sits at the top of the sorting step as the frame the student is
     reasoning into, so on a phone it has to be visible whole — a 2×2 with its
     right-hand column parked off-screen is not a 2×2. Drop the min-width and
     tighten the type so all four cells fit at 375px; the scroll box stays as the
     fallback for anything narrower. */
  /* table-layout: fixed is what actually guarantees the fit. Without it the
     table sizes to its widest content and creeps back over the edge whatever
     the min-width says. */
  .qs-grid { min-width: 0; font-size: .82rem; table-layout: fixed; }
  /* break-word, NOT anywhere: `anywhere` will split a word even when it would
     have fitted on the next line, and turned the axis label into
     "STAND ARDIZ ED INFOR MATI ON". Words only break here when they genuinely
     cannot fit. */
  .qs-grid th, .qs-grid td { padding: .4rem .4rem; overflow-wrap: break-word; }
  .qs-grid thead th, .qs-grid tbody th { font-size: .74rem; }
  /* 6.1rem, not 5.6: at 5.6 the content box came out at 76px against a 76px
     "Standardized" and the word wrapped by one letter. Measured, not guessed. */
  .qs-grid tbody th, .qs-grid .qs-corner { width: 6.1rem; }
  /* Dropping the uppercase is what buys the room — "Standardized" in mixed case
     is far narrower than "STANDARDIZED", and stops the axis name breaking
     mid-word in the corner cell. */
  .qs-corner { font-size: .7rem; letter-spacing: 0; text-transform: none; }
  .qs-cell { width: auto; }
  .qs-cell-name { font-size: .76rem; }
  .qs-chip { font-size: .8rem; padding: .18rem .3rem; }
}