/* ============================================================
   AIBL Essentials decks: Field Manual slide chassis
   Surface family: FIELD MANUAL (light). Tokens consumed from
   ./fm-tokens.css (consumer copy of the-studio field-manual/tokens.css).
   Component vocabulary, reused not reinvented (design-elite registry):
     eyebrow (5) · hilite-pill (6) · card (2) · file-tab-label (7b) ·
     stamp (8) · status-pill (9) · terminal-block (11) · badges (13) ·
     callout-family (23) · asset-placeholder (.ph) · procedure-kit
     (pk-num / pk-state / pk-cmd / pk-check) · dashed-divider (15)
   Canvas: 1920x1080 (deck-stage default; same geometry as the old
   installer decks so the printed PDFs match page for page).
   Rules baked in (field-manual.design.md hard rules + deck-rules.md):
     hard offset shadows only · radius <= 4px · no accent-as-text on
     cream · one mono voice per card · sentence-case headlines · the
     only arrow glyph is the right arrow · no em dashes anywhere.
   ============================================================ */

html, body { margin: 0; padding: 0; background: var(--ink); }

/* ---------- the slide surface ---------- */
deck-stage > section {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--fm-grid-size) var(--fm-grid-size);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 1.5;
  padding: 80px 112px 96px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  counter-increment: slide-num;
  -webkit-font-smoothing: antialiased;
}
deck-stage { counter-reset: slide-num; }

/* the still contract: nothing moves when ?still=1 */
body.still *, body.still *::before, body.still *::after { animation: none !important; transition: none !important; }

/* ---------- top line + foot (the deck's chrome) ---------- */
.topline {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 44px; min-height: 44px;
}
.topline .route {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 16px;
}
.topline .route::before { content: ''; width: 44px; height: 3px; background: var(--ink); }
.topline .where {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--lime); color: var(--on-lime);
  border: 2px solid var(--ink); border-radius: var(--fm-radius);
  padding: 8px 16px; box-shadow: var(--fm-shadow-sm);
}
.foot {
  position: absolute; left: 112px; right: 112px; bottom: 40px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.foot .mark { font-weight: 700; letter-spacing: -1px; color: var(--ink); margin-right: 14px; }
.foot .n::after { content: counter(slide-num); color: var(--ink); font-weight: 700; margin-left: 10px; }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 16px; margin: 0 0 18px;
}
.eyebrow::before { content: ''; width: 44px; height: 3px; background: var(--lime); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0; }
h1 { font-size: 104px; line-height: 1.06; letter-spacing: -0.04em; }
h2 { font-size: 60px; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 28px; max-width: 1500px; }
h2 code { font-size: 0.78em; padding: 0 12px; }
h3 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; }
.hilite {
  background: var(--lime); color: var(--on-lime); padding: 2px 16px;
  border-radius: var(--fm-radius); box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
h1 .hilite, h2 .hilite { line-height: 1.24; }
p { margin: 0 0 18px; color: var(--ink-2); max-width: 66ch; }
p.lede { font-size: 34px; line-height: 1.4; color: var(--ink); max-width: 44ch; }
strong { color: var(--ink); font-weight: 700; }
code, kbd {
  font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-2);
  border: 1px solid var(--ink-border); border-radius: 3px; padding: 2px 8px; color: var(--ink);
  white-space: nowrap;
}
.mono { font-family: var(--font-mono); }

/* ---------- layouts ---------- */
.two { display: grid; grid-template-columns: 720px 1fr; gap: 88px; align-items: start; flex: 1; min-height: 0; }
.two.wide-text { grid-template-columns: 880px 1fr; }
.two.even { grid-template-columns: 1fr 1fr; }
/* A shot slide whose frame is not on disk (student build): the words alone, one column at a reading measure,
   same type sizes as beside a frame so the deck does not change voice from slide to slide. */
