/* ============================================================
   Workshop component layer (one-worker rebuild, 18 July).
   Ports the inside-svs-ai-workforce component vocabulary onto
   the shared deck.css base. deck.css stays untouched because
   the webinar deck @imports it.
   Accent meaning unchanged: cyan = concept/live, amber =
   approval/draft, green = work mode/done, red = break only.
   ============================================================ */

/* ---------- title fact chips ---------- */
.title-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-block-start: clamp(0.8rem, 2cqi, 1.6rem);
}

.title-facts span {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cw-line-strong);
  color: var(--cw-muted);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.2cqi, 17px);
  letter-spacing: 0.06em;
}

/* ---------- shared label voice for the new components ---------- */
.prompt-card span,
.review-grid span,
.before-after span,
.brief-sheet span,
.support-timeline span {
  color: var(--cw-quiet);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.4cqi, 19px);
  letter-spacing: 0.06em;
}

/* ---------- prompt card: label rail + rows ---------- */
.prompt-card {
  display: grid;
  gap: 0.45rem;
  width: 100%;
  padding: clamp(0.85rem, 1.8cqi, 1.3rem);
  background: var(--cw-pane);
  border: 1px solid var(--cw-line-strong);
  border-block-start: 3px solid var(--cw-running);
}

.prompt-card p {
  display: grid;
  grid-template-columns: clamp(9.4rem, 16cqi, 13rem) minmax(0, 1fr);
  gap: 1rem;
  max-width: none;
  padding-block-end: 0.42rem;
  border-block-end: 1px solid var(--cw-line);
  font-size: clamp(23px, 1.95cqi, 27px);
}

.prompt-card p:last-child {
  padding-block-end: 0;
  border: 0;
}

.prompt-card span {
  color: var(--cw-running);
}

/* ---------- review grid: three lanes ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.review-grid > div {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1rem, 2.2cqi, 1.6rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-line-strong);
}

.review-grid p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(22px, 2.1cqi, 29px);
}

/* Neutral owners read grey; only the AI WORKER lane carries the cyan accent. */
.review-grid span {
  color: var(--cw-muted);
}

.review-grid > div:nth-child(2) {
  background: var(--cw-pane-raised);
  border-block-start-color: var(--cw-running);
}

.review-grid > div:nth-child(2) span {
  color: var(--cw-running);
}

/* ---------- before/after panes ---------- */
.before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

/* Tiles carry a top accent (rails keep the left border). Converged with
   worker-card so every panel-tile in the deck shares one grammar. */
.before-after > div {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: clamp(0.9rem, 2cqi, 1.5rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-line-strong);
}

.before-after > div:last-child {
  border-block-start-color: var(--cw-running);
  background: var(--cw-pane-raised);
}

.before-after span {
  font-size: clamp(var(--type-meta-min), 1.25cqi, 17px);
  letter-spacing: 0.07em;
}

.before-after > div:last-child span {
  color: var(--cw-running);
}

.before-after p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(20px, 2cqi, 27px);
  line-height: 1.35;
}

.before-after > div:last-child p {
  color: var(--cw-text);
}

/* Per-slide semantics. The two panes mean different things per slide, so the
   accents are assigned by meaning, not by position.
   prebuilt-vs-yours: the locked machine is cyan; the pane you own is amber. */
#prebuilt-vs-yours .before-after > div:first-child {
  background: var(--cw-pane-raised);
  border-block-start-color: var(--cw-running);
}

#prebuilt-vs-yours .before-after > div:first-child span {
  color: var(--cw-running);
}

#prebuilt-vs-yours .before-after > div:first-child p {
  color: var(--cw-text);
}

#prebuilt-vs-yours .before-after > div:last-child {
  border-block-start-color: var(--cw-approval);
}

#prebuilt-vs-yours .before-after > div:last-child span {
  color: var(--cw-approval);
}

/* take-home-and-support: the core you leave with is verified/green and leads;
   optional accelerators stay quiet grey. */
#take-home-and-support .before-after > div:first-child {
  background: var(--cw-pane-raised);
  border-block-start-color: var(--cw-verified);
}

#take-home-and-support .before-after > div:first-child span {
  color: var(--cw-verified);
}

#take-home-and-support .before-after > div:first-child p {
  color: var(--cw-text);
}

