/* ABOUTME: Canvas rendering styles for the gateway-centric-workers deck: node states, edges, walls, rails, */
/* ABOUTME: snapshots, pins and zones. Owned by the canvas builder (see .ai/analyses/03_build-plan.md). */

/* ---------------------------------------------------------------------------
   THE CANVAS: 1600 x 660 canvas units (storyboard §3), scaled by JS
   (canvas-view.js's fit()) to fill whatever box it sits in — the stage's
   .fig.grow for a live slide, the snapshot's own wrapper for a cv-snap.
   scale = min(containerWidth / 1600, containerHeight / 660), read from the
   --s custom property fit() sets on .cv itself (build plan §7.1.3).
   Every change on a live canvas is a Reveal `custom` fragment on the element
   itself: CSS reads the before-state (data-s, --x) until Reveal adds
   .visible, then the after-state (data-to, --x2). Nothing re-enters.
   --------------------------------------------------------------------------- */
.reveal .cv { position: relative; width: 100%; height: 100%; }
.reveal .cv-fig {
  position: absolute; top: 50%; left: 50%; width: 1600px; height: 660px;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center center;
}
.reveal .cv-fig > * { position: absolute; }

/* --- boxes, chips, strips, pins, captions, markers, role zones --- */
.reveal .cv-n {
  --cv-bd: rgba(232, 227, 217, .14); --cv-fill: var(--bg-2); --cv-ink: var(--text-dim); --cv-sub: var(--text-faint);
  --cv-dash: solid;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  box-sizing: border-box; z-index: 2; opacity: 1;
  border: 2px var(--cv-dash) var(--cv-bd); border-radius: 5px; background: var(--cv-fill);
  transition: left .7s cubic-bezier(.2, .7, .2, 1), top .7s cubic-bezier(.2, .7, .2, 1),
    width .7s cubic-bezier(.2, .7, .2, 1), height .7s cubic-bezier(.2, .7, .2, 1),
    border-color .45s ease, background-color .45s ease, opacity .45s ease;
}
.reveal .cv-n.visible { left: var(--x2, var(--x)); top: var(--y2, var(--y)); width: var(--w2, var(--w)); height: var(--h2, var(--h)); }

.reveal .cv-n[data-s="hide"]:not(.visible) { opacity: 0; }
.reveal .cv-n.fragment.visible[data-to="hide"] { opacity: 0; }
.reveal .cv-n[data-s="role"]:not(.visible), .reveal .cv-n.visible[data-to="role"] {
  --cv-bd: rgba(232, 227, 217, .22); --cv-fill: transparent; --cv-dash: dashed;
}
.reveal .cv-n[data-s="out"]:not(.visible), .reveal .cv-n.visible[data-to="out"] {
  --cv-bd: rgba(232, 227, 217, .26); --cv-fill: var(--bg); --cv-ink: var(--text-faint);
}
.reveal .cv-n[data-s="new"]:not(.visible), .reveal .cv-n.visible[data-to="new"] {
  --cv-bd: var(--gold); --cv-fill: color-mix(in oklab, var(--gold) 16%, var(--bg-2)); --cv-ink: var(--gold); --cv-sub: var(--text);
}
.reveal .cv-n[data-s="have"]:not(.visible), .reveal .cv-n.visible[data-to="have"] {
  --cv-bd: var(--teal); --cv-fill: color-mix(in oklab, var(--teal) 10%, var(--bg-2)); --cv-ink: var(--text-bright); --cv-sub: var(--text-dim);
}
.reveal .cv-n[data-s="designNew"]:not(.visible), .reveal .cv-n.visible[data-to="designNew"] {
  --cv-bd: var(--gold); --cv-fill: var(--bg-2); --cv-ink: var(--gold); --cv-sub: var(--text); --cv-dash: dashed;
}
.reveal .cv-n[data-s="design"]:not(.visible), .reveal .cv-n.visible[data-to="design"] {
  --cv-bd: var(--teal); --cv-fill: var(--bg-2); --cv-ink: var(--text-bright); --cv-sub: var(--text-dim); --cv-dash: dashed;
}
.reveal .cv-n[data-s="auth"]:not(.visible), .reveal .cv-n.visible[data-to="auth"] {
  --cv-bd: var(--violet); --cv-fill: var(--violet-soft); --cv-ink: var(--violet); --cv-sub: var(--text);
}
.reveal .cv-n[data-s="retired"]:not(.visible) {
  --cv-bd: rgba(232, 227, 217, .16); --cv-fill: transparent; --cv-ink: var(--text-faint); --cv-sub: var(--text-faint);
  --cv-dash: dashed; opacity: .3;
}
.reveal .cv-n.visible[data-to="retired"] {
  --cv-bd: rgba(232, 227, 217, .16); --cv-fill: transparent; --cv-ink: var(--text-faint); --cv-sub: var(--text-faint);
  --cv-dash: dashed;
}
.reveal .cv-n.fragment.visible[data-to="retired"] { opacity: .3; }
.reveal .cv-n[data-s="retired"] .cv-lbl b, .reveal .cv-n.visible[data-to="retired"] .cv-lbl b { text-decoration: line-through; }