.solo { display: grid; grid-template-columns: minmax(0, 1120px); align-items: start; flex: 1; min-height: 0; }
.solo .steps li { font-size: 29px; }
.stack { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.center { align-items: center; justify-content: center; text-align: center; }

/* numbered steps: ONE mono voice for every number on a slide (R-COPY-07) */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; font-size: 27px; line-height: 1.45; color: var(--ink); }
.steps .pk-num {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  border: var(--fm-border-w) solid var(--ink); border-radius: var(--fm-radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--fm-shadow-sm);
}
.steps li.is-done .pk-num { background: var(--ink); color: var(--paper); box-shadow: none; }
.steps li.is-current .pk-num { background: var(--lime); color: var(--on-lime); }
.steps small { display: block; font-size: 21px; color: var(--ink-2); margin-top: 4px; }

/* state chip (procedure-kit .pk-state) */
.pk-state {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--fm-radius); border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink);
}
.pk-state.s-current { background: var(--lime); color: var(--on-lime); }
.pk-state.s-done { background: var(--ink); color: var(--paper); }
.pk-state.s-upcoming { border-style: dashed; color: var(--ink-2); background: transparent; }

/* ---------- the screenshot frame ---------- */
.frame {
  background: var(--surface); border: var(--fm-border-w-lg) solid var(--ink);
  border-radius: var(--fm-radius); box-shadow: var(--fm-shadow-lg);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
  align-self: start; max-height: 820px;
}
.frame img { display: block; width: 100%; height: auto; max-height: 740px; object-fit: contain; object-position: top left; border: 1px solid var(--ink-border); }
/* pins: the wrapper hugs the image so percent boxes from pins.json land on the right control */
.frame .shot { position: relative; display: inline-block; align-self: flex-start; max-width: 100%; line-height: 0; }
.frame .shot img { width: auto; max-width: 100%; }
/* zoom: .shot is the viewport (aspect from the focus rect); .full is the whole image plus pins, shifted into view */
.frame .shot.zoomed { display: block; width: 100%; overflow: hidden; border: 1px solid var(--ink-border); }
.frame .shot.zoomed img { width: 100%; max-width: none; max-height: none; border: 0; }
.frame .full { position: relative; width: 100%; transform-origin: 0 0; }
.frame .shot.zoomed .pin { border-width: 3px; }
.frame .cap .minimap { position: relative; display: inline-block; width: 150px; line-height: 0; border: 1.5px solid var(--ink-2); border-radius: 2px; overflow: hidden; margin-right: auto; }
.frame .cap .minimap img { display: block; width: 100%; height: auto; max-height: none; border: 0; }
.frame .cap .minimap i { position: absolute; border: 2px solid var(--lime); box-shadow: 0 0 0 200px rgba(0,0,0,.42); }
.frame .cap { align-items: flex-end; }
/* two zoomed frames on one slide sit side by side, in step order, each hugging its own zoom */
.two .stack.n2.zoomed { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); height: 700px; gap: 20px !important; align-items: stretch; justify-items: start; }
.two .stack.n2.zoomed .frame { max-height: 100%; min-height: 0; height: 100%; box-sizing: border-box; overflow: hidden; padding: 10px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px; width: fit-content; max-width: 100%; }
.two .stack.n2.zoomed .frame .shot.zoomed { height: 100%; width: auto; max-width: 100%; min-height: 0; }
.two .stack.n2.zoomed .frame .shot.zoomed img { max-height: none; }
.two .stack.n2.zoomed .frame .cap { font-size: 12px; }
.two .stack.n2.zoomed .frame .cap .minimap { width: 96px; }
.two .stack.n2.zoomed .frame .pin-legend { font-size: 13px; }
/* two crops of one capture (build.py, cluster_focus): pins too spread to zoom become two stacked crops of the same
   image, read in order, one caption and one legend (the lessons' .ess-frame-pair). Each crop hugs its own zoom. */