#take-home-and-support .before-after > div:last-child {
  background: var(--cw-pane);
  border-block-start-color: var(--cw-line-strong);
}

#take-home-and-support .before-after > div:last-child span {
  color: var(--cw-quiet);
}

#take-home-and-support .before-after > div:last-child p {
  color: var(--cw-muted);
}

/* ---------- "in plain words" strip ---------- */
.slide__content p.plain-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  width: 100%;
  max-width: none;
  padding: 0.6rem 0.85rem;
  background: var(--cw-pane-raised);
  border-inline-start: 3px solid var(--cw-running);
  font-size: clamp(19px, 1.85cqi, 25px);
}

.plain-line span {
  color: var(--cw-running);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.25cqi, 16px);
  letter-spacing: 0.07em;
  white-space: nowrap;
}

/* ---------- standing brief sheet: three layers ---------- */
.brief-sheet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.brief-sheet > div {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: clamp(0.85rem, 1.8cqi, 1.3rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-verified);
}

.brief-sheet > div:last-child {
  border-block-start-color: var(--cw-approval);
  background: var(--cw-pane-raised);
}

.brief-sheet > div:last-child span {
  color: var(--cw-approval);
}

.brief-sheet p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(19px, 1.9cqi, 26px);
  line-height: 1.35;
}

/* ---------- support timeline: four tiles ---------- */
.support-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.support-timeline > div {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: clamp(0.75rem, 1.6cqi, 1.15rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-verified);
}

.support-timeline strong {
  font-size: clamp(21px, 2cqi, 27px);
  line-height: 1.15;
}

.support-timeline p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(18px, 1.65cqi, 22px);
}

.support-timeline span {
  color: var(--cw-verified);
}

/* ---------- close meta chips ---------- */
.close-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.close-meta span {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--cw-line-strong);
  color: var(--cw-muted);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.4cqi, 19px);
}

/* ============================================================
   Loop motif — the deck's signature. "Run → Check → Approve →
   Repeat" as one connected cycle, reused on operating-rhythm
   (introduce) and close (reprise). Colour tells the story:
   RUN = cyan (the worker runs), CHECK = amber (your review),
   APPROVE = green (approved), REPEAT = cyan (it runs again). The
   fourth chip carries a return glyph so the row reads as a loop,
   not a line. Connectors are pseudo-content, exempt from the text
   audit; chip labels are functional metadata (classified honestly
   in check-workshop-deck.mts).
   ============================================================ */
.loop-cycle {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.6cqi, 1.2rem);
  width: 100%;
}

.loop-cycle > span {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(0.65rem, 1.5cqi, 1.05rem) clamp(1.6rem, 3.2cqi, 2.4rem) clamp(0.65rem, 1.5cqi, 1.05rem) clamp(0.8rem, 1.8cqi, 1.3rem);
  background: var(--cw-pane);
  border: 1px solid var(--cw-line-strong);
  border-block-start: 3px solid var(--cw-running);
  color: var(--cw-text);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.9cqi, 24px);
  letter-spacing: 0.09em;
  text-align: center;
}

.loop-cycle > span:nth-child(2) {
  border-block-start-color: var(--cw-approval);
}

.loop-cycle > span:nth-child(3) {
  border-block-start-color: var(--cw-verified);
}

.loop-cycle > span:nth-child(4) {
  border-block-start-color: var(--cw-running);
  background: color-mix(in srgb, var(--cw-running) 12%, var(--cw-pane));
}

/* Forward connectors sit inside each chip's trailing edge (kept inside the box
   so a chip never overflows the structural-model audit on the close slide). */
.loop-cycle > span:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: clamp(0.45rem, 1cqi, 0.75rem);
  color: var(--cw-quiet);
  font-size: 1.1em;
  line-height: 1;
  transform: translateY(-50%);
}

/* The return glyph closes the cycle back to RUN. */
.loop-cycle > span:last-child {
  padding-inline-end: clamp(0.8rem, 1.8cqi, 1.3rem);
}

.loop-cycle > span:last-child::before {
  content: "\21BA";
  margin-inline-end: 0.5em;
  color: var(--cw-running);
  font-size: 1.15em;
  line-height: 1;
}