/* body tier (no .chip): INPUT/MODEL/OUTPUT, the rings, the gateway and its compartments, the
   shelf, the role zones — every canvas label must clear 26px on screen (build plan §7.1.4). */
.reveal .cv-lbl {
  position: absolute; inset: 0; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 4px 14px;
}
.reveal .cv-lbl.fragment { transition: opacity .4s ease; }
.reveal .cv-lbl b { font: 600 34px/1.1 var(--sans); color: var(--cv-ink); transition: color .45s ease; }
.reveal .cv-lbl span { font: 400 27px/1.2 var(--sans); color: var(--cv-sub); transition: color .45s ease; }
.reveal .cv-lbl.is-role { justify-content: center; align-items: center; text-align: center; padding: 4px 18px; }
.reveal .cv-lbl.is-role b { font: italic 400 32px/1.2 var(--serif); color: var(--text-dim); text-decoration: none; }

/* chip tier (.chip, the audit's own metadata selector): kit/world/credential chips, ring labels,
   captions, markers, v1 pins, strips — short, label-only text at the 20px floor. */
.reveal .cv-n.chip .cv-lbl b { font: 600 26px/1.1 var(--mono); letter-spacing: .01em; }
.reveal .cv-n.chip .cv-lbl span { font: 400 21px/1.2 var(--sans); }

