/* GENERATED — do not edit. Synced from the shared design system.
   source: design-assets/cognitive-electricity-editorial-system/assets/cognitive-electricity-teaching.css
   sha256: 4f31e8caf6595042
   Deck-specific rules belong in assets/deck.css. Regenerate: node scripts/sync-theme.mjs */

/* ============================================================================
   Cognitive Electricity — teaching layer

   An optional companion to `cognitive-electricity-reveal-theme.css`, for decks
   whose audience does NOT already hold the model being presented.

   The visual bridge answers "how should this look." This layer answers "how
   does someone who knows none of this follow it." Load it after the bridge:

     <link rel="stylesheet" href="assets/cognitive-electricity-reveal-theme.css">
     <link rel="stylesheet" href="assets/cognitive-electricity-teaching.css">
     <link rel="stylesheet" href="assets/deck.css">

   The governing rule behind every component here:

     Never add a topic. Only add resolution.

   A deck using this layer opens on one small model (`.ce-model`) that a
   newcomer can hold in one breath, and every later slide is a zoom into one of
   its boxes. The framework is DERIVED, not declared — `.ce-fuse` is the slide
   where the simple model resolves into the named one, about two-thirds
   through. See design-guide.md § "Understanding-aware decks."
   ============================================================================ */

/* ----------------------------------------------------------- semantic roles

   Bind these once per deck and hold them for every slide. The bridge warns
   that teal/coral/violet/periwinkle must carry distinct system roles rather
   than decoration; these aliases are the mechanism for keeping that promise,
   and they are named for what they mean to the AUDIENCE, not to the domain.

   Teach the legend explicitly (`.ce-legend`) before any slide relies on it. */

:root {
  --ce-focus:     var(--gold);        /* what THIS slide introduces          */
  --ce-solid:     var(--teal);        /* established, durable, load-bearing  */
  --ce-gap:       var(--coral);       /* the trap, the gap, the not-yet-built */
  --ce-system:    var(--violet);      /* authored by the system, not the user */
  --ce-transient: var(--periwinkle);  /* in flight, not retained             */
}

.reveal .is-focus     { --ce-role: var(--ce-focus); }
.reveal .is-solid     { --ce-role: var(--ce-solid); }
.reveal .is-gap       { --ce-role: var(--ce-gap); }
.reveal .is-system    { --ce-role: var(--ce-system); }
.reveal .is-transient { --ce-role: var(--ce-transient); }

/* ------------------------------------------------------------- utilities

   `.ce-fill` + `.ce-pin-bottom` are the structural answer to the guide's
   slide-QA question "does the proof object stop too early and strand empty
   space below?". Let the object grow into the lower field instead of adding
   margins to push a landing line down. */

.reveal .ce-fill { flex: 1; min-height: 0; }
.reveal .ce-pin-bottom { margin-top: auto; }

/* The resolution tag. Shows the audience where they are on the ladder, and
   shows the author that a slide belongs to a level at all. */
.reveal .ce-level {
  position: absolute;
  top: var(--ce-reveal-slide-pad-top);
  right: var(--ce-reveal-slide-pad-x);
  color: var(--text-faint);
  font: 500 14px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.reveal .ce-level b { color: var(--ce-focus); font-weight: 500; }

/* Source path in the lower field. Every factual slide carries one: the deck
   doubles as a map of the codebase and every claim is falsifiable live. */
.reveal .ce-evidence {
  margin-top: auto;
  padding-top: 20px;
  max-width: none;
  color: var(--text-faint);
  font: 400 16px/1.4 var(--mono);
  letter-spacing: .06em;
}
.reveal .ce-evidence b { color: var(--text-dim); font-weight: 500; }

/* ======================================================= 1 · THE ANCHOR MODEL

   Three-to-five boxes, in a row, that describe the whole system with no jargon
   in them. Introduced at level 0 and re-shown at rising resolution. Use
   `.dim` on the boxes an act is not about.

   <div class="ce-model">
     <div class="ce-box is-focus">
       <div class="ce-box-n">Box one</div>
       <div class="ce-box-t">Someone signs a note</div>
       <p class="ce-box-d">Plain language. No vocabulary the room lacks.</p>
     </div>
     <div class="ce-flow">→</div>
     …
   </div>
   ============================================================================ */

.reveal .ce-model {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  width: 100%;
  margin-top: 30px;
}
.reveal .ce-model .ce-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  color: var(--text-faint);
  font: 400 30px/1 var(--mono);
}
.reveal .ce-model:has(.ce-flow) { grid-auto-columns: 1fr max-content; }

/* The model is the slide's proof object, so it grows into the lower field and
   the box bodies pin to the bottom — which also keeps columns visually level
   however much text each one carries. */