/* ---------- worker card: name your next hire ---------- */
.worker-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.worker-card > div {
  display: grid;
  grid-template-columns: clamp(6.5rem, 12cqi, 8.5rem) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  padding: clamp(0.65rem, 1.4cqi, 0.95rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-verified);
}

.worker-card p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(24px, 2.05cqi, 28px);
}

.worker-card span {
  color: var(--cw-verified);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.4cqi, 19px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ---------- final workshop model components ---------- */
.mechanism-grid,
.decision-triad,
.check-layers,
.status-lanes,
.anatomy-map,
.adoption-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.mechanism-card,
.decision,
.check-layer,
.status-lanes > div,
.anatomy-map > div,
.adoption-lanes > div {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  min-width: 0;
  padding: clamp(0.75rem, 1.65cqi, 1.2rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-running);
}

.mechanism-card > span,
.decision > span,
.check-layer > span,
.status-lanes span,
.anatomy-map span,
.adoption-lanes span {
  color: var(--cw-running);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.35cqi, 18px);
  letter-spacing: 0.055em;
}

.mechanism-card h3 {
  max-width: none;
  margin: 0;
  font-family: var(--cw-font-display);
  font-size: clamp(var(--type-teaching-min), 2.5cqi, 34px);
  line-height: 1.08;
}

.mechanism-card p,
.decision p,
.check-layer p,
.status-lanes p,
.anatomy-map p,
.adoption-lanes p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(20px, 1.85cqi, 25px);
  line-height: 1.3;
}

/* One triad, three components: define = cyan, boundaries = amber, run = green.
   mechanism-grid now joins anatomy-map and check-layers on the same mapping. */
.anatomy-map > div:nth-child(2),
.check-layer:nth-child(2),
.mechanism-grid .mechanism-card:nth-child(2) {
  border-block-start-color: var(--cw-approval);
}

.anatomy-map > div:nth-child(2) span,
.check-layer:nth-child(2) span,
.mechanism-grid .mechanism-card:nth-child(2) > span {
  color: var(--cw-approval);
}

.anatomy-map > div:nth-child(3),
.check-layer:nth-child(3),
.mechanism-grid .mechanism-card:nth-child(3) {
  border-block-start-color: var(--cw-verified);
}

.anatomy-map > div:nth-child(3) span,
.check-layer:nth-child(3) span,
.mechanism-grid .mechanism-card:nth-child(3) > span {
  color: var(--cw-verified);
}

/* worker-anatomy reads as three stacked bands (mechanism label left, its parts
   right), so the three-in-a-row grid run before it does not repeat a third time.
   Still three children, still the cyan/amber/green triad on the block-start. */
.anatomy-map {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.anatomy-map > div {
  grid-template-columns: clamp(10.5rem, 21cqi, 16.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3cqi, 2.6rem);
  padding-block: clamp(0.7rem, 1.7cqi, 1.25rem);
}

.anatomy-map > div span {
  align-self: center;
}

.decision--approve {
  border-block-start-color: var(--cw-verified);
}

.decision--approve > span {
  color: var(--cw-verified);
}

.decision--return {
  border-block-start-color: var(--cw-approval);
}

.decision--return > span {
  color: var(--cw-approval);
}

.decision--stop {
  border-block-start-color: var(--cw-stopped);
}

.decision--stop > span {
  color: var(--cw-stopped);
}

.passport-map {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.passport-stamp {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  min-height: clamp(8.5rem, 17cqi, 12rem);
  padding: clamp(0.65rem, 1.35cqi, 1rem);
  background: var(--cw-pane);
  border: 1px solid var(--cw-line-strong);
  border-block-start: 3px solid var(--cw-approval);
}

.passport-stamp > span {
  display: grid;
  place-items: center;
  width: clamp(2rem, 3.8cqi, 2.7rem);
  height: clamp(2rem, 3.8cqi, 2.7rem);
  margin-block-end: 0.15rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--cw-approval);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.5cqi, 20px);
  line-height: 1;
}

.passport-stamp strong {
  font-size: clamp(var(--type-teaching-min), 2cqi, 28px);
  line-height: 1.1;
}

.passport-stamp small {
  color: var(--cw-muted);
  font-size: clamp(var(--type-meta-min), 1.35cqi, 18px);
  line-height: 1.25;
}

