/* ABOUTME: Rendering styles for the backbone diagram: element states, label tiers, edges, walls, captions, */
/* ABOUTME: snapshots, highlight zones and mini thumbnails. Every class here carries the bb- (backbone) prefix. */

/* ---------------------------------------------------------------------------
   THE CANVAS: 1600 x 720 canvas units, scaled by loop-view.js's fit() to fill
   its container: --s = min(width / 1600, height / 720).
   Every change on a live backbone slide is a Reveal `custom` fragment on the
   element itself: CSS reads the before-state (data-s) until Reveal adds
   .visible, then the after-state (data-to). Nothing moves; nothing re-enters.
   --------------------------------------------------------------------------- */
.reveal .bb-cv { position: relative; width: 100%; height: 100%; overflow: hidden; }
.reveal .bb-fig {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--s, 1)) translate(var(--dx, 0px), var(--dy, 0px));
  transform-origin: center center;
  transition: transform 1.1s cubic-bezier(.3, .6, .2, 1);
}
/* The figure box is invisible scaffolding (it is larger than the frame whenever the camera zooms in);
   its children opt back into visibility, and hidden elements are visibility:hidden, not just transparent. */
.reveal .bb-fig { visibility: hidden; }
.reveal .bb-fig > .bb-n, .reveal .bb-fig > .bb-wall, .reveal .bb-fig > .bb-e, .reveal .bb-fig > .bb-zone { visibility: visible; }
/* The camera's starting frame is set with no transition, so only the pull-back animates. */
.reveal .bb-still .bb-fig { transition: none; }
.reveal .bb-fig > .bb-n, .reveal .bb-fig > .bb-wall, .reveal .bb-fig > .bb-e,
.reveal .bb-fig > .bb-zone { position: absolute; }

/* --- boxes, strips, posts, captions --- */
.reveal .bb-n {
  --bb-bd: rgba(232, 227, 217, .16); --bb-fill: var(--bg-2); --bb-ink: var(--text-dim); --bb-sub: var(--text-faint);
  --bb-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(--bb-dash) var(--bb-bd); border-radius: 6px; background: var(--bb-fill);
  transition: border-color .45s ease, background-color .45s ease, opacity .45s ease, visibility .45s;
}
.reveal .bb-n[data-s="hide"]:not(.visible), .reveal .bb-n.fragment.visible[data-to="hide"] { opacity: 0; visibility: hidden; }

.reveal .bb-n[data-s="new"]:not(.visible), .reveal .bb-n.visible[data-to="new"] {
  --bb-bd: var(--gold); --bb-fill: color-mix(in oklab, var(--gold) 16%, var(--bg-2)); --bb-ink: var(--gold); --bb-sub: var(--text);
}
.reveal .bb-n[data-s="have"]:not(.visible), .reveal .bb-n.visible[data-to="have"] {
  --bb-bd: var(--teal); --bb-fill: color-mix(in oklab, var(--teal) 9%, var(--bg-2)); --bb-ink: var(--text-bright); --bb-sub: var(--text-dim);
}
.reveal .bb-n[data-s="designNew"]:not(.visible), .reveal .bb-n.visible[data-to="designNew"] {
  --bb-bd: var(--gold); --bb-fill: var(--bg-2); --bb-ink: var(--gold); --bb-sub: var(--text); --bb-dash: dashed;
}
.reveal .bb-n[data-s="design"]:not(.visible), .reveal .bb-n.visible[data-to="design"] {
  --bb-bd: var(--teal); --bb-fill: var(--bg-2); --bb-ink: var(--text-bright); --bb-sub: var(--text-dim); --bb-dash: dashed;
}
.reveal .bb-n[data-s="auth"]:not(.visible), .reveal .bb-n.visible[data-to="auth"] {
  --bb-bd: var(--violet); --bb-fill: color-mix(in oklab, var(--violet) 14%, var(--bg-2)); --bb-ink: var(--violet); --bb-sub: var(--text);
}
.reveal .bb-n[data-s="authDesign"]:not(.visible), .reveal .bb-n.visible[data-to="authDesign"] {
  --bb-bd: var(--violet); --bb-fill: var(--bg-2); --bb-ink: var(--violet); --bb-sub: var(--text); --bb-dash: dashed;
}
.reveal .bb-n[data-s="future"]:not(.visible), .reveal .bb-n.visible[data-to="future"] {
  --bb-bd: var(--coral); --bb-fill: var(--bg); --bb-ink: var(--coral); --bb-sub: var(--text-dim); --bb-dash: dashed;
}
.reveal .bb-n[data-s="retired"]:not(.visible), .reveal .bb-n.visible[data-to="retired"] {
  --bb-bd: rgba(232, 227, 217, .2); --bb-fill: transparent; --bb-ink: var(--text-faint); --bb-sub: var(--text-faint); --bb-dash: dashed;
}