.reveal .ce-model:not(.ce-model-mini) { flex: 1; min-height: 0; }
.reveal .ce-model:not(.ce-model-mini) .ce-box-d,
.reveal .ce-model:not(.ce-model-mini) .ce-subs,
.reveal .ce-model:not(.ce-model-mini) .ce-pin:first-of-type { margin-top: auto; }

.reveal .ce-box {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 26px;
  background: var(--bg-2);
  border-top: 4px solid var(--ce-role, var(--rule-strong));
}
.reveal .ce-box-n {
  color: var(--ce-role, var(--text-faint));
  font: 500 14px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.reveal .ce-box-t {
  margin-top: 16px;
  color: var(--text-bright);
  font: 400 40px/1.06 var(--serif);
}
.reveal .ce-box-d {
  max-width: none;
  margin-top: 14px;
  color: var(--text-dim);
  font: 400 23px/1.34 var(--sans);
}
.reveal .ce-box.dim { opacity: .3; }
.reveal .ce-box.dim .ce-box-t { margin-bottom: auto; }

/* Sub-parts, revealed as a box gains resolution. */
.reveal .ce-subs {
  display: grid;
  gap: 2px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.reveal .ce-sub {
  padding: 11px 14px;
  background: var(--bg);
  border-left: 3px solid var(--ce-role, var(--rule-strong));
  color: var(--text);
  font: 400 20px/1.26 var(--sans);
}
.reveal .ce-sub b {
  display: block;
  color: var(--ce-role, var(--text-faint));
  font: 500 12px/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Level 5 — the closing move. The same model, marked with what you want the
   room to DO. Converts an abstract ask into a position on a familiar picture. */
.reveal .ce-pin {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--gold-soft);
  border-left: 3px solid var(--ce-focus);
  color: var(--text-bright);
  font: 400 19px/1.26 var(--sans);
}
.reveal .ce-pin i {
  flex: 0 0 auto;
  color: var(--ce-focus);
  font: 500 13px/1.4 var(--mono);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The model at a glance, for act openers. */
.reveal .ce-model-mini { margin: 0 0 24px; }
.reveal .ce-model-mini .ce-box { padding: 13px 16px; border-top-width: 3px; }
.reveal .ce-model-mini .ce-box-t { margin-top: 7px; font-size: 23px; }
.reveal .ce-model-mini .ce-box-d,
.reveal .ce-model-mini .ce-subs { display: none; }
.reveal .ce-model-mini .ce-flow { width: 30px; font-size: 20px; }

/* ==================================================== 2 · THE FUSION SLIDE

   Where the simple model resolves into the named framework, in place. Present
   it as naming, never as new information: "you have been doing this for twenty
   minutes — here are the words the codebase uses."

   Set --ce-fuse-cols to the span of each box, e.g. "1fr 1fr 4fr".
   ============================================================================ */

.reveal .ce-fuse { width: 100%; margin-top: 26px; }
.reveal .ce-fuse-tops,
.reveal .ce-fuse-drop {
  display: grid;
  grid-template-columns: var(--ce-fuse-cols, 1fr 1fr 1fr);
  gap: 2px;
}
.reveal .ce-fuse-tops > div {
  padding: 18px 22px;
  background: var(--bg-2);
  border-top: 4px solid var(--ce-role, var(--rule-strong));
}
.reveal .ce-fuse-tops .ce-box-n { color: var(--ce-role, var(--text-faint)); font-size: 13px; }
.reveal .ce-fuse-tops .ce-box-t { margin-top: 9px; font-size: 30px; }

.reveal .ce-fuse-drop { height: 30px; }
.reveal .ce-fuse-drop > div {
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.reveal .ce-fuse-gates {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
}
.reveal .ce-fuse-gates > div {
  padding: 20px 18px;
  background: var(--bg);
  border-top: 3px solid var(--ce-role, var(--rule-strong));
}
.reveal .ce-fuse-gates .n { color: var(--text-faint); font: 500 12px/1 var(--mono); letter-spacing: .2em; }
.reveal .ce-fuse-gates .g { margin: 11px 0 8px; color: var(--text-bright); font: 400 27px/1.04 var(--serif); }
.reveal .ce-fuse-gates .o { max-width: none; color: var(--text-dim); font: 400 16px/1.32 var(--sans); }
.reveal .ce-fuse-gates .o span { display: block; margin-top: 7px; color: var(--text-faint); font: 400 14px/1.3 var(--mono); }

/* ================================================ 3 · DEFINE AT POINT OF NEED

   A term gets a card the first time it does work — not in a glossary up front.
   Definitions delivered before they are needed are not retained.
   ============================================================================ */

.reveal .ce-defs {
  display: grid;
  grid-template-columns: repeat(var(--ce-def-cols, 3), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 26px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .ce-def { padding: 24px 26px; background: var(--bg); border-top: 3px solid var(--ce-focus); }
.reveal .ce-def-tag {
  color: var(--ce-focus);
  font: 500 15px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reveal .ce-def h3 { margin: 12px 0 10px; max-width: none; font-size: 32px; }
.reveal .ce-def p { max-width: none; color: var(--text-dim); font-size: 22px; line-height: 1.34; }
.reveal .ce-def p + p { margin-top: 10px; }
.reveal .ce-def-eg {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
  color: var(--text-faint);
  font: 400 18px/1.35 var(--mono);
}

/* =================================================== 4 · GUESS, THEN REVEAL

   Put the audience's plausible wrong model on screen first, stated
   sympathetically, then the real behaviour beside it. Corrections only stick
   when someone has made the guess.
   ============================================================================ */

.reveal .ce-guess {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 26px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .ce-guess > div { padding: 28px 30px; background: var(--bg); border-top: 3px solid var(--ce-gap); }
.reveal .ce-guess > div.is-real { border-top-color: var(--ce-solid); background: var(--bg-2); }
.reveal .ce-guess-tag { color: var(--ce-gap); font: 500 14px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.reveal .ce-guess > div.is-real .ce-guess-tag { color: var(--ce-solid); }
.reveal .ce-guess h3 { margin: 14px 0 12px; max-width: none; font-size: 34px; }
.reveal .ce-guess p { max-width: none; color: var(--text-dim); font-size: 23px; line-height: 1.36; }

/* The same device at chip scale, for naming the wrong model an act dislodges. */
.reveal .ce-myth {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 9px 18px;
  background: var(--coral-soft);
  border-left: 3px solid var(--ce-gap);
  color: var(--text);
  font: italic 400 25px/1.2 var(--serif);
}
.reveal .ce-myth b {
  color: var(--ce-gap);
  font: 500 14px/1 var(--mono);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ================================================== 5 · THE WORKED EXAMPLE

   One concrete instance, named early and carried the whole way, so every
   abstract idea arrives because the example needs it.
   ============================================================================ */

.reveal .ce-example {
  display: flex;
  align-items: baseline;
  gap: 22px;
  width: 100%;
  margin-top: 22px;
  padding: 24px 30px;
  background: var(--bg-3);
  border-left: 4px solid var(--ce-role, var(--ce-focus));
}
.reveal .ce-example-who {
  flex: 0 0 auto;
  color: var(--ce-role, var(--ce-focus));
  font: 500 17px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reveal .ce-example-what { max-width: none; color: var(--text-bright); font: 400 32px/1.2 var(--serif); }

/* ============================================= 6 · STATUS AS A VISUAL PROPERTY

   When a deck covers a system with declared-but-unbuilt parts, encode status
   in the grammar and define it once in the legend. Costs no speaking time and
   survives screenshotting, which verbal caveats do not.
   ============================================================================ */

.reveal .ce-status {
  display: inline-block;
  padding: 4px 12px;
  font: 500 15px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reveal .ce-status.is-built   { color: var(--ce-solid); border: 1px solid color-mix(in oklab, var(--ce-solid) 45%, transparent); }
.reveal .ce-status.is-partial { color: var(--ce-focus); border: 1px solid color-mix(in oklab, var(--ce-focus) 45%, transparent); }
.reveal .ce-status.is-broken  { color: var(--ce-gap);   border: 1px solid color-mix(in oklab, var(--ce-gap) 55%, transparent); }
.reveal .ce-status.is-unbuilt { color: var(--ce-gap);   border: 1px dashed color-mix(in oklab, var(--ce-gap) 55%, transparent); }

/* Dashed outline means "named but not built" anywhere it appears. */
.reveal .is-unbuilt-row { opacity: .72; }
.reveal .is-unbuilt-row .ce-proof-ledger-claim { color: var(--text-dim); }

/* The legend that teaches the colour budget. Put it on the slide that first
   needs more than two roles, and never use a role before it. */
.reveal .ce-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.reveal .ce-legend span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ce-role, var(--text-dim));
  font: 500 16px/1 var(--mono);
  letter-spacing: .08em;
}
.reveal .ce-legend span::before { content: ""; width: 22px; height: 4px; background: currentColor; }

/* ===================================================== 7 · EVIDENCE OBJECTS

   Reference components. Each pairs with a teaching slide in front of it — a
   slide is either a teaching slide or a reference card, never both.
   ============================================================================ */

/* 7a · Lane sequence — one horizontal lane per owning component. */
.reveal .ce-lanes { width: 100%; margin-top: 26px; }
.reveal .ce-lane {
  display: grid;
  grid-template-columns: var(--ce-lane-label, 210px) 1fr;
  gap: 24px;
  align-items: stretch;
  border-bottom: 1px solid var(--rule-soft);
}
.reveal .ce-lane:last-child { border-bottom: 0; }
.reveal .ce-lane-name {
  display: flex;
  align-items: center;
  padding: 12px 0;
  color: var(--text-faint);
  font: 500 15px/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reveal .ce-lane-steps { display: flex; align-items: center; gap: 10px; padding: 12px 0; min-width: 0; }
.reveal .ce-step {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  background: var(--bg-2);
  border-left: 3px solid var(--ce-role, var(--rule-strong));
  color: var(--text);
  font: 400 19px/1.24 var(--sans);
}
.reveal .ce-step b {
  display: block;
  margin-bottom: 4px;
  color: var(--ce-role, var(--text-faint));
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reveal .ce-step.is-focus { background: var(--bg-3); }
.reveal .ce-arrow { flex: 0 0 auto; color: var(--text-faint); font: 400 22px/1 var(--mono); }

/* 7b · Spec card — a fixed set of fields, repeated. Because the geometry never
   changes, the room reads position rather than labels by the third use. */
.reveal .ce-specs {
  display: grid;
  grid-template-columns: repeat(var(--ce-spec-cols, 4), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 26px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .ce-spec {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--bg);
  border-top: 3px solid var(--ce-role, var(--rule-strong));
}
.reveal .ce-spec-tag { color: var(--text-faint); font: 500 14px/1 var(--mono); letter-spacing: .16em; }
.reveal .ce-spec h3 { margin: 12px 0 14px; max-width: none; font-size: 27px; line-height: 1.08; }
.reveal .ce-spec dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; align-content: start; }
.reveal .ce-spec dt { color: var(--text-faint); font: 500 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.reveal .ce-spec dd { margin: 0; color: var(--text-dim); font: 400 18px/1.35 var(--sans); }
.reveal .ce-spec dd em { color: var(--text-bright); font-style: normal; }

/* 7c · Partition bar — proportional segments. Set flex on each segment to its
   share, and name the MECHANISM under each, not its members. */
.reveal .ce-partition {
  display: flex;
  width: 100%;
  margin-top: 34px;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .ce-partition > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 22px;
  background: var(--bg);
  border-top: 4px solid var(--ce-role, var(--rule-strong));
}
.reveal .ce-partition > div.is-unbuilt { border-top-style: dashed; }
.reveal .ce-partition .ce-part-n { color: var(--ce-role, var(--text-bright)); font: 400 58px/1 var(--serif); }
.reveal .ce-partition > div.is-unbuilt .ce-part-n { opacity: .7; }
.reveal .ce-partition .ce-part-k {
  margin-top: 14px;
  color: var(--text-dim);
  font: 500 15px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reveal .ce-partition .ce-part-d { max-width: none; margin-top: 12px; color: var(--text-faint); font: 400 17px/1.34 var(--sans); }

/* 7d · Matrix — rules against enforcement points. Set the column template
   inline; say aloud that it is a card to photograph, not a slide to read. */
.reveal .ce-matrix {
  display: grid;
  width: 100%;
  margin-top: 26px;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .ce-matrix > div { padding: 14px 16px; background: var(--bg); }
.reveal .ce-matrix-h {
  background: var(--bg-2);
  color: var(--text-faint);
  font: 500 13px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reveal .ce-matrix-r { background: var(--bg-2); color: var(--text); font: 400 19px/1.25 var(--sans); }
.reveal .ce-matrix-r span { color: var(--text-faint); font: 400 16px/1.3 var(--mono); }
.reveal .ce-matrix .yes  { color: var(--ce-solid); font: 400 21px/1.3 var(--mono); }
.reveal .ce-matrix .no   { color: var(--ce-gap);   font: 400 21px/1.3 var(--mono); }
.reveal .ce-matrix .n-a  { color: var(--text-faint); font: 400 16px/1.3 var(--mono); }

/* 7e · Verdict rows — items placed on an axis, with the exception standing out.
   Use when the point is that one row differs from the others. */
.reveal .ce-verdicts { width: 100%; margin-top: 30px; }
.reveal .ce-verdict-axis {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--text-faint);
  font: 500 14px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.reveal .ce-verdict {
  display: grid;
  grid-template-columns: var(--ce-verdict-cols, 290px 1fr 230px);
  gap: 26px;
  align-items: center;
  min-height: 92px;
  margin-bottom: 2px;
  padding: 16px 24px;
  background: var(--bg-2);
  border-left: 4px solid var(--ce-role, var(--ce-gap));
}
.reveal .ce-verdict.is-solid { background: var(--bg-3); }
.reveal .ce-verdict-what { color: var(--text-bright); font: 400 30px/1.08 var(--serif); }
.reveal .ce-verdict-where { max-width: none; color: var(--text-dim); font: 400 19px/1.34 var(--mono); }
.reveal .ce-verdict-says {
  text-align: right;
  color: var(--ce-role, var(--ce-gap));
  font: 500 17px/1.25 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}