.passport-stamp.is-ready {
  background: color-mix(in srgb, var(--cw-verified) 10%, var(--cw-pane));
  border-block-start-color: var(--cw-verified);
}

.passport-stamp.is-ready > span {
  color: var(--cw-verified);
}

.review-loop {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.review-step,
.review-loop > div {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  padding: clamp(0.65rem, 1.25cqi, 0.9rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-running);
}

.review-loop > div:nth-child(4),
.review-loop > div:nth-child(5) {
  border-block-start-color: var(--cw-verified);
}

.review-loop span {
  color: var(--cw-running);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.25cqi, 17px);
  letter-spacing: 0.045em;
}

.review-loop > div:nth-child(4) span,
.review-loop > div:nth-child(5) span {
  color: var(--cw-verified);
}

.review-loop p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(18px, 1.55cqi, 21px);
  line-height: 1.25;
}

.failure-labels,
.next-hire-candidates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.failure-labels li,
.next-hire-candidates li {
  max-width: none;
  padding: 0.48rem 0.62rem;
  background: var(--cw-pane);
  border-inline-start: 3px solid var(--cw-approval);
  color: var(--cw-muted);
  font-size: clamp(var(--type-meta-min), 1.45cqi, 19px);
  line-height: 1.2;
}

.next-hire-candidates li {
  border-inline-start-color: var(--cw-running);
}

.next-hire-candidates .next-hire-blank {
  grid-column: 1 / -1;
  border-inline-start-color: var(--cw-verified);
  color: var(--cw-text);
}

.action-rail,
.evidence-gate {
  width: 100%;
  max-width: none !important;
  padding: 0.62rem 0.8rem;
  background: var(--cw-pane-raised);
  border-inline-start: 3px solid var(--cw-verified);
  color: var(--cw-muted);
  font-size: clamp(var(--type-meta-min), 1.55cqi, 21px) !important;
  line-height: 1.3;
}

.evidence-gate {
  border-inline-start-color: var(--cw-approval);
}

.action-rail strong {
  color: var(--cw-verified);
}

.evidence-gate strong {
  color: var(--cw-approval);
}

.evidence-gate--large {
  padding: clamp(1rem, 2cqi, 1.45rem);
  font-size: clamp(var(--type-teaching-min), 2.15cqi, 29px) !important;
}

/* next-hire-gate: the seven-day gate as three provable criteria (amber = your
   proof), revealed one at a time, so the slide is a diagram, not one text box. */
.gate-criteria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.gate-criteria > div {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-width: 0;
  padding: clamp(0.9rem, 2cqi, 1.5rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-approval);
}

.gate-criteria span {
  color: var(--cw-approval);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.4cqi, 19px);
  letter-spacing: 0.06em;
}

.gate-criteria p {
  max-width: none;
  color: var(--cw-text);
  font-size: clamp(var(--type-teaching-min), 2.2cqi, 30px);
  line-height: 1.25;
}

/* ---------- inline icons: small, monochrome, accent-coloured ----------
   Decorative (aria-hidden). Stroked with currentColor so each icon picks up
   its tile's accent. Not text, so exempt from the size/contrast audit; still
   sized in cqi so they never crowd a projector floor. */
.icon {
  display: block;
  width: clamp(1.35rem, 2.5cqi, 1.9rem);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* ---------- proof scoreboard (ai-proof) ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
  padding: clamp(0.95rem, 2.1cqi, 1.5rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-running);
  color: var(--cw-running);
}

.stat__num,
.stat__label,
.stat__sub {
  min-width: 0;
  overflow-wrap: break-word;
}

.stat:last-child {
  background: color-mix(in srgb, var(--cw-verified) 10%, var(--cw-pane));
  border-block-start-color: var(--cw-verified);
  color: var(--cw-verified);
}

.stat .icon {
  margin-block-end: 0.35rem;
}

.stat__num {
  font-family: var(--cw-font-display);
  font-size: clamp(28px, 3.2cqi, 40px);
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--cw-text);
}

.stat:last-child .stat__num {
  color: var(--cw-verified);
}

.stat__label {
  color: var(--cw-text);
  font-size: clamp(var(--type-meta-min), 1.6cqi, 21px);
  line-height: 1.2;
}