.frame .shot-pair { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; height: 640px; justify-items: start; }
.frame .shot-pair .shot.zoomed { height: 100%; width: auto; max-width: 100%; min-height: 0; }
.two .stack.n2.zoomed .frame .shot-pair { height: 100%; }
.two .stack.n2.zoomed.one-ph { grid-template-rows: minmax(0, 1fr) auto; }   /* a placeholder beside a zoomed frame takes only its own height */
.frame .pin { position: absolute; box-sizing: border-box; border: 2.5px solid var(--lime); border-radius: 3px; box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 0 5px rgba(200,255,0,.28); pointer-events: none; }
.frame .pin i { position: absolute; left: -3px; top: -24px; font-style: normal; font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 1; background: var(--lime); color: var(--on-lime); border: 1.5px solid var(--ink); border-radius: 2px; padding: 3px 6px; box-shadow: 1px 1px 0 var(--ink); }
.frame .pin-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; color: var(--ink-2); line-height: 1.3; }
.frame .pin-legend b { display: inline-block; font-family: var(--font-mono); font-size: 11px; background: var(--lime); color: var(--on-lime); border: 1.5px solid var(--ink); border-radius: 2px; padding: 1px 6px; margin-right: 6px; }
.frame .cap {
  font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); display: flex; justify-content: space-between; gap: 16px;
}
.frame .cap .carry { color: var(--ink); font-weight: 700; }

/* asset-placeholder (.ph): SPECIFIES the missing shot, never leaves a gap */
.ph {
  border: 3px dashed var(--ink);
  background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 14px, var(--paper) 14px, var(--paper) 28px);
  border-radius: var(--fm-radius); padding: 36px 40px; min-height: 520px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.ph .t {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; background: var(--ink); color: var(--paper);
  display: inline-block; padding: 8px 16px; border-radius: 2px; align-self: flex-start;
}
.ph .app { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.ph .d { font-size: 24px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; margin: 0; }
.ph .f { font-family: var(--font-mono); font-size: 16px; color: var(--ink-2); letter-spacing: 0.02em; }

/* ---------- cards + grids ---------- */
.card {
  background: var(--surface); border: var(--fm-border-w) solid var(--ink);
  border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); padding: 28px 32px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 23px; line-height: 1.45; margin: 0; }
.card .k {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--ink-3);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card.on { background: var(--lime); }
.card.ink { background: var(--ink); color: var(--paper); }
.card.ink h3, .card.ink p { color: var(--paper); }
.card.paper2 { background: var(--paper-2); }

/* file-tab card (the hero surface, one per deck at most twice: cover + close) */
.file-tab-card {
  position: relative; background: var(--surface); border: var(--fm-border-w-lg) solid var(--ink);
  border-radius: var(--fm-radius); box-shadow: var(--fm-shadow-lg); padding: 64px 72px 56px;
  margin-top: 28px; transform: rotate(calc(-1 * var(--fm-tilt)));
}
.file-tab {
  position: absolute; top: -26px; left: 40px; background: var(--lime); color: var(--on-lime);
  border: 2px solid var(--ink); padding: 8px 18px; font-family: var(--font-mono); font-size: 18px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; z-index: 3; white-space: nowrap;
  box-shadow: var(--fm-shadow-sm);
}