/* strips inside INPUT: one compact row each, 2–3 words */
.reveal .cv-strip .cv-lbl { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 0 14px; }
.reveal .cv-strip .cv-lbl b { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* pins: v1-primitives' five named pins, and prove-first's ten numbered circles */
.reveal .cv-pin { z-index: 5; border-radius: 5px; }
.reveal .cv-pin .cv-lbl { align-items: center; justify-content: center; padding: 4px 10px; }
.reveal .cv-pin .cv-lbl b { font: 700 24px/1.05 var(--mono); text-align: center; }
.reveal .cv-pin-n { z-index: 6; border-radius: 50%; --cv-fill: var(--gold); --cv-bd: var(--gold); }
.reveal .cv-pin-n .cv-lbl { padding: 0; }
.reveal .cv-pin-n .cv-lbl b { font: 700 26px/1 var(--mono); color: var(--bg); text-align: center; }

/* rings: outline only, no fill. ring-worker's name comes from the lbl-* chips inside it; ring-session
   carries its own small top-left caption (Remy: Phase 1 names no product, only "one session"). */
.reveal .cv-n[data-id="ring-worker"], .reveal .cv-n[data-id="ring-session"] {
  z-index: 0; --cv-fill: transparent; border-radius: 12px;
}
.reveal .cv-n[data-id="ring-session"][data-s="new"]:not(.visible), .reveal .cv-n[data-id="ring-session"].visible[data-to="new"],
.reveal .cv-n[data-id="ring-session"][data-s="have"]:not(.visible), .reveal .cv-n[data-id="ring-session"].visible[data-to="have"] {
  --cv-bd: rgba(232, 227, 217, .32); --cv-dash: dashed;
}
.reveal .cv-n[data-id="ring-worker"] .cv-lbl { display: none; }
.reveal .cv-n[data-id="ring-session"] .cv-lbl {
  inset: auto auto auto 0; top: -17px; left: 16px; width: auto; padding: 0 10px; background: var(--bg);
  flex-direction: row; align-items: baseline; gap: 8px;
}
.reveal .cv-n[data-id="ring-session"] .cv-lbl b { font-size: 22px; letter-spacing: .1em; text-transform: uppercase; }
.reveal .cv-n[data-id="ring-session"] .cv-lbl span { font-size: 20px; color: var(--text-faint); }

/* naked-canvas outlines: hairline boxes only, no text of their own (the z-* role labels carry it,
   so nothing overprints — Remy's review, 2026-09-25) */
.reveal .cv-n[data-id="shelf-frame"] .cv-lbl, .reveal .cv-n[data-id="band-auth"] .cv-lbl { display: none; }

/* captions (slide 2 only) and markers (slide 3 only): quiet, no border */
.reveal .cv-n[data-id^="cap-"] { --cv-fill: transparent; border-color: transparent; z-index: 3; }
.reveal .cv-n[data-id^="cap-"] .cv-lbl { justify-content: center; text-align: center; padding: 6px 4px; }
.reveal .cv-n[data-id^="cap-"] .cv-lbl b { font: italic 400 25px/1.28 var(--serif); color: var(--text-dim); text-decoration: none; text-transform: none; letter-spacing: 0; }

.reveal .cv-n[data-id="q-context"], .reveal .cv-n[data-id="q-authority"] { --cv-fill: var(--bg); z-index: 4; border-radius: 50%; }
.reveal .cv-n[data-id="q-context"] .cv-lbl, .reveal .cv-n[data-id="q-authority"] .cv-lbl { align-items: center; justify-content: center; padding: 0; }
.reveal .cv-n[data-id="q-context"] .cv-lbl b, .reveal .cv-n[data-id="q-authority"] .cv-lbl b { font: 700 26px/1 var(--mono); }
.reveal .cv-n[data-id="q-context"] { --cv-bd: var(--gold); }
.reveal .cv-n[data-id="q-context"] .cv-lbl b { color: var(--gold); }
.reveal .cv-n[data-id="q-authority"] { --cv-bd: var(--violet); }
.reveal .cv-n[data-id="q-authority"] .cv-lbl b { color: var(--violet); }

/* --- walls: coral mono chips; the one left open is dashed --- */
.reveal .cv-wall {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h); box-sizing: border-box; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  border: 2px solid var(--coral); border-radius: 4px; background: var(--bg);
  opacity: 1; transition: opacity .45s ease, border-color .45s ease;
}
.reveal .cv-wall[data-s="hide"]:not(.visible), .reveal .cv-wall.visible[data-to="hide"] { opacity: 0; }
.reveal .cv-wall[data-s="open"]:not(.visible), .reveal .cv-wall.visible[data-to="open"] { border-style: dashed; }
.reveal .cv-wall b {
  font: 700 26px/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--coral);
  text-align: center; transition: opacity .4s ease;
}
.reveal .cv-wall b.fragment { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* --- edges: borders and CSS-triangle arrowheads only, no SVG, no curves --- */
.reveal .cv-e {
  --le: rgba(232, 227, 217, .34); z-index: 1; pointer-events: none; opacity: 1;
  transition: opacity .45s ease, border-color .45s ease;
}
.reveal .cv-e .seg { position: absolute; border: 0 solid var(--le); transition: border-color .45s ease; }
.reveal .cv-e .seg.h { border-top-width: 3px; }
.reveal .cv-e .seg.v { border-left-width: 3px; }
.reveal .cv-e.is-dotted .seg.h { border-top-style: dotted; border-top-width: 4px; }
.reveal .cv-e.is-dotted .seg.v { border-left-style: dotted; border-left-width: 4px; }
.reveal .cv-e .tip { position: absolute; width: 0; height: 0; transition: border-color .45s ease; }
.reveal .cv-e .tip.r { transform: translate(-10px, -7px); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--le); }
.reveal .cv-e .tip.l { transform: translate(0, -7px); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 10px solid var(--le); }
.reveal .cv-e .tip.d { transform: translate(-7px, -10px); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--le); }
.reveal .cv-e .tip.u { transform: translate(-7px, 0); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid var(--le); }
.reveal .cv-e b.chip {
  position: absolute; transform: translate(-50%, -50%); padding: 3px 14px; background: var(--bg); white-space: nowrap;
  font: 700 26px/1.1 var(--mono); letter-spacing: .03em; color: var(--le); transition: color .45s ease;
}
.reveal .cv-e[data-s="hide"]:not(.visible), .reveal .cv-e.visible[data-to="hide"] { opacity: 0; }
.reveal .cv-e[data-s="new"]:not(.visible), .reveal .cv-e.visible[data-to="new"] { --le: var(--gold); }
.reveal .cv-e[data-s="have"]:not(.visible), .reveal .cv-e.visible[data-to="have"] { --le: var(--teal); }
.reveal .cv-e[data-s="auth"]:not(.visible), .reveal .cv-e.visible[data-to="auth"] { --le: var(--violet); }