.stat__sub {
  color: var(--cw-quiet);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.35cqi, 17px);
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* decision triad icons follow the same accent as each lane */
.decision .icon {
  margin-block-end: 0.2rem;
}

.decision--approve .icon {
  color: var(--cw-verified);
}

.decision--return .icon {
  color: var(--cw-approval);
}

.decision--stop .icon {
  color: var(--cw-stopped);
}

/* ---------- system map (the-system): the workforce + what it plugs into ---------- */
.system-hub {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  padding: clamp(0.85rem, 1.9cqi, 1.35rem) clamp(1rem, 2.2cqi, 1.6rem);
  background: color-mix(in srgb, var(--cw-running) 10%, var(--cw-pane));
  border-block-start: 3px solid var(--cw-running);
}

.system-hub__k {
  color: var(--cw-running);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.4cqi, 19px);
  letter-spacing: 0.06em;
}

.system-hub p {
  max-width: none;
  color: var(--cw-text);
  font-size: clamp(var(--type-teaching-min), 2.3cqi, 31px);
  line-height: 1.25;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.integration-grid > div {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-width: 0;
  padding: clamp(0.7rem, 1.6cqi, 1.15rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-line-strong);
}

.integration-grid .icon {
  color: var(--cw-running);
  margin-block-end: 0.2rem;
}

.integration-grid strong {
  font-size: clamp(var(--type-meta-min), 1.7cqi, 22px);
  line-height: 1.1;
}

.integration-grid p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(var(--type-meta-min), 1.35cqi, 18px);
  line-height: 1.2;
}

/* ---------- worker file tree (worker-files): what is under the hood ---------- */
.file-tree {
  display: grid;
  gap: clamp(0.35rem, 0.9cqi, 0.65rem);
  width: 100%;
}

.file-tree > div {
  display: grid;
  grid-template-columns: clamp(9rem, 18cqi, 14rem) minmax(0, 1fr);
  gap: clamp(0.8rem, 1.8cqi, 1.4rem);
  align-items: baseline;
  padding-block: clamp(0.3rem, 0.85cqi, 0.55rem);
  border-block-end: 1px solid var(--cw-line);
}

.file-tree .file {
  color: var(--cw-running);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.7cqi, 22px);
  letter-spacing: 0.02em;
}

.file-tree p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(var(--type-meta-min), 1.9cqi, 25px);
  line-height: 1.25;
}

/* Trim the shared anatomy figure and tighten the vertical rhythm so the
   seven-part slide clears 720p. */
.anatomy-figure {
  width: clamp(115px, 13cqi, 172px);
}

#worker-anatomy .slide__content {
  gap: clamp(0.55rem, 1.5cqi, 1.2rem);
}

/* ---------- story timeline icons (origin slides) ---------- */
.story-timeline .icon {
  width: clamp(1.15rem, 2.1cqi, 1.6rem);
  margin-block-end: 0.3rem;
  color: var(--cw-running);
}

.story-timeline__turn .icon,
.story-timeline__win .icon {
  color: var(--cw-approval);
}

/* ---------- funnel (the-funnel): five stages, measured ---------- */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.funnel-grid > div {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-width: 0;
  padding: clamp(0.7rem, 1.6cqi, 1.15rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-running);
}

.funnel-grid .icon {
  color: var(--cw-running);
  margin-block-end: 0.2rem;
}

.funnel-grid strong {
  color: var(--cw-running);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.5cqi, 20px);
  letter-spacing: 0.05em;
}

.funnel-grid p {
  max-width: none;
  color: var(--cw-text);
  font-size: clamp(var(--type-meta-min), 1.55cqi, 21px);
  line-height: 1.2;
}

.funnel-grid small {
  color: var(--cw-quiet);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.3cqi, 17px);
  line-height: 1.2;
}

/* ---------- clockwork hub (bring-it-together): capabilities above and below,
   Clockwork alone in the centre band so nothing collides with the circle ---------- */
.clockwork-orbit {
  display: grid;
  gap: clamp(0.45rem, 1.1cqi, 0.85rem);
  width: 100%;
  justify-items: center;
}

.orbit-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.orbit-row > div {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: clamp(0.6rem, 1.4cqi, 1rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-line-strong);
  text-align: center;
}

.orbit-row .icon {
  color: var(--cw-running);
}