/* stamp + status pills + badges */
.stamp {
  display: inline-block; border: 2px solid var(--success); color: var(--success);
  padding: 6px 12px; font-family: var(--font-mono); font-size: 16px; font-weight: 700;
  transform: rotate(-4deg); text-transform: uppercase; letter-spacing: 0.1em; background: var(--surface);
}
.stamp.warn { border-color: var(--caution); color: var(--caution); }
.stamp.ink { border-color: var(--ink); color: var(--ink); }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink);
  padding: 8px 14px; font-family: var(--font-mono); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; background: var(--surface); color: var(--ink); white-space: nowrap;
}
.status-pill.ok { background: var(--lime); color: var(--on-lime); }
.status-pill.warn { background: var(--coral); color: #fff; }
.status-pill.info { background: var(--blue); color: var(--ink); }
.status-pill.muted { background: var(--paper-3); color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }

/* ---------- callout-family (note / warn / prompt), no edge rails ---------- */
.callout {
  border: var(--fm-border-w) solid var(--ink); border-radius: var(--fm-radius);
  box-shadow: var(--fm-shadow); margin: 24px 0 0; background: var(--surface);
}
.callout.note { background: var(--tint-info); }
.callout.warn { background: var(--tint-warn); }
.callout.prompt { background: var(--tint-prompt); }
.callout .co-head {
  display: flex; align-items: center; gap: 14px; border-bottom: var(--fm-border-w) solid var(--ink);
  padding: 12px 20px;
}
.callout .chip {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: var(--fm-border-w) solid var(--ink); border-radius: var(--fm-radius);
}
.callout .chip svg { width: 18px; height: 18px; display: block; }
.callout .tag { font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.callout .co-body { padding: 18px 22px 22px; }
.callout .co-body h3 { font-size: 26px; margin-bottom: 6px; }
.callout .co-body p { font-size: 22px; line-height: 1.45; margin: 0; }
.callout.big .co-body h3 { font-size: 34px; }
.callout.big .co-body p { font-size: 27px; }

/* ---------- terminal-block ---------- */
.terminal {
  background: var(--terminal-bg); color: #E8EAED; border: var(--fm-border-w-lg) solid var(--ink);
  border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); padding: 24px 28px;
  font-family: var(--font-mono); font-size: 22px; line-height: 1.6; overflow: hidden;
}
.terminal h3 { color: var(--lime); font-family: var(--font-display); margin-bottom: 12px; font-size: 24px; }
.terminal .muted { color: #8a8f98; }
.terminal .ok { color: var(--lime); }
.terminal pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.terminal.long { font-size: 19px; }
.terminal .bar {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lime); border-bottom: 2px solid rgba(245,245,245,0.14);
  margin: -8px -28px 16px; padding: 0 28px 12px;
}

/* ---------- checkpoint (procedure-kit .pk-check) ---------- */
.pk-check {
  position: relative; border: var(--fm-border-w) solid var(--ink); border-radius: var(--fm-radius);
  background: var(--surface); box-shadow: var(--fm-shadow); padding: 36px 40px 32px; margin-top: 12px;
}
.pk-check-rail {
  position: absolute; top: -2px; left: -2px; right: -2px; height: 12px;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 22px);
  border-radius: var(--fm-radius) var(--fm-radius) 0 0;
}
.pk-check-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 8px 0 26px; }
.pk-gate { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pk-gate-cell { border: var(--fm-border-w) solid var(--ink); border-radius: var(--fm-radius); padding: 22px 26px; }
.pk-gate-cell.yes { background: var(--paper-2); }
.pk-gate-cell.no { background: var(--surface); border-style: dashed; }
.pk-gate-lbl {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-2); margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
}
.pk-gate-lbl .box {
  width: 20px; height: 20px; flex: none; border: 2px solid var(--ink); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--surface);
}
.pk-gate p { margin: 0; font-size: 24px; color: var(--ink); line-height: 1.45; max-width: none; }

/* ---------- section divider ---------- */
section.divider { background-color: var(--paper); color: var(--ink); justify-content: center; }
section.divider .part::before { background: var(--lime) !important; }
section.divider .divider-card { max-width: 1500px; }
section.divider .divider-card h1 { font-size: 104px; margin-top: 10px; }
section.divider .divider-card .sub { margin-top: 18px; }
section.divider .divider-card .recap, section.divider .divider-card .before { max-width: none; }
section.divider .part {
  font-family: var(--font-mono); font-size: 24px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 26px; display: inline-flex; align-items: center; gap: 18px;
}
section.divider .part::before { content: ''; width: 56px; height: 4px; background: var(--ink); }
section.divider h1 { font-size: 132px; line-height: 0.98; letter-spacing: -0.045em; max-width: 1500px; }
section.divider .sub { font-size: 34px; margin-top: 30px; color: var(--ink); max-width: 44ch; font-family: var(--font-body); }
section.divider .topline .where { background: var(--lime); color: var(--on-lime); }
section.divider .topline .route::before { background: var(--ink); }
section.divider .foot .mark { color: var(--ink); }
section.divider .foot { color: var(--ink-2); }
section.divider.ink { background-color: var(--ink); color: var(--paper); }
section.divider.ink h1, section.divider.ink .sub, section.divider.ink .part { color: var(--paper); }
section.divider.ink .part::before { background: var(--lime); }
section.divider.ink .topline .where { background: var(--lime); color: var(--on-lime); }
section.divider.ink .topline .route { color: var(--paper); }
section.divider.ink .topline .route::before { background: var(--lime); }
section.divider.ink .foot, section.divider.ink .foot .mark { color: var(--paper); }
/* live cue: paper surface, lime part-bar and stamp */
section.live .part { display: inline-flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 26px; }
section.live .part::before { content: ''; width: 56px; height: 4px; background: var(--lime); }
section.live h1 { line-height: 1.02; letter-spacing: -0.04em; max-width: 1500px; }
section.live .stamp { background: var(--lime); color: var(--on-lime); border-color: var(--ink); }

