/* ABOUTME: Rendering styles for the backbone loop: node states, labels, name tags, edges, the text-free mini */
/* ABOUTME: and the drawn-as-a-plan variant. Every class here carries the lp- (loop) prefix. */

/* ---------------------------------------------------------------------------
   THE CANVAS: 1600 x 560 canvas units, scaled by loop-view.js's fit() to fill
   its container: --s = min(width / 1600, height / 560).
   Every change on a loop 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.

   Colour roles, held for the whole deck:
     gold  = lit: the part of the loop this slide is looking at
     teal  = on:  a part already covered, in place and working
     grey  = dim: a part not being looked at now
   --------------------------------------------------------------------------- */
.reveal .lp-cv { position: relative; width: 100%; height: 100%; overflow: hidden; }
.reveal .lp-fig {
  position: absolute; top: 50%; left: 50%; width: 1600px; height: 560px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: center center;
}
.reveal .lp-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* --- nodes --- */
.reveal .lp-n {
  --lp-bd: var(--teal); --lp-fill: color-mix(in oklab, var(--teal) 9%, var(--bg-2));
  --lp-ink: var(--text-bright); --lp-sub: var(--text-dim);
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  box-sizing: border-box; padding: 16px 34px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
  border: 2px solid var(--lp-bd); border-radius: 6px; background: var(--lp-fill);
  text-align: left; opacity: 1;
  transition: border-color .45s ease, background-color .45s ease, opacity .45s ease, visibility .45s;
}
.reveal .lp-n[data-s="hide"]:not(.visible), .reveal .lp-n.visible[data-to="hide"] { opacity: 0; visibility: hidden; }
.reveal .lp-n[data-s="dim"]:not(.visible), .reveal .lp-n.visible[data-to="dim"] {
  --lp-bd: var(--rule-strong); --lp-fill: var(--bg-2); --lp-ink: var(--text-dim); --lp-sub: var(--text-faint);
}
.reveal .lp-n[data-s="lit"]:not(.visible), .reveal .lp-n.visible[data-to="lit"] {
  --lp-bd: var(--gold); --lp-fill: color-mix(in oklab, var(--gold) 16%, var(--bg-2));
  --lp-ink: var(--text-bright); --lp-sub: var(--text);
}

/* Labels: a sentence, a line of examples, and the usual name as a chip. */
.reveal .lp-t { font: 600 40px/1.12 var(--sans); color: var(--lp-ink); transition: color .45s ease; }
.reveal .lp-u { font: 400 30px/1.2 var(--sans); color: var(--lp-sub); transition: color .45s ease; }
.reveal .lp-tag {
  position: absolute; bottom: 100%; left: -2px; margin-bottom: 4px; padding: 4px 14px;
  font: 600 28px/1.2 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bg); background: var(--lp-bd); border-radius: 3px;
  transition: background-color .45s ease;
}
/* A name tag and its line of examples arrive with their node's step, never before it. */
.reveal .lp-n.fragment:not(.visible) .lp-tag, .reveal .lp-n.fragment:not(.visible) .lp-u { opacity: 0; }
.reveal .lp-n .lp-tag { transition: opacity .45s ease, background-color .45s ease; }
.reveal .lp-n .lp-u { transition: opacity .45s ease, color .45s ease; }

/* --- edges --- */
.reveal .lp-e { --lp-edge: var(--teal); transition: opacity .45s ease; }
.reveal .lp-e line { stroke: var(--lp-edge); stroke-width: 4; transition: stroke .45s ease; }
.reveal .lp-e polygon { fill: var(--lp-edge); transition: fill .45s ease; }
.reveal .lp-e[data-s="hide"]:not(.visible), .reveal .lp-e.visible[data-to="hide"] { opacity: 0; }
.reveal .lp-e[data-s="dim"]:not(.visible), .reveal .lp-e.visible[data-to="dim"] { --lp-edge: var(--text-faint); }
.reveal .lp-e[data-s="lit"]:not(.visible), .reveal .lp-e.visible[data-to="lit"] { --lp-edge: var(--gold); }
/* Reveal hides a not-yet-visible fragment; these elements stay in view and only change state. */
.reveal .lp-n.fragment, .reveal .lp-e.fragment { opacity: 1; visibility: inherit; }
.reveal .lp-n.fragment[data-s="hide"]:not(.visible) { opacity: 0; visibility: hidden; }
.reveal .lp-e.fragment[data-s="hide"]:not(.visible) { opacity: 0; }

/* --- the text-free mini: shape and colour only (Slide Contract C4) --- */
.reveal .lp-mini { width: 300px; height: 105px; flex: 0 0 auto; }
.reveal .lp-mini .lp-n { border-width: 8px; border-radius: 16px; }
.reveal .lp-mini .lp-n[data-s="lit"] { --lp-fill: var(--gold); }
.reveal .lp-mini .lp-n[data-s="dim"] { --lp-bd: var(--text-faint); --lp-fill: transparent; }
.reveal .lp-mini .lp-e line { stroke-width: 12; }
.reveal .lp-mini .lp-e[data-s="dim"] { --lp-edge: var(--text-faint); }

/* --- drawn as a plan: outlines only, on a faint construction grid --- */
.reveal .lp-plan .lp-n { --lp-bd: var(--text); --lp-fill: transparent; border-style: dashed; }
.reveal .lp-plan .lp-e { --lp-edge: var(--text); }
.reveal .lp-plan .lp-e line { stroke-dasharray: 14 10; }
.reveal .lp-plan .lp-fig {
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 80px 80px;
}