.orbit-row strong {
  color: var(--cw-text);
  font-size: clamp(var(--type-meta-min), 1.5cqi, 20px);
  line-height: 1.1;
}

.orbit-center {
  display: grid;
  place-items: center;
  width: 100%;
}

.orbit-logo {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  width: clamp(6rem, 13.5cqi, 10rem);
  height: clamp(6rem, 13.5cqi, 10rem);
  padding-inline: clamp(0.55rem, 1.3cqi, 0.95rem);
  border-radius: 50%;
  border: 2px solid var(--cw-running);
  background: color-mix(in srgb, var(--cw-running) 14%, var(--cw-pane));
  color: var(--cw-running);
}

.orbit-logo .icon {
  width: clamp(1.9rem, 4cqi, 2.8rem);
  color: var(--cw-running);
}

.orbit-logo strong {
  color: var(--cw-running);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.25cqi, 18px);
  letter-spacing: 0.01em;
}

/* worker-anatomy uses the shared .anatomy figure (deck.css); keep it short at
   the compact projector floor, and shrink the system map to clear 600px. */
@media (max-width: 52rem) {
  .anatomy {
    gap: clamp(0.5rem, 2cqi, 1.4rem);
  }

  .anatomy-figure {
    width: clamp(80px, 12cqi, 120px);
  }

  .anatomy-col li {
    font-size: clamp(16px, 2.2cqi, 24px);
  }

  .integration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #the-system .slide__content {
    gap: clamp(0.32rem, 0.9cqi, 0.65rem);
  }

  #the-system .system-hub {
    padding: clamp(0.5rem, 1.2cqi, 0.8rem) clamp(0.7rem, 1.5cqi, 1rem);
  }

  #the-system .integration-grid > div {
    padding: clamp(0.45rem, 1.1cqi, 0.75rem);
  }

  #the-system .integration-grid .icon {
    width: clamp(0.95rem, 1.8cqi, 1.3rem);
    margin-block-end: 0.1rem;
  }

  .funnel-grid > div {
    padding: clamp(0.45rem, 1.1cqi, 0.75rem);
  }

  .funnel-grid .icon {
    width: clamp(0.95rem, 1.8cqi, 1.3rem);
    margin-block-end: 0.1rem;
  }

  .orbit-row > div {
    padding: clamp(0.4rem, 1cqi, 0.7rem);
  }

  .orbit-logo {
    width: clamp(4.5rem, 11cqi, 6.5rem);
    height: clamp(4.5rem, 11cqi, 6.5rem);
  }
}

.if-then-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.if-then-card {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: clamp(0.7rem, 1.4cqi, 1rem);
  background: var(--cw-pane);
  border-block-start: 3px solid var(--cw-verified);
}

.if-then-card strong {
  color: var(--cw-verified);
  font-family: var(--cw-font-label);
  font-size: clamp(var(--type-meta-min), 1.3cqi, 18px);
  letter-spacing: 0.05em;
}

.if-then-card p {
  max-width: none;
  color: var(--cw-muted);
  font-size: clamp(19px, 1.65cqi, 22px);
}

.screenshot-frame {
  display: grid;
  min-height: 0;
  width: min(100%, 980px);
  padding: 0.55rem;
  place-items: center;
  background: var(--cw-pane);
  border: 1px solid var(--cw-line-strong);
}

.screenshot-frame img {
  display: block;
  width: 100%;
  max-height: 46cqh;
  object-fit: contain;
}

/* Smaller screens have less block room; keep the shot inside the frame. */
@media (max-width: 64rem) {
  .screenshot-frame img {
    max-height: 32cqh;
  }
}

.brief-sheet {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.compact-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.compact-steps > li {
  font-size: clamp(var(--type-teaching-min), 2.25cqi, 31px);
}

.compact-steps > li::before {
  top: 0.1rem;
  font-size: inherit;
  line-height: inherit;
}

#constrained-generation .slide__content {
  gap: clamp(0.25rem, 0.65cqi, 0.55rem);
}

.slide--steps .slide__content {
  gap: clamp(0.35rem, 0.85cqi, 0.75rem);
  padding-block-start: 0.2rem;
}

.slide--steps .quiet-line {
  font-size: clamp(var(--type-meta-min), 1.4cqi, 18px);
  line-height: 1.2;
}