/* ---------- cover + close ---------- */
section.cover .file-tab-card { max-width: 1400px; }
section.cover h1 { font-size: 112px; }
section.cover .sub { font-size: 34px; color: var(--ink-2); margin-top: 26px; max-width: 40ch; }
section.close h1 { font-size: 128px; }

/* ---------- the 2x2 route matrix (Essentials chapter 2) ---------- */
.matrix { display: grid; grid-template-columns: 220px 1fr 1fr; grid-template-rows: 90px 1fr 1fr; gap: 20px; flex: 1; min-height: 0; }
.matrix .hd { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.matrix .hd.corner { visibility: hidden; }
.matrix .cell { display: flex; flex-direction: column; justify-content: space-between; padding: 30px 34px; }
.matrix .cell h3 { font-size: 38px; }
.matrix .cell .k { border-top: none; padding-top: 0; margin-top: 0; font-size: 17px; }

/* ---------- key row (keyboard path diagrams) ---------- */
.path { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 18px 0 26px; }
.path .kbd, .path .node {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--fm-radius);
  padding: 12px 20px; box-shadow: var(--fm-shadow-sm); white-space: nowrap;
}
.path .node.on { background: var(--lime); }
.path .arr { font-family: var(--font-mono); font-size: 30px; color: var(--ink-2); }
.path .node small { display: block; font-size: 15px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.04em; }

/* dashed dividers */
.dashed { border-bottom: 1px dashed var(--ink-3); padding: 12px 0; font-size: 24px; }
.dashed:last-child { border-bottom: none; }

