@humanforest/slidev-theme 0.1.0

package/global-top.vue

@@ -0,0 +1,1662 @@
+<script setup>
+/*
+  task-14-brief.md, requirement 6 — the layout-debug ("red-line") overlay.
+
+  WHY THIS EXISTS. Every inset the two-track system introduces is a CSS custom property, and a
+  custom property is invisible: nobody can see 40px versus 100px by looking at a finished slide.
+  That invisibility is exactly how the bottom-chrome overlap this task's brief opens with survived
+  a written comment asserting it was fine — the arithmetic was wrong, nothing rendered the frame it
+  described, and scripts/deckAudit.ts measures OVERFLOW past the canvas, not COLLISION inside it.
+  This overlay draws the frames the tokens only describe, so a person or an agent reviewing a
+  layout can check "does this slide honour the inset it claims to" by eye, not by redoing the sums.
+
+  Documented as a review tool in README.md's own "Debugging layout" section — read that first for
+  how to turn it on; this file is the mechanism, not the manual.
+
+  MOUNTED ONCE, GLOBALLY — via Slidev's own `global-top.vue` naming convention (getComponent in
+  @slidev/cli's node/virtual/global-layers.ts), a DIFFERENT mount point from slide-top.vue/
+  slide-bottom.vue, which SlideWrapper.vue re-mounts PER SLIDE. A debug HUD that persists across
+  navigation without a per-slide remount is the better fit here, and — unlike slide-top.vue's own
+  chrome — this is not a per-slide, frontmatter-gated concern at all: it must draw identically
+  whether or not the CURRENT slide opts out of running chrome with `chrome: false`, because the
+  whole point is to let a reviewer check ANY slide's geometry, including the ones that hide chrome.
+
+  Slidev renders GlobalTop INSIDE the same absolutely-positioned, exactly-1920×1080
+  `.slidev-slide-content` box every slide renders inside (SlideContainer.vue scales that ONE box
+  with a CSS transform; nothing inside it needs to know the scale) — confirmed by reading
+  SlideContainer.vue/SlidesShow.vue rather than assumed, because a debug overlay whose own geometry
+  is wrong would be worse than no overlay at all. That is what makes plain px-via-token absolute
+  positioning below line up with real canvas coordinates regardless of window size or zoom — and it
+  is exactly what makes `top: var(--deck-anchor-third)` below land on a genuine 360px: the token is
+  a CANVAS coordinate, and this element's own box IS the canvas, so it needs no correction. A rule
+  inside a padded box does — see split.vue's `.split-grid`, which subtracts its own inset from the
+  anchor to reach the same line.
+
+  task-14b-brief.md added two more things this overlay has to show, both CURRENT-SLIDE-dependent
+  rather than layout-agnostic like the three frames and two bands below: the y=360 anchor line
+  split.vue's text column is pinned to, and split.vue's conditional gutter (96px between two
+  same-kind columns, 0 between text and a real figure). See the `isSplit`/`gutterLabel` computeds
+  below for how a globally-mounted component reaches the CURRENT slide's own frontmatter to know
+  which state applies.
+
+  ★ TWO INDEPENDENT GUARDS AGAINST LEAKING INTO AN EXPORT, not one:
+    1. `layoutDebugEnabled` (debug/layoutDebug.js) defaults to `false` and is never persisted — a
+       fresh page load (exactly what `slidev export`'s Playwright run performs) starts false and
+       nothing in that module can start it any other way. See that file's own comment.
+    2. `isPrintMode`, read HERE, straight from `useNav()` — Slidev's own signal for "this route is
+       `/export` or carries a `?print` query" (composables/useNav.ts). `show` below is `false`
+       whenever EITHER guard says so, so even a hypothetical future bug that flipped the ref true
+       mid-export (a bad shortcut binding, a shared link, a race) still renders nothing: this
+       component has no code path that paints while `isPrintMode` is true. Verified live against
+       both `?print` navigation and a real `slidev export` run — see task-14-report.md.
+  Belt AND braces, deliberately: guard 1 alone relies on nobody ever adding a persistence path to
+  the ref; guard 2 alone would still let an interactively-toggled overlay leak into a screen-share
+  export triggered from the SAME tab without a route change. Neither guard is trusted alone.
+*/
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { useNav } from '@slidev/client';
+import { layoutDebugEnabled, layoutDebugTiers, toggleTier } from './debug/layoutDebug.js';
+import deckTokens from '@humanforest/tokens/deck/deck.json';
+
+const { isPrintMode, slides, currentPage } = useNav();
+const show = computed(() => layoutDebugEnabled.value && !isPrintMode.value);
+
+/*
+  task-14b-brief.md — the overlay now also has to show split.vue's Y-ANCHOR and its CONDITIONAL
+  gutter, and unlike the three edge insets, both depend on the CURRENT SLIDE's own frontmatter
+  (`layout`, and for a split, `frame`). GlobalTop is mounted OUTSIDE SlideWrapper.vue's per-slide
+  `provideLocal` scope (see this file's own top comment), so it cannot `inject(injectionFrontmatter)`
+  the way slide-top.vue/slide-bottom.vue do — it reads the deck's own slide list off `useNav()`
+  instead, the same source section.js already reads for the running chrome's section pill.
+
+  `useNav().currentPage` is the ROUTER value slide-top.vue's own comment warns is wrong on the
+  print/export route (no `route.params.no` there, so it reads `1` for every slide at once) — but
+  that bug cannot reach here: `show` above already forces this component to render NOTHING on that
+  exact route, and on every route where it CAN paint, `route.params.no` exists and `currentPage` is
+  correct. Using the injected version instead would need a provide/inject wiring this component does
+  not have and does not need.
+*/
+const currentFrontmatter = computed(() => slides.value[currentPage.value - 1]?.meta?.slide?.frontmatter ?? {});
+const isSplit = computed(() => currentFrontmatter.value.layout === 'split');
+/*
+  Mirrors split.vue's own `.is-content` selector: 'content' means the far slot is a second CONTENT
+  column (same-kind, the 96px --deck-split-gutter-same); 'photo', 'panel' and 'figure' all mean a
+  real figure (mixed, no gutter). The default matches split.vue's own prop default.
+
+  ★★ THIS READ `frontmatter.media ?? 'none'` AND WENT ON WORKING, WRONGLY. The prop is `frame` now
+  (3b8499f), so `.media` was always undefined, the fallback always won, and the ruler labelled every
+  split "gutter 36px · same-kind" — including the ones with no gutter at all. Nothing failed: an
+  absent frontmatter key is undefined, not an error, and the classRefs gate only checks CSS class
+  literals, not frontmatter reads.
+
+  The old comment here claimed this shape was the one "a new media kind cannot silently fall out
+  of". That was true of a new VALUE and said nothing about a renamed KEY, which is what happened.
+  Reading a key by name is exactly as fragile as reading a class by name.
+*/
+const splitFrame = computed(() => currentFrontmatter.value.frame ?? 'figure');
+/*
+  ★★ THE NUMBER IS READ, NOT WRITTEN. This said "gutter 36px" as a literal, so when the same-kind
+  gutter became 96 (9fc077b) the ruler went on announcing 36 over a slide measuring 96 — the second
+  time in one session this overlay stated something it had not looked up. An overlay whose whole
+  job is reporting measurements must not carry any of them in a string.
+*/
+const gutterLabel = computed(() =>
+  splitFrame.value === 'content' ? `gutter ${deckTokens.anchors.splitGutterSame.px}px · same-kind` : 'gutter 0 · mixed');
+
+/*
+  ★★ THE SPLIT REGIONS ARE MEASURED, NOT RE-DERIVED — which is the same rule the gutter label above
+  follows, applied to the thing the label was standing in for.
+
+  That label exists because drawing the seam as a geometric line would mean redoing split.vue's
+  grid-track-and-negative-margin arithmetic a second time, and this file's own history says a
+  duplicated sum drifts out of sync with the real one. All true — but the boxes themselves need no
+  arithmetic at all. They are in the DOM. Reading their rects back reports what the browser actually
+  laid out, so this overlay can never disagree with the layout: if it draws the wrong box, the box
+  IS wrong.
+
+  Each region gets its own outline, header band included, because "where does the second column
+  start" and "does the header really span both" are exactly the questions a split slide raises and
+  the single anchor line could not answer.
+
+  ⚠ AND THE ANCHOR LINE IS NOW CONDITIONAL, TWICE OVER. split.vue sizes row 1 to its band on a
+  slide with a `::header::`, so there the content starts at the ordinary content top and NOT on the
+  third — an anchor line drawn there points at nothing and reads as a layout bug that is not there.
+  It draws only where it is still the rule: a split without a header. And beside a real figure it
+  now spans only the CONTENT column, because that is the only half the anchor governs — see
+  `anchorSpan`.
+*/
+/*
+  EVERY LAYOUT'S OWN REGIONS, not just split's.
+
+  The overlay knew about one layout, which made it a split tool with three general frames attached
+  rather than a layout tool. A stack's band and strip, a bleed's media and content and overlay, a
+  quote's body — each is a box some rule positions, and "is that box where I think it is" is the
+  same question on every one of them.
+
+  Kept as ONE table rather than a branch per layout: a new layout with a named region joins by
+  adding a row, and a region that is renamed stops drawing rather than drawing the wrong box —
+  which is the failure mode worth having, because a missing outline is visible and a stale one is
+  not. Selectors are the layouts' own class names, and nothing here re-derives a position.
+
+  `kind` drives the outline weight, so the same KIND of region reads the same across layouts: a
+  content column looks like a content column whether it is split's or bleed's.
+*/
+const TIERS = [
+  { id: 'grid', label: 'grid', note: 'the lattice everything else sits on — --deck-grid, 24px at the time of writing' },
+  { id: 'frame', label: 'frame', note: 'canvas rules, from tokens' },
+  { id: 'region', label: 'region', note: 'a box a LAYOUT positions' },
+  { id: 'element', label: 'element', note: 'a box CONTENT occupies' },
+  { id: 'gap', label: 'gap', note: 'the space between two boxes' },
+  { id: 'hazard', label: 'hazard', note: 'a collision, or an off-ladder value' },
+];
+
+/*
+  EVERY LAYOUT'S OWN REGIONS. The table covered four of nine layouts, which made this a split tool
+  with some frames attached; cover, divider, statement, end and default drew nothing at all.
+
+  `.slidev-layout` is the highest-value row and the reason the rest is cheap: drawn as its CONTENT
+  box (inset by its own computed padding, not its border box, which is always the canvas), one row
+  gives every layout its real inset with no token guessed — 130 on a `default` that is not centred,
+  120 at the sides of every beat layout, 96 everywhere else.
+
+  ★ ROLE IS DERIVED AT MEASURE TIME, NOT STORED. A `.split-figure` at `frame: content` is a second
+  content column, and a `.stack-band` at `frame: panel` — the default — is a padded panel rather
+  than a figure, so a role written into this table is wrong for the layout's own default on two of
+  its rows. Reading it off the element's live classList also kills a staleness bug: `splitFrame` was
+  not in the watch list, so a cached role could outlive the slide it described.
+
+  ★★ AND IT IS DERIVED ON THOSE TWO ROWS ONLY — `frameRole` — because the frame class is not only
+  on the figure slot. split.vue and stack.vue both put `FRAME_CLASS[frame]` on their LAYOUT ROOT as
+  well (a state hook their own descendant selectors key off: `.is-content .split-grid`), and the
+  derivation read any element's classList, so the root matched `is-panel` and took the panel role
+  from a class that describes what its figure holds, not what the root is. Measured with the ruler
+  on specimen slide 18 (`frame: panel`): the root box drew `is-panel` — 2px solid, the panel weight
+  — where `.deck-debug-region.is-root`'s own 1px is the only thing separating the outermost box on
+  the slide from the boxes inside it. Both layouts default their frame, so this was every split and
+  every stack slide, not an edge case. The label was never wrong (it is static); only the weight
+  was, which is why it survived a reading of the labels.
+*/
+const REGIONS = [
+  { selector: '.slidev-layout', label: 'root', role: 'root', box: 'content' },
+  { selector: '.split-grid', label: 'grid', role: 'grid' },
+  { selector: '.split-content', label: 'content', role: 'column' },
+  /* ★ LABELLED `aside`, WHICH IS WHAT THE REGION IS CALLED — not `figure`, which is only what it
+     sometimes HOLDS. Jose, reading the ruler on a `frame: content` slide: "why this is called
+     figure?". It was a static label, so the overlay called a second column of prose a figure. The
+     ROLE below still varies (that is what colours the box); the NAME is the slot's name now. */
+  { selector: '.split-figure', label: 'aside', role: 'figure', frameRole: true },
+  { selector: '.split-footer', label: 'footer', role: 'band' },
+  { selector: '.stack-band', label: 'band', role: 'figure', frameRole: true },
+  { selector: '.stack-strip', label: 'strip', role: 'column' },
+  { selector: '.bleed-media', label: 'media', role: 'figure' },
+  { selector: '.bleed-content', label: 'content', role: 'column' },
+  { selector: '.bleed-overlay', label: 'overlay', role: 'band' },
+  { selector: '.quote-content', label: 'quote', role: 'column' },
+  { selector: '.quote-figure', label: 'portrait', role: 'figure' },
+  { selector: '.quote-body', label: 'body', role: 'band' },
+  { selector: '.quote-attribution', label: 'attrib', role: 'band' },
+  { selector: '.cover-content', label: 'cover', role: 'column' },
+  { selector: '.cover-rule', label: 'rule', role: 'band' },
+  { selector: '.cover-meta', label: 'meta', role: 'band' },
+  { selector: '.divider-index', label: 'index', role: 'band' },
+  { selector: '.divider-rule', label: 'rule', role: 'band' },
+  { selector: '.end-logo', label: 'logo', role: 'band' },
+];
+
+/*
+  THE ELEMENT TIER — content boxes, as distinct from the regions a layout positions.
+
+  Two closed lists rather than one wildcard, because the theme's own naming is not uniform (`deck-`,
+  bare, and `forest-` prefixes all appear) so nothing can be enumerated by pattern.
+
+  ⚠ NO INLINE ELEMENTS, EVER — no `strong`, `em`, `a`, `code`. getBoundingClientRect on a wrapped
+  inline run returns the UNION of its line fragments, which is a rectangle that exists nowhere on
+  the slide. Drawing it would be the overlay inventing geometry, which is the one thing a debug tool
+  must never do. They are absent by construction rather than filtered later.
+*/
+const ELEMENT_PROSE = 'h1, h2, h3, h4, h5, h6, hgroup, p, ul, ol, li, hr, pre, blockquote, table, figure, figcaption';
+const ELEMENT_COMPONENT = [
+  '.deck-card', '.deck-chart', '.deck-grid', '.deck-alert',
+  '.deck-icon-tile', '.deck-placeholder', '.badge-strip', '.deck-data-table', '.london-map-figure',
+  /* ★★ FOUR OF THESE WERE DEAD, and nothing said so. The overlay queried `.dotted-map`, `.deck-kpi`,
+     `.deck-stat-card` and `.deck-bars`; the components emit `dotmap`, `kpi`, `stat-card` and `bars`.
+     Zero matches for any of the four, so the element tier has never once drawn a KPI, a stat card,
+     a bar chart or a dot map — it just found nothing and moved on, which is what a querySelectorAll
+     does when it is wrong.
+
+     Three of the four are the same slip: a `deck-` prefix the component does not carry. That is the
+     uneven naming causing a real defect rather than an aesthetic one — and it is why the fix here is
+     paired with a GATE (test/classRefs.static.test.ts) rather than with a rename. Renaming the
+     components would not have prevented this; a test that resolves every hardcoded selector does. */
+  '.borough-shape', '.dotmap', '.kpi', '.stat-card', '.bars',
+].join(', ');
+
+/*
+  THE CONTAINERS WHOSE CHILDREN HAVE SEAMS BETWEEN THEM. A gap is not a thing in the DOM — it is the
+  rectangle left over between two boxes — so it can only be computed per container, over children
+  that actually sit next to each other.
+*/
+/*
+  ★ `.stack-grid` WAS MISSING, AND IT IS THE ONE STACK REGION WITH A SEAM. stack.vue sets
+  `row-gap: var(--deck-space-5)` on `.stack-grid` — the 40px between the band and the strip, and the
+  only gap that layout declares. `.stack-strip` was listed (it is a gap CONTAINER for its own
+  children) but the grid that holds the two apart was not, so the overlay drew every seam in the
+  deck except stack's own.
+*/
+const GAP_CONTAINERS = '.slidev-layout, .split-grid, .split-content, .stack-grid, .stack-strip, .bleed-content, .cover-content, .deck-grid, .quote-content, .quote-attribution, .badge-strip, hgroup, ul, ol';
+
+/*
+  ★★ WHOSE INSET IS WHOSE — the question the overlay could not answer, and the reason `split` looked
+  like a layout with no vertical inset at all.
+
+  Every layout reserves the same edge. They do not all reserve it in the same PLACE. Most put the
+  text inset of padding on their root; `stack` puts ZERO there and re-adds it on its children,
+  because a region that has to escape past the inset can only do so from a box that does not
+  already carry it.
+
+  `split` used to do the same, for a reason that has since gone: its anchor was `calc(100% / 3)`,
+  and a percentage measured inside a padded box is a third of what is LEFT rather than a third of
+  the canvas. With the anchor a canvas pixel, split is an ordinary padded root and its figure
+  escapes with a NEGATIVE margin instead.
+
+  The overlay drew padding only, so a child's margin was invisible and a root's zero read as "this
+  layout has no inset". Both halves are drawn now, told apart by their label, so the schematic
+  reports where an inset actually lives rather than only where it happens to be padding.
+
+  ★ `.deck-eyebrow` IS A SUBJECT, AND IT IS THE ONE THAT IS NOT A FRAME. Every other entry here is
+  a box a layout POSITIONS; the eyebrow is a line of text. It is here because it carries the only
+  other deliberate negative margin in the theme — `.split-content > .deck-eyebrow:first-child` is
+  lifted by its own block (split.vue), so the heading after it starts on the anchor whether the
+  eyebrow is there or not. That lift is invisible in every other tier: the column's own box does
+  not move, so the region outlines are identical with and without it, and the thing that DID move
+  is the h1 the overlay draws no rule for. Measured on deck-template, 12 of its split slides carry
+  one at -41. Left out, the escape pass reported three `.split-figure` escapes on those slides and
+  stayed silent about the fourth negative on the same slide.
+*/
+const INSET_SUBJECTS = `${GAP_CONTAINERS}, .split-figure, .stack-band, .quote-figure, .bleed-media, .cover-rule, .divider-rule, .deck-eyebrow`;
+
+/*
+  ★ THE LADDER, REVERSED. A gap's number is only half the answer — "is 40 a number this system
+  actually has" is the other half, and it is the question a schematic is for. A match prints the
+  token that owns the value; a miss prints the number with a cross and goes to the hazard tier.
+
+  Measured in canvas units against a 1px tolerance, because a rect difference at a scaled viewport
+  carries sub-pixel rounding that has nothing to do with the CSS.
+*/
+/*
+  ★★ DERIVED FROM THE GENERATED MANIFEST, NOT WRITTEN OUT. This was a hand-kept table of literal
+  pixels — [90, 'inset-text'], [96, 'notch-h'] and so on — which is correct only for the grid it was
+  typed against. Move GRID_PX and every row silently becomes a lie about a different token: at grid
+  24 with text at x4 the text inset IS 96, so the schematic matched the stale [96, 'notch-h'] row
+  and labelled the deck's text frame NOTCH-H. Jose, reading it off the slide: "i dont see the text
+  inset label in the schematic rulers". It had not vanished — it was wearing another token's name.
+
+  Same failure as the step-index constants in scripts/deck.ts: a number chosen for what it happened
+  to equal, rather than for what it means. Reading deck.json makes the ladder true at any grid, and
+  a token that is renamed or removed drops out of the schematic instead of mislabelling something.
+*/
+const LADDER = (() => {
+  const sp = deckTokens.spacing;
+  const ins = deckTokens.insets.values;
+  const rows = [[sp.gridPx, 'grid']];
+  for (const [name, v] of Object.entries(sp.steps)) rows.push([v.px, name]);
+  for (const [name, v] of Object.entries(ins)) rows.push([v.px, `inset-${name}`]);
+  rows.push([deckTokens.chrome.markPx, 'chrome-mark'], [deckTokens.chrome.bandPx, 'chrome-band']);
+  // card-pad names a STEP rather than a length, so it has to be resolved through the ladder it sits on.
+  const cardPad = sp.steps[deckTokens.radius.cardPadStep]?.px;
+  if (cardPad) rows.push([cardPad, 'card-pad']);
+  // Also a sum rather than a token: default.vue adds the heading top space to the text inset on a
+  // slide that is not centred.
+  const headingTop = deckTokens.anchors.headingTopSpace?.px;
+  if (headingTop) rows.push([ins.text.px + headingTop, 'inset-text + heading-top']);
+  return rows.filter(([px]) => Number.isFinite(px)).sort((x, y) => x[0] - y[0]);
+})();
+/*
+  ★ SEVERAL TOKENS SHARE A VALUE, AND THE LABEL SAYS SO. --deck-inset-chrome and --deck-inset-media
+  are both 36; --deck-space-3 and --deck-notch-gap are both 24. Naming only the first match makes
+  the schematic assert which token a number came from, which it cannot know from a measurement — and
+  it named a FIGURE's media inset "inset-chrome" on every split slide. Every match is listed instead,
+  so the reader picks from a true set rather than trusting a guess.
+*/
+/*
+  ★★ THE NOTCH ROWS ARE CONDITIONAL, because they are only an ANSWER on a slide that has a notch.
+
+  The notch is derived — the mark (72) plus one gap (24) — so `notch-h` is 96, and split.vue pads a
+  notched panel to `max(card-pad, notch-h)`. On a panel that is the right name for the number. On
+  every other slide it is a coincidence, and the ladder matches on VALUE, so it was volunteering
+  "notch-h" as an explanation for measurements that have nothing to do with a notch. That went
+  unnoticed while the text inset was 90 and the notch 96; the moment the grid made both 96 the root
+  padding of every slide started being labelled with it. Jose: "wtf is that notch-h".
+
+  A ladder that names a token nobody used is worse than one that says the number is off-ladder — the
+  first sends you looking for a notch, the second sends you looking at the number.
+*/
+const notchRows = () => [
+  [deckTokens.notch.gapPx, 'notch-gap'],
+  [deckTokens.notch.heightPx, 'notch-h'],
+];
+
+const ladderName = (n, opts = {}) => {
+  const table = opts.notched ? [...LADDER, ...notchRows()] : LADDER;
+  const hits = table.filter(([px]) => Math.abs(px - n) <= 1).map(([, name]) => name);
+  return hits.length ? `${Math.round(n)} · ${hits.join(' / ')}` : `${Math.round(n * 10) / 10} ✗`;
+};const overlayEl = ref(null);
+const regions = ref([]);
+const elements = ref([]);
+const gaps = ref([]);
+const notes = ref([]);
+/*
+  ★★ THE GUTTER LABEL IS MEASURED NOW, BECAUSE BOTH OF ITS OLD ANCHORS WERE WRONG.
+
+  It names split's conditional gutter — 0 between text and a real figure, 96 between two same-kind
+  columns. It was pinned `left: var(--deck-inset-chrome)` (36) and hung off --deck-anchor-third
+  (360), and neither is where the thing it describes is:
+
+    · HORIZONTALLY it sat at the slide's left edge while the gutter it names is the boundary between
+      the two columns. Measured on specimen 18: label at x 36-182, boundary at x 672. A caption 636px
+      from its subject, which is how it reads — a chip floating in the content column for no reason.
+    · VERTICALLY it hung off the anchor, which only holds at `align: anchor`. The anchor LINE was
+      taught to read `align`; this was not, so on `start`, `centre` and `end` the label pinned itself
+      to a line that is not drawn — and on `align: start`, where the column begins at 136, it landed
+      on the text.
+
+  Both are now read off the two columns themselves, so the label sits at the seam it names and above
+  whatever the column's real top turns out to be, on every value of `align`.
+*/
+const gutterAt = ref(null);
+const tierOn = (id) => layoutDebugTiers[id];
+
+/*
+  THE SLIDE'S OWN PROPS, beside the key that explains the drawing.
+
+  Two lists, because they answer two different questions and conflating them is how you end up
+  debugging a value nobody set:
+
+    AUTHORED — exactly what this slide's frontmatter says. What you wrote.
+    APPLIED  — the state classes the layout actually rendered (`is-1-2`, `is-right`, `is-photo`,
+               `bg-warm`, `is-h-end`). What the layout DID, including every default that filled
+               in for a prop the frontmatter never mentions.
+
+  ★ THE APPLIED HALF IS READ OFF THE DOM, NOT FROM THE MANIFEST. manifest.json carries every
+  layout's prop defaults and would give a prettier list — and it is 160KB, which is a real cost on
+  every deck for a panel that is off by default and never ships. The rendered classes are already
+  there, cost nothing, and are strictly better evidence: they are what the layout resolved, not what
+  it says it would resolve.
+
+  `layout`, `class` and `clicks` are dropped from the authored list — the first is the panel's own
+  title, the last two are Slidev's rather than the theme's.
+*/
+const SKIP_KEYS = new Set(['layout', 'class', 'clicks', 'preload', 'transition', 'level', 'title', 'src']);
+/*
+  Long values — an `alt` sentence, an `image` URL — are cut by CSS at the right, and the whole value
+  stays in the row's `title`, which is reachable because this panel is the one part of the overlay
+  that takes pointer events.
+
+  ⚠ NOT a path-aware rule keeping the last segment. That was the first version and it is wrong for
+  this deck's own URLs: the identifying part of
+  `assets.forest.bike/images/person-smiling-beside-green-bike/web.webp` is the DIRECTORY, and the
+  filename it kept was a generic `web.webp` that names nothing. One rule that cuts the end beats two
+  rules where the clever one guesses the wrong end.
+*/
+const slideProps = computed(() => {
+  const fm = currentFrontmatter.value;
+  return Object.entries(fm)
+    .filter(([k, v]) => !SKIP_KEYS.has(k) && v !== undefined && v !== '')
+    .map(([k, v]) => ({ k, v: typeof v === 'string' ? v : JSON.stringify(v) }));
+});
+const appliedState = ref([]);
+/*
+  ★★ THE ANCHOR LINE IS PART OF THE FRAME TIER AND MUST BE COUNTED. `frame` was the literal 6 while
+  every other row counted what it draws, so a split drawing the anchor showed 7 lines under a key
+  saying 6 — wrong in the one row a reader consults to check the overlay is drawing what they think.
+
+  ⚠ THE ORIGINAL WORDING HERE WAS "a split WITHOUT a header draws it", and cited two slides by
+  number. That was true of a deck with a `::header::` slot; split.vue has since removed the slot
+  entirely, so the sentence described a condition that could no longer occur AND the code below
+  never implemented it — `isSplit` alone was the whole test. Both halves are corrected: the story
+  is the `align` prop now, and the gate reads it.
+
+  Declared once here and used by the markup too, so the condition cannot drift from the count.
+*/
+/*
+  ★★ AND IT MUST READ `align`, WHICH IT DID NOT. The comment above tells a story about a `::header::`
+  slot — "a split WITHOUT a header draws it" — and that slot no longer exists (split.vue removed it;
+  see its own note). What actually suppresses the anchor today is split's `align` prop: `anchor` is
+  the default and the only value that keeps row 1 at the 360 line. `center` and `end` collapse it to
+  0 and place the column against its own content height; `start` collapses it too, and base.css then
+  re-sizes it to the heading top space under chrome.
+
+  So on three of the four values this painted a 3px line across y 360 pointing at nothing, and
+  counted it in the frame tier while doing so. The condition the comment claims was implemented was
+  never written — `isSplit` alone was the whole test.
+*/
+const splitAlign = computed(() => currentFrontmatter.value.align ?? 'anchor');
+const anchorShown = computed(() => isSplit.value && splitAlign.value === 'anchor');
+/*
+  Live counts for the key, so every row states how much of the thing it names is actually drawn.
+  FRAME_STATIC is the four inset frames plus the two centre lines — genuinely fixed markup, not a
+  measurement, and it must be kept in step with the `tierOn('frame')` elements in the template.
+*/
+const FRAME_STATIC = 6;
+/*
+  ★★ THE GAP ROW COUNTED SEAMS AND THE GAP TOGGLE DRAWS PADS TOO.
+
+  `tierOn('gap')` guards two passes: the seam pass (`tier: 'gap'`) and the inset pass, which pushes
+  every padding and margin band as `tier: 'pad'`. Only the first was counted, so the row read `gap 1`
+  on a slide drawing nine bands under that one toggle — measured on specimen 5: one `40 · space-5`
+  seam and eight `pad`/`mar` bands, under a key claiming 1.
+
+  A key exists so a reader can check the overlay is drawing what they think. A row that says 1 where
+  9 are on screen makes the instrument the thing you have to check, which is the one job it cannot do.
+
+  ★ AND `grid` HAD NO COUNT AT ALL. It rendered an empty <dd> beside a comment claiming every row
+  states what it draws. The grid tier is a GROUND — one wash carrying the lattice, plus the two
+  centre rules — so it is countable, and counting it is cheaper than explaining why it is the one
+  row that does not.
+*/
+const CENTRE_RULES = 2;
+const tierCount = computed(() => ({
+  grid: 1 + CENTRE_RULES,
+  frame: FRAME_STATIC + (anchorShown.value ? 1 : 0),
+  region: regions.value.length,
+  element: elements.value.length,
+  gap: gaps.value.filter((g) => g.tier === 'gap' || g.tier === 'pad').length,
+  hazard: gaps.value.filter((g) => g.tier === 'hazard').length + notes.value.filter((n) => n.tier === 'hazard').length,
+}));
+// Where the text column actually begins, measured — used to place the gutter label on a header
+// split, where the anchor it used to hang from is no longer where anything starts.
+// Read off the generated tokens the frames are actually drawn from, so the key cannot state a
+// number the lines do not use. `getComputedStyle` on the overlay resolves them in the same cascade
+// the frames resolve in.
+const tokenPx = (name, axis = 'x') => {
+  if (typeof window === 'undefined' || !overlayEl.value) return '';
+  /*
+    ★ RESOLVED BY MEASURING, not by parsing. getPropertyValue returns a custom property's raw TEXT,
+    and every inset in this system is an expression — `--deck-inset-chrome` is `calc(var(--deck-grid) * 1.5)`.
+    parseFloat("calc(...") is NaN, and the key printed "NaNpx" for all three. Assigning the token to
+    a real length and reading the resolved value back makes the browser do the arithmetic, which is
+    also the only way this stays correct if an inset ever becomes a clamp() or a min().
+  */
+  const probe = document.createElement('div');
+  /*
+    ★ AND THE AXIS MATTERS — for the tokens where it still can. `--deck-anchor-third` was
+    `calc(100% / 3)`, so resolving it against a probe's WIDTH measured a third of 1920 and the key
+    printed 640px beside a line the overlay draws at y=360. That token is a plain pixel now and
+    reads the same either way, but the parameter stays: a percentage or a `min()` against the
+    viewport has no meaning until you say of what, and this is the only place that can say it.
+  */
+  probe.style.cssText = axis === 'y'
+    ? `position:absolute;visibility:hidden;width:0;height:var(${name})`
+    : `position:absolute;visibility:hidden;height:0;width:var(${name})`;
+  overlayEl.value.appendChild(probe);
+  const px = axis === 'y' ? getComputedStyle(probe).height : getComputedStyle(probe).width;
+  probe.remove();
+  const n = parseFloat(px);
+  return Number.isFinite(n) ? `${Math.round(n)}px` : '';
+};
+const tokenTick = ref(0);
+const insetChrome = computed(() => (tokenTick.value, tokenPx('--deck-inset-chrome')));
+const insetMedia = computed(() => (tokenTick.value, tokenPx('--deck-inset-media')));
+const insetText = computed(() => (tokenTick.value, tokenPx('--deck-inset-text')));
+const insetDisplay = computed(() => (tokenTick.value, tokenPx('--deck-inset-display')));
+const anchorY = computed(() => (tokenTick.value, tokenPx('--deck-anchor-third', 'y')));
+const contentRegion = computed(() => regions.value.find((r) => r.selector === '.split-content') ?? null);
+
+/*
+  ★★ THE MEDIA FRAME'S VERTICAL BOUND IS NOT ONE NUMBER, and drawing it as one put the rule 60px
+  off the figure on every notched slide in the deck.
+
+  scripts/deck.ts says it above INSET, and the generated deck.css repeats it over the token: a
+  figure's top and bottom follow the NOTCH, together. Notched, both edges are --deck-inset-media
+  (36) — the cut is what keeps the running mark clear, and the mark's own corner and the figure's
+  are then the same point. Un-notched (`notch: false`, `chrome: false`, or a `media: none` second
+  content column), both are --deck-inset-text (96), the pre-notch geometry the escape hatch is
+  documented to restore.
+
+  This drew --deck-inset-text unconditionally, under a comment that cited that same deck.ts passage
+  as authority for "media's vertical bound IS text's" — the one reading it does not support. So the
+  overlay reproduced, as a drawn rule, exactly the half-state deck.ts records as already fixed: 36
+  on the sides, 96 top and bottom. Measured with the ruler on specimen slide 18 (`frame: panel`,
+  notched): the rule sat at 96/96 while the figure it bounds measured 36 on all four sides, and the
+  escape pass printed `div.split-figure top escape -60` beside it — the overlay reporting the
+  60px in one tier and denying it in another.
+
+  ONE LINE, NOT TWO. Both candidate values already have a rule on screen: 36 is the chrome frame's
+  inset on all four edges and 96 is the text frame's, so a second line at either lands exactly on
+  one that is already drawn — the same "two rectangles on the same point" this file collapses to a
+  note for bleed's media and overlay. The tokens are what differ, and the key already prints all
+  four for comparison.
+*/
+const figureNotched = ref(false);
+const mediaVBound = computed(() => (figureNotched.value ? insetMedia.value : insetText.value));
+
+/*
+  ★★ THE ANCHOR LINE SPANS WHAT THE ANCHOR ACTUALLY GOVERNS, which is not always the canvas.
+
+  It was drawn `left: 0; right: 0` on every split without a header — a FRAME-tier line, which is
+  this overlay's way of saying "a fact about the slide". That was only ever true at `media: none`,
+  where both columns are content and both start on the third. Beside a real figure — photo, panel,
+  or the component kind — the figure spans rows 1-2 and starts at the top, so a full-width line
+  claims a rule the far half of the slide does not obey, and points at nothing where it crosses it.
+
+  Jose, looking at exactly that: "why the blue goes all the way crossing the whole slide when it is
+  only for the part that have text?"
+
+  Measured off the CONTENT region rather than computed from ratio and side: the box is already
+  measured for the region outlines, and re-deriving it here would be a second implementation of the
+  column arithmetic that could disagree with the first. Same discipline as the header case above —
+  the line draws only where it is still the rule, and now also only ACROSS where it is still the
+  rule.
+*/
+const anchorSpan = computed(() => {
+  if (splitFrame.value === 'content') return null; // both columns obey it — the canvas-wide line is true
+  const c = contentRegion.value?.style;
+  return c ? { left: c.left, width: c.width, right: 'auto' } : null;
+});
+
+function measureRegions() {
+  const host = overlayEl.value;
+  if (!host || !show.value) { regions.value = []; return; }
+  /*
+    ★★ THE PAGE IS PICKED BY NUMBER, NOT BY BEING VISIBLE — and that distinction is the whole
+    "rulers lag one slide" bug.
+
+    Slidev keeps EVERY slide mounted (128 of them in the specimen) and runs a real, non-zero CSS
+    transition between them. So there are two moments where "the first .slidev-page with a box" is
+    wrong, and they fail in opposite directions:
+
+      · before any navigation, every page except the active one measures 0x0, and the FIRST in
+        document order is not the active one — the overlay drew nothing at all;
+      · mid-transition BOTH the outgoing and incoming slides have boxes, and the outgoing one comes
+        first whenever you are moving forwards — so the rulers measured the slide you just left.
+
+    The second is what a reader sees as a one-slide lag: the watcher fires on `currentPage`, waits a
+    single `nextTick`, and measures while the leave-transition is still running. Nothing re-measures
+    when it finishes, so the stale boxes stand until the NEXT navigation measures the slide you were
+    on a moment ago. Forever one behind.
+
+    `data-slidev-no` is Slidev's own 1-based page attribute, so asking for the number the router is
+    on cannot pick up a neighbour whatever the transition is doing. The visible-box scan stays as a
+    fallback for the case the attribute ever moves, and the zero-box guard below still skips a page
+    that is mounted but not laid out.
+  */
+  const page = document.querySelector(`.slidev-page[data-slidev-no="${currentPage.value}"]`)
+    ?? [...document.querySelectorAll('.slidev-page')].find((el) => {
+      const b = el.getBoundingClientRect();
+      return b.width > 0 && b.height > 0;
+    });
+  const root = host.getBoundingClientRect();
+  // The overlay's own box IS the unpadded canvas (see this file's top comment), so a rect measured
+  // against it needs no scale factor — both are in the same transformed space.
+  // Canvas units, not pixels of a scaled viewport: the deck is authored against 1920x1080 and every
+  // number in the theme's comments, tokens and audit is in that space. A reader comparing the
+  // overlay against --deck-inset-text (90) must see 90, whatever size the window happens to be.
+  const toCanvas = (px, axis) => Math.round((px / (axis === 'x' ? root.width : root.height)) * (axis === 'x' ? 1920 : 1080));
+  const pct = (b) => ({
+    left: `${((b.left - root.left) / root.width) * 100}%`,
+    top: `${((b.top - root.top) / root.height) * 100}%`,
+    width: `${(b.width / root.width) * 100}%`,
+    height: `${(b.height / root.height) * 100}%`,
+  });
+  /* A rect in CANVAS units, which is the only space any number in this theme is quoted in. */
+  const canvas = (b) => ({
+    left: toCanvas(b.left - root.left, 'x'),
+    top: toCanvas(b.top - root.top, 'y'),
+    right: toCanvas(b.right - root.left, 'x'),
+    bottom: toCanvas(b.bottom - root.top, 'y'),
+    width: toCanvas(b.width, 'x'),
+    height: toCanvas(b.height, 'y'),
+  });
+  const name = (el) => el.tagName.toLowerCase()
+    + (typeof el.className === 'string' && el.className.trim()
+      ? `.${el.className.trim().split(/\s+/)[0]}` : '');
+  const seen = (el) => {
+    const cs = getComputedStyle(el);
+    return cs.visibility !== 'hidden' && cs.opacity !== '0';
+  };
+
+  const nextRegions = [];
+  const nextNotes = [];
+  /*
+    ★ CHIPS GET PACKED, because two regions that start at the same corner put two labels on the same
+    pixel — `band` and `root` were unreadable on top of each other on every stack slide.
+
+    A greedy shelf packer in canvas units: try the chip's own row, and if something already occupies
+    that horizontal span, drop a row and try again. Sorted by area DESCENDING before packing, so the
+    big boxes keep their true top edge and the small ones move — a chip that has moved is still
+    attached to its own outline, and the big box is the one you are usually reading.
+  */
+  /*
+    ★ MEASURED, NOT GUESSED: a chip renders 26.5 canvas px tall, so shelves of 26 overlapped by half
+    a pixel even when the packer worked. 30 leaves a hair of daylight between rows.
+  */
+  const LABEL_H = 30;
+  /*
+    ★★ A CHIP ONLY MOVES IF SOMETHING IS ACTUALLY IN ITS WAY. This rounded every chip onto a shelf
+    lattice — `Math.round(y / LABEL_H)` — BEFORE testing for a clash, so a label with nothing near
+    it was still snapped to the nearest shelf and left floating off the corner it names. Measured on
+    the specimen's two-chart slide: `content` and `aside` clash with nothing and sat 6px below their
+    own boxes, because 264 is not a multiple of 30. A chip that does not touch its own outline is
+    the one thing this label must never do — on a dense slide it is the only way to tell which of
+    four nested boxes it belongs to.
+
+    So: try the true corner, and only then step down a row at a time. Rectangles rather than shelf
+    buckets, because once a chip can sit at an arbitrary y the buckets no longer line up with each
+    other and two "different" shelves can overlap.
+  */
+  const placed = [];
+  const placeChip = (x, y, width) => {
+    for (let n = 0; n < 8; n += 1) {
+      const top = y + n * LABEL_H;
+      const clash = placed.some((p) => x < p.x + p.w && p.x < x + width && top < p.y + LABEL_H && p.y < top + LABEL_H);
+      if (!clash) {
+        placed.push({ x, y: top, w: width });
+        return top - y; // 0 when it kept its own corner, which is the common case
+      }
+    }
+    return null;
+  };
+
+  for (const r of REGIONS) {
+    const els = page ? [...page.querySelectorAll(r.selector)] : [];
+    if (!els.length) {
+      // ★ ABSENT, COLLAPSED AND UNMEASURABLE ARE THREE DIFFERENT STATEMENTS, and all three used to
+      // render as nothing at all — so a row that matched no element looked exactly like a row that
+      // did not exist. Only the conditional regions are worth saying this about.
+      if (r.selector === '.split-footer' || r.selector === '.quote-figure') {
+        nextNotes.push({ tier: 'region', text: `${r.label} — absent` });
+      }
+      continue;
+    }
+    for (const el of els) {
+      if (!seen(el)) continue;
+      const cs = getComputedStyle(el);
+      let b = el.getBoundingClientRect();
+      if (b.width === 0 || b.height === 0) {
+        nextNotes.push({ tier: 'region', text: `${r.label} — collapsed to zero` });
+        continue;
+      }
+      /*
+        The ROOT is drawn as its CONTENT box. Its border box is always the canvas, which is a
+        rectangle every slide has and nobody needs drawn — the interesting number is where its own
+        padding actually starts, which differs per layout and is the thing no token states.
+      */
+      if (r.box === 'content') {
+        /*
+          ★★ CANVAS UNITS IN, SCREEN PIXELS OUT — the same trap as the padding bands, and it bit
+          here first. `b` came from getBoundingClientRect and is in SCREEN pixels; a computed
+          padding is in CANVAS units, because a transform does not scale computed values. Subtracting
+          one from the other inset the root by 90 screen pixels where the edge is 54, and the ROOT
+          chip landed in the middle of the slide, under the heading, instead of on the content's own
+          top-left corner. Reported as "what is that root thing in the middle of the slide?".
+        */
+        const sx = root.width / 1920;
+        const sy = root.height / 1080;
+        const p = (k, s2) => (parseFloat(cs.getPropertyValue(k)) || 0) * s2;
+        const padL = p('padding-left', sx) + p('border-left-width', sx);
+        const padR = p('padding-right', sx) + p('border-right-width', sx);
+        const padT = p('padding-top', sy) + p('border-top-width', sy);
+        const padB = p('padding-bottom', sy) + p('border-bottom-width', sy);
+        b = new DOMRect(b.left + padL, b.top + padT, b.width - padL - padR, b.height - padT - padB);
+      }
+      const c = canvas(b);
+      /*
+        ★ A BOX THAT IS THE WHOLE CANVAS IS NOT A REGION. bleed's media and its overlay are both
+        `inset: 0`, so they drew two identical full-canvas rectangles with two labels on the same
+        point. Collapsed to a note instead of a box nobody can learn anything from.
+      */
+      if (c.width >= 1918 && c.height >= 1078 && r.box !== 'content') {
+        nextNotes.push({ tier: 'region', text: `${r.label} — full canvas` });
+        continue;
+      }
+      // Role read off the LIVE element, never stored, and only on a FIGURE SLOT — see the REGIONS
+      // comment for both halves, and for what the root drew before `frameRole` gated this.
+      const role = !r.frameRole ? r.role
+        : el.classList.contains('is-content') ? 'column'
+          : el.classList.contains('is-panel') ? 'panel'
+            // `figure` and `photo` draw the same way — both are a real figure filling the cell.
+            : (el.classList.contains('is-photo') || el.classList.contains('is-figure')) ? 'figure'
+              : r.role;
+      nextRegions.push({
+        /* ★★ THE SELECTOR IS CARRIED, because the KEY cannot be looked up by. It is
+           `selector.slice(1)` PLUS an index — `.split-content` becomes `split-content-1` — so
+           `find(r => r.key === 'split-content')` matches nothing, ever. A `contentTop` computed
+           did exactly that and had been silently null since it was written; the readout meant to
+           print it showed nothing, and nobody noticed a number that was never there. It and its
+           `.deck-debug-label.is-measured` rule are both gone now — a dead computed feeding a rule
+           nothing stamps is two pieces of scaffolding for a feature that was never wired. */
+        selector: r.selector,
+        key: `${r.selector.slice(1)}-${nextRegions.length}`,
+        role,
+        label: r.label,
+        readout: `${c.left},${c.top} · ${c.width}x${c.height}`,
+        rect: c,
+        area: c.width * c.height,
+        style: pct(b),
+      });
+    }
+  }
+  /* Pack the chips after every box is known, biggest first — see placeChip. */
+  for (const r of [...nextRegions].sort((a, z) => z.area - a.area)) {
+    const offset = placeChip(r.rect.left, r.rect.top, r.label.length * 11 + 16);
+    if (offset === null) {
+      r.chipStyle = { display: 'none' };
+      nextNotes.push({ tier: 'region', text: `${r.label} — chip dropped, no room` });
+      continue;
+    }
+    /*
+      A chip is positioned inside its own region box, so a percentage `top` would be a fraction of
+      the REGION's height — which is a different number for every region and none of them the canvas
+      the offset was computed in. Translated instead.
+
+      ★★ IN CANVAS PX, NOT SCREEN PX, AND THAT ONE CONVERSION WAS THE WHOLE BUG. This read
+      `(offset / 1080) * root.height`, converting the canvas offset into screen pixels. But the chip
+      lives INSIDE the slide, which Slidev has already scaled — a `px` in here IS a canvas px — so
+      the conversion applied the scale a second time and every shelf collapsed to roughly half its
+      height. Measured on a split with a header: root, grid and header chips landed 15 canvas px
+      apart while each one is 26.5 tall, so all three printed on top of each other and over the
+      section pill. The packer was working perfectly and being handed a shrunken ruler.
+    */
+    r.chipStyle = { transform: `translateY(${offset}px)` };
+  }
+  regions.value = nextRegions;
+
+  /*
+    The seam between the two columns, and the top of the one the label belongs above. Taken from the
+    rendered boxes rather than from `side`, so a layout that ever places them differently moves the
+    label with it instead of stranding it.
+  */
+  {
+    const gc = page?.querySelector('.split-content');
+    const gf = page?.querySelector('.split-figure');
+    if (gc && gf) {
+      const c = gc.getBoundingClientRect();
+      const f = gf.getBoundingClientRect();
+      // Whichever inner edge the two share — content-left-of-figure, or the mirror of it.
+      const seam = c.left < f.left ? c.right : f.right;
+      gutterAt.value = {
+        left: `${((seam - root.left) / root.width) * 100}%`,
+        top: `${((c.top - root.top) / root.height) * 100}%`,
+      };
+    } else {
+      gutterAt.value = null;
+    }
+  }
+
+  /*
+    The layout's own state classes — every `is-*` / `bg-*` it rendered, minus the layout name
+    itself and the shared `slidev-layout`. This is the half of the props panel that shows a default
+    doing its work.
+  */
+  const layoutEl = page?.querySelector('.slidev-layout');
+  appliedState.value = layoutEl
+    ? [...layoutEl.classList].filter((c) => c.startsWith('is-') || c.startsWith('bg-'))
+    : [];
+  /*
+    Read off the slide rather than from `currentFrontmatter.notch`, because a notch is not one
+    prop: notchShows() (../notch.js) folds `notch:`, `chrome:` and the frame into one answer, and
+    the class the layouts stamp is that answer. The two layouts spell it differently — split marks
+    its figure `.has-notch`, stack marks its band `.is-notched` — so both are asked for.
+  */
+  figureNotched.value = !!page?.querySelector('.split-figure.has-notch, .stack-band.is-notched');
+
+  /*
+    THE ELEMENT TIER. Hairlines, no labels — identity is legible from the content underneath, and
+    forty labels would bury the boxes they name. Capped, and the cap is VISIBLE: a silently
+    truncated schematic is a schematic that lies about how much it looked at.
+  */
+  const nextElements = [];
+  if (tierOn('element') && page) {
+    const els = [...page.querySelectorAll(`${ELEMENT_PROSE}, ${ELEMENT_COMPONENT}`)];
+    if (els.length > 150) {
+      nextNotes.push({ tier: 'hazard', text: `elements ${els.length} · capped at 150` });
+    }
+    for (const el of els.slice(0, 150)) {
+      if (!seen(el)) continue;
+      const b = el.getBoundingClientRect();
+      if (b.width === 0 || b.height === 0) continue;
+      nextElements.push({
+        key: `el-${nextElements.length}`,
+        kind: el.matches(ELEMENT_COMPONENT) ? 'component' : 'prose',
+        style: pct(b),
+      });
+    }
+  }
+  elements.value = nextElements;
+
+  /*
+    ★★ A GAP IS NOT IN THE DOM. It is the rectangle left between two boxes, so it can only be
+    computed — per container, over children that actually sit beside each other.
+
+    Three mechanisms, and only the first is a rect difference:
+      · a SEAM between consecutive siblings (a real grid/flex gap, or a margin);
+      · PADDING, which is not a gap at all and is drawn hatched, because filling it flat would
+        assert a gutter the layout does not have;
+      · a NEGATIVE seam, which is an overlap, which is a hazard.
+
+    The declared `gap` wins over the measured band where the container states one: at a scaled
+    viewport a rect difference carries rounding that has nothing to do with the CSS, and a
+    schematic that calls 40px "39.4 ✗" is worse than one that says nothing.
+  */
+  const nextGaps = [];
+  if (tierOn('gap') && page) {
+    for (const container of page.querySelectorAll(GAP_CONTAINERS)) {
+      const cs = getComputedStyle(container);
+      const kids = [...container.children]
+        .filter((el) => seen(el) && el.getBoundingClientRect().width > 0 && el.getBoundingClientRect().height > 0)
+        .map((el) => ({ el, r: el.getBoundingClientRect() }))
+        .sort((a, z) => (a.r.top - z.r.top) || (a.r.left - z.r.left));
+      const declaredRow = parseFloat(cs.rowGap);
+      const declaredCol = parseFloat(cs.columnGap);
+      /*
+        ★★ PAIRS ARE FOUND BY ADJACENCY, NOT BY SORT ORDER.
+
+        This walked `kids` sorted by (top, left) and compared i with i+1, which assumes
+        consecutive-in-sort means neighbours-in-layout. That holds only while every cell in a row
+        shares a top — which `align: stretch` gives and `align: start` and `center` do not, the
+        moment the cells have unequal heights.
+
+        Measured on the Grid align specimen's centre row: cells at x 96-651, 683-1237, 1269-1824
+        with tops 604, 554, 579. Sorted by top the order is 2, 3, 1, so the pairs became (2,3) and
+        (3,1) — the second being opposite ends of the row, drawn as a 618 x 60 "gap" with cell two
+        sitting inside it. And because (1,2) were never consecutive, their real 32px seam was never
+        drawn at all: one band that was a lie, one that was missing, from the same wrong assumption.
+
+        So each box looks for its actual neighbour: the nearest box to its right that shares a
+        vertical span, and the nearest below that shares a horizontal one. Pairs are recorded both
+        ways round and de-duplicated, so a seam is emitted once. O(n²) over one container's
+        children, which is a handful of boxes.
+      */
+      const pairs = [];
+      const takenPair = new Set();
+      for (let i = 0; i < kids.length; i++) {
+        for (const axis of ['x', 'y']) {
+          let best = null;
+          for (let j = 0; j < kids.length; j++) {
+            if (i === j) continue;
+            const A = kids[i].r; const B = kids[j].r;
+            const shares = axis === 'x'
+              ? Math.min(A.bottom, B.bottom) - Math.max(A.top, B.top) > 1
+              : Math.min(A.right, B.right) - Math.max(A.left, B.left) > 1;
+            if (!shares) continue;
+            const after = axis === 'x' ? B.left >= A.right - 1 : B.top >= A.bottom - 1;
+            if (!after) continue;
+            const distance = axis === 'x' ? B.left - A.right : B.top - A.bottom;
+            if (!best || distance < best.distance) best = { j, distance };
+          }
+          if (!best) continue;
+          const key = `${Math.min(i, best.j)}-${Math.max(i, best.j)}-${axis}`;
+          if (takenPair.has(key)) continue;
+          takenPair.add(key);
+          pairs.push([kids[i].r, kids[best.j].r]);
+        }
+      }
+      for (const [a, z] of pairs) {
+        const ox = Math.min(a.right, z.right) - Math.max(a.left, z.left);
+        const oy = Math.min(a.bottom, z.bottom) - Math.max(a.top, z.top);
+        let band = null; let axis = null;
+        if (ox > 0 && oy <= 0) {
+          axis = 'y';
+          band = new DOMRect(Math.max(a.left, z.left), Math.min(a.bottom, z.bottom),
+            Math.min(a.right, z.right) - Math.max(a.left, z.left), Math.max(a.top, z.top) - Math.min(a.bottom, z.bottom));
+        } else if (oy > 0 && ox <= 0) {
+          axis = 'x';
+          band = new DOMRect(Math.min(a.right, z.right), Math.max(a.top, z.top),
+            Math.max(a.left, z.left) - Math.min(a.right, z.right), Math.min(a.bottom, z.bottom) - Math.max(a.top, z.top));
+        }
+        /*
+          ★★ THE OVERLAP ARM, WHICH WAS UNREACHABLE — AND IT IS THE ONE THIS FILE EXISTS FOR.
+
+          Two rects overlap in 2-D when ox > 0 AND oy > 0. Neither branch above matches that: the
+          first wants `oy <= 0`, the second `ox <= 0`. So a real collision fell through to
+          `if (!band) continue` and was dropped in silence — never drawn, never labelled, never
+          counted in the hazard tier.
+
+          The old guard for it could not fire either. It tested `sizePx < 0`, but on the y branch
+          sizePx is `max(a.top, z.top) - min(a.bottom, z.bottom)`, which is exactly `-oy` with
+          `oy <= 0`, so it is >= 0 by construction; the x branch is `-ox` under `ox <= 0`, the same.
+          Dead code guarding a case that arrived by a path that never ran.
+
+          That is the whole stated point of the overlay — see the note at the top of this file:
+          scripts/deckAudit.ts measures OVERFLOW past the canvas, not COLLISION inside it. The
+          instrument built to catch collisions by eye could not draw one.
+
+          Reported on the SHALLOWER axis, because that is the direction a reader would move something
+          to separate the pair, and the intersection rect is what gets painted.
+        */
+        /*
+          ★★ A SUB-PIXEL POSITIVE IS ADJACENCY, NOT A COLLISION — and testing `> 0` made this fire on
+          most of the deck the day it was written.
+
+          Two boxes that share an edge should give ox === 0 exactly. They do not: the rects come from
+          getBoundingClientRect on a transform-scaled slide, so an edge both sides agree on comes back
+          a fraction apart, and `ox > 0` passes. Measured on specimen 18 the moment the arm went in —
+          one hazard, box 0.0 x 295.4 screen px, labelled `overlap 0`: split's two columns touching,
+          reported as a collision. Every split has that pair.
+
+          So the test is a depth you could SEE, in canvas units, on both axes. A hazard tier that
+          cries wolf is worth exactly as much as the one that never fired — which is what this arm
+          replaced, and the reason to get the threshold right rather than ship the inverse defect.
+        */
+        const oxCanvas = toCanvas(ox, 'x');
+        const oyCanvas = toCanvas(oy, 'y');
+        if (oxCanvas >= 1 && oyCanvas >= 1) {
+          const depth = Math.min(ox, oy);
+          const collisionAxis = ox < oy ? 'x' : 'y';
+          nextGaps.push({
+            key: `gap-${nextGaps.length}`,
+            tier: 'hazard',
+            axis: collisionAxis,
+            vertical: collisionAxis === 'x',
+            label: `overlap ${toCanvas(depth, collisionAxis)}`,
+            style: pct(new DOMRect(Math.max(a.left, z.left), Math.max(a.top, z.top), ox, oy)),
+          });
+          continue;
+        }
+        if (!band) continue;
+        /*
+          ★★ A SEAM HAS NOTHING IN IT, AND WITHOUT THIS CHECK IT OFTEN DID.
+
+          The pairs above come from `kids` sorted by (top, left) and compared consecutively — which
+          assumes consecutive-in-sort means adjacent-in-layout. It does not the moment two cells in
+          the same row have different tops, which is exactly what `align: center` and `align: start`
+          produce on cells of unequal height. The sort then interleaves the row and pairs cells that
+          are not neighbours at all.
+
+          Measured on the Grid align specimen, the centre row: cells at x 96-651, 683-1237 and
+          1269-1824, tops 604, 554 and 579. Sorted by top the order becomes 2, 3, 1 — so the last
+          pair is cell THREE against cell ONE, opposite ends of the row, and the band drawn between
+          them was 618 x 60 with cell two sitting inside it. A `gap` label on a rectangle containing
+          a cell.
+
+          Rejecting a band that another child intersects is the whole fix, and it is the definition
+          rather than a heuristic: the space between two boxes is empty, or it is not a gap.
+        */
+        const bandLeft = band.x, bandTop = band.y;
+        const bandRight = band.x + Math.abs(band.width), bandBottom = band.y + Math.abs(band.height);
+        const occupied = kids.some(({ r }) =>
+          r !== a && r !== z
+          && Math.min(r.right, bandRight) - Math.max(r.left, bandLeft) > 1
+          && Math.min(r.bottom, bandBottom) - Math.max(r.top, bandTop) > 1);
+        if (occupied) continue;
+        const sizePx = axis === 'y' ? band.height : band.width;
+        const sizeCanvas = axis === 'y' ? toCanvas(sizePx, 'y') : toCanvas(sizePx, 'x');
+        const declared = axis === 'y' ? declaredRow : declaredCol;
+        const value = Number.isFinite(declared) && declared > 0 ? declared : sizeCanvas;
+        if (sizeCanvas <= 0) continue;
+        /*
+          ★★ LEFTOVER SPACE IS NOT AN OFF-LADDER VALUE, and without this every centred slide reported
+          a hazard for working correctly.
+
+          A layout that centres with AUTO MARGINS hands its children whatever space is left over.
+          That number is a RESULT — it moves with the content's own height — so it lands on a spacing
+          rung only by coincidence, and `ladderName` marked all of it `✗`. Measured on the specimen's
+          `body-center` diagram slides: a 210px band under the heading, drawn in the hazard tier, on
+          a slide with nothing wrong with it. A warning that fires on every correct use of a feature
+          is worse than no warning, because it is the one people learn to scroll past.
+
+          The layout declares this with `data-deck-distributes` (see default.vue) rather than being
+          sniffed for it: `getComputedStyle` resolves `margin-top: auto` to its used pixel value, so
+          after the fact an auto margin and a hardcoded one are the same number.
+
+          ⚠ ONLY ON THE AXIS NAMED, and only where the container did not declare the gap itself. A
+          distributing layout can still hold a real grid gap, and that one IS authored spacing and
+          stays on the ladder.*/
+        const distributes = container.closest(`[data-deck-distributes~="${axis}"]`);
+        const leftover = !!distributes && !(Number.isFinite(declared) && declared > 0);
+        const name = leftover
+          ? `${Math.round(sizeCanvas)} · leftover`
+          : ladderName(value, { notched: !!container.closest('.has-notch') });
+        nextGaps.push({
+          key: `gap-${nextGaps.length}`,
+          tier: name.endsWith('✗') ? 'hazard' : 'gap',
+          axis,
+          // A band between two side-by-side boxes is TALL AND NARROW, so its label has to turn with
+          // it — set horizontally it either overflows the band or gets clipped by it.
+          vertical: axis === 'x',
+          label: name,
+          style: pct(band),
+        });
+      }
+    }
+  }
+    /*
+      THE INSET PASS — padding AND margin, for every subject whose own edge is worth reading.
+
+      ★★ A COMPUTED STYLE IS ALREADY IN CANVAS UNITS. A slide is transform-SCALED, and a transform
+      does not touch computed values — so `paddingLeft` reads 96 while the same edge measures 58
+      screen pixels. Running it through toCanvas() scaled it a second time and the schematic
+      reported the deck's own 90px text inset as `pad 150 ✗`, off the ladder, on every slide. A tool
+      whose job is to say "is this value one the system has" cannot be the thing inventing values.
+
+      So the number is used as-is for the LABEL, and converted the other way — canvas to screen — to
+      draw the band, because the rect it is drawn against came from getBoundingClientRect.
+
+      ⚠ A NEGATIVE MARGIN IS NOT AN INSET. `.split-figure` and `.stack-band` carry one deliberately,
+      to escape their own grid track and reach the media inset; drawing it as a band would put a
+      rectangle outside the element it belongs to. Noted instead of drawn.
+    */
+    if (tierOn('gap') && page) {
+      const toScreenX = (n) => (n / 1920) * root.width;
+      const toScreenY = (n) => (n / 1080) * root.height;
+      for (const el of page.querySelectorAll(INSET_SUBJECTS)) {
+        if (!seen(el)) continue;
+        const cs = getComputedStyle(el);
+        const cb = el.getBoundingClientRect();
+        if (!(cb.width > 0) || !(cb.height > 0)) continue;
+        for (const [kind, prop] of [['pad', 'padding'], ['mar', 'margin']]) {
+          for (const side of ['top', 'right', 'bottom', 'left']) {
+            const v = parseFloat(cs[`${prop}${side[0].toUpperCase()}${side.slice(1)}`]);
+            if (!Number.isFinite(v) || v <= 1) {
+              if (kind === 'mar' && v < -1) {
+                nextNotes.push({ tier: 'region', text: `${name(el)} ${side} escape ${Math.round(v)}` });
+              }
+              continue;
+            }
+            const vert = side === 'top' || side === 'bottom';
+            const px = vert ? toScreenY(v) : toScreenX(v);
+            // A margin sits OUTSIDE the border box; padding sits inside it.
+            const r = kind === 'pad'
+              ? (side === 'top' ? new DOMRect(cb.left, cb.top, cb.width, px)
+                : side === 'bottom' ? new DOMRect(cb.left, cb.bottom - px, cb.width, px)
+                  : side === 'left' ? new DOMRect(cb.left, cb.top, px, cb.height)
+                    : new DOMRect(cb.right - px, cb.top, px, cb.height))
+              : (side === 'top' ? new DOMRect(cb.left, cb.top - px, cb.width, px)
+                : side === 'bottom' ? new DOMRect(cb.left, cb.bottom, cb.width, px)
+                  : side === 'left' ? new DOMRect(cb.left - px, cb.top, px, cb.height)
+                    : new DOMRect(cb.right, cb.top, px, cb.height));
+            nextGaps.push({
+              key: `${kind}-${nextGaps.length}`,
+              tier: 'pad',
+              axis: side,
+              vertical: side === 'left' || side === 'right',
+              label: `${kind} ${ladderName(v, { notched: !!el.closest('.has-notch') })}`,
+              style: pct(r),
+            });
+          }
+        }
+      }
+    }
+
+  gaps.value = nextGaps;
+  notes.value = nextNotes;
+  tokenTick.value += 1;
+}
+
+/*
+  ★★ OBSERVED, NOT TIMED. A slide keeps moving after the navigation that brought it in — the route
+  transition is a real CSS animation, the webfont swap reflows every column, and an icon or an image
+  resolving late changes the height of whatever holds it. Every one of those happens AFTER the tick
+  the watcher fires on.
+
+  MEASURED, and this is what made a timeout obviously the wrong tool: on the `Band ratio 3:2` slide
+  the overlay read `1848x280` while the band's own box was `1848x380`. Same slide, no navigation,
+  nothing to wait a fixed number of milliseconds for — the band simply grew a hundred pixels after
+  the reading was taken, and a deadline tuned to the transition would have missed it just as
+  completely as no deadline at all.
+
+  So a ResizeObserver watches the page being measured and re-measures whenever anything in it
+  settles. That is one mechanism instead of three guesses, and it cannot be stale by construction:
+  if the box moves, the reading moves. `document.fonts.ready` stays as the one nudge an observer
+  cannot give — a swap that changes glyph widths without changing the observed box.
+
+  The observer is re-pointed on every slide change rather than left on the first page, because
+  Slidev keeps all of them mounted and the box that matters is the one the router is on.
+*/
+let pageObserver = null;
+const observePage = () => {
+  if (typeof ResizeObserver === 'undefined') return;
+  pageObserver?.disconnect();
+  const page = document.querySelector(`.slidev-page[data-slidev-no="${currentPage.value}"]`);
+  if (!page || !show.value) return;
+  pageObserver = new ResizeObserver(() => measureRegions());
+  pageObserver.observe(page);
+  for (const el of page.querySelectorAll('.stack-band, .split-figure, .split-content')) {
+    pageObserver.observe(el);
+  }
+};
+
+watch([show, currentPage, isSplit], async () => {
+  await nextTick();
+  measureRegions();
+  observePage();
+  if (typeof document !== 'undefined' && document.fonts?.ready) {
+    document.fonts.ready.then(() => nextTick().then(measureRegions)).catch(() => {});
+  }
+}, { immediate: true });
+
+onBeforeUnmount(() => pageObserver?.disconnect());
+</script>
+
+<template>
+  <div v-if="show" ref="overlayEl" class="deck-debug-overlay" aria-hidden="true">
+    <!--
+      ★ THE WASH, and it does two jobs for no DOM at all.
+
+      This overlay is mounted OUTSIDE the slide, so it never inherits `.deck-dark` — which means one
+      palette had to read on warm paper and on a near-black divider alike. Rather than probe the
+      slide's luminance and carry two colour sets, lay 58% warm paper over everything first (it was 84%
+      and read as a rumour — see the ⚠ on `.deck-debug-wash` below): the
+      ground under the schematic is then the same on every slide, and the slide survives as a ghost
+      — enough to see what a line falls on, not enough to compete with it.
+
+      The gradients are the --deck-grid lattice, heavy every fifth line. That IS most of what a
+      schematic is for: an off-ladder value shows up as a box that does not land on a line, with no
+      label needed.
+    -->
+    <div v-if="tierOn('grid')" class="deck-debug-wash" />
+    <!-- CHROME frame — inset --deck-inset-chrome, all four edges. Dotted: the loosest weight,
+         because this is the outermost, least-specific boundary (chrome may sit anywhere inside
+         it, not fill it). -->
+    <div v-if="tierOn('frame')" class="deck-debug-frame deck-debug-frame--chrome" />
+    <!-- MEDIA frame — --deck-inset-media horizontally, and vertically whichever of the two the
+         slide's own notch selects: see `mediaVBound` for the rule and for what this drew before.
+         Bound inline rather than declared, because it is the one frame whose value is a fact about
+         THIS slide instead of a constant; the stylesheet keeps the un-notched pair as the standing
+         declaration, which is also what renders before the token probe has a box to measure in.
+         Dashed, medium weight. -->
+    <div
+      v-if="tierOn('frame')"
+      class="deck-debug-frame deck-debug-frame--media"
+      :style="{ top: mediaVBound, bottom: mediaVBound }"
+    />
+    <!-- TEXT frame — inset --deck-inset-text, all four edges. Solid, heaviest weight: this is the
+         one every slide's own content actually sits inside, via .slidev-layout's own padding. -->
+    <div v-if="tierOn('frame')" class="deck-debug-frame deck-debug-frame--text" />
+    <!-- The DISPLAY margin — the 120px beat inset five layouts use and none of them drew. -->
+    <div v-if="tierOn('frame')" class="deck-debug-frame deck-debug-frame--display" />
+    <!-- Centre lines. The cheapest consistency check there is: is this actually centred, or nearly. -->
+    <div v-if="tierOn('frame')" class="deck-debug-centre deck-debug-centre--x" />
+    <div v-if="tierOn('frame')" class="deck-debug-centre deck-debug-centre--y" />
+    <!-- The chrome BANDS — where slide-top.vue's/slide-bottom.vue's pill rows actually paint.
+         Filled, not just outlined: collision with these two rectangles is the specific failure
+         this overlay exists to make visible (see this file's own doc comment above), so they read
+         as a hazard region, not a fourth measuring line to compare against the others. Height is
+         computed from the SAME tokens BadgeStrip/`.deck-page-dot` use (slide-top.vue), not a
+         hand-typed constant — if that ladder ever moves, this band moves with it instead of
+         silently drawing the wrong hazard. -->
+    <div v-if="tierOn('hazard')" class="deck-debug-band deck-debug-band--top" />
+    <div v-if="tierOn('hazard')" class="deck-debug-band deck-debug-band--bottom" />
+    <!-- task-14b-brief.md — THE Y-ANCHOR. split.vue's text column always starts here, one third of
+         the canvas down; only meaningful on a split slide, so it only draws on one. `top: var(
+         --deck-anchor-third)` here resolves against THIS element's own box, which — per this file's
+         own top comment — genuinely IS the full, unpadded 1920x1080 canvas, so this line and
+         split.vue's own anchor land on the identical canvas position by construction, not by two
+         people doing the same sum twice. Solid and thicker than the inset frames: this is the one
+         line every split slide's heading position is actually PINNED to, not merely bounded by. -->
+    <div v-if="tierOn('frame') && anchorShown" class="deck-debug-anchor" :style="anchorSpan" />
+    <!-- THE SPLIT REGIONS, measured off the DOM rather than re-derived — see the script comment.
+         One box per region so "where does the second column start" and "does the header really span
+         both" are answerable by looking, which the single anchor line could not do. -->
+    <!-- GAPS sit UNDER everything measured: they are the only tier that fills, and a fill over an
+         outline would hide the box the outline is drawn around. -->
+    <template v-if="tierOn('gap')">
+      <div v-for="g in gaps" :key="g.key" class="deck-debug-gap" :class="[`is-${g.tier}`, g.vertical ? 'is-vertical' : '']" :style="g.style">
+        <span class="deck-debug-gap-label">{{ g.label }}</span>
+      </div>
+    </template>
+    <!-- ELEMENT hairlines. No labels by design — identity is legible from the content underneath,
+         and forty labels would bury the boxes they name. -->
+    <template v-if="tierOn('element')">
+      <div v-for="e in elements" :key="e.key" class="deck-debug-element" :class="`is-${e.kind}`" :style="e.style" />
+    </template>
+    <!-- REGIONS. A short chip, not the old `x,y · w×h` readout — that was ~200 canvas px of label on
+         a ~50px box, and on a dense slide the labels collided with each other rather than with the
+         geometry. The numbers moved to the parts list in the key, where there is room for them. -->
+    <template v-if="tierOn('region')">
+      <div v-for="r in regions" :key="r.key" class="deck-debug-region" :class="`is-${r.role}`" :style="r.style">
+        <span class="deck-debug-region-label" :style="r.chipStyle">{{ r.label }}</span>
+      </div>
+    </template>
+    <!-- THE KEY. Three dash patterns and two filled bands are not self-describing, and an overlay
+         whose own vocabulary has to be looked up in a source file is a worse tool than one that
+         says what it means. Sits bottom-RIGHT — see the note on `.deck-debug-key` below for why it
+         moved off bottom-left, and what it now has to clear. -->
+    <!--
+      THE PROPS PANEL. Bottom-LEFT, opposite the key: one panel says what the drawing means, the
+      other says what this slide asked for. The corner is free now that the key moved right.
+    -->
+    <dl class="deck-debug-props">
+      <div class="deck-debug-props-title">{{ currentFrontmatter.layout || 'default' }}</div>
+      <div v-for="p in slideProps" :key="p.k" :title="p.v"><dt>{{ p.k }}</dt><dd>{{ p.v }}</dd></div>
+      <div v-if="!slideProps.length" class="deck-debug-props-none">no props set</div>
+      <div v-if="appliedState.length" class="deck-debug-props-applied">
+        <dt>applied</dt><dd>{{ appliedState.join(' ') }}</dd>
+      </div>
+    </dl>
+    <!--
+      THE KEY — generated from TIERS, never hand-written. It listed five literal rows while the
+      overlay drew eleven kinds of thing, so the region outlines, their three weights and the gutter
+      label had no entry at all.
+
+      Each tier row is a BUTTON: the element tier is unreadable on a dense slide and the hazard band
+      fires on every chromed slide, so they have to be switchable — and the thing that already
+      explains a tier is the right thing to switch it. `.stop` because a bare click advances the
+      slide.
+
+      Moved to bottom-RIGHT. It used to be anchored bottom-left at the same inset as the bottom
+      chrome band, so it sat on top of the hazard it was there to explain.
+    -->
+    <div class="deck-debug-key">
+      <div v-for="t in TIERS" :key="t.id" class="deck-debug-key-tier">
+        <button type="button" :class="tierOn(t.id) ? '' : 'is-off'" @click.stop="toggleTier(t.id)">
+          <span class="k" :class="`k--${t.id}`" />
+          <span class="deck-debug-key-label">{{ t.label }}</span>
+          <span class="deck-debug-key-count">{{ tierCount[t.id] }}</span>
+        </button>
+      </div>
+      <div class="deck-debug-key-rule">
+        <span>{{ insetChrome }} · {{ insetMedia }} · {{ insetText }} · {{ insetDisplay }}</span>
+        <span v-if="isSplit">anchor {{ anchorY }}</span>
+      </div>
+      <!-- ★ ABSENT, COLLAPSED AND FULL-CANVAS EACH GET A LINE. All three used to draw nothing, so a
+           rule that matched no element was indistinguishable from a rule that did not exist. -->
+      <div v-for="(n, i) in notes" :key="`n${i}`" class="deck-debug-key-note" :class="`is-${n.tier}`">{{ n.text }}</div>
+    </div>
+    <!-- THE CONDITIONAL GUTTER. Its on-screen WIDTH depends on `ratio`/`side`, which would need
+         re-deriving split.vue's own grid-track-and-negative-margin arithmetic a second time to draw
+         as a geometric line — exactly the kind of duplicated sum this codebase's own history (see
+         this file's top comment) shows drifts silently out of sync with the real one. A text label
+         states the computed VALUE instead: honest about what this overlay actually knows, rather
+         than a seam it has not actually measured. -->
+    <!-- Pinned to the anchor when the anchor is the rule, and to the measured content top when it is
+         not — on a header split the content starts at the ordinary content top and a label floating
+         at the third would be captioning empty canvas.
+
+         ★★ AND IT FOLLOWS THE `gap` TIER. It was `v-if="isSplit"` with no tier gate at all, so it
+         drew whenever the overlay was on no matter what had been switched off — Jose, with every
+         tier but the grid turned off: "why this still here when everything toggled off?". A gutter
+         is a measurement of the space between two columns, which is exactly what the gap tier is,
+         so it belongs to that switch like every other measured thing.
+
+         The two panels below stay ungated on purpose and are not the same case: the props readout
+         states what the slide DECLARED rather than measuring anything, and the key is where the
+         switches live — a legend that vanished with the tiers could not be used to bring them
+         back. -->
+    <div
+      v-if="isSplit && tierOn('gap') && gutterAt"
+      class="deck-debug-label"
+      :style="gutterAt"
+    >{{ gutterLabel }}</div>
+  </div>
+</template>
+
+<style scoped>
+/*
+  ★★ COLOUR IS THE TIER. DASH IS THE MEMBER. FILL MEANS SPACE.
+
+  This file used to argue against a palette, and it was right at the time: every line meant "an
+  inset", and they differed only in WHICH one, so a colour per line would have implied a difference
+  in kind that was not there. That reasoning does not survive the overlay drawing four genuinely
+  different kinds of thing — a token-derived rule, a measured layout box, a content box and an
+  empty space are not four flavours of the same statement.
+
+  ⚠ AND IT WAS ALREADY BROKEN. `--deck-debug-line` is declared NOWHERE in the repo, so its five
+  users fell back to #e11d48 while eight other rules used var(--tier-frame) — two reds, no meaning attached
+  to the difference, and the key's own swatches a different colour from the lines they explained.
+
+  One closed set, declared here rather than in deck.css: a debug tool is not part of the deck's
+  token contract and has no brand meaning to alias.
+
+  Colour is never the only carrier. Blue is only ever a canvas-spanning rule and teal only ever a
+  small hairline, so the deuteranopia-risky pair is never confusable positionally; rose and amber
+  are outline against fill.
+*/
+.deck-debug-overlay {
+  --tier-frame: #1d4ed8;
+  --tier-region: #e11d48;
+  --tier-element: #0e7490;
+  --tier-gap: #b45309;
+  --tier-hazard: #a16207;
+  /* The BOTTOM chrome band's own depth, declared once so the two panels can sit clear of it instead
+     of each restating the formula. Same shape slide-bottom.vue's page marker is built from — that
+     is where `.deck-page-dot` lives, not slide-top.vue as this said. */
+  --debug-band-h: calc(var(--type-deck-overline-size) * var(--type-deck-overline-line-height) + var(--deck-space-1) * 2);
+  /*
+    ★★ THE TOP BAND IS A DIFFERENT DEPTH, AND SHARING ONE WAS A REAL UNDER-DRAW.
+
+    Both bands took the pill formula above — 49px. Correct at the foot, where the row IS the page
+    marker. Wrong at the head: slide-top.vue sets that row's `min-height: var(--deck-chrome-mark)`
+    (72), and its own comment says so — "The row is the MARK's height (72), the section pill is 49".
+    So the top hazard rectangle stopped at y 85 while the mark occupies y 36-108, and anything
+    landing in that 23px strip collided with the running mark while sitting clear of the band drawn
+    to warn about it. A hazard marker that under-draws the hazard is worse than none.
+
+    --deck-chrome-band is the token for exactly this (inset + mark = 108, the depth the chrome
+    reaches from the canvas edge); the band starts AT the inset, so its own height is the mark.
+  */
+  --debug-band-top-h: var(--deck-chrome-mark);
+  position: absolute;
+  inset: 0;
+  /* Above every layout's own content AND above slide-top.vue/slide-bottom.vue's chrome (z-index
+     20) — the overlay has to sit on top of the bands it is drawing a hazard region for, or the
+     chrome pill would paint over its own hazard marker. */
+  z-index: 999;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+/*
+  Warm paper at 58%, then the --deck-grid lattice with every fifth line heavier. One ground for the
+  whole schematic whatever register the slide is in, and a ruler under everything so an off-ladder
+  box shows up as a box that does not land on a line.
+
+  ⚠ THE FIRST PASS WAS 84% AND THAT WAS TOO MUCH: the slide under it read as a rumour, which
+  defeats the tool — you are checking whether THIS heading sits where you think, and you have to be
+  able to see the heading. 58% still flattens a dark divider and a light default into one ground.
+*/
+.deck-debug-wash {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background:
+    repeating-linear-gradient(to right, rgb(17 24 39 / 7%) 0 1px, transparent 1px var(--deck-grid)),
+    repeating-linear-gradient(to bottom, rgb(17 24 39 / 7%) 0 1px, transparent 1px var(--deck-grid)),
+    repeating-linear-gradient(to right, rgb(17 24 39 / 14%) 0 1px, transparent 1px calc(var(--deck-grid) * 5)),
+    repeating-linear-gradient(to bottom, rgb(17 24 39 / 14%) 0 1px, transparent 1px calc(var(--deck-grid) * 5)),
+    color-mix(in oklab, var(--warm-50), transparent 42%);
+}
+.deck-debug-frame {
+  position: absolute;
+  box-sizing: border-box;
+  border-color: var(--tier-frame);
+  z-index: 5;
+}
+.deck-debug-frame--display {
+  top: 0;
+  bottom: 0;
+  left: var(--deck-inset-display);
+  right: var(--deck-inset-display);
+  border-left: 1px dashed var(--tier-frame);
+  border-right: 1px dashed var(--tier-frame);
+}
+.deck-debug-centre {
+  position: absolute;
+  z-index: 5;
+  opacity: 0.3;
+}
+.deck-debug-centre--x { top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--tier-frame); }
+.deck-debug-centre--y { left: 0; right: 0; top: 50%; border-top: 1px solid var(--tier-frame); }
+.deck-debug-frame--chrome {
+  inset: var(--deck-inset-chrome);
+  border: 1px dotted var(--tier-frame);
+}
+/* The vertical pair here is the UN-NOTCHED case only, and it is overridden inline on a slide whose
+   figure carries the cut — see `mediaVBound`. It stays declared because it is a real value (it is
+   what `notch: false` restores) and because the inline binding resolves to '' until the token probe
+   has a laid-out box to measure in, on the first render after mount. */
+.deck-debug-frame--media {
+  top: var(--deck-inset-text);
+  bottom: var(--deck-inset-text);
+  left: var(--deck-inset-media);
+  right: var(--deck-inset-media);
+  border: 1px dashed var(--tier-frame);
+}
+.deck-debug-frame--text {
+  inset: var(--deck-inset-text);
+  border: 2px solid var(--tier-frame);
+}
+/* Each band is the depth of the chrome it marks, and the two are NOT the same — see the note on
+   --debug-band-top-h above. Both are read off tokens rather than written down, so a change to the
+   mark's size or the overline ramp moves the band with the thing it warns about. */
+.deck-debug-band {
+  position: absolute;
+  left: var(--deck-inset-chrome);
+  right: var(--deck-inset-chrome);
+  height: var(--debug-band-h);
+  background: rgb(255 26 26 / 12%);
+  border-top: 1px solid var(--tier-frame);
+  border-bottom: 1px solid var(--tier-frame);
+}
+.deck-debug-band--top {
+  top: var(--deck-inset-chrome);
+  height: var(--debug-band-top-h);
+}
+.deck-debug-band--bottom {
+  bottom: var(--deck-inset-chrome);
+}
+/* Thicker and solid, deliberately distinct from the three measuring frames above: this is not a
+   bound content sits somewhere inside, it is the one point split.vue's text column is PINNED to. */
+.deck-debug-anchor {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: var(--deck-anchor-third);
+  border-top: 3px solid var(--tier-frame);
+}
+/*
+  THE REGION BOXES. Outlined, never filled: a fill would hide the very content the box is drawn
+  around, and the two chrome bands above are filled precisely because THEY mark a hazard region
+  rather than a measurement. Dash pattern tells the three apart at a glance the same way the inset
+  frames do, and each carries its own name so a screenshot of the overlay is readable without this
+  file open beside it.
+*/
+/*
+  THE KEY, and the region weights it explains.
+
+  `kind` rather than region name drives the weight, so a content column reads as a content column
+  whether it is split's, stack's strip or bleed's — the overlay teaches ONE vocabulary instead of
+  ten. Same discipline as the three inset frames, which are already told apart by dash pattern
+  rather than by inventing a colour per line.
+*/
+/*
+  ★ LIFTED CLEAR OF THE BOTTOM CHROME BAND, not merely moved to the other corner.
+
+  The key used to be anchored at the same inset as that band and painted on top of the hazard it
+  exists to explain. Moving it right did NOT fix that — the band runs `left: inset-chrome` to
+  `right: inset-chrome`, i.e. the full width, so both corners are on it. The offset has to be
+  vertical, and it is the band's own declared depth so the two cannot drift apart.
+
+  `pointer-events: auto` against the overlay root's `none`, because the tier rows are switches.
+*/
+.deck-debug-key {
+  position: absolute;
+  right: var(--deck-inset-chrome);
+  bottom: calc(var(--deck-inset-chrome) + var(--debug-band-h) + var(--deck-space-2));
+  z-index: 7;
+  pointer-events: auto;
+  max-height: 52%;
+  overflow: hidden;
+  margin: 0;
+  display: grid;
+  gap: 2px;
+  padding: 6px 8px;
+  background: color-mix(in oklab, var(--deck-bg), transparent 8%);
+  border: 1px solid var(--tier-region);
+  border-radius: var(--deck-radius-item);
+  font-family: var(--type-deck-overline-family);
+  font-size: calc(var(--type-deck-overline-size) * 0.42);
+  letter-spacing: var(--type-deck-overline-tracking);
+  text-transform: uppercase;
+  color: var(--deck-fg);
+}
+.deck-debug-key > div { display: flex; align-items: center; gap: 6px; }
+.deck-debug-key-count { margin-left: auto; opacity: 0.65; }
+/*
+  ★ THE SWATCH IS THE TIER'S OWN COLOUR AND ITS OWN TREATMENT. The key used to draw its swatches in
+  a colour none of the lines used, which is the specific way a legend stops being one.
+*/
+.deck-debug-key-tier button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+.deck-debug-key-tier button.is-off { opacity: 0.35; }
+.deck-debug-key .k { width: 18px; height: 0; border-top: 2px solid currentcolor; flex: none; }
+.deck-debug-key .k--frame { border-top: 2px dashed var(--tier-frame); }
+.deck-debug-key .k--region { border-top: 2px dashed var(--tier-region); }
+.deck-debug-key .k--element { border-top: 1px solid var(--tier-element); }
+.deck-debug-key .k--gap {
+  height: 8px;
+  border: 0;
+  background: color-mix(in oklab, var(--tier-gap), transparent 80%);
+}
+.deck-debug-key .k--hazard {
+  height: 8px;
+  border: 0;
+  background: repeating-linear-gradient(45deg, rgb(17 24 39 / 30%) 0 3px, color-mix(in oklab, var(--tier-hazard), transparent 45%) 3px 6px);
+}
+.deck-debug-key-rule,
+.deck-debug-key-note {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  opacity: 0.7;
+  padding-top: 2px;
+}
+.deck-debug-key-note.is-hazard { color: var(--tier-hazard); opacity: 1; }
+/* Same furniture as the key, mirrored — a reader should not have to learn two panels. */
+.deck-debug-props {
+  position: absolute;
+  left: var(--deck-inset-chrome);
+  bottom: calc(var(--deck-inset-chrome) + var(--debug-band-h) + var(--deck-space-2));
+  z-index: 7;
+  margin: 0;
+  display: grid;
+  gap: 2px;
+  padding: 6px 8px;
+  /* A quarter of the canvas. It was 34% and still ran to the width cap on any slide carrying an
+     `alt` or an `image`, which is most of them — the ellipsis was working and the panel was simply
+     allowed to be too big for what it says. */
+  max-width: 24%;
+  max-height: 52%;
+  overflow: hidden;
+  background: color-mix(in oklab, var(--deck-bg), transparent 8%);
+  border: 1px solid var(--tier-region);
+  border-radius: var(--deck-radius-item);
+  font-family: var(--type-deck-overline-family);
+  font-size: calc(var(--type-deck-overline-size) * 0.42);
+  letter-spacing: var(--type-deck-overline-tracking);
+  text-transform: uppercase;
+  color: var(--deck-fg);
+}
+.deck-debug-props > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.deck-debug-props dt { margin: 0; opacity: 0.65; flex: none; }
+/* The value column is the one that has to give: a key is a word, a value can be a sentence. */
+/* ★ VALUES ARE VERBATIM. The panel's type is the overline role, which is uppercase — fine for a
+   key, wrong for a value: a URL is case-sensitive, and a debug panel that transforms what it
+   reports is quietly lying about the thing you opened it to check. */
+.deck-debug-props dd {
+  margin: 0 0 0 auto;
+  text-align: right;
+  text-transform: none;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.deck-debug-props-applied dd { white-space: normal; overflow: visible; }
+.deck-debug-props-title {
+  color: var(--tier-region);
+  border-bottom: 1px solid color-mix(in oklab, var(--tier-region), transparent 70%);
+  padding-bottom: 2px;
+  margin-bottom: 2px;
+}
+.deck-debug-props-none { opacity: 0.5; }
+.deck-debug-props-applied {
+  border-top: 1px solid color-mix(in oklab, var(--tier-region), transparent 70%);
+  padding-top: 2px;
+  margin-top: 2px;
+  opacity: 0.7;
+}
+/*
+  GAPS are the only tier that FILLS, which is what keeps a stack of boxes readable: two overlapping
+  fills still sit under every outline. Padding is HATCHED rather than flat, deliberately — drawing a
+  container's own inset as a flat band would assert a gutter the layout does not have.
+*/
+.deck-debug-gap {
+  position: absolute;
+  z-index: 2;
+  background: color-mix(in oklab, var(--tier-gap), transparent 86%);
+  outline: 1px solid color-mix(in oklab, var(--tier-gap), transparent 55%);
+  outline-offset: -1px;
+}
+.deck-debug-gap.is-pad {
+  outline-color: color-mix(in oklab, var(--tier-gap), transparent 80%);
+  background: repeating-linear-gradient(
+    45deg,
+    color-mix(in oklab, var(--tier-gap), transparent 88%) 0 4px,
+    transparent 4px 10px
+  );
+}
+.deck-debug-gap.is-hazard {
+  background: repeating-linear-gradient(45deg, rgb(17 24 39 / 22%) 0 6px, color-mix(in oklab, var(--tier-hazard), transparent 55%) 6px 12px);
+  outline-color: var(--tier-hazard);
+  z-index: 2.5;
+}
+.deck-debug-gap-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  white-space: nowrap;
+  font-family: var(--type-deck-overline-family);
+  font-size: calc(var(--type-deck-overline-size) * 0.38);
+  letter-spacing: var(--type-deck-overline-tracking);
+  text-transform: uppercase;
+  color: var(--tier-gap);
+}
+.deck-debug-gap.is-hazard .deck-debug-gap-label { color: var(--tier-hazard); }
+/* ★ `rotate`, a property of its own, so it COMPOSES with the centring translate rather than
+   replacing it — a `transform: rotate()` here would drop the -50%/-50% and hang the label off the
+   band's bottom-right corner. Same trap as the donut's central label. */
+.deck-debug-gap.is-vertical .deck-debug-gap-label { rotate: -90deg; }
+/* The numerous tier, so it runs quiet: fifty hairlines should read as texture under the region
+   outlines, not compete with them. */
+.deck-debug-element {
+  position: absolute;
+  z-index: 3;
+  outline: 1px dashed var(--tier-element);
+  outline-offset: -1px;
+  opacity: 0.55;
+}
+.deck-debug-element.is-component { outline-style: solid; }
+.deck-debug-region {
+  position: absolute;
+  pointer-events: none;
+  z-index: 4;
+  outline: 2px dashed var(--tier-region);
+  outline-offset: -1px;
+}
+.deck-debug-region.is-band { outline-style: solid; }
+.deck-debug-region.is-figure { outline-style: dotted; }
+.deck-debug-region.is-column { outline-style: dashed; }
+.deck-debug-region.is-panel { outline-style: solid; }
+.deck-debug-region.is-grid { outline-style: double; outline-width: 3px; }
+.deck-debug-region.is-root { outline-width: 1px; outline-style: solid; }
+.deck-debug-region-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  white-space: nowrap;
+  padding: 2px 6px;
+  font-family: var(--type-deck-overline-family);
+  font-size: calc(var(--type-deck-overline-size) * 0.5);
+  letter-spacing: var(--type-deck-overline-tracking);
+  text-transform: uppercase;
+  color: #fff;
+  background: var(--tier-region);
+}
+.deck-debug-label {
+  position: absolute;
+  /* `left` and `top` arrive measured (see `gutterAt`); this only says how the chip hangs off that
+     point — centred on the seam, and lifted clear so it sits ABOVE the column rather than on its
+     first line, which is what the old anchor-relative `bottom` was reaching for. */
+  transform: translate(-50%, calc(-100% - var(--deck-space-1)));
+  font: 700 14px/1.2 var(--font-mono, monospace);
+  color: var(--tier-frame);
+  background: rgb(255 255 255 / 85%);
+  padding: 2px 6px;
+  border-radius: 2px;
+}
+</style>