/* the violet authority rail: a double line, never anything else is drawn this way */
.reveal .cv-e.is-rail .seg.h { border-top: 0; border-bottom: 4px double var(--violet); height: 4px; }
.reveal .cv-e.is-rail .seg.v { border-left: 0; border-right: 4px double var(--violet); width: 4px; }
.reveal .cv-e.is-rail .tip.r { border-left-color: var(--violet); }
.reveal .cv-e.is-rail .tip.l { border-right-color: var(--violet); }
.reveal .cv-e.is-rail .tip.d { border-top-color: var(--violet); }
.reveal .cv-e.is-rail .tip.u { border-bottom-color: var(--violet); }
.reveal .cv-e.is-rail b.chip { color: var(--violet); }

/* ---------------------------------------------------------------------------
   MINI CANVASES (lens slides 11, 15, 19, 20): thumbnails, not text — shapes
   and colour only (build plan §7.1.5). ~30% scale, top-right corner.
   --------------------------------------------------------------------------- */
.reveal .cv-mini { transform: scale(.3) !important; }
.reveal .cv-mini .cv-lbl, .reveal .cv-mini .cv-wall b, .reveal .cv-mini .cv-e b.chip { display: none; }

/* ---------------------------------------------------------------------------
   SNAPSHOTS (build plan §7.3): a static render of one canvas slide's final
   state, text hidden like a mini, plus optional numbered pins and shaded
   zones drawn on top in the same 1600x660 space.
   --------------------------------------------------------------------------- */
.reveal .cv-snap .cv-lbl, .reveal .cv-snap .cv-wall b, .reveal .cv-snap .cv-e b.chip { display: none; }
.reveal .cv-snap .cv-n, .reveal .cv-snap .cv-wall, .reveal .cv-snap .cv-e { transition: none; }

/* Pins live inside .cv-fig (the element --s scales), positioned at their target's raw canvas-unit
   centre, so they land exactly on it at any snapshot size. Each pin then applies the inverse of
   --s on itself, cancelling the parent's scale back out, so the circle and its number hold a fixed
   on-screen size (>= 48px circle, >= 26px number) no matter how small the snapshot is scaled to. */
.reveal .cv-snap-pin {
  position: absolute; z-index: 10; width: 48px; height: 48px;
  transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1)));
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--bg);
  display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .4s ease;
}
.reveal .cv-snap-pin.fragment:not(.visible) { opacity: 0; }
.reveal .cv-snap-pin b { font: 700 26px/1 var(--mono); color: var(--bg); }