/* Labels. Body tier (structural boxes): 34px name, 27px sub-label. */
.reveal .bb-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 .bb-lbl.fragment { transition: opacity .4s ease; }
.reveal .bb-t { font: 600 34px/1.1 var(--sans); color: var(--bb-ink); transition: color .45s ease; }
.reveal .bb-u { font: 400 27px/1.2 var(--sans); color: var(--bb-sub); transition: color .45s ease; }

/* Meta tier (.chip, the audit's metadata selector, 20px floor): 26px name, 21px sub-label. */
.reveal .bb-n.chip .bb-t { font: 600 26px/1.12 var(--mono); letter-spacing: .01em; }
.reveal .bb-n.chip .bb-u { font: 400 21px/1.22 var(--sans); }

/* Strips inside INPUT and posts inside the thread: name over a one-line sub-label. */
.reveal .bb-strip .bb-lbl, .reveal .bb-post .bb-lbl { gap: 2px; padding: 4px 14px; }
.reveal .bb-strip .bb-u, .reveal .bb-post .bb-u { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Containers: an outline with its name pinned to the top, never centred under its contents. */
.reveal .bb-n[data-id="in"], .reveal .bb-n[data-id="buzz"], .reveal .bb-n[data-id="rt"] { z-index: 0; }
.reveal .bb-n[data-id="in"] .bb-lbl, .reveal .bb-n[data-id="buzz"] .bb-lbl {
  inset: 0 0 auto 0; justify-content: flex-start; padding: 8px 14px;
}
.reveal .bb-n[data-id="in"] .bb-t { font-size: 28px; letter-spacing: .06em; }
.reveal .bb-n[data-id="buzz"] .bb-lbl { flex-direction: row; align-items: baseline; gap: 12px; }
.reveal .bb-n[data-id="rt"] { --bb-fill: transparent; border-radius: 12px; }
.reveal .bb-n[data-id="rt"][data-s="new"]:not(.visible), .reveal .bb-n[data-id="rt"].visible[data-to="new"] {
  --bb-fill: color-mix(in oklab, var(--gold) 5%, transparent);
}
.reveal .bb-n[data-id="rt"][data-s="have"]:not(.visible), .reveal .bb-n[data-id="rt"].visible[data-to="have"] {
  --bb-fill: color-mix(in oklab, var(--teal) 4%, transparent);
}
/* The runtime's name sits on a tab above its frame's top-right corner, clear of the delivery and name plate. */
.reveal .bb-n[data-id="rt"] .bb-lbl {
  inset: auto 0 auto auto; top: -38px; right: 12px; height: 36px; width: auto; padding: 0 12px;
  flex-direction: row; align-items: center; background: var(--bg);
}
.reveal .bb-n[data-id="rt"] .bb-t { font: 600 26px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.reveal .bb-n[data-id="rt"] .bb-u { display: none; }
.reveal .bb-n[data-id="w-edge"] .bb-lbl { padding: 4px 8px; }
/* tool runs and memory may wrap their sub-label onto a second line */
.reveal .bb-n[data-id="tool-run"] .bb-u, .reveal .bb-n[data-id="memory"] .bb-u { line-height: 1.12; }

/* The gateway band and its four Workers: name and role on one line. */
.reveal .bb-n[data-id="gw"] .bb-lbl, .reveal .bb-n[data-id="w-authority"] .bb-lbl {
  flex-direction: row; align-items: baseline; justify-content: center; gap: 18px;
}

/* One-slide captions (call numbers, the three questions): serif, no border. */
.reveal .bb-cap { --bb-fill: transparent; border-color: transparent; z-index: 4; }
.reveal .bb-cap .bb-lbl { justify-content: center; padding: 4px 8px; }
.reveal .bb-n.bb-cap .bb-t { font: italic 400 30px/1.15 var(--serif); letter-spacing: 0; }
.reveal .bb-n[data-id^="cap-call"] { --bb-fill: var(--bg); }
.reveal .bb-n[data-id^="q-"] .bb-lbl { align-items: flex-end; text-align: right; }

/* --- walls and open-question pins: coral mono chips; open ones are dashed --- */
.reveal .bb-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 12px;
  border: 2px solid var(--coral); border-radius: 4px; background: var(--bg);
  opacity: 1; transition: opacity .45s ease, visibility .45s;
}
.reveal .bb-wall[data-s="hide"]:not(.visible), .reveal .bb-wall.fragment.visible[data-to="hide"] { opacity: 0; visibility: hidden; }
.reveal .bb-wall[data-s="open"]:not(.visible), .reveal .bb-wall.visible[data-to="open"] { border-style: dashed; }
.reveal .bb-wall .bb-t {
  font: 700 24px/1.1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--coral);
  text-align: center; white-space: nowrap;
}
.reveal .bb-wall.bb-pin { justify-content: flex-start; }
.reveal .bb-wall.bb-pin .bb-t { font: 600 22px/1.1 var(--sans); letter-spacing: 0; text-transform: none; }