.worker-card--compact > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
}

.worker-card--compact p {
  font-size: clamp(19px, 1.65cqi, 22px);
}

.adoption-lanes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adoption-lanes > div:first-child {
  border-block-start-color: var(--cw-approval);
}

.adoption-lanes > div:first-child span {
  color: var(--cw-approval);
}

.adoption-lanes > div:last-child {
  border-block-start-color: var(--cw-verified);
}

.adoption-lanes > div:last-child span {
  color: var(--cw-verified);
}

/* Candidate menu and blueprint card sit side by side instead of stacking, so
   the slide breathes instead of crowding two full components to the floor. */
#next-hire-blueprint .slide__content {
  gap: clamp(0.45rem, 1.1cqi, 0.85rem);
}

.blueprint-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 14px;
  width: 100%;
  align-items: start;
}

#next-hire-blueprint .next-hire-candidates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

#next-hire-blueprint .worker-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- responsive floors ----------
   Keep dense grids multi-column at small stages: single-column
   stacking is TALLER and overflows the 800x600 projector floor.
   Two columns stays short while giving each cell room to wrap. */
@media (max-width: 52rem) {
  .review-grid,
  .brief-sheet,
  .support-timeline,
  .worker-card,
  .mechanism-grid,
  .decision-triad,
  .check-layers,
  .status-lanes,
  .gate-criteria,
  .stat-grid,
  .failure-labels,
  .next-hire-candidates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .passport-map,
  .review-loop {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Tighten internal spacing so two rows clear a 600px stage. */
  .review-grid > div,
  .brief-sheet > div,
  .support-timeline > div,
  .before-after > div,
  .mechanism-card,
  .decision,
  .check-layer,
  .status-lanes > div,
  .anatomy-map > div,
  .adoption-lanes > div,
  .passport-stamp,
  .review-loop > div {
    padding: clamp(0.6rem, 1.4cqi, 0.9rem);
  }

  .review-grid,
  .before-after,
  .brief-sheet,
  .support-timeline,
  .worker-card,
  .mechanism-grid,
  .decision-triad,
  .check-layers,
  .status-lanes,
  .gate-criteria,
  .anatomy-map,
  .adoption-lanes,
  .passport-map,
  .review-loop,
  .if-then-plans,
  .failure-labels,
  .next-hire-candidates {
    gap: 8px;
  }

  .passport-stamp {
    min-height: 0;
  }

  .support-timeline > div {
    gap: 0.25rem;
  }

  .support-timeline strong {
    line-height: 1.1;
  }

  .support-timeline p {
    line-height: 1.25;
  }
}

/* ---------- compact projector floor: keep the re-treated slides short ----------
   The worker-anatomy bands and the next-hire split are wide-viewport treatments.
   At 800x600 single-column stacking overflows, so both revert to the short,
   multi-column fallback (the triad accents and content are unchanged). */
@media (max-width: 52rem) {
  .anatomy-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .anatomy-map > div {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.42rem;
  }

  .blueprint-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  #next-hire-blueprint .slide__content {
    gap: 0.2rem;
  }

  #next-hire-blueprint .next-hire-candidates,
  #next-hire-blueprint .worker-card {
    gap: 6px;
  }

  #next-hire-blueprint .next-hire-candidates li {
    padding: 0.3rem 0.5rem;
    line-height: 1.15;
  }

  #next-hire-blueprint .worker-card > div {
    padding: 0.35rem 0.5rem;
  }

  #what-is-clockwork .slide__content {
    gap: 0.28rem;
  }

  #what-is-clockwork .mechanism-card {
    padding: clamp(0.55rem, 1.3cqi, 0.85rem);
  }

  /* Proof scoreboard: shrink the big numbers and tiles so the 2x2 clears 600px. */
  #ai-proof .slide__content {
    gap: clamp(0.35rem, 0.9cqi, 0.7rem);
  }

  #ai-proof .stat {
    padding: clamp(0.5rem, 1.2cqi, 0.8rem);
    gap: 0.1rem;
  }

  #ai-proof .stat__num {
    font-size: clamp(24px, 3.6cqi, 38px);
  }

  #ai-proof .stat .icon {
    width: clamp(1rem, 1.9cqi, 1.4rem);
    margin-block-end: 0.15rem;
  }
}