.reveal .cv-snap-zone {
  position: absolute; z-index: 8; box-sizing: border-box; border: 2px dashed var(--gold);
  background: color-mix(in oklab, var(--gold) 10%, transparent); border-radius: 8px;
}
.reveal .cv-snap-zone b {
  position: absolute; left: 14px; top: -34px; transform-origin: top left; transform: scale(calc(1 / var(--s, 1)));
  font: 700 26px/1 var(--mono); letter-spacing: .04em; color: var(--gold); white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Definitions and quotes live in the foot (below, `.foot .ce-def`/`.foot .quote`),
   never overlaid on the canvas itself: the canvas is dense enough at every phase
   that no corner is reliably empty across all its states.
   --------------------------------------------------------------------------- */
/* naked-canvas's legend sits in the foot (build plan §7.1.3), one compact row, so nothing on the
   canvas itself ever competes with a role zone's own centred label for room. */
.reveal .foot .ce-legend { flex-wrap: wrap; gap: 8px 22px; }
.reveal .foot .ce-legend span { font-size: 26px; }
.reveal .foot .cv-legend-note { color: var(--text-faint); font: 500 26px/1.3 var(--mono); }

/* ---------------------------------------------------------------------------
   FOOT WITH A QUESTION BAND (build plan §7.1.3): CAN/CAN'T sits as one
   compact row above the landing line, instead of the foot's default
   landing-left/source-right single row.
   <div class="foot">
     <div class="qband">…</div>
     <div class="foot-row"><p class="landing">…</p><p class="src">…</p></div>
   </div>
   --------------------------------------------------------------------------- */
.reveal .foot:has(.qband), .reveal .foot:has(.brief-mini), .reveal .foot:has(.ce-def),
.reveal .foot:has(.quote), .reveal .foot:has(.prove-steps) {
  flex-direction: column; align-items: stretch; gap: 14px;
}
.reveal .foot:has(.qband) .foot-row, .reveal .foot:has(.brief-mini) .foot-row,
.reveal .foot:has(.ce-def) .foot-row, .reveal .foot:has(.quote) .foot-row,
.reveal .foot:has(.prove-steps) .foot-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.reveal .foot .qband { display: grid; grid-template-columns: 1fr 1fr; }
.reveal .foot .qband .can, .reveal .foot .qband .cant { padding: 10px 18px 12px; }
.reveal .foot .qband p { font-size: 26px; }

/* a definition or quote in the foot: one compact row, guaranteed clear of the canvas above it */
.reveal .foot .ce-def { display: flex; align-items: baseline; gap: 14px; padding: 0; background: none; border-top: none; }
.reveal .foot .ce-def h3 { flex: 0 0 auto; margin: 0; max-width: none; font-size: 26px; color: var(--gold); }
.reveal .foot .ce-def p { flex: 1 1 auto; margin: 0; max-width: none; font-size: 26px; line-height: 1.3; }
.reveal .foot .quote { margin: 0; padding-left: 20px; }
.reveal .foot .quote p { font-size: 26px; line-height: 1.28; }
.reveal .foot .quote .attrib { font-size: 20px; }

/* ---------------------------------------------------------------------------
   THE MONDAY-BRIEF CARD (slides 3, 16, 22): one illustrative worked example,
   scored three times, as one compact row per requirement.
   --------------------------------------------------------------------------- */
.reveal .brief { width: 100%; }
.reveal .fig .brief {
  position: absolute; z-index: 20; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 1240px; padding: 16px 26px; background: var(--bg-2); border-top: 3px solid var(--gold);
}
.reveal .fig .brief .illus { margin-bottom: 6px; }
.reveal .brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.reveal .foot .prove-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; width: 100%; }
.reveal .foot .prove-steps .card { flex: 1 1 0; padding: 10px 16px; }
.reveal .foot .prove-steps .card h3 { font-size: 26px; margin: 0 0 4px; color: var(--gold); }
.reveal .foot .prove-steps .card p { font-size: 26px; line-height: 1.25; }
.reveal .brief-row {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; align-items: baseline; padding: 4px 0;
}
.reveal .brief-row b { font: 600 26px/1 var(--mono); color: var(--rule-strong); }
.reveal .brief-row.is-met b { color: var(--teal); }
.reveal .brief-row p { max-width: none; margin: 0; font-size: 26px; line-height: 1.3; color: var(--text); }
.reveal .brief-row.is-met p { color: var(--text-bright); }

/* compact variant for the foot (slide 22): one row of short checked phrases */
.reveal .foot .brief-mini { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.reveal .foot .brief-mini .illus { flex: 0 0 100%; margin-bottom: 4px; }
.reveal .foot .brief-mini span { display: inline-flex; align-items: baseline; gap: 8px; font-size: 26px; color: var(--text-bright); }
.reveal .foot .brief-mini b { color: var(--teal); font: 600 26px/1 var(--mono); }