/* ABOUTME: Lens-slide styles for the gateway-centric-workers deck: title, definitions, recap, mini-canvas slides. */
/* ABOUTME: Owned by the lens builder (see .ai/analyses/03_build-plan.md). Follows build plan §7 (slide frame v2). */

/* ---------------------------------------------------------------------------
   MINI/SNAPSHOT CLEARANCE: assets/canvas.css declares `.reveal .cv { position:
   relative }` (loaded after deck.css); at equal specificity the later rule
   wins, so deck.css's `.reveal .cv-mini { position: absolute }` loses and the
   mini joins normal flow, inflating the whole slide's height. Compounding the
   selector raises specificity so this always wins regardless of load order —
   see the final report for this shared-infrastructure note (also affects
   slide 28's mini, owned by the contract builder).
   --------------------------------------------------------------------------- */
.reveal .cv.cv-mini { position: absolute; }

/* Build plan §7.1 rule 5: "Inside .cv-mini all labels are hidden; shapes and
   colours carry the meaning." Canvas-builder work in progress still renders
   full-size text labels inside the mini, which both breaks this rule and
   fails audit-slides' body-text floor (labels sized for the full canvas, well
   under 26px at .cv-mini's ~30% scale). Hide label text here so it doesn't
   block on canvas.css landing its own version of this rule — also fixes
   slide 28's mini, owned by the contract builder. */
.reveal .cv-mini .cv-lbl,
.reveal .cv-mini .cv-wall b,
.reveal .cv-mini .cv-e b { display: none; }

/* deck.css's .fig sets position/width/font-size only; a child sized shorter
   than the flex-grown .stage leaves it pinned to the fig's own top instead of
   centred (percentage heights on the child don't reliably resolve against a
   flex-grown, non-flex parent). Make .fig a flex column on these eight slides
   so a shorter figure centres in the space .stage grows to fill. */
.reveal .slides section[data-slide-id="title"] .fig,
.reveal .slides section[data-slide-id="context-is-constructed"] .fig,
.reveal .slides section[data-slide-id="may-and-should"] .fig,
.reveal .slides section[data-slide-id="lens-input-fills"] .fig,
.reveal .slides section[data-slide-id="recap"] .fig {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}
/* lens-render, lens-who-may and lens-one-call give .fig a second class
   (.render-fig / .nest-fig / .seq-fig) that already sets its own
   display/flex-direction; those rules apply directly on .fig for those three
   slides instead, so the blanket rule above deliberately excludes them. */

/* Minis render at ~30% scale now (canvas builder); keep headings clear of the
   top-right corner on the four mini-canvas slides. */
.reveal .slides section[data-slide-id="lens-input-fills"] h2,
.reveal .slides section[data-slide-id="lens-render"] h2,
.reveal .slides section[data-slide-id="lens-who-may"] h2,
.reveal .slides section[data-slide-id="lens-one-call"] h2,
.reveal .slides section[data-slide-id="lens-input-fills"] .eyebrow,
.reveal .slides section[data-slide-id="lens-render"] .eyebrow,
.reveal .slides section[data-slide-id="lens-who-may"] .eyebrow,
.reveal .slides section[data-slide-id="lens-one-call"] .eyebrow {
  max-width: 1220px;
}

/* =============================================================================
   1 · TITLE — title left (handled by the shared header/foot), the bare loop
   drawn large as the stage figure.
   ========================================================================== */
.reveal .hero-loop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: 100%;
  height: 100%;
}
.reveal .hero-loop-row { display: flex; align-items: center; gap: 44px; }
.reveal .hero-node {
  padding: 52px 72px;
  background: color-mix(in oklab, var(--teal) 9%, var(--bg-2));
  border: 2px solid var(--teal);
  border-radius: 10px;
  color: var(--text-bright);
  font: 500 46px/1.1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.reveal .hero-arrow { color: var(--text-faint); font: 400 52px/1 var(--mono); }
.reveal .hero-return {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--text-dim);
  font: italic 400 30px/1.3 var(--serif);
}
.reveal .hero-return-line { width: 460px; height: 2px; background: var(--rule-strong); position: relative; }
.reveal .hero-return-line::after {
  content: "";
  position: absolute; left: -1px; top: -5px;
  border: 6px solid transparent; border-right-color: var(--rule-strong);
}

/* =============================================================================
   4 · CONTEXT IS CONSTRUCTED — two full windows: piled up vs built.
   ========================================================================== */