/* ---------- review chrome (stripped by build.py --final) ---------- */
.nw {
  position: absolute; bottom: 92px; right: 112px; z-index: 5; max-width: 620px;
  border: 2px solid var(--caution); color: var(--ink); background: var(--tint-warn);
  font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; line-height: 1.4;
  padding: 10px 14px; border-radius: var(--fm-radius); transform: rotate(1.2deg); box-shadow: var(--fm-shadow-sm);
}
.nw b { text-transform: uppercase; letter-spacing: 0.14em; display: block; margin-bottom: 4px; }
.reuse-tag {
  position: absolute; left: 112px; bottom: 82px; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- print: one page per slide ---------- */
@media print {
  html, body { background: var(--paper); }
  .nw, .reuse-tag { display: none !important; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- fixes after first QA render ---------- */
a.card, a.card:visited { text-decoration: none; color: inherit; }
.matrix { max-height: 600px; }
.matrix .cell .k { color: var(--ink-2); }
section.divider.ink .foot .n::after, section.divider.ink .foot .mark { color: var(--paper); }
.grid3 > .card, .grid2 > .card, .grid4 > .card { min-height: 380px; }
/* dense: more cards than columns (two rows). Shorter tiles, smaller type, so six fit the frame. */
.grid3.dense > .card, .grid2.dense > .card { min-height: 0; padding: 26px 30px; }
.grid3.dense > .card p, .grid2.dense > .card p { font-size: 21px; line-height: 1.4; }
.grid3.dense > .card h3, .grid2.dense > .card h3 { font-size: 26px; }
.grid3.dense, .grid2.dense { gap: 20px; }
.grid3.co > .card, .grid2.co > .card { min-height: 0; padding: 26px 30px; }   /* a callout follows: the cards take the dense type too, so the callout clears the foot (09.1 ran 24px into it) */
.grid3.co > .card p, .grid2.co > .card p { font-size: 21px; line-height: 1.4; }
.grid3.co > .card h3, .grid2.co > .card h3 { font-size: 26px; }
.grid1 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.two .grid1.dense > .card { min-height: 0; padding: 18px 26px; }
.two .grid1.dense > .card h3 { font-size: 26px; margin-bottom: 4px; }
.two .grid1.dense > .card p { font-size: 21px; line-height: 1.35; }
.two .grid1.dense > .card .k { margin-top: 8px; }
.two .grid2.co > .card p { font-size: 21px; }
.two .callout .co-body p { font-size: 20px; }
.stack > .grid2 + .callout, .stack > .grid3 + .callout { margin-top: 24px; }
.grid4 > .card { min-height: 300px; }
.grid3 > .card p, .grid2 > .card p { font-size: 25px; }
.two .card { min-height: 0; }
/* two frames stacked in one column: halve each */
.two .stack .ph { min-height: 250px; padding: 22px 28px; gap: 10px; }
.two .stack .ph .d { font-size: 19px; line-height: 1.35; }
.two .stack .ph .t, .two .stack .ph .app { font-size: 15px; }
.two .stack .frame:not(:has(.shot.zoomed)) { max-height: 400px; }
.two .stack .frame:not(:has(.shot.zoomed)) img { max-height: 330px; }
/* path diagrams carry little text: let the keys be big */
.path { margin: 40px 0 56px; gap: 26px; }
.path .kbd, .path .node { font-size: 40px; padding: 22px 34px; }
.path .node small { font-size: 20px; margin-top: 6px; }
.path .arr { font-size: 48px; }
/* three frames stacked: thirds */
.two .stack.n3 .frame { max-height: 270px; padding: 10px; }
.two .stack.n3 .frame img { max-height: 210px; }
.two .stack.n3 .ph { min-height: 160px; padding: 14px 20px; }
.two .stack.n3 .ph .d { font-size: 16px; }
/* stacked frames: fixed lanes so nothing runs off the slide; long caveats truncate (full text is in SHOT-LIST.md) */
.two .stack.n2:not(.zoomed), .two .stack.n3 { display: grid; height: 760px; gap: 20px; }
.two .stack.n2:not(.zoomed) { grid-template-rows: 1fr 1fr; }
.two .stack.n3 { grid-template-rows: 1fr 1fr 1fr; }
.two .stack.n2:not(.zoomed) .frame, .two .stack.n3 .frame { max-height: 100%; min-height: 0; overflow: hidden; }
.two .stack.n2 .frame img { max-height: 300px; }
/* A carry (a plain img, no pins) in a stacked pair sizes to its picture, the way a shot frame does, instead of
   a full-width frame with the picture letterboxed top-left and white to its right (the 06.2 dialog mocks, 09-16). */
.two .stack.n2 .frame:has(> img) { width: fit-content; max-width: 100%; align-self: flex-start; }
.two .stack.n2 .frame > img { width: auto; max-width: 100%; }
.two .stack.n3 .frame img { max-height: 180px; }
.two .stack .ph { min-height: 0; height: 100%; }
.two .stack .cap { white-space: nowrap; }
.two .stack .cap > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.two .stack .cap .carry { max-width: 50%; }
.two .stack .cap > span:last-child { flex: none; overflow: visible; }

/* ---------- the figure (one drawing that grows) ---------- */
.fig-two { grid-template-columns: 1fr 1.05fr; gap: 48px; }
.fig-wrap { display: flex; align-items: center; justify-content: center; min-height: 0; }
.fig-wrap svg.fig { width: 100%; height: auto; max-height: 620px; }
.fig-col { display: flex; flex-direction: column; justify-content: center; min-height: 0; gap: 8px; }
.fig-col .callout { margin-top: 8px; }
.fig-col .callout .co-body p { font-size: 19px; }
/* ---------- the ledger on dividers ---------- */
section.divider .before { margin-top: 40px; max-width: 900px; border-top: 3px solid var(--ink); padding-top: 18px; }
section.divider .before .lbl { display: block; font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
section.divider .before ul { margin: 0; padding-left: 26px; font-size: 24px; line-height: 1.5; color: var(--ink); }
section.divider .before li { margin: 2px 0; }
.nw.ledger { top: auto; bottom: 120px; right: 40px; max-width: 720px; background: #E3F5FF; }
.nw.ledger i { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- level-setting: last chapter on the divider, next on the checkpoint ---------- */
section.divider .recap { margin-top: 36px; max-width: 900px; }
section.divider .recap .lbl, .next .lbl { display: block; font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
section.divider .recap p { margin: 0; font-size: 24px; line-height: 1.45; color: var(--ink); }
section.divider .recap + .before { margin-top: 22px; }
.next { margin-top: 22px; border-top: 3px solid var(--ink); padding-top: 14px; display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: baseline; }
.next .lbl { margin: 0; color: var(--ink); }
.next p { margin: 0; font-size: 24px; line-height: 1.45; color: var(--ink); }

/* ---------- logos on cards; full-bleed text in cards and callouts ---------- */
.card.has-logo .logo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.card.has-logo .logo .mark { height: 56px; width: 56px; }
.card.has-logo .logo .word { height: 34px; width: auto; }
.card p, .callout .co-body p { max-width: none; }

/* 09-13 review: cover logo, the aside frame under the steps, chips that do not collide on adjacent rows */
.cover-logo { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.cover-logo .mark { height: 44px; width: auto; } .cover-logo .word { height: 30px; width: auto; }
.aside-frame { margin-top: 22px; max-width: 640px; }
.aside-frame .frame { padding: 8px; box-shadow: var(--fm-shadow); }
.aside-frame .frame .cap { font-size: 11px; }
.aside-frame .frame .pin-legend { font-size: 13px; }
.frame .pin i { left: -2px; top: auto; bottom: 100%; margin-bottom: 3px; transform: none; }
.frame .pin:nth-of-type(even) i { bottom: auto; top: 100%; margin-top: 3px; margin-bottom: 0; }
/* placement decided by build.py (chip_place): frame edges and neighbouring boxes considered, the same rule as the lessons */
.frame .pin.below i { bottom: auto; top: 100%; margin-top: 3px; margin-bottom: 0; }
.frame .pin:nth-of-type(even):not(.below):not(.inside):not(.inside-right):not(.left) i { bottom: 100%; top: auto; margin-top: 0; margin-bottom: 3px; }
.frame .pin.inside i { left: 4px; top: 4px; bottom: auto; margin: 0; }
.frame .pin.inside-right i { left: auto; right: 4px; top: 50%; bottom: auto; margin: 0; transform: translateY(-50%); }
.frame .pin.left i { left: auto; right: 100%; top: 0; bottom: auto; margin: 0 4px 0 0; }
.frame .shot.zoomed .pin i { font-size: 12px; padding: 3px 6px; }

.two.wide-frame { grid-template-columns: 540px 1fr; }
.two.wide-frame h2 { font-size: 40px; }
.stack.framecol { gap: 18px; }
/* a callout under the picture (callout_pos="frame") is compact, so a tall frame and its callout clear the foot (10.2 ran 17px into it) */
.stack.framecol .callout .co-head { padding: 8px 18px; }
.stack.framecol .callout .co-body { padding: 12px 18px 14px; }
.stack.framecol .callout .co-body h3 { font-size: 22px; margin-bottom: 4px; }
.stack.framecol .callout .co-body p { font-size: 18px; line-height: 1.4; }
.stack.framecol .callout { margin-top: 0; }

.steps.cols2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 56px; row-gap: 14px; }
.steps.cols2 li { margin: 0; }
.two.wide-frame .frame .shot.zoomed { max-height: 600px; width: auto; max-width: 100%; }
.two.wide-frame .frame { width: fit-content; max-width: 100%; }