/* --- edges: borders and CSS-triangle arrowheads only --- */
.reveal .bb-e {
  --bb-le: rgba(232, 227, 217, .34); --bb-ls: solid; z-index: 1; pointer-events: none; opacity: 1;
  transition: opacity .45s ease, visibility .45s;
}
.reveal .bb-seg { position: absolute; border: 0 var(--bb-ls) var(--bb-le); transition: border-color .45s ease; }
.reveal .bb-seg.h { border-top-width: 3px; }
.reveal .bb-seg.v { border-left-width: 3px; }
.reveal .bb-tip { position: absolute; width: 0; height: 0; transition: border-color .45s ease; }
.reveal .bb-tip.r { transform: translate(-10px, -6px); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--bb-le); }
.reveal .bb-tip.l { transform: translate(0, -6px); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 11px solid var(--bb-le); }
.reveal .bb-tip.d { transform: translate(-6px, -11px); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid var(--bb-le); }
.reveal .bb-tip.u { transform: translate(-6px, 0); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid var(--bb-le); }
.reveal .bb-elbl {
  position: absolute; transform: translate(-50%, -50%); padding: 2px 12px; background: var(--bg); white-space: nowrap;
  font: 600 22px/1.1 var(--mono); color: var(--bb-le); transition: color .45s ease;
}
.reveal .bb-e[data-s="hide"]:not(.visible), .reveal .bb-e.fragment.visible[data-to="hide"] { opacity: 0; visibility: hidden; }
.reveal .bb-e[data-s="new"]:not(.visible), .reveal .bb-e.visible[data-to="new"] { --bb-le: var(--gold); }
.reveal .bb-e[data-s="have"]:not(.visible), .reveal .bb-e.visible[data-to="have"] { --bb-le: var(--teal); }
.reveal .bb-e[data-s="designNew"]:not(.visible), .reveal .bb-e.visible[data-to="designNew"] { --bb-le: var(--gold); --bb-ls: dashed; }
.reveal .bb-e[data-s="design"]:not(.visible), .reveal .bb-e.visible[data-to="design"] { --bb-le: var(--teal); --bb-ls: dashed; }
.reveal .bb-e[data-s="auth"]:not(.visible), .reveal .bb-e.visible[data-to="auth"] { --bb-le: var(--violet); }
.reveal .bb-e[data-s="authDesign"]:not(.visible), .reveal .bb-e.visible[data-to="authDesign"] { --bb-le: var(--violet); --bb-ls: dashed; }
.reveal .bb-e[data-s="future"]:not(.visible), .reveal .bb-e.visible[data-to="future"] { --bb-le: var(--coral); --bb-ls: dashed; }
.reveal .bb-e[data-s="retired"]:not(.visible), .reveal .bb-e.visible[data-to="retired"] { --bb-le: rgba(232, 227, 217, .2); --bb-ls: dashed; }
/* Dashed arrowheads would read as broken; they keep the line's colour but stay solid. */
.reveal .bb-e.is-rail .bb-seg.h { border-top-width: 5px; }
.reveal .bb-e.is-rail .bb-seg.v { border-left-width: 5px; }

/* ---------------------------------------------------------------------------
   SNAPSHOTS (lens slides): a static render of one backbone slide's final
   state, plus an optional gold dashed zone around the part being zoomed.
   A mini is a text-free thumbnail ("you are here"): shape and colour only.
   --------------------------------------------------------------------------- */
.reveal .bb-snap .bb-n, .reveal .bb-snap .bb-wall, .reveal .bb-snap .bb-e, .reveal .bb-snap .bb-fig { transition: none; }
.reveal .bb-zone {
  z-index: 8; box-sizing: border-box; border: 4px dashed var(--gold); border-radius: 12px;
  background: color-mix(in oklab, var(--gold) 8%, transparent);
}
.reveal .bb-snap.bb-mini .bb-lbl, .reveal .bb-snap.bb-mini .bb-wall .bb-t, .reveal .bb-snap.bb-mini .bb-elbl { display: none; }
.reveal .bb-snap.bb-mini .bb-zone { border-width: 10px; }