.reveal .ctx-windows { display: flex; gap: 32px; width: 100%; height: 100%; }
.reveal .ctx-win {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  background: var(--bg-2);
  border: 2px solid var(--rule-strong);
  border-radius: 8px;
  overflow: hidden;
}
.reveal .ctx-win-pile { border-color: var(--coral); }
.reveal .ctx-win-build { border-color: var(--teal); }
.reveal .ctx-win-label {
  margin: 0 0 14px;
  color: var(--text-bright);
  font: 500 26px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reveal .ctx-win-pile .ctx-win-label { color: var(--coral); }
.reveal .ctx-win-build .ctx-win-label { color: var(--teal); }
.reveal .ctx-overflow {
  margin: 0 0 8px;
  color: var(--text-faint);
  font: 400 26px/1 var(--mono);
  letter-spacing: .3em;
}
.reveal .ctx-strips { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.reveal .ctx-strip {
  padding: 10px 14px;
  background: var(--bg);
  border-left: 3px solid var(--rule-strong);
  color: var(--text);
  font: 400 26px/1.2 var(--mono);
}
.reveal .ctx-strip.is-oldest { color: var(--text-faint); opacity: .5; }
.reveal .ctx-shelves { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.reveal .ctx-shelf {
  padding: 8px 15px;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  font: 500 26px/1.2 var(--mono);
}
.reveal .ctx-fn {
  margin: 0 0 14px;
  color: var(--text-bright);
  font: 500 26px/1.3 var(--mono);
}
.reveal .ctx-quote {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 20px;
}
/* canvas.css's `.fig .quote .attrib { font-size: 18px }` (0,4,0), meant for
   canvas-adjacent quotes, now also reaches any quote nested in .fig — every
   quote here, since build plan §7 requires it. Out-specify per quote wrapper,
   the same fix sierra.css and contract.css already made for their own. */
.reveal .fig .ctx-quote .quote .attrib,
.reveal .fig .nest-side .quote .attrib,
.reveal .fig .seq-quote .attrib { font-size: 20px; }
/* canvas.css's `.fig .quote { position: absolute; left:0; bottom:0; width:
   620px }` (0,3,0) is meant to pin a quote inside a full-size canvas slide's
   .fig; it also reaches any quote nested in .fig here, pulling it out of
   flow and on top of whatever sits where the canvas slide would have had
   empty space (visible as the quote overlapping seq-channels on slide 20).
   Put position and box geometry back to normal flow, out-specified per
   wrapper the same way the .attrib fix above is. */
.reveal .fig .ctx-quote .quote,
.reveal .fig .nest-side .quote,
.reveal .fig .quote.seq-quote {
  position: static;
  z-index: auto;
  left: auto;
  bottom: auto;
  width: auto;
  margin: 0;
  padding-left: 28px;
}

/* =============================================================================
   5 · MAY AND SHOULD — candidate -> may? (violet) -> should it now? (gold) ->
   input; one policy shown four ways as labelled lanes with a small glyph.
   ========================================================================== */
.reveal .gate-fig { display: flex; flex-direction: column; justify-content: center; gap: 72px; width: 100%; height: 100%; }
.reveal .gate-flow { display: flex; align-items: stretch; gap: 22px; }
.reveal .gate-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 46px 28px;
  background: var(--bg-2);
  border: 2px solid var(--rule-strong);
  border-radius: 8px;
}
.reveal .gate-may { border-color: var(--violet); background: var(--violet-soft); }
.reveal .gate-should { border-color: var(--gold); background: var(--gold-soft); }
.reveal .gate-label { margin: 0; color: var(--text-bright); font: 400 42px/1.15 var(--serif); }
.reveal .gate-may .gate-label { color: var(--violet); }
.reveal .gate-should .gate-label { color: var(--gold); }
.reveal .gate-role {
  margin: 10px 0 0;
  color: var(--text-dim);
  font: 500 26px/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reveal .gate-candidate, .reveal .gate-input {
  color: var(--text-bright);
  font: 500 26px/1.2 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.reveal .gate-arrow { display: flex; align-items: center; color: var(--text-faint); font: 400 36px/1 var(--mono); }
.reveal .gate-lanes { display: flex; flex-direction: column; gap: 10px; }
.reveal .gate-lanes-label {
  margin: 0 0 6px;
  color: var(--text-faint);
  font: 500 26px/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reveal .gate-lane-row { display: flex; gap: 14px; }
.reveal .gate-lane {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--bg-2);
  border: 1.5px solid var(--teal);
  border-radius: 6px;
}
.reveal .gate-lane-glyph {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 2px solid var(--teal);
}
.reveal .gate-lane-glyph.g-doc { border-radius: 2px; }
.reveal .gate-lane-glyph.g-skill { border-radius: 50%; }
.reveal .gate-lane-glyph.g-tool { border-radius: 2px; transform: rotate(45deg); }
.reveal .gate-lane-glyph.g-para { border-radius: 2px; border-style: dashed; }
.reveal .gate-lane p { margin: 0; max-width: none; color: var(--text); font: 500 26px/1.2 var(--sans); }

/* =============================================================================
   11 · LENS 1 · INPUT FILLS — a full-height context window, strips stacking,
   compaction folded with a fold arrow. Mini canvas div is untouched.
   ========================================================================== */
.reveal .lensw-wrap { display: flex; gap: 40px; width: 100%; height: 100%; }
.reveal .lensw-def {
  flex: 0 0 340px;
  align-self: flex-start;
  padding: 20px 24px;
  background: var(--bg-2);
  border-top: 3px solid var(--gold);
}
.reveal .lensw-def h3 { margin: 0 0 10px; max-width: none; font-size: 28px; color: var(--text-bright); }
.reveal .lensw-def p { margin: 0; max-width: none; color: var(--text-dim); font-size: 26px; line-height: 1.32; }
.reveal .lensw {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--bg-2);
  border: 2px solid var(--rule-strong);
  border-radius: 8px;
}
.reveal .lensw-strip {
  padding: 16px 20px;
  background: var(--bg);
  border-left: 3px solid var(--gold);
  color: var(--text);
  font: 400 26px/1.25 var(--sans);
}
.reveal .lensw-strip.lensw-compact {
  display: flex;
  align-items: center;
  gap: 14px;
  border-left-style: dashed;
  border-left-color: var(--rule-strong);
  color: var(--text-faint);
  font-style: italic;
  font-family: var(--serif);
}
.reveal .fold-arrow { flex: 0 0 auto; color: var(--text-faint); font: 400 30px/1 var(--mono); transform: scaleX(-1); }

/* =============================================================================
   15 · LENS 2 · RENDER — durable inputs -> rule -> agent function -> rebuilt
   outputs, then a real code excerpt from worker-rooms-2.
   ========================================================================== */
.reveal .render-fig { display: flex; flex-direction: column; gap: 18px; width: 100%; height: 100%; }
.reveal .render-def {
  padding: 12px 20px;
  background: var(--bg-2);
  border-top: 3px solid var(--gold);
}
.reveal .render-def h3 { margin: 0 0 4px; max-width: none; font-size: 26px; color: var(--text-bright); }
.reveal .render-def p { margin: 0; max-width: none; color: var(--text-dim); font-size: 26px; line-height: 1.28; }
.reveal .render-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.reveal .render-chip {
  padding: 8px 16px;
  background: var(--bg-2);
  border: 1.5px solid var(--teal);
  border-radius: 5px;
  color: var(--text-bright);
  font: 500 26px/1.2 var(--sans);
}
.reveal .render-chip.render-chip-out { border-color: var(--gold); }
.reveal .render-fn {
  padding: 12px 20px;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold);
  border-radius: 5px;
  color: var(--gold);
  font: 500 26px/1.2 var(--mono);
  letter-spacing: .02em;
}
.reveal .render-arrow { color: var(--text-faint); font: 400 26px/1 var(--mono); }
.reveal .render-rule { display: flex; align-items: center; gap: 16px; }
.reveal .render-rule-line { flex: 1; height: 1px; background: var(--rule-strong); }
.reveal .render-rule-tag {
  font: 500 26px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.reveal .render-rule-tag.durable { color: var(--teal); }
.reveal .render-rule-tag.rebuilt { color: var(--gold); }
.reveal .render-code {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 18px;
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
}
.reveal .render-code-file {
  margin: 0 0 4px;
  max-width: none;
  color: var(--text-faint);
  font: 500 20px/1.3 var(--mono);
  letter-spacing: .04em;
}
.reveal .render-code pre { margin: 0; overflow: auto; flex: 1; min-height: 0; tab-size: 2; font: 400 20px/1.16 var(--mono); }
.reveal .render-code code { color: var(--text); font: 400 20px/1.16 var(--mono); white-space: pre; }

/* =============================================================================
   17 · RECAP — four canvas snapshots in a row (final state of each phase),
   captioned with what moved out and its walls as chips.
   ========================================================================== */
.reveal .recap-snaps { display: flex; gap: 24px; width: 100%; height: 100%; align-items: stretch; }
.reveal .recap-snap { flex: 1; display: flex; flex-direction: column; }
.reveal .recap-window {
  margin-bottom: 8px;
  color: var(--text-faint);
  font: 500 26px/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reveal .recap-snap-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 660;
  background: var(--bg-2);
  border: 1.5px solid var(--rule-strong);
  border-radius: 6px;
  overflow: hidden;
}
.reveal .recap-snap-frame .cv-snap {
  position: absolute;
  top: 0; left: 0;
  width: 1600px;
  height: 660px;
  transform-origin: top left;
  transform: scale(var(--snap-scale, .225));
}
.reveal .recap-snap-caption {
  margin: 14px 0 0;
  max-width: none;
  color: var(--text-bright);
  font: 500 26px/1.28 var(--sans);
}
.reveal .recap-snap-walls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* =============================================================================
   19 · LENS 4 · WHO MAY — nested violet outlines filling the stage: org ceiling
   > Alice's permissions > Alice's grant. Blocked items as struck chips inside
   the ring that blocks them.
   ========================================================================== */
.reveal .nest-fig { display: flex; gap: 36px; width: 100%; height: 100%; }
.reveal .nest { position: relative; flex: 1; display: flex; flex-direction: column; }
.reveal .nest-ring { position: relative; flex: 1; border: 2px solid var(--violet); border-radius: 14px; padding: 26px; }
.reveal .nest-org { background: var(--violet-soft); }
.reveal .nest-alice { background: color-mix(in oklab, var(--violet) 16%, var(--bg-2)); }
.reveal .nest-grant {
  flex: 0 0 auto;
  min-height: 110px;
  background: color-mix(in oklab, var(--violet) 30%, var(--bg-2));
}
.reveal .nest-label {
  margin: 0;
  color: var(--text-bright);
  font: 500 26px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reveal .nest-blocked {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 13px;
  color: var(--coral);
  font: 500 26px/1.2 var(--mono);
  letter-spacing: .02em;
  text-decoration: line-through;
  border: 1px solid var(--coral);
  border-radius: 3px;
  background: var(--coral-soft);
}
.reveal .nest-side { flex: 0 0 420px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.reveal .nest-side .quote p { font-size: 34px; }
.reveal .nest-status {
  align-self: flex-start;
  padding: 6px 14px;
  color: var(--gold);
  font: 500 26px/1.3 var(--mono);
  letter-spacing: .04em;
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
}
.reveal .nest-callout {
  margin: 0;
  color: var(--text-bright);
  font: italic 400 28px/1.3 var(--serif);
}

/* =============================================================================
   20 · LENS 3 · ONE CALL — check -> run -> prepare/approve/execute -> shape ->
   two channels back. A violet rail runs along the top and stops at the
   gateway. Built items are solid, designed items dashed (report §7.3).
   ========================================================================== */
.reveal .seq-fig { display: flex; flex-direction: column; justify-content: center; gap: 26px; width: 100%; height: 100%; }
.reveal .seq-rail { position: relative; display: flex; align-items: center; height: 30px; }
.reveal .seq-rail-line { flex: 1; height: 3px; background: var(--violet); margin: 0 14px; }
.reveal .seq-rail-label {
  color: var(--violet);
  font: 500 26px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reveal .seq-rail-stop { width: 12px; height: 12px; margin-left: 8px; background: var(--violet); border-radius: 50%; }
.reveal .seq-steps { display: flex; align-items: stretch; gap: 14px; }
.reveal .seq-step {
  flex: 1;
  padding: 20px 22px;
  background: var(--bg-2);
  border: 1.5px solid var(--rule-strong);
  border-radius: 6px;
}
.reveal .seq-step.is-built { border-color: var(--teal); }
.reveal .seq-step.is-designed { border-style: dashed; border-color: var(--gold); }
.reveal .seq-step-n { margin: 0; color: var(--text-faint); font: 500 26px/1 var(--mono); }
.reveal .seq-step-t {
  margin: 10px 0 8px;
  max-width: none;
  color: var(--text-bright);
  font: 400 28px/1.15 var(--serif);
}
.reveal .seq-step-d { margin: 0; max-width: none; color: var(--text-dim); font-size: 26px; line-height: 1.24; }
.reveal .seq-arrow { display: flex; align-items: center; color: var(--text-faint); font: 400 28px/1 var(--mono); }
.reveal .seq-legend {
  margin: 0;
  max-width: none;
  color: var(--text-faint);
  font: 500 26px/1.3 var(--mono);
  letter-spacing: .04em;
}
.reveal .seq-bottom { display: flex; align-items: center; gap: 60px; }
.reveal .seq-legend-col { display: flex; flex-direction: column; gap: 18px; flex: 0 0 340px; }
.reveal .seq-channels { display: flex; flex-direction: column; gap: 14px; }
.reveal .seq-channel { display: flex; align-items: center; gap: 16px; }
.reveal .seq-channel-line { display: inline-block; width: 64px; height: 0; border-top: 3px solid var(--gold); }
.reveal .seq-channel-solid { border-top-style: solid; }
.reveal .seq-channel-dotted { border-top-style: dotted; }
.reveal .seq-channel p { margin: 0; max-width: none; color: var(--text); font: 500 26px/1.2 var(--sans); }
.reveal .seq-quote { max-width: 640px; }
.reveal .seq-quote .quote p { font-size: 30px; }

/* ---------------------------------------------------------------------------
   MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal .slides section[data-slide-id] * { transition: none !important; animation: none !important; }
}