/* paper.css — THE DOCUMENT'S OBJECT SYSTEM, DERIVED FROM THE APPROVED BOARD.
   Ruling `creator-board-conformance` R-CBC-1 (ADOPT), increment (i).

   ── WHAT THIS FILE IS ─────────────────────────────────────────────────────────────────────────
   A derivation of `lab/holocron/holocron.css` at the PINNED SHA `97226bf1` — the artifact R-VS1-1
   makes the approved design record and the one Jason approved. Read as a committed blob; the lab
   tree was never entered (R-LAB-3).

   It is a DERIVATION, not a copy, and every departure is recorded below with its reason. It is
   also not a reimplementation: the ruling settled that question against hand-copying, because a
   second implementation of an object that already exists is the no-compromise-mirror violation
   this programme was chartered to end. Where a rule can travel unchanged, it travels unchanged.

   ── WHY EVERYTHING IS SCOPED ──────────────────────────────────────────────────────────────────
   Every selector is nested under `[data-doc-ground="creator"]`. That is R-VR-1's non-leak clause
   applied to CLASSES rather than only to tokens: a surface may declare its own document ground,
   and no surface inherits another's. An unscoped `.hp-plate` would be the global that clause
   exists to prevent — one surface's choice silently becoming every surface's, which is exactly
   how a design system stops being per-surface and starts being a default nobody chose.

   Later surfaces inherit this file by declaring their own ground and citing their own ruling.

   ── THE DERIVATION, increment (i): THE SHEET ──────────────────────────────────────────────────
   ADAPTED
     1. `.hp-sheet` -> `[data-doc-ground="creator"]`. The board's sheet element and our ground
        container are the same object, so the ground declaration IS the sheet. No wrapper is added
        to the app to host a class the container already earns.
     2. `var(--pp-page)` / `var(--pp-ink)` -> `var(--doc-paper)` / `var(--doc-ink)`. The values are
        identical (the ground file carries the publication's own numbers); the NAMES are ours,
        because `--pp-*` is the lab's vocabulary and the app's contract is `--doc-*`. Renaming at
        the boundary is what keeps one vocabulary in the app instead of two.
     3. `var(--pp-wear)` was a base64 webp inlined in the board's CSS. Here it is a served file,
        because a 193KB data URI in a stylesheet is a parse cost on every load and cannot be cached
        separately from the CSS. It was `/public/assets/paper/wear.webp` — the board's own bytes by
        pinned blob (sha256 86292d37…4322) — and is now `/art/wear.webp`, the CLEAN-ROOM
        replacement (`wear_gen.py` @ lab `020fb64d`, sha256 8d624147…, 175,018 bytes) which
        reproduces the original's statistics and copies nothing of it. The old blob and its
        `PROVENANCE.md` are DELETED in this commit; what they recorded — including the one upstream
        that extraction could not inspect — is what a clean-room replacement exists to retire, and
        the ledger keeps both rows verbatim with row 20 marked superseded (R-SPS-A1-1).
   CARRIED UNCHANGED
     the wear's size/repeat/opacity/blend, the radial mask and all three of its stops, the fibre
     grain's feTurbulence data URI verbatim, the edge-soil gradient, `isolation:isolate`, the
     z-index discipline, the transparent pane rule, and the four scrollbar rules.
   DROPPED
     nothing in this slice — the sheet has no board-page scaffolding.

   ── THE WEAR CEILING — do not raise these three numbers without redoing the arithmetic ─────────
   The board's own arithmetic, carried here because the numbers below are meaningless without it:

       the baked sheet peaks at alpha 0.42   (capped at bake time)
     x  layer opacity                 0.82
     x  mask peak                     0.75
     =  0.258 effective  ->  #BCB7AB, the darkest ground anywhere on the sheet

   Against that pixel the furniture measures ochre 4.6:1, ink 9.0:1, red 5.3:1 — AA for small text
   at the WORST pixel, not the average one.

   PROSE IS NOT IN THAT CALCULATION, AND THAT IS THE WHOLE POINT. The reading law (§2b of the
   board, landing with this increment) keeps every paragraph, ledger and list on opaque stock, so
   the only type standing on the wear is furniture. That is what let the wear RISE from 0.227 to
   0.258 between the board's rev 2 and rev 3 rather than fall. The two are one mechanism: a page
   can be as worn as its worst-placed word allows. */

/* ── §2 THE SHEET — three layers of wear, and not a fourth ─────────────────────────────────────
   1. the wear sheet   — the CSG's own splatter algorithm, baked and seamless, multiplied down
   2. the fibre grain  — feTurbulence, high frequency, low amplitude: the tooth of the stock
   3. the edge soil    — handling. Darker where the page is held, and only just.
   A fourth layer is where "worn" becomes "grunge texture", so there isn't one. All three are
   pointer-events:none and sit under the content; nothing here is ever behind readable type at
   more than the measured contrast the palette promises. */
[data-doc-ground="creator"] {
  position: relative;
  isolation: isolate;          /* so multiply blends within the sheet, not through it */
}

[data-doc-ground="creator"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* THE CLEAN-ROOM WEAR (R-SPS-A1-1). This was `/public/Assets/paper/wear.webp`, the CSG-derived
     blob pinned from lab `97226bf1` under `creator-board-conformance` R-CBC-3 — a generated
     texture, but one whose upstream the ledger's own row 20 records as unverifiable. `art/wear.webp`
     is the clean-room replacement (`wear_gen.py` @ lab `020fb64d`), which reproduces the original's
     statistics and copies nothing of it. Crossed by the data half; consumed here, which is the half
     that makes the old blob retirable — row 20 is SUPERSEDED by row 19 in the same commit and the
     asset is deleted with it. */
  background-image: url("/art/wear.webp");
  background-size: 900px 900px; background-repeat: repeat;
  opacity: .82; mix-blend-mode: multiply;
  /* A real page is worn where it is HANDLED — the margins and the corners — and comparatively
     clean where the text sits, because that is the part nobody's thumb rests on. The mask keeps a
     quarter of the wear in the reading area and the whole of it at the edges. Without it the sheet
     reads as soot rather than as paper, and prose sits on grey. */
  -webkit-mask-image: radial-gradient(122% 104% at 50% 44%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.52) 52%, rgba(0,0,0,.75) 100%);
          mask-image: radial-gradient(122% 104% at 50% 44%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.52) 52%, rgba(0,0,0,.75) 100%);
}

[data-doc-ground="creator"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(130% 100% at 50% 42%, rgba(0,0,0,0) 60%, rgba(74,60,40,.15) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.26'/%3E%3C/svg%3E");
  background-size: auto, 150px 150px;
}

/* Content rides above all three layers. */
[data-doc-ground="creator"] > * { position: relative; z-index: 1; }

/* A pane that scrolls inside the sheet must not carry its own copy of the wear — the page is one
   sheet, not a stack of them. Panes are transparent by default and that is deliberate. */
[data-doc-ground="creator"] .hp-pane { background: transparent; }

/* Scrollbars: tokens.css draws a white-on-dark thumb, which is invisible on paper. Inside a sheet
   the thumb inverts. Same 6px-pill-in-a-10px-gutter geometry, same rest/hover/active ladder. */
[data-doc-ground="creator"] *::-webkit-scrollbar-thumb { background: rgba(23,22,27,.22); background-clip: padding-box; }
[data-doc-ground="creator"] *:hover::-webkit-scrollbar-thumb { background: rgba(23,22,27,.34); background-clip: padding-box; }
[data-doc-ground="creator"] *::-webkit-scrollbar-thumb:hover { background: rgba(23,22,27,.48); background-clip: padding-box; }
/* B-1112: the ground keeps its ink `scrollbar-color` only where the webkit thumb does not exist (Firefox) —
   in Blink a set `scrollbar-color` switches the element's `::-webkit-scrollbar*` rules off. See THE PAPER
   THUMB at the end of this file. */
@supports not selector(::-webkit-scrollbar) {
  [data-doc-ground="creator"] { scrollbar-color: rgba(23,22,27,.28) transparent; }
}

/* ── THE DERIVATION, increment (ii): THE PLATE AND THE FURNITURE ───────────────────────────────
   ADAPTED
     4. token names only: `--pp-hair`->`--doc-rule`, `--pp-hair-2`->`--doc-rule-fine`,
        `--pp-plate`->`--doc-paper-raised`, `--pp-red`->`--doc-action`,
        `--pp-indigo`->`--doc-state`, `--pp-gold`->`--doc-mark`, `--pp-ochre`->`--doc-accent`,
        `--pp-cut`->`--doc-cut`, `--pp-lift`->`--doc-lift`. Values identical; the app keeps ONE
        vocabulary rather than carrying the lab's alongside its own.
     5. every selector scoped under the ground, as above.
   CARRIED UNCHANGED
     the clip-path polygons (both of them, byte for byte), the inset:1px face, the z-index rule,
     all four padding variants, the accent and flat variants, the inset input shadow, the note,
     the runhead, the rules, the sechead and its ::after, the citation, the jump list with its
     focus ring, the step rule, and the slash's geometry.
   DROPPED
     nothing.

   §12's own note is worth carrying too: on adoption these furniture values belong IN `corpus.css`
   behind a ground switch rather than in a second file. That is a later consolidation, recorded
   here so it is not lost — the board flagged it as a lab convenience, not the shape to keep. */

/* ── §3 THE PLATE ──────────────────────────────────────────────────────────────────────────────
   The base surface: the printed talent card. Chamfered top-left and bottom-right.
   MECHANISM: clip-path erases borders, so the hairline is the element's own background and the
   face is an inset ::after carrying the same clip. One class, one pseudo, no extra DOM; children
   ride at z-index 1. Any child pinned to the bottom-right is chamfered by the parent's clip for
   free — which is exactly how the printed COST tab meets the printed corner. */
[data-doc-ground="creator"] .hp-plate {
  position: relative; background: var(--doc-rule); box-shadow: var(--doc-lift);
  clip-path: polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                     calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut));
}
[data-doc-ground="creator"] .hp-plate::after {
  content: ""; position: absolute; inset: 1px; background: var(--doc-paper-raised);
  pointer-events: none;
  clip-path: polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                     calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut));
}
[data-doc-ground="creator"] .hp-plate > * { position: relative; z-index: 1; }
[data-doc-ground="creator"] .hp-plate[data-accent="1"] { background: var(--doc-action); }
[data-doc-ground="creator"] .hp-plate[data-flat="1"] { box-shadow: none; }

/* PADDING VARIANTS. A plate that holds READING gets a reading measure's worth of margin; a plate
   that holds a ledger or a list gets less, because ruled rows carry their own rhythm. SNUG is
   stock cut to the OBJECT rather than to the zone — a plate is sized to what it carries. */
[data-doc-ground="creator"] .hp-plate[data-pad="read"] { padding: 17px 19px 19px; }
[data-doc-ground="creator"] .hp-plate[data-pad="data"] { padding: 11px 12px 12px; }
[data-doc-ground="creator"] .hp-plate[data-pad="bleed"] > :not(.hp-head):not(details) { margin-left: 15px; margin-right: 15px; }
[data-doc-ground="creator"] .hp-plate[data-pad="bleed"] > :last-child { margin-bottom: 15px; }
[data-doc-ground="creator"] .hp-plate[data-pad="snug"] { padding: 9px 10px 10px; }

/* An input is a thing you act on, so it keeps its lift even inside another plate — on paper a card
   separates by shadow, and a search field that has lost its shadow has lost its only signal that
   it is a control. */
[data-doc-ground="creator"] .hp-plate[data-input="1"] {
  box-shadow: 0 1px 2px rgba(23,22,27,.13) inset, 0 1px 0 rgba(255,255,255,.5);
}

/* THE NOTE — the printed sidebar: one cut corner, bottom-right only, on the standing-state fill,
   title set right. A sidebar states something true, so it is never red. */
[data-doc-ground="creator"] .hp-note {
  position: relative; background: var(--doc-state); color: var(--doc-state-ink);
  padding: 13px 15px 14px; box-shadow: var(--doc-lift);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--doc-cut)), calc(100% - var(--doc-cut)) 100%, 0 100%);
}
[data-doc-ground="creator"] .hp-note-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em;
  color: var(--doc-mark); text-transform: uppercase; text-align: right; margin-bottom: 8px;
}
/* 15px sat under AS-5's 16px body floor at the handheld band on 54 of 537 species — every species
   whose register carries no special ability, where this note IS the content. */
[data-doc-ground="creator"] .hp-note p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.56;
  color: var(--doc-state-ink); max-width: var(--desk-prose-max, 373px); margin: 0;
}

/* ── §12 FURNITURE ─────────────────────────────────────────────────────────────────────────────
   The running head and folio are the printed page's own running foot, moved to the top of a
   screen that scrolls. They are constant, quiet, ochre, and they are where the app says WHERE YOU
   ARE. Depth comes from here — folios, rules, ticks, plate labels, citations — never from glow. */
[data-doc-ground="creator"] .hp-runhead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em;
  color: var(--doc-accent); text-transform: uppercase;
}
[data-doc-ground="creator"] .hp-runhead .hp-folio { font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-doc-ground="creator"] .hp-hr { border: 0; border-top: 1px solid var(--doc-rule-fine); margin: 10px 0; }
[data-doc-ground="creator"] .hp-hr[data-heavy="1"] { border-top-color: var(--doc-action); }
[data-doc-ground="creator"] .hp-sechead { display: flex; align-items: center; gap: 12px; margin: 26px 0 11px; }
[data-doc-ground="creator"] .hp-sechead::after { content: ""; flex: 1; order: 1; border-top: 1px solid rgba(126,20,20,.34); }
/* a citation may ride the section rule rather than cost a row of its own — the printed page puts
   the source on the head, not in the body. */
[data-doc-ground="creator"] .hp-sechead .hp-cite { order: 2; }
[data-doc-ground="creator"] .hp-sechead h2 {
  font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .28em;
  color: var(--doc-accent); text-transform: uppercase; margin: 0;
}
[data-doc-ground="creator"] .hp-cite {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
  border: 1px solid rgba(126,20,20,.42);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--doc-action); text-transform: uppercase; white-space: nowrap;
}

/* THE JUMP LIST — PRUNED 2026-09-03, and the paragraph that stood here is why the prune needed the
   lab's word rather than a grep. It read as live design reasoning ("a CONTROL, not furniture… it
   supersedes the step rule below"), and the rules under it were complete and well-formed. Nothing
   in the file said the object was gone.
   RETIRED on UI_Architect's answer (R-LAB-7), ruled at `worst-case-parity-career-spec-census` A3
   (R-WCS-A3-1): `hp-jump` was the SHEET'S jump list; it superseded the step rule at lab `7ad9ad7a`
   and THE WAVE then replaced IT at lab `0cc4735f` (2026-08-27, Jason's own direction). Surviving
   statement: `store_build.py:192`. Measured before asking: 7 rules on the board, ZERO markup
   emissions — confirmed board-wide by the lab across index, sheet, store, facet_specimen and
   generality. Nothing reserves it.
   THE COMMENT ABOVE SURVIVED THE OBJECT BY THREE WEEKS, which is the argument for B-385's guard:
   CSS and its prose both read as coverage long after the thing they describe stops existing.
   `derive_board_css.py`'s RETIRED list keeps these rules from crossing again until the lab prunes
   its own copy. The step rule below is unaffected — it is furniture, it still ships, and it is now
   simply not superseded by anything. */

/* THE STEP RULE — the creator's progress, as ticks on a rule rather than a row of pills. Done
   ticks are ink, the current tick is the marker and taller, ahead ticks are hairline. It is
   furniture: it says where you are and it is never the thing you press. */
[data-doc-ground="creator"] .hp-steps { display: flex; align-items: flex-end; gap: 4px; height: 12px; }
[data-doc-ground="creator"] .hp-step { flex: 1; height: 2px; background: var(--doc-rule-fine); }
[data-doc-ground="creator"] .hp-step[data-done="1"] { background: rgba(23,22,27,.45); }
[data-doc-ground="creator"] .hp-step[data-now="1"] { background: var(--doc-action); height: 8px; }

/* THE SLASH — the CSG's page mark, three parallel strokes at the head of every species entry. The
   one purely graphic device in the layer, and it is load-bearing: it marks where an entry BEGINS,
   which in a register of 537 is information. Original geometry; no traced insignia. */
[data-doc-ground="creator"] .hp-slash { display: inline-flex; gap: 4px; height: 14px; }
[data-doc-ground="creator"] .hp-slash i {
  display: block; width: 7px; height: 100%; background: var(--doc-action);
  transform: skewX(-24deg); font-style: normal;
}
[data-doc-ground="creator"] .hp-slash i:nth-child(2) { opacity: .72; }
[data-doc-ground="creator"] .hp-slash i:nth-child(3) { opacity: .44; }

/* ── §12b THE WIDTH LADDER — density, then size ────────────────────────────────────────────────
   Jason: the creator is built for FOUR wide screen sizes and a narrow one. Those four are the
   board's own bands, and this is their mechanism.

   A wide screen is not one thing. The board's reasoning, carried because the numbers are
   meaningless without it: an iPad Pro at 1366 is held at arm's length; a panel reporting 3840 CSS
   pixels is across a room. The difference is not width, it is DISTANCE — which CSS cannot measure.
   The usable proxy: high-DPI displays report HALF their physical pixels, so a browser genuinely
   reporting 2560+ CSS px is a physically enormous surface, and a physically enormous surface is a
   distant one.

       MID-TIER  1024-1366   three zones. The index survives — it IS the work, not navigation.
       WIDE      1367-1919   four zones: choose · see · read · check.
       BROAD     1920-2559   five zones. Extra width buys DENSITY.
       ROOM      2560+       five zones AND SCALE. Extra width buys SIZE, because you are further
                             away. Column COUNT does not increase — a sixth column read from three
                             metres is a column nobody reads.

   CONTAINER queries, not viewport queries: a zone answers to the space it was GIVEN, not to the
   window it happens to live in. That also makes the ladder testable at a fixed viewport.

   TWO TRAPS THE BOARD PAID FOR, CARRIED HERE SO WE DO NOT PAY THEM AGAIN:
   1. THE CONTAINER WRAPS THE SHEET, IT IS NOT THE SHEET. A container-type element is measured on
      its CONTENT box, so putting it on the padded sheet shifts every threshold inward by the
      padding — the board saw a 1920 screen quietly resolve as 1868. A band boundary that is only
      approximately where it says it is, is a boundary nobody can test against.
   2. THE CONTAINER IS NAMED, AND EVERY BAND QUERY NAMES IT. An unnamed `@container` resolves
      against the NEAREST size-container ancestor, so a band rule aimed at the surface can end up
      evaluated against a 700px rail and silently do nothing. A query that matches the wrong
      container does not error; it just never fires. */
[data-doc-ground="creator"] .hpw-shell {
  container-type: inline-size;
  container-name: surface;
}

/* THE INDEX IS NARROWER AT MID-TIER. The board's own grid for that band gives the index
   `minmax(280px, .8fr)`, not the 336px it takes at WIDE — because at 1280 the 56px difference is
   the reading column's, and the index is there to be scanned rather than read. Carried because
   turning the rail on at MID-TIER without it costs the step body more than that band can spare. */
@container surface (max-width: 1366px) {
  [data-doc-ground="creator"] .hpw-band,
  [data-doc-ground="creator"] [data-creator-rail="1"] { --desk-rail-w: 280px; }
}

/* The BASE column count. It lives here and not inline because an inline `grid-template-columns`
   beats every band rule in this ladder — the same trap the plate's inline background sprang, and
   the same tell: the band fires, the custom properties change, and the layout does not move. */
[data-doc-ground="creator"] .hpw-cols { grid-template-columns: 1fr 1fr; }

/* BROAD — extra width buys DENSITY. The content region stops being capped at the WIDE measure, so
   the columns that already exist get room to stand side by side instead of stacking into a
   ribbon down the middle of a 2200px page. The OBJECT does not grow here; only the layout opens. */
@container surface (min-width: 1920px) {
  /* The ladder's band values land on BOTH shells. `.hpw-band` is the untransplanted steps' column;
     `.hp-sheet` is what a TRANSPLANTED step emits, and it has no `.hpw-band` at all — so after the
     swap the ROOM tier was declaring a reading measure onto an element that no longer existed and
     the measure stayed at its 373px default. Listed rather than replaced: the other eleven steps
     still render the band and must keep their ladder. */
  [data-doc-ground="creator"] .hpw-band,
  [data-doc-ground="creator"] .hp-sheet {
    --desk-content-max: 1760px;
    /* Three columns at the SAME box size WIDE draws, not three bigger ones: BROAD buys
       density, and a wider box here would be buying size a band early. Sized against the
       measured WIDE box rather than guessed — 1010px produced 223px boxes against WIDE's
       188px, which reads as density and is not. */
    --fc-char-measure: 604px;   /* 3 x WIDE's measured 188px box, plus the two 8px gaps */
  }
  [data-doc-ground="creator"] .hpw-cols { grid-template-columns: repeat(3, 1fr); }
}

/* ROOM — extra width buys SIZE. Everything grows together because the reader is further away, and
   the column COUNT deliberately does not change. The reading measure grows WITH the type so that
   characters-per-line stays invariant: a 373px column on a 2560 panel is the same defect as a
   373px column on a phone, in the other direction. */
@container surface (min-width: 2560px) {
  /* The ladder's band values land on BOTH shells. `.hpw-band` is the untransplanted steps' column;
     `.hp-sheet` is what a TRANSPLANTED step emits, and it has no `.hpw-band` at all — so after the
     swap the ROOM tier was declaring a reading measure onto an element that no longer existed and
     the measure stayed at its 373px default. Listed rather than replaced: the other eleven steps
     still render the band and must keep their ladder. */
  [data-doc-ground="creator"] .hpw-band,
  [data-doc-ground="creator"] .hp-sheet {
    --desk-content-max: 2080px;
    --desk-prose-max: 466px;      /* the same 66ch measure, at the larger type */
    --doc-band-scale: 1.28;
    --fc-char-measure: 773px;     /* the same three columns, scaled: 604 x 1.28 */

    /* EVERYTHING GROWS TOGETHER, and the type is the half that makes it true. The scale tokens
       are `clamp(min, min + Nvw, max)` in rem, and at 2560 every one of them is already pinned at
       its MAX — so the page was scaling its boxes and not its words, which is not scale, it is
       just bigger boxes. The ceiling is raised here by the band factor and nowhere else: the
       clamp still governs, and off this band nothing moves.

       The READING MEASURE grows with them (466px above), so characters-per-line stays invariant —
       which is the whole point. Type that grows inside a fixed measure is type that wraps sooner. */
    --fs-2xs:  clamp(0.80rem, 0.76rem + 0.16vw, 0.96rem);
    --fs-xs:   clamp(0.92rem, 0.87rem + 0.21vw, 1.12rem);
    --fs-sm:   clamp(1.04rem, 0.98rem + 0.25vw, 1.28rem);
    --fs-body: clamp(1.28rem, 1.22rem + 0.25vw, 1.52rem);
    --fs-lg:   clamp(1.40rem, 1.31rem + 0.37vw, 1.76rem);
    --fs-xl:   clamp(1.60rem, 1.48rem + 0.50vw, 2.08rem);
    --fs-2xl:  clamp(2.00rem, 1.83rem + 0.75vw, 2.72rem);
  }
  [data-doc-ground="creator"] .hpw-cols { grid-template-columns: repeat(3, 1fr); }
  [data-doc-ground="creator"] .hpw-scale {
    font-size: calc(1em * var(--doc-band-scale, 1));
  }
}

/* THE FIFTH ZONE, and the fold that pays for it. Below BROAD the consequences ride inside the
   ledger's column; at BROAD and above they take a column of their own, which is precisely what
   that band's "extra width buys DENSITY" purchases. Both elements are always mounted and only
   `display` moves (A4: a band flip restyles and never remounts). */
[data-doc-ground="creator"] .hpw-changes-zone { display: none; }
[data-doc-ground="creator"] .hpw-changes-fold { display: block; }
@container surface (min-width: 1920px) {
  [data-doc-ground="creator"] .hpw-changes-zone { display: block; }
  [data-doc-ground="creator"] .hpw-changes-fold { display: none; }
}

/* THE LEDGER'S ZONE. Since R-VTG-4 the raise ledger is the ONLY way to spend XP on this step, so
   it is mounted at every band. Its width is now the board's block-B width (`.hpw-charblock-b`);
   the earlier `flex-basis` fold and the reading-column clamp are SUPERSEDED by R-TCP-1(b). */


/* ── WHERE THE HAND-WRITTEN OBJECT RULES USED TO BE ──────────────────────────────────────────
   Five blocks stood here: the characteristic rail and spend ledger, the gloss, the hero sizing,
   the furniture rows, and the designation. Every one was an APPROXIMATION of the board written
   before its stylesheet travelled, and every one is now derived from the pinned blob at the foot
   of this file — 411 rules from 71 classes, with the board's per-band overrides included.

   THEY ARE DELETED RATHER THAN LEFT TO LOSE. Two rules for one object, where the loser only loses
   by source order, is a coin-flip waiting for someone to reorder the file. Worse, an approximation
   only loses where the board HAS a rule: my `hp-gloss-hd { margin-bottom: 3px }` and
   `hp-gloss-rt { border: 1px }` survived the derivation entirely, because the board sets neither —
   sixty of the style layer's remaining rows were exactly that, my guesses persisting in the gaps of
   someone else's stylesheet.

   What is NOT deleted, and belongs here: the app's own scaffolding (the ladder, the zone widths,
   the height chain, the tap floor, P2's interaction states) — the things the board has no rule for
   because they are ours. */

/* ── R-TCP-1(b): THE TWO-ZONE DESKTOP COMPOSITION ───────────────────────────────────────────
   The board's own note is the specification, and it is the reason the fifth column is gone:

     "TWO zones, not three. The spend step has six rows and a rule; a third column for the rule
      sat at 54% occupied while the page had a void under it. THE NUMBER OF ZONES FOLLOWS THE
      CONTENT, NOT THE WIDTH — the same lesson the fifth column taught at 2560."

   So §12b's ladder states a band's CAPACITY (R-TCP-1a) and this screen spends two of it at every
   desktop band. Inside the read zone the board draws TWO BLOCKS AT THEIR NATURAL WIDTHS — the
   capsule rail with WHAT THIS CHANGES beneath it, and the transaction beside them — and then one
   full-width band. "Widths are the content's and what is left over is margin; a vacated column is
   not a hole that needs filling." */
[data-doc-ground="creator"] .hpw-charrow {
  display: flex; flex-wrap: wrap; gap: var(--desk-gutter); align-items: flex-start;
}
/* THE TWO BLOCKS' PROPORTION IS THE BOARD'S, MEASURED, not chosen here. Across its four wide
   frames the board draws block A (rail + what-this-changes) at 0.33 of the SHEET and block B (the
   transaction) at 0.21, inside a read zone spanning 0.79 of it — so 42% and 27% OF THE ZONE, and
   the remaining ~31% is margin. Both halves of that matter: percentages of the ZONE, because that
   is what the blocks sit in (a first cut used the sheet's own fractions here and drew the rail
   150px narrow); and NOT flexing to fill, because the board says so — "widths are the content's
   and what is left over is margin; a vacated column is not a hole that needs filling." Growing
   with the band is the point: a fixed cap is what held our rail at 640px while the board's
   reached 1144. */
/* THE MINIMUM IS THE READING MEASURE PLUS ITS PADDING, not a round number. Block A hosts the
   teaching aside, whose prose column is pinned to `--desk-prose-max` (373px) by a c10 assert; at
   340px the block left the column 368px and the assert failed by five pixels. A minimum that
   silently shaves the measure is the defect the measure exists to prevent. */
[data-doc-ground="creator"] .hpw-charblock-a { flex: 0 1 42%; min-width: 400px; }
[data-doc-ground="creator"] .hpw-charblock-b { flex: 0 1 27%; min-width: 320px; }

/* THE GLOSS IS A FULL-WIDTH BAND AT EVERY BAND — the MID-TIER fold is REMOVED (R-TCP-1b, #16).
   The fold was added at the sign-off to hold a zone count that came from the ladder table rather
   than from the drawn frames; with the zone expectation re-pointed to the board there is nothing
   left for it to buy, and it was narrowing a band the board deliberately runs wide:
   "a full-width band under the three columns, because it is the only thing on this page every
   column refers to … below that the auto-fit drops to two, then one." The auto-fit does the
   responsive work; no fold is needed. */
[data-doc-ground="creator"] .hpw-gloss-zone { margin-top: 6px; }

/* A1-4(2): the quiet fact beside the commit. FURNITURE VOICE — it states the balance and what
   becomes of it, and it is not a warning: carrying XP into play is a legal, common choice, and
   R-CSC-1 reserves the printed red for a refusal. The overspend is the refusal, and it replaces
   the button's label rather than adding a second voice next to it. */
[data-doc-ground="creator"] .hp-railnote {
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em;
  color: var(--doc-ink-muted); text-align: center; padding: 0 4px 8px;
}

/* ══ THE TRANSPLANTED OBJECTS' OWN RULES (R-CBC-1 "the board's CSS TRAVELS", applied to the
   tree R-TTP-1 made the step emit) ═══════════════════════════════════════════════════════
   The transplant landed the board's DOM and 36 of its classes had no rules on our side — the
   page was structurally exact and visually unstyled, which the DOM parity guard cannot see and
   was never asked to. Generated by `scripts/derive_board_css.py` from the pinned blob, read
   before landing. Do not hand-edit: change the script and re-run, or the next derivation
   silently reverts you. */
/* ── THE HEIGHT CHAIN, which the object derivation could not supply ──────────────────────────
   `.hp-wide` and `.hpw-bar` came across with the objects, but the board's `.hpw-shell{height:100%}`
   did not: `hpw-shell` was not in the derivation's NEED list because it is the app's own container
   element, already declared above for the width ladder. Without a height on it the sheet had
   nothing to be 100% OF, so the rail grew past the viewport and put the commit at y1.03 — just
   below the fold, on a page whose DOM was byte-for-byte the board's.

   THE PARITY GUARD CANNOT SEE THIS AND WAS NEVER ASKED TO. It compares trees. A page can emit the
   right tree and lay it out wrongly, which is why the side-by-sides stay in the gate beside it —
   this was found by looking at one. */
[data-doc-ground="creator"] .hpw-shell { height: 100%; flex: 1; min-height: 0; }

/* ── AS-6's 44px TAP FLOOR OVER THE BOARD'S THIN FURNITURE ───────────────────────────────────
   C-MU-4: the standards outrank the mockup, and this is the clearest case of it in the whole
   transplant. The board draws the wave as hairline bars and the runhead's back as a text link —
   33x12, 46x12 and 113x11 as measured by `smoke_creator_as9`, all far under AS-6's floor for a
   control a finger is expected to hit.

   THE FLOOR IS BOUGHT WITH HIT AREA, NOT WITH INK. The drawn bar keeps its height; the BUTTON
   around it grows to 44px and the extra is transparent, so the page looks like the board and
   behaves like the standard. Nothing here changes a pixel the eye sees.

   `.hp-wave-step { pointer-events:none }` above is the board's own DEMO rule — its frames are not
   interactive. Ours are (A2-1: the buttons must actually jump), so it is overridden here rather
   than deleted from the derivation, which would silently diverge the derived file from its source
   and make the next re-run look like a regression. */
[data-doc-ground="creator"] .hp-wave-step {
  min-height: 44px; pointer-events: auto;
}
/* THE BACK CONTROL'S TAP TARGET IS 44px AND ITS LAYOUT FOOTPRINT IS THE BOARD'S. The first cut
   just set `min-height:44px`, which satisfied AS-6 and pushed the bar from the board's 24px to
   57px — buying the floor with the page's geometry instead of with hit area, which is the opposite
   of what "bought with hit area, not with ink" was supposed to mean. The negative block margins
   give the button a real 44px rect (AS-6 measures the element, and it genuinely is that tall to a
   finger) while it contributes only its text's height to the bar. */
[data-doc-ground="creator"] .hp-runhead [data-creator-back] {
  min-height: 44px; display: inline-flex; align-items: center;
  margin-top: -16px; margin-bottom: -16px;
}

/* THE WAVE AT PHONE WIDTH. Eleven equal steps in 390px give each 33px, and AS-6 wants 44 — the
   arithmetic simply does not close (eleven 44px targets need 484px), so the board's own phone frame
   breaches the floor here too. C-MU-4 settles which wins, and the fix keeps both: the steps take
   their 44px and the wave SCROLLS, so every step stays reachable at full size instead of eleven of
   them being too small to hit.
   The page itself does not scroll sideways (AS-4) — this is an inner scroller, and
   `overscroll-behavior-x: contain` keeps a swipe on the wave from dragging the page behind it. */
/* SCOPED TO THE PHONE SHEET, not to a container query. The `surface` container is declared on
   `.hpw-shell`, and the phone sheet does not render one — its root is `hp-phonesheet`. A
   `@container surface` block therefore never matched here at all, which is a silent no-op of
   exactly the kind this file has been bitten by before: the rule was present, correct, and
   addressed to an element that was not there. */
/* THE WAVE KEEPS THE BOARD'S 12px HEIGHT AND THE STEPS KEEP THEIR 44px TARGET. The first cut let
   the 44px targets set the nav's height, which added 32px of air between the status strip and the
   designation — Jason drew a circle round exactly that gap, and the style layer had it EXCEPTED as
   "the tap floor", so my own allowlist was hiding something visible.
   THE FLOOR IS BOUGHT WITH HIT AREA, NOT WITH LAYOUT, the same way the back control buys it: the
   step's box is 44px tall to a finger and contributes 12px to the row, so the page keeps the
   board's rhythm. An exception should cover what is ruled or invisible, never what changes how the
   page reads. */
[data-doc-ground="creator"].hp-phonesheet .hp-wave {
  height: 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
[data-doc-ground="creator"].hp-phonesheet .hp-wave::-webkit-scrollbar { display: none; }
/* AND THE STEPS TAKE THE PRESS (B-533, ruling `b533-wave-tap` D1). The 44px rect below was already
   there and already correct; what was missing is that the step was `pointer-events:none` at the
   phone, so ELEVEN controls announced themselves and did nothing. Measured before the fix: 0 of 11
   steps land on themselves at 390 or at 768 — steps 1-3 hit the BACK button's own 44px rect, 4-8
   hit `nav.hp-wave` itself.
   WHERE IT CAME FROM, because the override is the third one this file has written and the second to
   be lost: `:482` overrides the board's demo rule with `pointer-events:auto`, and `:1201` — DERIVED
   from the board by `scripts/derive_board_css.py`, so the board's own frames stay pictures — repeats
   `pointer-events:none` at the SAME specificity and LATER in the file, which wins. The desktop is
   saved by `:1789`, inside `@container surface (min-width:1024px)`; the `surface` container is
   declared on `.hpw-shell` and the phone sheet is not one, so that block never matches here. That is
   the identical no-op the comment above records for the neighbouring property — "the rule was
   present, correct, and addressed to an element that was not there" — and it is why this
   declaration sits HERE, in the phone sheet's own block: it wins by SPECIFICITY, not by position,
   so a re-run of the derivation cannot take it away again.
   NOT ONE PIXEL MOVES. `pointer-events` is compared by neither parity layer (it is not among the
   style suite's seventeen properties and the DOM layer compares none), and the 22 approved phone
   frames are unchanged — stated by count in the gate. The two geometry fixes that would have worked
   were rejected on measurement: moving BACK's rect is not needed (this fixes steps 1-3 too) and
   would push the nav down 16px on all 22 frames, and giving the nav 44px is the gap Jason already
   drew a circle round. */
[data-doc-ground="creator"].hp-phonesheet .hp-wave-step {
  flex: 0 0 auto; min-width: 44px;
  min-height: 44px; margin-top: -16px; margin-bottom: -16px;
  pointer-events: auto;
}

/* DERIVED FROM THE BOARD by scripts/derive_board_css.py — c5bb4836, reviewed before landing.
   566 rules for the transplanted objects. Tokens renamed at the boundary; every
   selector scoped to the creator ground. Re-run the script rather than editing here. */
[data-doc-ground="creator"] .hp-sym { display:inline-block;line-height:1;font-size:1.02em;vertical-align:-.08em;margin:0 .12em;font-style:normal;font-weight:400 }
[data-doc-ground="creator"].hp-sheet { position:relative; background-color:var(--doc-paper); color:var(--doc-ink);
  font-family:var(--font-body,'Rajdhani',sans-serif); isolation:isolate; }
[data-doc-ground="creator"].hp-sheet::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--doc-wash-default, url("/art/wear.webp")); background-size:900px 900px; background-repeat:repeat;
  opacity:.82; mix-blend-mode:multiply;
  
  -webkit-mask-image:radial-gradient(122% 104% at 50% 44%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.52) 52%, rgba(0,0,0,.75) 100%);
          mask-image:radial-gradient(122% 104% at 50% 44%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.52) 52%, rgba(0,0,0,.75) 100%); }
[data-doc-ground="creator"].hp-sheet::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:multiply;
  background-image:
    radial-gradient(130% 100% at 50% 42%, rgba(0,0,0,0) 60%, rgba(74,60,40,.15) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.26'/%3E%3C/svg%3E");
  background-size:auto, 150px 150px; }
[data-doc-ground="creator"].hp-sheet > * { position:relative; z-index:1; }
[data-doc-ground="creator"] .hp-pane { background:transparent; }
[data-doc-ground="creator"].hp-sheet *::-webkit-scrollbar-thumb { background:rgba(23,22,27,.22); background-clip:padding-box; }
[data-doc-ground="creator"].hp-sheet *:hover::-webkit-scrollbar-thumb { background:rgba(23,22,27,.34); background-clip:padding-box; }
[data-doc-ground="creator"].hp-sheet *::-webkit-scrollbar-thumb:hover { background:rgba(23,22,27,.48); background-clip:padding-box; }
[data-doc-ground="creator"].hp-sheet { scrollbar-color:rgba(23,22,27,.28) transparent; }
[data-doc-ground="creator"] .hp-plate { position:relative; background:var(--doc-rule); box-shadow:var(--doc-lift);
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                    calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .hp-plate::after { content:""; position:absolute; inset:1px; background:var(--doc-paper-raised); pointer-events:none;
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                    calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .hp-plate > * { position:relative; z-index:1; }
[data-doc-ground="creator"] .hp-plate[data-accent="1"] { background:var(--doc-action); }
[data-doc-ground="creator"] .hp-plate[data-flat="1"] { box-shadow:none; }
[data-doc-ground="creator"] .hp-plate[data-pad="read"] { padding:17px 19px 19px; }
[data-doc-ground="creator"] .hp-plate[data-pad="data"] { padding:11px 12px 12px; }
[data-doc-ground="creator"] .hp-plate[data-pad="bleed"] > :not(.hp-head):not(details) { margin-left:15px; margin-right:15px; }
[data-doc-ground="creator"] .hp-plate[data-pad="bleed"] > :last-child { margin-bottom:15px; }
[data-doc-ground="creator"] .hp-plate[data-pad="snug"] { padding:9px 10px 10px; }
[data-doc-ground="creator"] .hp-plate[data-input="1"] { box-shadow:0 1px 2px rgba(23,22,27,.13) inset, 0 1px 0 rgba(255,255,255,.5); }
[data-doc-ground="creator"] .hp-note { position:relative; background:var(--doc-state); color:var(--doc-paper-raised); padding:13px 15px 14px;
  box-shadow:var(--doc-lift);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--doc-cut)), calc(100% - var(--doc-cut)) 100%, 0 100%); }
[data-doc-ground="creator"] .hp-note-title { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10.5px; letter-spacing:.22em;
  color:var(--doc-mark); text-transform:uppercase; text-align:right; margin-bottom:8px; }
[data-doc-ground="creator"] .hp-note p { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:16px; line-height:1.56;
  color:var(--doc-paper-raised); max-width:var(--desk-prose-max,373px); margin:0; }
[data-doc-ground="creator"] .hp-head { display:flex; align-items:center; gap:9px; min-height:34px; padding:6px 26px 6px 11px;
  background:var(--doc-state); border:0; width:100%; text-align:left; color:var(--doc-paper-raised);
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - var(--doc-point)) 0, 100% 50%, calc(100% - var(--doc-point)) 100%, 0 100%); }
[data-doc-ground="creator"] .hp-head[data-state="active"] { background:var(--doc-action); }
[data-doc-ground="creator"] button.hp-head,
[data-doc-ground="creator"] .hp-head[role="button"] { min-height:44px; cursor:pointer; }
[data-doc-ground="creator"] .hp-head:focus-visible { outline:2px solid var(--doc-action); outline-offset:2px; }
[data-doc-ground="creator"] .hp-head .hp-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-doc-ground="creator"] .hp-head .hp-count { font-variant-numeric:tabular-nums; color:rgba(242,241,236,.74); letter-spacing:.1em; }
[data-doc-ground="creator"] .hp-box { width:11px; height:11px; flex:none; border:1px solid rgba(242,241,236,.6); }
[data-doc-ground="creator"] .hp-box[data-on="1"] { background:var(--doc-paper-raised); border-color:var(--doc-paper-raised); }
[data-doc-ground="creator"] .hp-railwrap { container-type:inline-size; }
[data-doc-ground="creator"] .hp-rail { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
[data-doc-ground="creator"] .hp-rail[data-cols="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
[data-doc-ground="creator"] .hp-rail[data-size="lg"] .hp-char-bead { font-size:30px; }
[data-doc-ground="creator"] .hp-rail[data-size="lg"] .hp-char-val { padding:14px 0 12px; }
[data-doc-ground="creator"] .hp-rail[data-size="lg"] .hp-char-lab { font-size:11px; padding:7px 2px 5px; }
[data-doc-ground="creator"] .hp-char[data-force="1"] { grid-column:1 / -1; }
[data-doc-ground="creator"] .hp-char[data-force="1"] .hp-char-val { background:var(--doc-lift, #151821); }
[data-doc-ground="creator"] .hp-char[data-force="1"] .hp-char-bead { border-color:var(--doc-action); border-width:2px; }
[data-doc-ground="creator"] .hp-char[data-force="1"] .hp-char-lab { background:var(--doc-action); }
[data-doc-ground="creator"] .hp-char { background:rgba(23,22,27,.34); padding:1px; text-align:center; min-width:0;
  box-shadow:var(--doc-lift);
  clip-path:polygon(var(--doc-cut-sm) 0, 100% 0, 100% calc(100% - var(--doc-cut-sm)),
                    calc(100% - var(--doc-cut-sm)) 100%, 0 100%, 0 var(--doc-cut-sm)); }
[data-doc-ground="creator"] .hp-char-val { display:block; background:var(--doc-plate); padding:8px 0 7px; }
[data-doc-ground="creator"] .hp-char-bead { display:inline-flex; align-items:center; justify-content:center; width:2em; height:2em;
  border-radius:50%; background:var(--doc-paper-raised); border:1px solid rgba(23,22,27,.34);
  font-family:var(--font-display,'Orbitron',sans-serif); font-weight:900; font-size:var(--fs-lg,17px);
  line-height:1; color:var(--doc-ink); font-variant-numeric:tabular-nums; }
[data-doc-ground="creator"] .hp-char-lab { display:block; background:var(--doc-state); padding:5px 1px 4px; font-style:normal;
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:9px; letter-spacing:.01em;
  color:var(--doc-paper-raised); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-char[data-raised="1"] .hp-char-val { background:var(--doc-mark); }
[data-doc-ground="creator"] .hp-char[data-raised="1"] .hp-char-bead { border-color:rgba(23,22,27,.5); border-width:2px; }
[data-doc-ground="creator"] .hp-char[data-pending="1"] .hp-char-val { background:var(--doc-mat); }
[data-doc-ground="creator"] .hp-char[data-pending="1"] .hp-char-bead { background:transparent; border-style:dashed; border-color:var(--doc-ink-structural); color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-nest { margin:8px 0 4px 18px; padding-left:15px; border-left:1px solid var(--doc-rule); }
[data-doc-ground="creator"] .hp-nest > .hp-maker { margin:9px 0 6px; }
[data-doc-ground="creator"] .hp-nest > .hp-maker:first-child { margin-top:2px; }
[data-doc-ground="creator"] .hp-nest .hp-head { min-height:40px; font-size:11px; }
[data-doc-ground="creator"] .hp-nest .hp-plate { margin-top:7px; }
[data-doc-ground="creator"] .hp-head .hp-run { color:rgba(242,241,236,.78); letter-spacing:.06em; flex:none; }
/* B-585 — the selected option's run WRAPS inside its head instead of running past the column
   (Xi'Dec Large: six values + two grants). `flex:none` + nowrap was the sideways scroll. */
[data-doc-ground="creator"] .hpw-ledger .hp-head .hp-run { flex:1 1 100%; min-width:0; white-space:normal; line-height:1.4; }
/* B-588 — the phone picker's closed head carries the picked option's run on its own line. */
[data-doc-ground="creator"][data-band="mobile"] .hp-unit > summary .hp-head { flex-wrap:wrap; }
[data-doc-ground="creator"][data-band="mobile"] .hp-unit > summary .hp-head .hp-run-phone { flex:1 1 100%; min-width:0; white-space:normal; font-size:11px; letter-spacing:.06em; line-height:1.4; color:rgba(242,241,236,.78); margin-top:2px; }
[data-doc-ground="creator"] .hpw-ledger .hp-head[data-opt-head] { flex-wrap:wrap; row-gap:4px; }
[data-doc-ground="creator"] .hp-head .hp-run b { color:#fff; }
[data-doc-ground="creator"] .hp-head .hp-run i { color:rgba(242,241,236,.72); }
[data-doc-ground="creator"] .hp-tab { position:absolute; right:0; bottom:0; padding:5px 12px 5px 13px;
  background:var(--doc-state); color:var(--doc-paper-raised);
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* `data-state` on a badge is the talent's ACTIVATION TYPE (Active / Passive, the book's field), not
   its buy state. This rule coloured the one-part badge by it; on B-506's two-part badge the colour
   comes from the PAINT keyed by `data-tab`, and this rule leaked onto the transparent 88×44 hit
   target of every Active-type talent — "the badge looks oversized compared to the one next to it"
   (Jason 2026-09-13, B-579). Two-part badges are excluded; a one-part badge keeps its colour. */
[data-doc-ground="creator"] .hp-tab[data-state="active"]:not(:has(> .hp-tab-paint)) { background:var(--doc-action); }

/* ── THE COST BADGE AS THE CONTROL (B-506) ──────────────────────────────────────────────────────
   Jason: "the cost on the cell should be the buy/refund button". The badge does not move and does
   not change size — it changes WORD and colour. The 44px floor is bought with HIT AREA, not ink:
   the badge is already `position:absolute`, so a transparent border grows the rect up and left
   over the description without displacing a pixel. This is the same technique `.hp-runhead
   [data-creator-back]` (:485) and `.hp-wave-step` (:518) already use — "a real 44px rect while it
   contributes only its text's height". Measured on the approved page: painted 25px in all nine
   states, target 44x88 in all nine. */
[data-doc-ground="creator"] button.hp-tab,
[data-doc-ground="creator"] span.hp-tab:has(> .hp-tab-paint) {
  /* THE BUTTON IS THE TARGET, THE SPAN INSIDE IT IS THE PAINT — the board's own two-part shape
     (parity against the catch-up pin named it). The button is transparent and 44px; the paint keeps
     the badge's shipped size, so the floor costs no pixels. */
  min-height:44px; min-width:88px; cursor:pointer; padding:0; border:0; background:transparent;
  display:inline-flex; align-items:flex-end; justify-content:flex-end;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
}
[data-doc-ground="creator"] .hp-tab-paint {
  display:inline-block; padding:5px 12px 5px 13px; background:#241E30; color:#F2F1EC;
}
[data-doc-ground="creator"] .hp-tab[data-tab="buyable"] .hp-tab-paint,
[data-doc-ground="creator"] .hp-tab[data-tab="choice"] .hp-tab-paint,
[data-doc-ground="creator"] .hp-tab[data-tab="free"] .hp-tab-paint { background:var(--doc-action); font-weight:700; }
[data-doc-ground="creator"] .hp-tab[data-tab="bought"] .hp-tab-paint,
[data-doc-ground="creator"] .hp-tab[data-tab="granted"] .hp-tab-paint,
[data-doc-ground="creator"] .hp-tab[data-tab="owned"] .hp-tab-paint,
[data-doc-ground="creator"] .hp-tab[data-tab="depends"] .hp-tab-paint { background:var(--doc-accent); color:#F7F2E4; }
[data-doc-ground="creator"] button.hp-tab:focus-visible { outline:2px solid var(--doc-mark); outline-offset:2px; }
[data-doc-ground="creator"] .hp-tab[data-tab="granted"],
[data-doc-ground="creator"] .hp-tab[data-tab="depends"],
[data-doc-ground="creator"] .hp-tab[data-tab="owned"] { background:var(--doc-accent); color:#F7F2E4; }

/* THE REFUSAL, over a DIMMED cell — Jason 2026-09-09. It covers the cell that refused, so the
   reason is where the press was; the cell beneath it fades rather than disappears, because the
   player needs to see WHICH cell said no. The wording is the one approved 2026-09-08 (B-440,
   `animation-build` A2) — only its home moves. */
[data-doc-ground="creator"] .hp-tal[data-refusing="1"] > .hp-head,
[data-doc-ground="creator"] .hp-tal[data-refusing="1"] > .hp-plate { opacity:.28; }
[data-doc-ground="creator"] .hp-tal { position:relative; }
[data-doc-ground="creator"] .hp-refuse {
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; padding:12px;
  background:var(--doc-paper-raised); border:2px solid var(--doc-action);
}
[data-doc-ground="creator"] .hp-refuse > span {
  font-family:var(--font-body); font-size:14px; line-height:1.4; font-weight:600;
  color:var(--doc-action); text-align:center;
}
/* The 44px rule for the refusal's Close button retired with the button itself
   (R-CRG-A3-2 (3)): the badge that opens the refusal now closes it, and that badge already
   carries the 44px target `button.hp-tab` was given for AS-6. */

[data-doc-ground="creator"] .hp-tab .hp-tab-key { color:rgba(242,241,236,.7); margin-right:6px; }
[data-doc-ground="creator"] .hp-commit { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 30px 0 22px; border:0; cursor:pointer;
  background:var(--doc-action); color:var(--doc-paper-raised); box-shadow:var(--doc-lift);
  font-family:var(--font-display,'Orbitron',sans-serif); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
[data-doc-ground="creator"] .hp-commit:hover { background:var(--doc-action-lift); }
[data-doc-ground="creator"] .hp-commit:focus-visible { outline:2px solid var(--doc-ink); outline-offset:3px; }
[data-doc-ground="creator"] .hp-commit[data-done="1"] { background:var(--doc-state); color:var(--doc-mark); }
[data-doc-ground="creator"] .hp-quiet { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; cursor:pointer;
  background:transparent; border:1px solid var(--doc-rule); color:var(--doc-ink-muted);
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase;
  clip-path:polygon(var(--doc-cut-sm) 0, 100% 0, 100% calc(100% - var(--doc-cut-sm)),
                    calc(100% - var(--doc-cut-sm)) 100%, 0 100%, 0 var(--doc-cut-sm)); }
[data-doc-ground="creator"] .hp-quiet:hover { border-color:var(--doc-action); color:var(--doc-ink); }
/* A disabled control is not a thing to press, so it never shows the pointer hand (ruling paper-prepass R-PPR-2; until
 * then it arrived on every paper surface only through the homebrew editor's unfenced copy of this rule). */
[data-doc-ground="creator"] .hp-quiet:disabled, [data-doc-ground="creator"] .hp-commit:disabled { cursor:default; }
[data-doc-ground="creator"] .hp-artplate { position:relative; background:rgba(23,22,27,.34); padding:1px; box-shadow:var(--doc-lift);
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                    calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .hp-artplate-in[data-band] { aspect-ratio:auto; height:var(--doc-band,340px); }
[data-doc-ground="creator"] .hp-artplate-in { position:relative; background-color:var(--doc-mat); background-image:var(--doc-wash, none);
  background-size:cover; background-position:center; aspect-ratio:3/5; display:flex;
  align-items:center; justify-content:center; overflow:hidden; }
[data-doc-ground="creator"] .hp-artplate img { width:100%; height:100%; object-fit:contain; display:block;
  box-sizing:border-box; padding:26px 10px 10px;
  filter:drop-shadow(0 6px 14px rgba(23,22,27,.30)); }
[data-doc-ground="creator"] .hp-artlabel { position:absolute; left:0; top:0; background:var(--doc-mat); padding:4px 9px; z-index:2;
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:9px; letter-spacing:.2em;
  color:var(--doc-accent); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-tick { position:absolute; width:9px; height:9px; border:1px solid var(--doc-action); z-index:2; }
[data-doc-ground="creator"] .hp-tick.tr { top:3px; right:3px; border-left:0; border-bottom:0; }
[data-doc-ground="creator"] .hp-tick.bl { bottom:3px; left:3px; border-right:0; border-top:0; }
[data-doc-ground="creator"] .hp-artplate-in[data-empty="1"] { background-image:
   repeating-linear-gradient(135deg, rgba(23,22,27,.05) 0 8px, rgba(23,22,27,.10) 8px 16px); }
[data-doc-ground="creator"] .hp-ledger { width:100%; border-collapse:collapse; }
[data-doc-ground="creator"] .hp-ledger td { padding:7px 0; vertical-align:baseline; }
[data-doc-ground="creator"] .hp-ledger tr { border-top:1px solid var(--doc-rule-fine); }
[data-doc-ground="creator"] .hp-ledger tr:first-child { border-top:0; }
[data-doc-ground="creator"] .hp-lkey { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px; letter-spacing:.09em;
  color:var(--doc-accent); text-transform:uppercase; white-space:nowrap; width:1%; padding-right:14px; }
[data-doc-ground="creator"] .hp-lval { font-family:var(--font-body,'Rajdhani',sans-serif); font-weight:600; font-size:16px;
  color:var(--doc-ink); font-variant-numeric:tabular-nums; text-align:right; }
[data-doc-ground="creator"] .hp-sep { color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-prose.hp-prose-sm { font-size:16px; }
[data-doc-ground="creator"] .hp-none { color:var(--doc-ink-muted); font-family:var(--font-mono,'Share Tech Mono',monospace);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
[data-doc-ground="creator"] .hp-index { display:flex; flex-direction:column; }
[data-doc-ground="creator"] .hp-row { display:flex; align-items:stretch; width:100%; min-height:64px; cursor:pointer;
  background:transparent; border:0; border-top:1px solid var(--doc-rule-fine); padding:0; text-align:left;
  color:inherit; position:relative; }
[data-doc-ground="creator"] .hp-row:first-child { border-top:0; }
[data-doc-ground="creator"] .hp-row:hover { background:rgba(23,22,27,.05); }
[data-doc-ground="creator"] .hp-row:focus-visible { outline:2px solid var(--doc-action); outline-offset:-2px; }
[data-doc-ground="creator"] .hp-row[data-selected="1"] { background:rgba(126,20,20,.08); box-shadow:inset 3px 0 0 var(--doc-action); }
[data-doc-ground="creator"] .hp-row-plate { width:46px; flex:none; background:var(--doc-mat); overflow:hidden; position:relative; }
[data-doc-ground="creator"] .hp-row-plate { background-size:150% auto; background-position:center top; background-repeat:no-repeat; }
[data-doc-ground="creator"] .hp-row-plate img { position:absolute; top:0; left:50%; transform:translateX(-50%); width:150%;
  max-width:none; height:auto; display:block; }
[data-doc-ground="creator"] .hp-row-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;
  gap:5px; padding:8px 12px; }
/* The NAME does not set the register's minimum width — it already ellipsizes (below); the RUN does,
   because its six values are data a reader must see (decision 1). `contain: inline-size` keeps the
   name's intrinsic width out of the column's min-content. */
[data-doc-ground="creator"] .hp-row-desig { contain:inline-size; font-family:var(--font-display,'Orbitron',sans-serif); font-weight:700; font-size:13px;
  letter-spacing:.05em; color:var(--doc-ink); text-transform:uppercase; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
[data-doc-ground="creator"] .hp-row[data-selected="1"] .hp-row-desig { color:var(--doc-action); }
/* B-589 — a PICKED option row (the phone picker, `data-on`) reads like a selected register row: the
   name in the action ink and a box at the row's head, filled when on. The box's default border is
   tuned for the dark heads; on a paper row it takes the ink. */
[data-doc-ground="creator"] .hp-row[data-on="1"] .hp-row-desig { color:var(--doc-action); }
[data-doc-ground="creator"] .hp-row .hp-row-box { align-self:center; margin-left:12px; width:14px; height:14px; border-color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-row .hp-row-box[data-on="1"] { background:var(--doc-action); border-color:var(--doc-action); }
[data-doc-ground="creator"] .hp-run { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px; letter-spacing:.02em;
  color:var(--doc-ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden;
  text-overflow:clip; }
[data-doc-ground="creator"] .hp-run b { color:var(--doc-action); font-weight:400; }
[data-doc-ground="creator"] .hp-run i { font-style:normal; color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-row-tab { flex:none; display:flex; align-items:center; justify-content:flex-end; gap:5px;
  width:76px; padding:0 12px; border-left:1px solid var(--doc-rule-fine);
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:12px; letter-spacing:.08em;
  color:var(--doc-ink); font-variant-numeric:tabular-nums; }
[data-doc-ground="creator"] .hp-xpn { text-align:right; }
[data-doc-ground="creator"] .hp-xpu { font-size:9px; letter-spacing:.14em; color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-unit > summary { position:sticky; top:0; z-index:3; }
[data-doc-ground="creator"] .hp-unit[open] > .hp-prose { max-height:var(--doc-unit-max, none); overflow-y:auto;
  padding-right:11px; }
[data-doc-ground="creator"] .hp-unit[open] { position:relative; }
[data-doc-ground="creator"] .hp-unit[open]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:20px;
  pointer-events:none; background:linear-gradient(180deg, rgba(242,241,236,0), var(--doc-paper-raised)); }
[data-doc-ground="creator"] .hp-tree { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 20px; }
[data-doc-ground="creator"] .hp-tal { position:relative; display:flex; flex-direction:column; }
[data-doc-ground="creator"] .hp-tal > .hp-head { width:calc(100% + var(--doc-point)); flex:none; }
[data-doc-ground="creator"] .hp-tal-body { flex:1; margin-top:-1px; width:calc(100% - var(--doc-point)); padding-bottom:26px; }
/* THE SHELL'S BODY CLEARS ITS LARGER BADGE (B-578, the eyes' OVERLAP class): inside `.hpw-shell` the
   cost paint inherits 16px and measures 31px tall; the 26px foot above was cut for the 11px paint,
   so a long description's last line ran 5px under "Cost 20" (Full Throttle, Skilled Jockey at
   1194/1440). The approved cell frame drew a short exemplar and never reached this state; the
   standard (text never under a control) outranks the mockup (C-MU-4). 31 + 5 breathing. */
[data-doc-ground="creator"] .hpw-shell .hp-tal-body { padding-bottom:36px; }
[data-doc-ground="creator"] .hp-tal-body > p { margin:11px 13px 0; font-size:14px; line-height:1.5; color:var(--doc-ink); }
[data-doc-ground="creator"] .hp-tal[data-down="1"]::after { content:""; position:absolute; left:calc(50% - 2px); bottom:-34px;
  width:4px; height:34px; background:var(--doc-state); }
[data-doc-ground="creator"] .hp-tal[data-right="1"]::before { content:""; position:absolute; top:17px; right:-20px;
  width:20px; height:4px; background:var(--doc-state); z-index:1; }
[data-doc-ground="creator"] .hp-tal[data-owned="1"] .hp-tal-body { background:var(--doc-mark); }
[data-doc-ground="creator"] .hp-tal[data-owned="1"] .hp-tal-body::after { background:#FBF3E4; }
[data-doc-ground="creator"] .hp-treehead { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:14px; }
[data-doc-ground="creator"] .hp-treehead .hp-skills { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:15px;
  color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-xp { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-top:1px solid var(--doc-rule-fine); padding:9px 0; }
[data-doc-ground="creator"] .hp-xp:first-child { border-top:0; }
[data-doc-ground="creator"] .hp-xp dt { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px;
  letter-spacing:.09em; color:var(--doc-accent); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-xp dd { margin:0; font-family:var(--font-body,'Rajdhani',sans-serif); font-weight:600;
  font-size:19px; color:var(--doc-ink); font-variant-numeric:tabular-nums; }
[data-doc-ground="creator"] .hp-xp[data-total="1"] dd { font-size:26px; }
[data-doc-ground="creator"] .hp-xp[data-over="1"] dd { color:var(--doc-action); border-bottom:2px solid var(--doc-action);
  padding-bottom:2px; }
[data-doc-ground="creator"] .hp-overspent { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--doc-action); margin-top:7px; }
[data-doc-ground="creator"] .hp-buy { display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:12px;
  border-top:1px solid var(--doc-rule-fine); padding:8px 0; }
[data-doc-ground="creator"] .hp-buy:first-child { border-top:0; }
[data-doc-ground="creator"] .hp-buy-name { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px;
  letter-spacing:.09em; color:var(--doc-accent); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-buy-step { font-family:var(--font-body,'Rajdhani',sans-serif); font-weight:600; font-size:16px;
  color:var(--doc-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
[data-doc-ground="creator"] .hp-buy-step i { font-style:normal; color:var(--doc-ink-muted); margin:0 5px; }
[data-doc-ground="creator"] .hp-buy-cost { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11.5px;
  letter-spacing:.08em; color:var(--doc-ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
[data-doc-ground="creator"] .hp-buy-btn { min-height:44px; min-width:44px; padding:0 15px; cursor:pointer; background:transparent;
  border:1px solid var(--doc-rule); color:var(--doc-ink-muted);
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase;
  clip-path:polygon(var(--doc-cut-sm) 0, 100% 0, 100% calc(100% - var(--doc-cut-sm)),
                    calc(100% - var(--doc-cut-sm)) 100%, 0 100%, 0 var(--doc-cut-sm)); }
[data-doc-ground="creator"] .hp-buy-btn:hover { border-color:var(--doc-action); color:var(--doc-ink); }
[data-doc-ground="creator"] .hp-buy-btn[data-at-cap="1"] { color:var(--doc-ink-muted); border-style:dashed; }
[data-doc-ground="creator"] .hp-gloss { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px 30px; }
[data-doc-ground="creator"] .hp-gloss-col { display:grid; gap:17px; align-content:start; }
[data-doc-ground="creator"] .hp-gloss-gp { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10px;
  letter-spacing:.2em; color:var(--doc-accent); text-transform:uppercase;
  border-bottom:1px solid var(--doc-rule-fine); padding-bottom:7px; }
[data-doc-ground="creator"] .hp-gloss-hd { display:flex; align-items:center; gap:10px; }
[data-doc-ground="creator"] .hp-gloss-nm { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11.5px;
  letter-spacing:.14em; color:var(--doc-ink); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-gloss-rt { display:inline-flex; align-items:center; justify-content:center; min-width:21px;
  height:21px; padding:0 4px; background:var(--doc-plate); color:var(--doc-ink);
  font-family:var(--font-display,'Orbitron',sans-serif); font-weight:900; font-size:11px;
  line-height:1; font-variant-numeric:tabular-nums; }
[data-doc-ground="creator"] .hp-gloss-it[data-raised="1"] .hp-gloss-rt { background:var(--doc-mark); }
[data-doc-ground="creator"] .hp-gloss-it .hp-prose { margin:7px 0 0; max-width:none; }
[data-doc-ground="creator"] .hp-gloss-sub { font-family:var(--font-body,'Rajdhani',sans-serif); font-weight:600; font-size:16px;
  letter-spacing:.02em; color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-gloss-it .hp-prose b { font-weight:700; color:var(--doc-ink); }
[data-doc-ground="creator"] .hp-spendwrap { display:block; }
[data-doc-ground="creator"] .hp-spend { display:grid; gap:28px; align-items:start;
  grid-template-columns:minmax(0,var(--spend-rail,660px)) minmax(0,var(--spend-buy,420px)); }
[data-doc-ground="creator"] .hpw-shell .hpw-grid.hpw-grid-spend { grid-template-columns:var(--spend-index,330px) minmax(0,1fr);
  grid-template-areas:'rail head' 'rail spend'; }
[data-doc-ground="creator"] .hp-skill { display:grid; grid-template-columns:minmax(0,1fr) 42px 118px; gap:14px; align-items:center;
  width:100%; min-height:46px; cursor:pointer; text-align:left; color:inherit;
  background:transparent; border:0; border-top:1px solid var(--doc-rule-fine); padding:7px 10px;
  position:relative; }
[data-doc-ground="creator"] .hp-skill:first-child { border-top:0; }
/* R-CPD-8 — THE WORD NEEDS THE ROOM THE ABBREVIATION DID NOT. The middle cell was a fixed 42px,
   sized for "WIL"; the ban's words ("WILLPOWER") are up to three times that, and at the wide band
   this cell renders at 19px. Only the READING lists widen (`data-charword`) — the buy-ranks screen
   shares `.hp-skill` and its third column carries pips, which must keep its 118px. `auto` rather
   than a second magic number, so the cell is exactly its longest word at every band and the name
   column keeps the remainder. REPEATED IN EACH BAND BLOCK BELOW, and that is not redundancy: the
   band rules (`.hpw-shell .hp-skill`) carry the SAME specificity as this one and sit later in the
   file, so a single rule here is silently overridden at 1366 and 1920 — measured, six labels
   clipped at 1366 with the row itself still reporting a fit. */
[data-doc-ground="creator"] .hp-skill[data-charword] { grid-template-columns:minmax(0,1fr) auto 118px; }
[data-doc-ground="creator"] .hp-skill:hover { background:rgba(23,22,27,.05); }
[data-doc-ground="creator"] .hp-skill:focus-visible { outline:2px solid var(--doc-action); outline-offset:-2px; }
[data-doc-ground="creator"] .hp-skill[data-picked="1"] { background:rgba(126,20,20,.08); box-shadow:inset 3px 0 0 var(--doc-action); }
[data-doc-ground="creator"] .hp-skill-name { font-family:var(--font-body,'Rajdhani',sans-serif); font-weight:600; font-size:16px;
  color:var(--doc-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-doc-ground="creator"] .hp-skill[data-picked="1"] .hp-skill-name { color:var(--doc-action); }
[data-doc-ground="creator"] .hp-skill-char { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10.5px;
  letter-spacing:.1em; color:var(--doc-accent); text-transform:uppercase; text-align:right; }
[data-doc-ground="creator"] .hp-pool { display:inline-flex; gap:3px; align-items:center; justify-content:flex-start; }
[data-doc-ground="creator"] .hp-pool .hp-sym { font-size:19px; }
[data-doc-ground="creator"] .hp-teach { display:grid; gap:8px; margin-top:13px; padding:12px 14px; background:var(--doc-mat);
  clip-path:polygon(var(--doc-cut-sm) 0, 100% 0, 100% calc(100% - var(--doc-cut-sm)),
                    calc(100% - var(--doc-cut-sm)) 100%, 0 100%, 0 var(--doc-cut-sm)); }
[data-doc-ground="creator"] .hp-teach > div { display:flex; align-items:center; gap:14px; }
[data-doc-ground="creator"] .hp-teach-lab { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10.5px;
  letter-spacing:.1em; color:var(--doc-ink-muted); text-transform:uppercase; min-width:148px; }
[data-doc-ground="creator"] .hp-treescroll { overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
  padding-right:calc(var(--doc-point) + 4px); }
[data-doc-ground="creator"] .hp-treescroll .hp-tree { grid-template-columns:repeat(4,minmax(215px,1fr)); }
[data-doc-ground="creator"] .hp-row[data-noplate="1"] { min-height:52px; }
[data-doc-ground="creator"] .hp-row[data-noplate="1"] .hp-row-desig { white-space:normal; overflow:visible; text-overflow:clip; }
[data-doc-ground="creator"] .hp-row[data-noplate="1"] .hp-row-body { padding:8px 14px; }
/* THE PLATE-LESS ROW'S TAB HOLDS ITS RUN — ruling `creator-pre-deploy-batch` R-CPD-7, corrected by
   A12. The instruction is NOT "match the board's number": the lab's rule is byte-identical to this
   one and its own render spills the same way (LAB_NOTES §72), so matching it is what reproduced the
   defect. Ours is to hold the run inside the box.
   THE CAUSE IS A SPECIFICITY SPLIT, and it is why the spill is worst where nobody looked: this
   selector is (0,4,0) and pinned WIDTH, while the density rungs at (0,3,0) raise FONT-SIZE. The more
   specific rule won on width, so a career tab stayed 64px while its type grew — measured on this
   tree, the run clears at 1366/1920 (-7.3px), eats into the padding at 2560 (+2.9px) and at 3840
   CROSSES ITS OWN border-left by 17.2px. The species tab, which has no override, takes each rung's
   width and fits everywhere.
   SO THE OVERRIDE STOPS PINNING A WIDTH AND STATES A FLOOR. 64px stays as the minimum — the drawn
   look at the base band, unchanged — and the tab sizes to its run above it, at every rung, without a
   table of magic numbers that would need a row per future rung. Measured after: no band spills.
   NOT `overflow:hidden`: clipping would make it fit by deleting the number, on a rail whose whole
   purpose is comparing those numbers. */
[data-doc-ground="creator"] .hp-row[data-noplate="1"] .hp-row-tab { width:auto; min-width:64px; padding:0 10px; }
[data-doc-ground="creator"] .hp-railact { margin-top:auto; padding-top:18px; }
/* THE REVIEW'S RAIL SCROLLS AND ITS FINISH STAYS AT THE FOOT (B-592, Jason's iPad walk: "I can't
   complete the review"). The rail (`hpw-index`) is a flex column with overflow VISIBLE — the other
   steps put a scroller inside it; the review stacks the portrait, the build, So Far, the name and
   CREATE THIS CHARACTER straight into it, 947px in a 729px pane at 1194×810, and 1,120 in 819 at
   1440×900 — the finish 150px below the fold with nothing that scrolls. Identical on the revision.
   The pane scrolls now (the scroll cue already marked it), and the act sticks at its foot on the
   paper so the finish is on screen at every height; the name box is a scroll away above it. */
[data-doc-ground="creator"] [data-review-step="1"] .hpw-index { overflow-y:auto; overflow-x:hidden; }
[data-doc-ground="creator"] [data-review-step="1"] .hpw-index .hp-railact { position:sticky; bottom:0; padding-bottom:6px; z-index:2; }
/* THE ACT'S BACKING IS THERE ONLY WHILE SOMETHING SCROLLS UNDER IT (B-593, Jason's iPad: "the paper
   block behind Create This Character looks out of place"). A flat `--doc-paper` fill sat on a ground
   that is paper UNDER the wear texture, so on the mid band — where the review no longer scrolls —
   it read as a lighter slab with nothing to hide. Now the backing appears only while the rail has
   more below (`data-more`, the scroll cue's own signal), and it is the ground's paint: paper with
   the wear tile multiplied over it, so the rows sliding beneath are covered by the same page. */
[data-doc-ground="creator"] [data-review-step="1"] .hpw-index[data-more="1"] .hp-railact { background-color:var(--doc-paper); }
[data-doc-ground="creator"] [data-review-step="1"] .hpw-index[data-more="1"] .hp-railact::before { content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none; background-image:var(--doc-wash-default, url("/art/wear.webp")); background-size:900px 900px; background-repeat:repeat;
  opacity:.82; mix-blend-mode:multiply; }
/* …and the scroll cue's fade moves ABOVE the act instead of over it. B-586 masks a pane's last 48px,
   and on this pane the last 48px ARE the sticky finish — CREATE THIS CHARACTER faded to 8% while
   the rail had more below. The pane keeps no mask here; the backing's top edge is the fade, a
   28px gradient from the ground into the paper, so the rows still slide under a soft edge and the
   button is crisp at every scroll position. */
[data-doc-ground="creator"] .hpw-shell [data-review-step="1"] .hpw-index[data-more="1"] { -webkit-mask-image:none; mask-image:none; }
[data-doc-ground="creator"] [data-review-step="1"] .hpw-index[data-more="1"] .hp-railact::after { content:""; position:absolute; left:0; right:0; top:-28px; height:28px;
  pointer-events:none; background:linear-gradient(to bottom, rgba(222,220,212,0), var(--doc-paper)); }
[data-doc-ground="creator"] [data-review-step="1"] .hpw-index .hp-railact { isolation:isolate; }
[data-doc-ground="creator"] .hp-railact .hp-commit { width:100%; }
/* THE REVIEW'S THREE STACKS IN THE WIDE SHEET'S TWO COLUMNS (B-593). The read pane's grid is
   the approved two-column frame; the skills stack and the tracks stack share its second column,
   one under the other, and the characteristics stack spans both rows. `row-gap:0` because the
   stacks' own secheads carry the spacing they had when they were one column. */
[data-doc-ground="creator"] [data-browse-footnote-mid] { display:none; }
/* THE DOORS INTO THE GLOSS (B-598): a tile or a raise-row name that is a BUTTON keeps the figure's
   look; the tile whose entry is open carries the action ring. */
[data-doc-ground="creator"] button.hp-char { font:inherit; color:inherit; border:0; cursor:pointer; display:block; width:100%; }
[data-doc-ground="creator"] button.hp-char[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--doc-action); }
[data-doc-ground="creator"] button.hp-buy-name-door { background:transparent; border:0; padding:0; cursor:pointer; text-align:left;
  text-decoration:underline; text-decoration-color:var(--doc-rule); text-underline-offset:3px; }
[data-doc-ground="creator"] .hp-gloss[data-only] { grid-template-columns:1fr; }
/* A FOLD WHOSE SUMMARY IS A SECHEAD (B-598/B-599): no marker, the glyph at the head's end turning
   when open, the body hidden until then. The mid band's way of keeping a page's reading a tap away. */
[data-doc-ground="creator"] .hp-fold > summary { list-style:none; cursor:pointer; }
[data-doc-ground="creator"] .hp-fold > summary::-webkit-details-marker { display:none; }
[data-doc-ground="creator"] .hp-fold > summary .hp-sechead .hp-glyph { margin-left:10px; font-size:12px; color:var(--doc-accent); order:3; transition:transform .15s ease; }
[data-doc-ground="creator"] .hp-fold[open] > summary .hp-sechead .hp-glyph { transform:rotate(180deg); }
/* THE MOTIVATION'S TWO STACKS (B-602): the wide sheet draws both in the first column, one under the
   other, as it always did; the mid band puts the second in the empty second column (below). */
[data-doc-ground="creator"] [data-motivation-step="1"] .hp-spend { row-gap:0; }
[data-doc-ground="creator"] [data-motivation-step="1"] .hp-spend > [data-motiv-stack="own"] { grid-column:1; }
[data-doc-ground="creator"] [data-review-step="1"] .hp-spend { row-gap:0; }
[data-doc-ground="creator"] [data-review-step="1"] .hp-spend > div:first-child { grid-column:1; grid-row:1 / span 2; }
[data-doc-ground="creator"] [data-review-step="1"] .hp-spend > [data-review-stack="skills"] { grid-column:2; grid-row:1; }
[data-doc-ground="creator"] [data-review-step="1"] .hp-spend > [data-review-stack="tracks"] { grid-column:2; grid-row:2; }
[data-doc-ground="creator"] .hp-onecol { max-width:1500px; margin:0 auto; display:flex; flex-direction:column; min-height:0;
  height:100%; }
[data-doc-ground="creator"] .hp-onecol > .hp-wave,
[data-doc-ground="creator"] .hp-onecol > .hp-sechead,
[data-doc-ground="creator"] .hp-onecol > div:not(.hp-linescroll) { flex:none; }
[data-doc-ground="creator"] .hp-linescroll { flex:1; min-height:0; overflow-y:auto; padding-right:6px; }
[data-doc-ground="creator"] .hp-lines { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;
  align-items:stretch; }
[data-doc-ground="creator"] .hp-line { display:flex; flex-direction:column; text-align:left; cursor:pointer; padding:0;
  background:var(--doc-rule); border:0; position:relative; box-shadow:var(--doc-lift);
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                    calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .hp-line::after { content:""; position:absolute; inset:1px; background:var(--doc-paper-raised);
  pointer-events:none;
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                    calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .hp-line > * { position:relative; z-index:1; }
[data-doc-ground="creator"] .hp-line:hover { background:var(--doc-plate); }
[data-doc-ground="creator"] .hp-line:focus-visible { outline:2px solid var(--doc-action); outline-offset:3px; }
[data-doc-ground="creator"] .hp-line[data-selected="1"] { background:var(--doc-action); }
[data-doc-ground="creator"] .hp-line[data-selected="1"]::after { background:#E9DFDB; }
[data-doc-ground="creator"] .hp-line[data-selected="1"] .hp-line-name { color:var(--doc-action); }
[data-doc-ground="creator"] .hp-line-plate { display:block; background:var(--doc-mat); margin:1px 1px 0; overflow:hidden;
  aspect-ratio:2.78; }
[data-doc-ground="creator"] .hp-line-plate img { display:block; width:100%; height:100%; object-fit:cover;
  object-position:top center; }
[data-doc-ground="creator"] .hp-line-body { display:flex; flex-direction:column; flex:1; gap:7px; padding:15px 17px 17px; }
[data-doc-ground="creator"] .hp-line-name { font-family:var(--font-display,'Orbitron',sans-serif); font-weight:900;
  font-size:17px; letter-spacing:.02em; color:var(--doc-ink); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-line-cur { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px;
  letter-spacing:.12em; color:var(--doc-accent); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-line-cur i { font-style:normal; color:var(--doc-ink-muted); margin:0 5px; }
[data-doc-ground="creator"] .hp-line-text { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:16px; line-height:1.55;
  color:var(--doc-ink); }
[data-doc-ground="creator"] .hp-line-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:11px; }
[data-doc-ground="creator"] .hp-onecol-act { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px;
  padding-top:16px; border-top:1px solid var(--doc-rule-fine); }
[data-doc-ground="creator"] .hp-onecol-head { margin-top:12px; }
[data-doc-ground="creator"] .hp-tracks { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
/* M1 — JASON'S CAP, BUILT (census M1 RETIRES the stretch; `lab-laps-pin-advance` R-LPA-3).
   R-MTG-2 ruled this a week ago — "reduce scrolling" — and it was never built: measured on the
   served page before this rule, the single-track card was ONE card at `max-width: none`, 950px at
   1366 and 1504px at 1920. `auto-fit` COLLAPSES the empty tracks above, so one card takes the whole
   grid; that is the census's 1504 arriving by the CSS doing exactly what it says.

   THE NUMBER IS THE DRAWING'S, NOT THE DERIVATION'S. R-MTG-2 carried a stand-in derivation (the
   width a card takes in the board's own two-track layout: 742 at 1920, 465 at 1366) because the
   board then drew no cap. It draws one now — `.hp-track{ max-width:var(--pp-lead-max,640px) }` in
   the layout pass — so under `mockup-is-law` R-MIL-1 the drawing is law for what it draws and 640
   is the only law-passing number. Jason still confirms or adjusts at the walk; the queue item
   carries both figures.

   WRITTEN AS THE LITERAL LADDER, NOT AS THE TOKEN, and this is the disclosed implementer call
   R-LPA-3 leaves open ("the `--pp-lead-max` token OR ITS LITERAL"). `derive_board_css.py` prints
   this rule as `max-width:var(--doc-lead-max,640px)` — but OUR `--doc-lead-max` is `none` at base
   (`tokens.css`, the document LEAD's measure) where the board's `--pp-lead-max` is `640px`. A
   `var()` fallback applies only when the variable is UNDEFINED, and ours is defined-as-none, so the
   printed form would resolve to NO CAP at every band below ROOM — reintroducing, inside the fix for
   it, the exact silent-absence this row exists to close. Correcting the token's base instead would
   re-cap `.hp-lead` on every creator step, a second product change M1 was not asked to make. So the
   card carries its own ladder, with the board's own two values. */
[data-doc-ground="creator"] .hp-track { max-width:640px; }
[data-doc-ground="creator"] .hp-track { position:relative; background:var(--doc-rule); box-shadow:var(--doc-lift);
  padding:0; display:flex; flex-direction:column;
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                    calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .hp-track::after { content:""; position:absolute; inset:1px; background:var(--doc-paper-raised);
  pointer-events:none;
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                    calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .hp-track > * { position:relative; z-index:1; padding:0 17px; }
[data-doc-ground="creator"] .hp-track > .hp-track-top { padding-top:15px; }
[data-doc-ground="creator"] .hp-track > .hp-track-foot { padding-bottom:15px; }
[data-doc-ground="creator"] .hp-track[data-primary="1"] { background:var(--doc-action); }
[data-doc-ground="creator"] .hp-track-top { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
[data-doc-ground="creator"] .hp-track-scope { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10px;
  letter-spacing:.14em; color:var(--doc-accent); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-track-val { font-family:var(--font-display,'Orbitron',sans-serif); font-weight:900;
  font-size:30px; line-height:1; color:var(--doc-ink); font-variant-numeric:tabular-nums; }
[data-doc-ground="creator"] .hp-track[data-primary="1"] .hp-track-val { color:var(--doc-action); }
[data-doc-ground="creator"] .hp-track-name { font-family:var(--font-display,'Orbitron',sans-serif); font-weight:700;
  font-size:15px; letter-spacing:.06em; color:var(--doc-ink); text-transform:uppercase;
  margin-top:4px; }
[data-doc-ground="creator"] .hp-track-foot { margin-top:auto; padding-top:12px; }
[data-doc-ground="creator"] .hp-partyrow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
[data-doc-ground="creator"] .hp-party { display:flex; flex-direction:column; align-items:center; gap:3px; min-height:46px;
  justify-content:center; cursor:pointer; background:var(--doc-mat); border:1px solid var(--doc-rule-fine);
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:13px; color:var(--doc-ink); }
[data-doc-ground="creator"] .hp-party[data-on="1"] { background:var(--doc-mark); border-color:var(--doc-accent); }
[data-doc-ground="creator"] .hp-party[data-on="1"] .hp-none { color:var(--doc-ink); }
[data-doc-ground="creator"] .hp-party .hp-none { font-size:10px; }
[data-doc-ground="creator"] .hp-picklist { max-height:280px; }
[data-doc-ground="creator"] .hp-picklist { max-height:270px; }
[data-doc-ground="creator"].hp-phonesheet { display:flex; flex-direction:column; min-height:100%; padding:0; }
[data-doc-ground="creator"] .hp-phonebody { flex:1; padding:16px 15px 18px; }
[data-doc-ground="creator"] .hp-status { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:12px;
  margin-top:12px; padding:10px 12px; background:var(--doc-mat);
  clip-path:polygon(var(--doc-cut-sm) 0, 100% 0, 100% calc(100% - var(--doc-cut-sm)),
                    calc(100% - var(--doc-cut-sm)) 100%, 0 100%, 0 var(--doc-cut-sm)); }
[data-doc-ground="creator"] .hp-status-k { display:block; font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:9px;
  letter-spacing:.1em; color:var(--doc-accent); text-transform:uppercase; margin-bottom:3px; }
[data-doc-ground="creator"] .hp-status-v { display:block; font-family:var(--font-body,'Rajdhani',sans-serif); font-weight:600;
  font-size:17px; color:var(--doc-ink); font-variant-numeric:tabular-nums; }
[data-doc-ground="creator"] .hp-phoneact { position:sticky; bottom:0; padding:12px 15px 15px; background:var(--doc-paper);
  border-top:1px solid var(--doc-rule-fine); }
[data-doc-ground="creator"] .hp-phoneact .hp-commit { width:100%; }
[data-doc-ground="creator"].hp-phonesheet .hp-picklist { max-height:230px; }
[data-doc-ground="creator"].hp-phonesheet .hp-tracks { grid-template-columns:minmax(0,1fr); gap:12px; }
[data-doc-ground="creator"].hp-phonesheet .hp-treescroll { margin-left:-15px; margin-right:-15px; padding-left:15px;
  padding-right:15px; }
/* THE STACKED LEDGER AT 390 (B-510; ruling `phone-talents-census` R-PTC-2a). The board's `hp-ledger`
   is a two-column table on the wide bands and STACKS on the phone — key over value, both full width.
   Four rules, transplanted VERBATIM from `scripts/derive_board_css.py`'s output at pin `6051229c`
   rather than retyped, and they are ONE rule set with TWO consumers: the talents phone sheet's
   "So Far" `<details>` (this card) and the species phone entry's ledger, which is the 12-object
   `phone` frame `smoke_board_style_parity` was red on. B-510 closes on this card's merge.
   THIRD CONSUMER, added at the `build-phone-gear` merge: the gear phone sheet's own "So Far"
   `<details>` is a plain `hp-ledger` table and is unreadable at 390 without these four. That card
   carried a BYTE-IDENTICAL copy while this one was unmerged (ruling `phone-gear-census` R-PGeC-5),
   so the two met as a take-either conflict and ONE copy survived — this one.
   FOURTH CONSUMER, folded in at the `build-phone-career` merge (D2, `phone-career-census`
   R-PCC-2): the career phone sheet's own "So Far" draws a stacked ledger too. That card cut
   before this rule set had merged and carried a BYTE-IDENTICAL copy so its own style-parity leg
   could be measured; D2 ruled one copy survives and the duplicate drops. The RULES dropped, the
   CONSUMER did not — a dropped duplicate should cost nothing, and the list of who depends on
   these four is the thing that tells the next seat what breaks if they move. B-510 still closes
   on `build-phone-talents`, not here.
   FIFTH CONSUMER, folded in at the `build-phone-motivation` merge (D2,
   `phone-motivation-census` R-PMC-3; and the MECHANIC phone sheet, whose own byte-identical
   copy the `build-phone-mechanic` merge auto-merged in WITHOUT a conflict and is dropped here
   by the same rule): the motivation phone frame draws THREE stacked ledgers —
   the Specifics count, the Category/Printed-in pair and So Far. That card cut before this rule
   set had merged (it checked: 0 hits for `hp-phonesheet .hp-ledger`) and carried a
   BYTE-IDENTICAL copy so its own style-parity leg could be measured; D2 ruled ONE copy
   survives and the duplicate drops. B-510 still closes on `build-phone-talents`, not here. */
[data-doc-ground="creator"].hp-phonesheet .hp-ledger tr { display:block; padding:7px 0; }
[data-doc-ground="creator"].hp-phonesheet .hp-ledger td { display:block; padding:0; }
[data-doc-ground="creator"].hp-phonesheet .hp-lkey { width:auto; padding-right:0; white-space:normal; }
[data-doc-ground="creator"].hp-phonesheet .hp-lval { text-align:left; }
/* THE SKILL CHIP AT 390 (`phone-skills-census` R-PSC-3's named gap, and this is its FIRST consumer
   to reach the band). The base `.hp-skill` grid is `gap:14px`, which the board narrows to 10 on the
   phone — measured, not eyeballed: `smoke_board_style_parity` read `gap board '10px' vs app '14px'`
   on all four Bonus Career Skills rows of `board_spec_phone`, and the name column's width followed
   it by exactly the 8px the two gaps free (117.516 vs 109.516). ONE rule fixes both, because the
   name column is the grid's `minmax(0,1fr)`.
   ONE RULE SET, TWO CONSUMERS COMING: the specialization phone sheet's bonus-skill chips (this
   card) and the skills phone step's own registers, whose census named this gap first and whose
   build has not merged. If that lap carries a byte-identical copy the two meet as a take-either
   conflict and ONE copy survives, exactly as the four ledger rules did at the gear merge. */
[data-doc-ground="creator"].hp-phonesheet .hp-skill { gap:10px; }
[data-doc-ground="creator"].hp-phonesheet .hp-rail[data-cols="3"] .hp-char-bead { font-size:24px; }
[data-doc-ground="creator"].hp-phonesheet .hp-rail[data-cols="3"] .hp-char-val { padding:11px 0 10px; }
[data-doc-ground="creator"].hp-phonesheet .hp-rail[data-cols="3"] .hp-char-lab { font-size:10px; padding:6px 2px 5px; }
/* THE SKILL ROW'S GAP AT 390 (`phone-skills-census` R-PSC-3). Derived by `derive_board_css.py` at
   the board pin and ABSENT from this file — one of the five "selector the file lacks" entries B-489
   carries under `lab-laps-tree-cell` R-LTC-8. It is THIS card's by that ruling because it is a
   phone-skills rule; `.hp-skill`'s BASE grid (the `42px` middle column against the board's
   `max-content`) is the OTHER half of B-489 and is deliberately NOT touched here — the phone rows
   ask for the room with `data-charword`, which is the shipped R-CPD-8 rule. */
[data-doc-ground="creator"].hp-phonesheet .hp-skill { gap:10px; }
/* BUY RANKS' PRICE BADGE AT 390 — Jason's "A" (`catchup-pin-approval` R-CPA-3): the badge IS the
   buy button. `.hp-tab` already ships as the cell's corner tab (its position and its active fill,
   :617 above); what this file does not yet carry is the BUTTON form of it — the board's
   `button.hp-tab` reset and the `hp-tab-paint` face inside it, drawn at board `10ff0155` lines
   736-747.
   SCOPED TO THIS BLOCK ON PURPOSE. The general, unscoped form of these rules is `B-506`'s
   (`tree-cell-buy-in-the-cell`, in flight on seat 1's lap, which carries them for the TALENT cell
   at every band) and is not this card's to write. Scoping them to the phone sheet's own Buy Ranks
   plate makes them strictly more specific than the rules B-506 will land, so the two cannot
   disagree — and when B-506 merges, this block is a SHIM to retire against its row (R-R0-4), which
   the gate says in as many words rather than leaving for a reader to find.
   THE ACTS WRAPPER carries the absolute placement so a bought row can show Refund beside Buy: two
   `position:absolute; right:0; bottom:0` tabs would otherwise stack on each other. */
[data-doc-ground="creator"].hp-phonesheet [data-skills-buy="1"] [data-skills-buy-acts] {
  position:absolute; right:0; bottom:0; display:inline-flex; align-items:center; gap:6px; }
/* THE HIT BOX IS 44px, THE PAINTED BADGE IS THE 32px THE FRAME DRAWS. AS-6 asks for a 44px target
   and the board's badge is 5 + 22 + 5 = 32px tall — but a drawing has no hit box, so growing the
   BUTTON around an unchanged `hp-tab-paint` meets the floor without correcting a single drawn
   pixel (`mockup-is-law` R-MIL-2: no seat corrects an approved frame on its own authority). The
   pair is anchored at the cell's bottom by the acts wrapper, so the paint stays exactly where the
   frame puts it and the extra 12px is hit area over the body's own bottom padding. Both numbers —
   painted 32, target 44 — are stated in the gate rather than one standing for the other. */
/* D3 RETIRED THE DUPLICATED HALF OF THIS SHIM AT THE `build-phone-skills` MERGE (R-R0-4);
   WHAT SURVIVES IS THE HALF B-506 NEVER CARRIED, AND IT IS LOAD-BEARING — MEASURED, NOT ARGUED.
   Retired, because `tree-cell-buy-in-the-cell` (bd206971) now ships them generally at :631: the
   button's `border/padding/background/cursor/font/min-height/display/align-items` reset and the
   paint's `display/padding`.
   KEPT, because the general block does NOT contain them and removing them is a product defect:
     * `position:static` — base `.hp-tab` (:617) is `position:absolute; right:0; bottom:0` and
       B-506's `button.hp-tab` block does not reset `position`. With the whole shim removed, the
       two tabs inside one acts wrapper MEASURE AS OVERLAPPING at 390 — Refund x265 w97 against
       Cost x273 w88, both `position:absolute` — i.e. a bought row shows one badge on top of
       another. `--frame skillsphone` reads 9/10 and the same 54 either way, because the BUY state
       is not one of that frame's addresses (its three working states arrive with the pin advance),
       so the style layer cannot see this and D3's stated check passes over it.
     * the paint's phone typography — the frame draws 10.5px/.1em/32px mono; with the shim gone
       the paint measures 16px. B-506's `.hp-tab-paint` carries only display/padding/colour.
     * the `data-buy` and `data-refused` faces — the general block keys off `data-tab`, a
       different vocabulary, so it answers for none of these three states.
   FLAGGED to the architect in the gate as an ITEM: D3 says "removes the phone-scoped block", and
   what was removable was half of it. */
[data-doc-ground="creator"].hp-phonesheet [data-skills-buy="1"] button.hp-tab {
  position:static; margin:0; color:inherit; }
[data-doc-ground="creator"].hp-phonesheet [data-skills-buy="1"] button.hp-tab .hp-tab-paint {
  min-height:32px; line-height:22px;
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; background:var(--doc-accent); color:#F7F2E4; }
[data-doc-ground="creator"].hp-phonesheet [data-skills-buy="1"] button.hp-tab[data-buy="buy"] .hp-tab-paint,
[data-doc-ground="creator"].hp-phonesheet [data-skills-buy="1"] button.hp-tab[data-buy="refund"] .hp-tab-paint {
  background:var(--doc-action); color:#F7F2E4; }
[data-doc-ground="creator"].hp-phonesheet [data-skills-buy="1"] button.hp-tab[data-refused="1"] .hp-tab-paint {
  background:var(--doc-ink-muted); color:#F7F2E4; }
[data-doc-ground="creator"] .hp-forcetree { grid-template-columns:repeat(4,minmax(215px,1fr)); }
[data-doc-ground="creator"] .hp-frrow { display:flex; align-items:center; gap:14px; }
[data-doc-ground="creator"] .hp-frrow .hp-pool .hp-sym { font-size:26px; }
[data-doc-ground="creator"] .hp-rowsrc { display:block; font-family:var(--font-mono,'Share Tech Mono',monospace);
  font-size:9.5px; letter-spacing:.08em; color:var(--doc-ink-muted); text-transform:uppercase;
  margin-top:3px; }
[data-doc-ground="creator"] .hp-tree[data-compact="1"] { gap:14px 8px; }
[data-doc-ground="creator"] .hp-tal[data-compact="1"] { display:block; }
[data-doc-ground="creator"] .hp-tal[data-compact="1"] > .hp-head { width:calc(100% + var(--doc-point)); min-height:44px; }
[data-doc-ground="creator"] .hp-tal[data-compact="1"] .hp-name { flex:1; min-width:0; white-space:normal; overflow:hidden;
  line-height:1.25; font-size:10px; letter-spacing:.04em; }
[data-doc-ground="creator"] .hp-tal[data-compact="1"] > .hp-head { align-items:center; padding-top:7px; padding-bottom:7px; }
[data-doc-ground="creator"] .hp-tal[data-compact="1"][data-owned="1"] > .hp-head { box-shadow:inset 0 0 0 2px var(--doc-mark); }
[data-doc-ground="creator"] .hp-tree[data-compact="1"] .hp-tal[data-down="1"]::after { bottom:-16px; height:16px; }
[data-doc-ground="creator"] .hp-stephead { margin-top:12px; }
[data-doc-ground="creator"] .hp-forcelay { display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:20px;
  align-items:start; }
[data-doc-ground="creator"] .hp-forcecol { min-width:0; }
[data-doc-ground="creator"] .hp-tree[data-compact="1"].hp-forcetree { grid-template-columns:repeat(4,minmax(152px,1fr)); }
[data-doc-ground="creator"] .hp-forcetree:not([data-compact]) { grid-template-columns:repeat(4,minmax(158px,1fr)); gap:30px 14px; }
[data-doc-ground="creator"] .hp-forcetree:not([data-compact]) .hp-tal[data-down="1"]::after { bottom:-30px; height:30px; }
[data-doc-ground="creator"] .hp-forcetree:not([data-compact]) .hp-tal-body > p { font-size:13px; margin:9px 11px 0; }
[data-doc-ground="creator"] .hp-backto { min-height:44px; padding:0 13px; font-size:9.5px; letter-spacing:.12em; }
[data-doc-ground="creator"] .hp-sechead .hp-backto { order:2; margin-left:12px; }
[data-doc-ground="creator"] .hp-gearline { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto auto; }
[data-doc-ground="creator"] .hp-door { width:100%; background:transparent; color:var(--doc-action);
  box-shadow:inset 0 0 0 1px var(--doc-action), var(--doc-lift);
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)),
                    calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .hp-door:hover { background:rgba(126,20,20,.07); }
[data-doc-ground="creator"] .hp-maker { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10.5px; letter-spacing:.22em;
  color:var(--doc-accent); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-desig { font-family:var(--font-display,'Orbitron',sans-serif); font-weight:900;
  font-size:clamp(30px,7.5vw,46px); line-height:.98; letter-spacing:.01em; color:var(--doc-action);
  margin:7px 0 0; text-transform:uppercase; text-wrap:balance; }
[data-doc-ground="creator"] .hp-desig-rule { height:0; border-top:2px solid var(--doc-action); border-bottom:1px solid var(--doc-action);
  padding-top:3px; width:120px; margin:11px 0 0; }
[data-doc-ground="creator"] .hp-lead { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:16.5px; line-height:1.58;
  color:var(--doc-ink-muted); max-width:var(--doc-lead-max,640px); margin:13px 0 0; }
[data-doc-ground="creator"] .hp-prose { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:16.5px; line-height:1.62;
  color:var(--doc-ink); max-width:var(--desk-prose-max,373px); margin:11px 0 0; }
[data-doc-ground="creator"] .hp-unit { margin-top:9px; }
[data-doc-ground="creator"] .hp-unit > summary { list-style:none; cursor:pointer; }
[data-doc-ground="creator"] .hp-unit > summary::-webkit-details-marker { display:none; }
[data-doc-ground="creator"] .hp-unit > summary .hp-head { min-height:44px; }
[data-doc-ground="creator"] .hp-unit .hp-glyph { color:rgba(242,241,236,.66); font-size:10px; }
[data-doc-ground="creator"] .hp-unit[open] .hp-glyph { color:var(--doc-mark); }
[data-doc-ground="creator"] .hp-unit[open] .hp-head[data-state="active"] .hp-glyph { color:var(--doc-paper-raised); }
[data-doc-ground="creator"] .hp-runhead { display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10px; letter-spacing:.24em;
  color:var(--doc-accent); text-transform:uppercase; }
[data-doc-ground="creator"] .hp-runhead .hp-folio { font-variant-numeric:tabular-nums; white-space:nowrap; }
[data-doc-ground="creator"] .hp-hr { border:0; border-top:1px solid var(--doc-rule-fine); margin:10px 0; }
[data-doc-ground="creator"] .hp-hr[data-heavy="1"] { border-top-color:var(--doc-action); }
[data-doc-ground="creator"] .hp-sechead { display:flex; align-items:center; gap:12px; margin:26px 0 11px; }
[data-doc-ground="creator"] .hp-sechead::after { content:""; flex:1; order:1; border-top:1px solid rgba(126,20,20,.34); }
[data-doc-ground="creator"] .hp-sechead .hp-cite { order:2; }
[data-doc-ground="creator"] .hp-sechead h2 { font-family:var(--font-mono,'Share Tech Mono',monospace); font-weight:400;
  font-size:12px; letter-spacing:.28em; color:var(--doc-accent); text-transform:uppercase; margin:0; }
[data-doc-ground="creator"] .hp-cite { display:inline-flex; align-items:center; gap:6px; padding:2px 8px;
  border:1px solid rgba(126,20,20,.42);
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:9.5px; letter-spacing:.12em;
  color:var(--doc-action); text-transform:uppercase; white-space:nowrap; }
[data-doc-ground="creator"] .hp-slash { display:inline-flex; gap:4px; height:14px; }
[data-doc-ground="creator"] .hp-slash i { display:block; width:7px; height:100%; background:var(--doc-action);
  transform:skewX(-24deg); font-style:normal; }
[data-doc-ground="creator"] .hp-slash i:nth-child(2) { opacity:.72; }
[data-doc-ground="creator"] .hp-slash i:nth-child(3) { opacity:.44; }
[data-doc-ground="creator"] .hpw-shell { container-type:inline-size; container-name:surface; height:100%; }
[data-doc-ground="creator"] .hp-artplate-in { max-height:1000px; }
[data-doc-ground="creator"] .hp-wave { display:flex; align-items:flex-end; gap:0; }
[data-doc-ground="creator"] .hp-wave-step { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-end; gap:5px; height:100%;
  background:transparent; border:0; cursor:pointer; position:relative;
  
  padding:0 2px;
  transition:flex-grow .26s cubic-bezier(.22,.9,.3,1),
             min-width .26s cubic-bezier(.22,.9,.3,1); }
[data-doc-ground="creator"] .hp-wave-bar { display:block; width:100%; min-width:3px; height:2px; flex:none; background:var(--doc-rule-fine);
  transition:height .26s cubic-bezier(.22,.9,.3,1), background-color .2s linear; }
[data-doc-ground="creator"] .hp-wave-step[data-done="1"] .hp-wave-bar { background:rgba(23,22,27,.45); }
[data-doc-ground="creator"] .hp-wave-step[data-now="1"] .hp-wave-bar { background:var(--doc-action); height:8px; }
[data-doc-ground="creator"] .hp-wave-lab { display:block; max-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  opacity:0;
  font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--doc-ink-muted); padding-bottom:1px;
  transition:max-width .26s cubic-bezier(.22,.9,.3,1), opacity .2s linear,
             font-size .26s cubic-bezier(.22,.9,.3,1), padding .26s linear; }
[data-doc-ground="creator"] .hp-wave-step[data-now="1"] .hp-wave-lab { color:var(--doc-action); }
[data-doc-ground="creator"] .hp-wave:hover .hp-wave-step[data-now="1"]:not(:hover):not(:focus) .hp-wave-bar,
[data-doc-ground="creator"] .hp-wave:has(.hp-wave-step:focus) .hp-wave-step[data-now="1"]:not(:hover):not(:focus) .hp-wave-bar,
[data-doc-ground="creator"] .hp-wave:has(.hp-wave-step[data-demo="3"]) .hp-wave-step[data-now="1"]:not([data-demo="3"]) .hp-wave-bar { background:rgba(23,22,27,.45); height:2px; }
[data-doc-ground="creator"] .hp-wave:hover .hp-wave-step[data-now="1"]:not(:hover):not(:focus) .hp-wave-lab,
[data-doc-ground="creator"] .hp-wave:has(.hp-wave-step:focus) .hp-wave-step[data-now="1"]:not(:hover):not(:focus) .hp-wave-lab,
[data-doc-ground="creator"] .hp-wave:has(.hp-wave-step[data-demo="3"]) .hp-wave-step[data-now="1"]:not([data-demo="3"]) .hp-wave-lab { color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-wave .hp-wave-step:hover .hp-wave-bar,
[data-doc-ground="creator"] .hp-wave .hp-wave-step:focus .hp-wave-bar,
[data-doc-ground="creator"] .hp-wave .hp-wave-step[data-demo="3"] .hp-wave-bar { background:var(--doc-action); height:8px; }
[data-doc-ground="creator"] .hp-wave .hp-wave-step:hover .hp-wave-lab,
[data-doc-ground="creator"] .hp-wave .hp-wave-step:focus .hp-wave-lab,
[data-doc-ground="creator"] .hp-wave .hp-wave-step[data-demo="3"] .hp-wave-lab { color:var(--doc-action); }
[data-doc-ground="creator"] .hp-wave-step:hover,
[data-doc-ground="creator"] .hp-wave-step:focus,
[data-doc-ground="creator"] .hp-wave-step[data-demo="3"] { flex-grow:11; min-width:195px; }
[data-doc-ground="creator"] .hp-wave-step:hover .hp-wave-lab,
[data-doc-ground="creator"] .hp-wave-step:focus .hp-wave-lab,
[data-doc-ground="creator"] .hp-wave-step[data-demo="3"] .hp-wave-lab { max-width:100%; opacity:1; padding-right:8px; font-size:16px; letter-spacing:.06em; }
[data-doc-ground="creator"] .hp-wave-step:focus-visible { outline:2px solid var(--doc-action); outline-offset:3px; }
[data-doc-ground="creator"] .hp-wave { height:12px; }
[data-doc-ground="creator"] .hp-wave-step { pointer-events:none; }
[data-doc-ground="creator"] .hp-wave-lab { display:none; }
[data-doc-ground="creator"] .hp-track-line { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10.5px;
  letter-spacing:.055em; color:var(--doc-ink-muted); margin-top:5px; }
[data-doc-ground="creator"] .hpw-shell .hp-track-line { font-size:11px; }
[data-doc-ground="creator"] .hp-req { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--doc-ink-muted);
  margin-top:11px; padding-top:10px; border-top:1px solid var(--doc-rule); }
[data-doc-ground="creator"] .hp-req[data-short="1"] { color:var(--doc-action); }
[data-doc-ground="creator"] .hp-offer { margin-top:12px; padding:13px 0 2px 14px; border-left:2px solid var(--doc-action); }
[data-doc-ground="creator"] .hp-offer .hp-door { width:100%; }
/* THE GM-PERMISSION CAUTION'S BASE RULE, and its absence was a HALF-CROSSING of exactly the kind
   `test/creator_css_has_emitters.cjs` was written to make countable. `hp-warn`'s two BAND rules
   crossed with the rest of the layer at 2300px and 3500px; the BASE never did, so at 390 the class
   selected nothing and the caution rendered as a plain 16px paragraph. Measured, not eyeballed:
   `smoke_board_style_parity --frame specshortphone` read `fontSize board '11px' vs app '16px'`,
   `letterSpacing board '0.88px' vs app 'normal'` and `marginBottom board '11px' vs app '0px'` on
   both of the frame's offer cards. Transplanted from the board's own declaration
   (`lab/holocron/index.html` @ 02f95b78, the layer's `.hp-warn`), with this sheet's token names in
   place of the board's (`--pp-red` -> `--doc-action`), which is the same substitution `.hp-req` and
   `.hp-offer` above already carry. `build-phone-spec` increment C-1. */
[data-doc-ground="creator"] .hp-warn { font-family:var(--font-mono,'Share Tech Mono',monospace);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--doc-action);
  margin:0 0 11px; }
[data-doc-ground="creator"] .hp-namerun { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:15px; line-height:1.5;
  color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hpw-shell .hp-namerun { font-size:16px; }
[data-doc-ground="creator"] .hp-row[data-refused="1"],
[data-doc-ground="creator"] .hp-row[data-limit="1"] { background:transparent; cursor:not-allowed; }
[data-doc-ground="creator"] .hp-row[data-refused="1"] { box-shadow:inset 3px 0 0 var(--doc-action); }
[data-doc-ground="creator"] .hp-row[data-limit="1"] { box-shadow:inset 3px 0 0 var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-row[data-refused="1"]:hover,
[data-doc-ground="creator"] .hp-row[data-limit="1"]:hover { background:transparent; }
[data-doc-ground="creator"] .hp-row[data-refused="1"] .hp-row-tab { border-left-style:dashed; color:var(--doc-action); }
[data-doc-ground="creator"] .hp-row[data-limit="1"]  .hp-row-tab { border-left-style:dashed; color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-why { display:block; font-family:var(--font-mono,'Share Tech Mono',monospace);
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
[data-doc-ground="creator"] .hp-row[data-refused="1"] .hp-why { color:var(--doc-action); }
[data-doc-ground="creator"] .hp-row[data-limit="1"]  .hp-why { color:var(--doc-ink-muted); }
/* B-450 — BUY RANKS HOLDS THE REGISTER (the lab's §73.4, adopted; Jason approved the frame as
   drawn on 2026-09-08). The board drew EIGHT rows and stopped; the app renders the full buyable
   population — 35 for a Human Smuggler/Scoundrel — so everything beneath the list was pushed
   1,645px down a pane that is 519px tall. Measured before this rule at 1366: the read pane's
   scrollHeight 2,759px against a 519px pane (5.3 pane-heights), the teaching plate at 2,735px.
   Jason's words: *"One long scrolling skills column with another box buried beneath it."*

   THE HEIGHT IS THE DRAWING'S OWN HISTORY, NOT A NEW NUMBER. The board's 8-row sample measured
   511px at 1366 and 514px at 1920, so **512px** keeps the block exactly where it sat while its
   contents become real — the list grows from a specimen into the register without moving anything
   around it.

   `.hpw-scroll` COULD NOT DO IT, and the lab says why: it is `flex:1` inside a bounded flex column,
   and this list sits in a GRID cell with no bounded height — it would not have scrolled at all. A
   plain bounded box is the right primitive here precisely because nothing above it is bounding it.

   THE PADDING STAYS OUTSIDE THE SCROLL — and it took B-483 to actually deliver it. This block
   first put `overflow-y:auto` on the padded plate itself, which does NOT hold the inset out of the
   travel: content scrolls THROUGH the padding band, and the same move slid the plate's ::after
   paper face away from every row below the fold. The plate is BOUNDED now and a child carries the
   travel, so the inset is genuinely outside it and the face cannot move. See the B-483 note under
   the rules below (ruling `b483-scroller-face` R-B483-2, RIDER 1). */
[data-doc-ground="creator"] [data-skills-buy="1"] {
  max-height: 512px; display: flex; flex-direction: column; }
[data-doc-ground="creator"] [data-skills-buy-scroll="1"] {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* B-483 — THE PLATE IS BOUNDED; THE LIST INSIDE IT IS WHAT SCROLLS. Jason, 2026-09-09, on the
   served merge: *"the skills that are hidden beneath the initial area once you scroll is in a dark
   state like a shadow."*

   THE CAUSE IS §3's IDIOM MEETING A SCROLL. The plate paints its hairline as the element's OWN
   background and its paper face as an `inset:1px` ::after. An absolutely positioned box inside a
   scroll container is anchored to the top of the TRAVEL, not to the visible box — so the moment
   the rule above made the plate itself the scroller, the face became a 512px sheet that slid away
   and left 1,645px of rows drawn straight onto `--doc-rule`. It is the only pseudo-faced scroll
   container in this file (`:699`, `:802`, `:831`, `:1256-1263`, `:1389`, `:1839` are plain boxes;
   `hp-line` / `hp-track` never scroll), which is why this is one plate and not a pattern.

   WHY THE INNER SCROLLER AND NOT A BACKGROUND ON THE PLATE. The row offered both. Painting the
   face on the element and the hairline as `inset 0 0 0 1px var(--doc-rule)` was built first and
   MEASURED against the idiom it replaces, and it cannot preserve the hairline — because
   `--doc-rule` is TRANSLUCENT (`rgba(23,22,27,.28)`). As the ::after idiom draws it, the hairline
   is that alpha over the PAGE; as an inset shadow it is the same alpha over the plate's own PAPER,
   which is lighter: every straight edge moved, max delta 28/255 in a 28px window. Compositing the
   face as a `background-image` inset 1px instead fixed the straight edges (max delta 1 —
   antialiasing) but not the two chamfers: the diagonal hairline is drawn by the OFFSET BETWEEN THE
   TWO CLIP POLYGONS, element and ::after, and no rectangular background or shadow can reproduce
   it under a polygon clip. 35 and 61 pixels differed at the two 12px cuts, max delta 83.
   Bounding the PLATE and scrolling a child keeps §3's idiom untouched, so the hairline, the
   chamfer and the lift are the approved frame's own — nothing is re-drawn to be preserved.

   THE WRAPPER IS FREE AT BOTH PARITY LAYERS, AND BY THEIR OWN RULE, NOT BY EXEMPTION. It carries
   no board class, and both engines compare the NAMED skeleton: `test/board_dom_parity.cjs`'s
   `npath` is "the NAMED ancestors only … without an unnamed wrapper `<div>` counting as a
   divergence", which R-TTP-1 lists under allowed differences, and `smoke_board_style_parity`'s
   walker records only `/^(hp|hpw)-/` and recurses through the rest. So it needs NO
   `data-ruled-delta` — which is the point, because a declaration DELETES its element and subtree
   from the comparison (PRAXIS §6) and would have taken all 35 rows out of parity to fix their
   background.

   B-450's reason is kept and sharpened: its comment wanted the plate's inset OUTSIDE the travel,
   and `overflow-y:auto` on a padded box does not do that — content scrolls THROUGH the padding
   band. Now the padding is genuinely outside it, and the scrollbar sits inside the plate's 12px
   inset rather than over its edge. The 512px bound is unchanged and still the 8-row sample's own
   measured height; `display:flex` + `min-height:0` is what makes a child scroll inside a parent
   bounded by `max-height` — the bounded column B-450's note said `.hpw-scroll` never had. */

/* R-CPD-6(b) — THE IDLE PROMPT. The group head that says "pick N" asks while its group is
   unanswered, and then it STOPS: three cycles of the shell's own `breathe` and it rests. Nothing
   loops — an unending pulse on a page being read is an irritant and a vestibular hazard, which is
   the a11y clause binding this and the name field together.
   THE SHELL'S SHAPE, THE CREATOR'S RANGE (R-IPM-1). `breathe` is the player shell's keyframe and
   R-CPD-6(b) says reuse it — but the shell solved its range (.55 <-> .85) against the shell's own
   ground, and `breathe` is an OPACITY animation, so on parchment it composites the head's ink to
   **2.53:1** at its trough on the wide band (`--doc-accent` on `#DEDCD4`; 3.64:1 on the phone,
   whose head is `--doc-ink`). The floor holds only at opacity >= .825. Measured on the served page,
   briefed, and ruled: the SHAPE is reused — ease-in-out, the approved period, three cycles, then
   rest — with the range re-solved for the ground this prompt actually sits on. Every frame is now
   >= 4.76:1 wide and >= 9.04:1 phone. Same correction the D piece took the same day, and the same
   lesson: a value solved against one ground and used on another (R-AM-A2-2).
   THE CARET IS THE STANDING HALF. `data-ask` is the group's own state, so the caret is on
   whenever the group is owed — before the breathing, during it and after it settles, and under
   reduced motion where there is no breathing at all. Opacity rather than display, so nothing on
   the line moves when it appears (the approved page's own choice).
   MEASURED ON THE SERVED PAGE, and the animated dip is the reason the range is not the shell's:
   see the block below. */
[data-doc-ground="creator"] .hp-caret { opacity:0; margin-right:5px; font-size:.72em;
  line-height:1; vertical-align:0.1em; }
[data-doc-ground="creator"] [data-ask="1"] .hp-caret { opacity:1; }
@keyframes hp-breathe-ask { 0%, 100% { opacity:.85; } 50% { opacity:1; } }
[data-doc-ground="creator"] [data-ask="1"] { animation: hp-breathe-ask 1.7s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
  [data-doc-ground="creator"] [data-ask="1"] { animation:none; } }

/* R-CPD-6(c) — THE CHANGE HIGHLIGHT: exactly the values that moved, never a flash of the pane.
   This is what makes names-only heads safe (R-CPD-A1-1) — the page becomes where the information
   lives, so the page has to SAY when the information changes. WHICH values moved is not decided
   here and cannot be: `fcSpeciesMovedSet` diffs two resolutions of the same record through
   `CharResolve.speciesEffective`, and this file only paints whatever carries `data-moved`.

   THE MARK IS ON THE OBJECT THAT IS ALREADY THERE — the characteristic BEAD, and the ledger's
   VALUE CELL. The approved page draws the ledger mark as a chip hugging the number; ours fills the
   value cell, because the alternative is a new span per number and both of its fates are worse:
   undeclared it puts the app three objects ahead of the board's pinned frames, and declared
   `data-ruled-delta` it DELETES the number from that comparison (the walker skips the element and
   its subtree). The cell IS the value. Disclosed in the gate.

   REDUCED MOTION KEEPS THE INFORMATION, and this piece is the one place that matters: the motion
   CARRIES the message here, so removing it must not remove the message (frame B5). The fading wash
   becomes a standing rule under the value.
   THE RULE IS THE ACCENT, NOT THE GOLD, AND THAT IS JASON'S PICK (2026-09-08, from a rendered
   panel; ruling `animation-build` A2 R-AB-A2-2). Frame B5 drew the gold, and the gold measures
   **2.19:1** against the ground this rule actually sits on — #F2F1EC, the bead's face and the
   plate's face — under 1.4.11's 3:1 for a graphic that carries information, which under reduced
   motion this one wholly does. `--doc-accent` reads **8.11:1** there and 6.68:1 on parchment. The
   mockup's B5 was revised to match, so the law and the build agree rather than one correcting the
   other (`mockup-is-law` R-MIL-2: the choice was his, both sides rendered).
   THE ANIMATED FLASH KEEPS `--doc-mark`: it is a fill behind dark ink at 7.27:1, not a thin mark,
   and it was never the thing under the floor.

   MEASURED INK: `--doc-ink` on `--doc-mark` is 7.27:1. The `hp-none` aside inside a marked cell
   ("+ BRAWN") would sit at 4.37:1 in its own muted ink, so it takes the mark ink for exactly as
   long as the gold is behind it — its own one-line keyframe, rather than a static rule that would
   leave the aside darkened after the mark has gone. */
@keyframes hp-movedmark { 0%, 62% { background:var(--doc-mark); } }
@keyframes hp-movedmark-aside { 0%, 62% { color:var(--doc-mark-ink); } }
[data-doc-ground="creator"] [data-moved="1"] { animation: hp-movedmark 1.5s ease-out 1; }
[data-doc-ground="creator"] [data-moved="1"] .hp-none { animation: hp-movedmark-aside 1.5s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  [data-doc-ground="creator"] [data-moved="1"] { animation:none;
    box-shadow:inset 0 -3px 0 var(--doc-accent); }
  [data-doc-ground="creator"] [data-moved="1"] .hp-none { animation:none; } }

/* R-CPD-A21-2 + R-CPD-A10-3 — THE REQUIRED FIELD ASKS, AND IT CAN BE HIT.
   Two defects wearing one face, so they land together: a required input on the last screen of a
   hero surface that (a) never asks and (b) cannot be tapped.

   KEYED ON SEMANTICS THE FIELDS ALREADY CARRY, and that is the point. The review has TWO name
   inputs — the phone's in `FCReviewStep` and the rebuilt one at `data-review-name` — different
   components in different bands, exactly the shape B-124 and B-409 were paid for. Both already set
   `aria-required` and flip `aria-invalid` as the field fills, so ONE rule owns both and neither can
   drift; no new hook, no JSX, and the prompt clears the instant the field has content because
   `aria-invalid` is what clears it. An indicator that persists after the user has complied is a nag
   (A10-3's rider).

   THE FLOOR IS LAW, NOT THE MOCKUP'S (AS-6, C-MU-4): 44px at EVERY band, because a large screen
   does not imply a mouse. Measured at the tip before fixing — the ruling's "~41px" dates from
   `efeaebb2`, before the field moved to `padding:12px 14px`:
       390 / 430 / 834 -> 48 / 48 / 51px  (already clear)
       1366 / 1920     -> 43px            (UNDER the floor; the failure is DESKTOP-ONLY)

   THE MOTION IS THE SHELL'S OWN `breathe` FAMILY, three cycles then rest — it draws the eye and
   SETTLES. Nothing loops: an unending pulse on a page being read is an irritant and a vestibular
   hazard, which is the a11y clause binding R-CPD-6(b) and this together. */
[data-doc-ground="creator"] input[aria-required="true"] { min-height:44px; }
@keyframes hp-askring {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--doc-rule); }
  50%      { box-shadow: inset 0 0 0 2px var(--doc-action); } }
[data-doc-ground="creator"] input[aria-required="true"][aria-invalid="true"] {
  animation: hp-askring 1.7s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
  [data-doc-ground="creator"] input[aria-required="true"][aria-invalid="true"] { animation: none; } }

/* R-CPD-A8-2 — THE THIRD CONTEXT, and the register is now complete. A refused ROW takes the
   keyline above; a refused COMMIT takes its own inverted state below; a reason STANDING ON ITS OWN
   under a detail pane had no treatment at all, which is exactly how it fell back to `hp-none` —
   the ink the creator reserves for asides — and became a refusal the player could not find.
   No new vocabulary: this is `.hp-why`, the dedicated reason class, in its third context.
   THE SHAPE IS JASON'S (2026-09-08): the pale wash, chosen over the solid `--doc-action` fill.
   Approved page Docs/mockups/creator-animation.html @ 1763f17a, frame D2.
   THE COLOUR IS STATED OPAQUELY, AND THE PARAGRAPH THAT USED TO STAND HERE WAS WRONG ABOUT WHY —
   ERRATUM, ruling `animation-mockup` ADDENDUM 3 (R-AM-A3-1/2), the correction landing where the
   lap wrote the error. It said the Force step's `.hp-plate` is "a mid-grey rgb(166,165,160)" and
   that the translucent form measured **3.51:1** on the served page. Both were an INSTRUMENT
   READING, not the page: `.hp-plate` paints its interior with a pseudo-element (`::after`,
   `inset:1px`, `--doc-paper-raised`) and lifts every child above it, so the 28% near-black is a
   ONE-PIXEL EDGE. The compositing walker climbs `parentElement` reading `backgroundColor`, cannot
   see a pseudo-element, and composited that edge as though it were the face. **At the pixel the
   plate's face is #F2F1EC** — the clean stock the approved frame was drawn on all along — so the
   literal `rgba(126,20,20,.13)` would have composited to the same #E2D4CF there, and the mockup's
   D frames were drawn on the RIGHT ground.
   THE OPAQUE VALUE STANDS ON A CORRECTED FOOTING, and this is the part that was always true: the
   approved frame is a 13% wash of `--doc-action` over #F2F1EC, i.e. the single colour #E2D4CF, and
   a translucent layer inherits whatever it happens to meet. Stating the pixel says what was
   approved wherever the plate sits, instead of re-deriving it from a ground that may change.
   Measured on the served page: **7.29:1**. What it no longer claims is to have rescued a 3.51:1
   reading — there was none to rescue.
   (`color-mix` would express the derivation, but it is used nowhere else in this codebase and one
   rule is a poor place to introduce it; the derivation is in this comment instead.)
   NOT COLOUR ALONE — the sentence states the reason in words, so the plate reinforces and never
   carries (1.4.1), unlike the pip family. */
[data-doc-ground="creator"] .hp-why[data-standalone="1"] {
  display:inline-block; padding:9px 12px; margin-top:7px;
  background:#E2D4CF; color:var(--doc-action);
  box-shadow:inset 3px 0 0 var(--doc-action); }
[data-doc-ground="creator"] .hp-commit[data-refused="1"] { background:transparent; color:var(--doc-action); box-shadow:none;
  border:1px dashed var(--doc-action); cursor:not-allowed; }
[data-doc-ground="creator"] .hp-commit[data-refused="1"]:hover { background:transparent; }
[data-doc-ground="creator"] .hp-pairalt .hp-head { background:var(--doc-action); }
[data-doc-ground="creator"] .hp-pairalt .hp-head[data-state="active"] { background:var(--doc-state); }
[data-doc-ground="creator"] .hp-pairalt .hp-unit[open] .hp-glyph { color:var(--doc-paper-raised); }
[data-doc-ground="creator"] .hp-pairalt .hp-unit[open] .hp-head[data-state="active"] .hp-glyph { color:var(--doc-mark); }
[data-doc-ground="creator"] .hp-tal > .hp-head .hp-name { white-space:normal; overflow:visible; text-overflow:clip;
  line-height:1.24; }
[data-doc-ground="creator"] .hp-head:has(.hp-run) { flex-wrap:wrap; }
[data-doc-ground="creator"] .hp-head:has(.hp-run) .hp-name { min-width:max-content; }
[data-doc-ground="creator"] .hp-head:has(.hp-run-grants) { flex-wrap:wrap; padding-top:7px; padding-bottom:7px; }
[data-doc-ground="creator"] .hp-run-grants { flex-basis:100%; margin-left:20px; color:rgba(242,241,236,.72); }
[data-doc-ground="creator"] .hp-head[data-state="active"] .hp-run-grants { color:rgba(242,241,236,.82); }
[data-doc-ground="creator"] .hp-wide { height:100%;display:flex;flex-direction:column;padding:18px 26px 22px }
/* THE BAR CLEARS THE DEVICE'S STATUS BAR (B-581): installed on an iPad (`viewport-fit=cover`,
   black-translucent status bar) the clock sat on "‹ Character Creation". The legacy suite bar pads
   for the inset; the shell's bar did not. Zero everywhere the inset is zero. */
[data-doc-ground="creator"] .hpw-bar { flex:none;padding-top:env(safe-area-inset-top, 0px);padding-bottom:12px;border-bottom:1px solid var(--doc-rule-fine) }
[data-doc-ground="creator"] .hpw-grid { flex:1;min-height:0;display:grid;gap:24px;padding-top:16px;
  grid-template-columns:330px 268px minmax(0,373px) 336px;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"index head head head" "index plate read ledger";
  --dummy:0 }
[data-doc-ground="creator"] .hpw-index { grid-area:index;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--doc-rule-fine);padding-right:22px }
[data-doc-ground="creator"] .hpw-head { grid-area:head }
[data-doc-ground="creator"] .hpw-head { display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto auto auto;
  gap:0 24px;align-content:start }
[data-doc-ground="creator"] .hpw-steps { grid-column:1/-1;grid-row:1 }
[data-doc-ground="creator"] .hpw-title { grid-column:1/-1;grid-row:2;margin-top:14px }
[data-doc-ground="creator"] .hpw-desc { grid-column:1/-1;grid-row:3 }
[data-doc-ground="creator"] .hpw-headrail { grid-column:2;grid-row:3;display:none;align-self:start;min-width:0 }
[data-doc-ground="creator"] .hpw-plate { grid-area:plate;overflow-y:auto;min-height:0;padding-right:6px }
[data-doc-ground="creator"] .hpw-read { grid-area:read;overflow-y:auto;min-height:0;padding-right:10px }
[data-doc-ground="creator"] .hpw-headpick { margin-top:16px }
[data-doc-ground="creator"] .hpw-statrail { display:block;margin-bottom:10px }
[data-doc-ground="creator"] .hpw-foldplate { display:none }
/* B-586 — THE SCROLL CUE: a pane with more below it (`data-more`, set by the app) fades its last
   48px, and the fade lifts at the end. The signal a scrollbar would give on a desk, on a device
   that draws none. */
[data-doc-ground="creator"] .hpw-shell .hp-pane[data-more="1"],
[data-doc-ground="creator"] .hpw-shell .hp-linescroll[data-more="1"],
[data-doc-ground="creator"] .hpw-shell .hpw-foldnote .hp-note p[data-more="1"],
[data-doc-ground="creator"] .hpw-shell .hpw-scroll[data-more="1"],
[data-doc-ground="creator"] .hpw-shell [data-skills-buy-scroll][data-more="1"] {
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 48px), rgba(0,0,0,.08) 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 48px), rgba(0,0,0,.08) 100%); }
/* B-908 · THE ZONE (ruling `paper-n3-bench` R-PN3-3; Jason "B16b, AS-4", approved frames N3 V4): the region that
   scrolls ITSELF, so an instrument's page never does (AS-4). One element: it fills what its flex column leaves (the
   column is the surface's) and its scroll never chains to the page (the creator's AS-4 zone, player/app.jsx).
   Its cue is the two attributes the ONE driver keeps (lib/shared/scrollCue.js), so it is the same in every browser:
   THE MARK — a 2px dashed rule on the zone's own top / bottom border, inked while more remains on that side, else
   transparent. The borders are ALWAYS 2px, so the geometry never moves with the scroll; dashed, so it reads as
   "continues" and never as one more row divider, and it speaks where the fold falls on blank paper.
   THE FADE — an alpha mask, 30px inside each inked border while more remains on that side. A mask fades the content
   into whatever paper lies under it (page or plate) and needs no ground colour; the 2px borders stay opaque.
   No sideways variant (R-PN3-3: the ledger has none; fit (c) was declined). */
[data-doc-ground="creator"] .hp-zone { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  border-top:2px dashed transparent; border-bottom:2px dashed transparent; }
[data-doc-ground="creator"] .hp-zone[data-more-above="1"] { border-top-color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-zone[data-more="1"] { border-bottom-color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .hp-zone[data-more="1"]:not([data-more-above="1"]) {
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 32px), transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask-image:linear-gradient(180deg, #000 calc(100% - 32px), transparent calc(100% - 2px), #000 calc(100% - 2px)); }
[data-doc-ground="creator"] .hp-zone[data-more-above="1"]:not([data-more="1"]) {
  -webkit-mask-image:linear-gradient(180deg, #000 2px, transparent 2px, #000 32px);
          mask-image:linear-gradient(180deg, #000 2px, transparent 2px, #000 32px); }
[data-doc-ground="creator"] .hp-zone[data-more="1"][data-more-above="1"] {
  -webkit-mask-image:linear-gradient(180deg, #000 2px, transparent 2px, #000 32px, #000 calc(100% - 32px), transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask-image:linear-gradient(180deg, #000 2px, transparent 2px, #000 32px, #000 calc(100% - 32px), transparent calc(100% - 2px), #000 calc(100% - 2px)); }
[data-doc-ground="creator"] .hpw-ledger { grid-area:ledger;overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:6px;
  border-left:1px solid var(--doc-rule-fine);padding-left:22px }
[data-doc-ground="creator"] .hpw-scroll { flex:1;min-height:0;overflow-y:auto;padding-right:6px }

@container (max-width:326px) {
  [data-doc-ground="creator"] .hp-rail { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-treescroll .hp-tree { grid-template-columns:repeat(4,minmax(280px,1fr)); gap:40px 26px; }
  [data-doc-ground="creator"] .hpw-shell .hp-tal-body > p { font-size:18px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-treescroll .hp-tree { grid-template-columns:repeat(4,minmax(380px,1fr)); gap:52px 34px; }
  [data-doc-ground="creator"] .hpw-shell .hp-tal-body > p { font-size:24px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-onecol { max-width:2000px; }
  [data-doc-ground="creator"] .hpw-shell .hp-lines { gap:30px; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-name { font-size:23px; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-cur { font-size:15px; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-text { font-size:21px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-onecol { max-width:2900px; }
  [data-doc-ground="creator"] .hpw-shell .hp-lines { gap:40px; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-name { font-size:31px; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-cur { font-size:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-text { font-size:28px; }
}

@container surface (max-width:1366px) {
  /* THE MID BAND'S CARDS GET HEADROOM (B-584, Jason's 11" iPad: the foot "6 CAREERS · EOTE P.47" cut
     off). The device renders the body face a hair wider than the desk browser, the Edge prose wraps
     to a sixth line, and that line is the foot — a layout 13px from cutting is not fitted. Prose
     15/1.45 and the body's slack out, at this band only; wide keeps the drawn 16/1.55. */
  [data-doc-ground="creator"] .hpw-shell .hp-line-text { font-size:15px; line-height:1.45; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-body { gap:5px; padding:12px 15px 13px; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-foot { padding-top:7px; }
  [data-doc-ground="creator"] .hpw-shell .hp-onecol-head { display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:26px; align-items:start; margin-top:8px; }
  [data-doc-ground="creator"] .hpw-shell .hp-onecol-title .hp-desig { font-size:30px; }
  [data-doc-ground="creator"] .hpw-shell .hp-onecol-sechead { margin:12px 0 9px !important; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-body { padding:12px 14px 13px; gap:5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-text { line-height:1.44; }
  [data-doc-ground="creator"] .hpw-shell .hp-line-foot { padding-top:8px; }
  [data-doc-ground="creator"] .hpw-shell .hp-onecol-act { margin-top:14px; padding-top:12px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-track-val { font-size:40px; }
  [data-doc-ground="creator"] .hpw-shell .hp-track-name { font-size:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-track-scope { font-size:13px; }
  [data-doc-ground="creator"] .hpw-shell .hp-party { font-size:17px; min-height:58px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-track-val { font-size:56px; }
  [data-doc-ground="creator"] .hpw-shell .hp-track-name { font-size:27px; }
  [data-doc-ground="creator"] .hpw-shell .hp-track-scope { font-size:18px; }
  [data-doc-ground="creator"] .hpw-shell .hp-party { font-size:23px; min-height:76px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-picklist { max-height:360px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-picklist { max-height:480px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-picklist { max-height:350px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-picklist { max-height:470px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-forcetree { grid-template-columns:repeat(4,minmax(280px,1fr)); }
  [data-doc-ground="creator"] .hpw-shell .hp-frrow .hp-pool .hp-sym { font-size:34px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-forcetree { grid-template-columns:repeat(4,minmax(380px,1fr)); }
  [data-doc-ground="creator"] .hpw-shell .hp-frrow .hp-pool .hp-sym { font-size:46px; }
}

@container surface (min-width:1367px) and (max-width:2299px) {
  [data-doc-ground="creator"] .hpw-shell .hp-stephead { display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:26px; align-items:start; }
  [data-doc-ground="creator"] .hpw-shell .hp-stephead .hp-desig { font-size:38px; }
}

@container surface (max-width:1366px) {
  [data-doc-ground="creator"] .hpw-shell .hp-forcelay { grid-template-columns:minmax(190px,250px) minmax(0,1fr); gap:16px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-forcelay { grid-template-columns:minmax(320px,400px) minmax(0,1fr); gap:30px; }
  [data-doc-ground="creator"] .hpw-shell .hp-tree[data-compact="1"].hp-forcetree { grid-template-columns:repeat(4,minmax(220px,1fr)); }
  [data-doc-ground="creator"] .hpw-shell .hp-forcetree:not([data-compact]) { grid-template-columns:repeat(4,minmax(240px,1fr)); }
  [data-doc-ground="creator"] .hpw-shell .hp-forcetree:not([data-compact]) .hp-tal-body > p { font-size:17px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-forcelay { grid-template-columns:minmax(420px,540px) minmax(0,1fr); gap:40px; }
  [data-doc-ground="creator"] .hpw-shell .hp-tree[data-compact="1"].hp-forcetree { grid-template-columns:repeat(4,minmax(300px,1fr)); }
  [data-doc-ground="creator"] .hpw-shell .hp-forcetree:not([data-compact]) { grid-template-columns:repeat(4,minmax(330px,1fr)); }
  [data-doc-ground="creator"] .hpw-shell .hp-forcetree:not([data-compact]) .hp-tal-body > p { font-size:23px; }
}

@container surface (min-width:1367px) {
  [data-doc-ground="creator"] .hpw-shell .hpw-resolved { display:none; }
  [data-doc-ground="creator"] .hpw-shell .hpw-grid { grid-template-columns:minmax(330px,1fr) minmax(268px,0.9fr)
                        minmax(0,373px) minmax(336px,1.1fr);
    
    grid-template-areas:"index head head ledger" "index plate read ledger"; }
  [data-doc-ground="creator"] .hpw-shell .hpw-read { --doc-unit-max:430px; }
}

@container surface (max-width:1366px) {
  /* THE INDEX COLUMN IS AS WIDE AS ITS WIDEST ROW, never a typed floor (B-563 species lap, decision 1).
     280px was smaller than a register row's content — portrait + name + the six-value run + XP — so
     from 1024 to ~1330px every row clipped its run 30px short (the Sept-10 revision shipped that;
     AS-9 never checked clip). `min-content` lets the rows set the floor; the read column yields. */
  [data-doc-ground="creator"] .hpw-shell .hpw-grid { grid-template-columns:minmax(min-content,.8fr) minmax(0,1.15fr) minmax(360px,1fr);
             grid-template-areas:"index head ledger" "index read ledger"; }
  [data-doc-ground="creator"] .hpw-shell .hpw-plate { display:none; }
  [data-doc-ground="creator"] .hpw-shell .hpw-foldplate { display:flex !important; width:100%; gap:16px; align-items:stretch;
    /* THE ROW GIVES WAY ON A SHORT VIEWPORT (B-580, Jason's iPad walk: Safari's chrome left ~700px
       and the fixed 330px row filled the read pane, "THE REGISTER ENTRY" a sliver at the fold with
       nothing saying the pane scrolls). 330 wherever there is room; ~40% of the height where there
       is not, floor 220 so the portrait stays a portrait. */
    height:clamp(220px, 36vh, 330px); }   /* 36vh (B-586): the first entry plate's head peeks under the cue on an iPad */
  [data-doc-ground="creator"] .hpw-shell .hpw-foldplate > .hp-artplate { width:50%; flex:none; }
  [data-doc-ground="creator"] .hpw-shell .hpw-foldplate .hp-artplate-in { height:100%; aspect-ratio:auto; }
  [data-doc-ground="creator"] .hpw-shell .hpw-foldnote { flex:1; min-width:0; display:flex; }
  /* THE SIDEBAR'S WRAPPER IS THE FLEX ITEM, NOT THE NOTE (B-577, Jason's walk 2026-09-13: "Droids and
     Life" ran 721px through a 330px row and over the register entry). `fcSpeciesSidebar` wraps the
     note in a margin div, so the stretch landed on the wrapper and the note inside it was a plain
     block that grew to its text. The wrapper becomes a column and hands its height down; the note's
     paragraph scrolls, as the rule below always intended. */
  [data-doc-ground="creator"] .hpw-shell .hpw-foldnote > div { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; margin-top:0 !important; }
  [data-doc-ground="creator"] .hpw-shell .hpw-foldnote .hp-note { flex:1; display:flex; flex-direction:column; min-height:0; }
  [data-doc-ground="creator"] .hpw-shell .hpw-foldnote .hp-note p { flex:1; min-height:0; overflow-y:auto; padding-right:9px; }
  /* THE REGISTER HEAD'S CITE WRAPS UNDER THE TITLE at this band (B-577): a `nowrap` chip 281px wide
     in a ~274px index column ran across the column boundary into the read pane. The head wraps; the
     rule line and the chip take the second row, the chip's own text may break at its separator. */
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-sechead { flex-wrap:wrap; row-gap:6px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-sechead .hp-cite { white-space:normal; min-width:0; max-width:100%; flex:0 1 auto; }
  [data-doc-ground="creator"] .hpw-shell .hp-desig { font-size:34px; }
  [data-doc-ground="creator"] .hpw-shell .hp-lead { font-size:16px; margin-top:11px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate[data-pad="read"] { padding:13px 15px 15px; }
  [data-doc-ground="creator"] .hpw-shell .hp-commit { min-height:44px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-read { --doc-unit-max:196px; }
  [data-doc-ground="creator"] .hpw-shell .hp-spend { --spend-rail:1fr; --spend-buy:380px; gap:22px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-size="lg"] .hp-char-bead { font-size:26px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-size="lg"] .hp-char-lab { font-size:10px; }
  [data-doc-ground="creator"] .hpw-shell .hp-skill { grid-template-columns:minmax(0,1fr) 38px 118px; gap:10px; padding:7px 8px; }
  [data-doc-ground="creator"] .hpw-shell .hp-skill[data-charword] { grid-template-columns:minmax(0,1fr) auto 118px; }   /* R-CPD-8 */
  [data-doc-ground="creator"] .hpw-shell .hp-skill-name { font-size:15px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-sechead { margin:10px 0 6px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-plate[data-pad="data"] { padding:8px 11px 9px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hpw-scroll { margin-top:6px !important; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-sechead:first-child { margin-top:0; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index dl { display:grid; grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr); grid-template-rows:auto auto; gap:5px 14px;
    align-items:end; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-xp { display:contents; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-xp dt { font-size:9px; letter-spacing:.06em; align-self:end; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-xp dd,
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-xp[data-total="1"] dd { font-size:19px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-ledger td { padding:5px 0; }
  [data-doc-ground="creator"] .hpw-shell .hpw-index .hp-lval { font-size:15px; }
  /* THE REVIEW IS A SNAPSHOT AT THIS BAND (B-593, Jason's iPad walk: "a true snapshot review page").
     At 1194×810 the rail is 729px and the read pane 479; the portrait alone was 513, and the second
     column's three plates ran to 774 on a full build. Five moves and nothing scrolls on a realistic
     character: the portrait is capped at 250px, the whole figure resized into it on the wash (Jason:
     "resized to fit the whole image", not cropped); the lead is a size smaller; the read pane's ledgers tighten to 30px rows; the third
     stack (Tracks · Credits) takes a column of its own, 310px for the six-tile rail and the rest
     split; and the pocket-money run stacks its button under its sentence in a 217px column. The
     scroll cue still marks the one case that overflows — more than about thirteen trained skills. */
  [data-doc-ground="creator"] [data-review-step="1"] .hpw-index .hp-artplate-in[data-band] { height:250px; aspect-ratio:auto; }
  [data-doc-ground="creator"] [data-review-step="1"] .hpw-index .hp-railact { padding-top:10px; }
  [data-doc-ground="creator"] [data-review-step="1"] .hpw-head .hp-lead { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-review-step="1"] .hp-spend { grid-template-columns:310px minmax(0,1fr) minmax(0,1fr); column-gap:16px; }
  [data-doc-ground="creator"] [data-review-step="1"] [data-review-thresholds] .hp-lkey { white-space:normal; width:auto; }
  [data-doc-ground="creator"] [data-review-step="1"] [data-review-thresholds] .hp-lval { white-space:nowrap; }
  [data-doc-ground="creator"] [data-review-step="1"] .hp-spend > div:first-child { grid-row:1; }
  [data-doc-ground="creator"] [data-review-step="1"] .hp-spend > [data-review-stack="skills"] { grid-column:2; grid-row:1; }
  [data-doc-ground="creator"] [data-review-step="1"] .hp-spend > [data-review-stack="tracks"] { grid-column:3; grid-row:1; }
  [data-doc-ground="creator"] [data-review-step="1"] .hpw-read .hp-ledger td { padding:4px 0; }
  [data-doc-ground="creator"] [data-review-step="1"] .hpw-read .hp-sechead .hp-backto { padding:0 9px; white-space:nowrap; }
  [data-doc-ground="creator"] [data-review-step="1"] [data-review-credits] .hp-buy { grid-template-columns:1fr; justify-items:start; gap:6px; }
  /* THE CAREER IS A SNAPSHOT AT THIS BAND TOO (B-594, the walk after the review). The head ran
     417px — wave, title, the lead plate AND a footnote paragraph under it — leaving the read pane
     288 for a description, the Specializations plate and eight career skills: 170–340 over on
     every career. The footnote mostly restated the rail beside it ("20 · FROM YOUR ENABLED
     BOOKS", each row naming its book), so here it folds away and its one clause nothing else
     says rides in the plate; the lead a size smaller, skill rows 34px, the description 14px, and
     the Specializations plate keeps its names but not its sentence (the next step says it). Read
     pane 446: 21 of 21 careers fit, Bounty Hunter — the longest entry plus a Starting Entitlement
     plate — last. */
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-head [data-browse-footnote] { display:none; }
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-head [data-browse-footnote-mid] { display:block; }
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-head .hp-lead { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-read .hp-skill { min-height:32px; padding:3px 10px; }
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-read .hp-sechead { margin:12px 0 8px !important; }
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-read .hp-spend > div > .hp-sechead:first-child { margin-top:0 !important; }
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-read .hp-plate[data-pad="read"] .hp-prose { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-read .hp-prose-sm { font-size:13px; line-height:1.35; }
  [data-doc-ground="creator"] [data-browse-step="career"] .hpw-read [data-career-spec-note] { display:none; }
  /* THE TREE'S FOURTH COLUMN WAS OFF THE PAGE AT THIS BAND (B-595, the walk's next step). The
     tree grid is `repeat(4, minmax(215px, 1fr))` and the read pane is 778px at 1194×810, so the
     four columns ran 156px past it — LETHAL BLOWS cut to "LETHA", on the specialization AND the
     talents step, with a sideways scroll iOS never shows. The columns share the pane's width here
     (175px each); the Force tree keeps its own ladder. The specialization page is not a snapshot —
     twenty talent cards with their text are the page's job — and Jason kept it as drawn: "just keep
     the four column fix". */
  [data-doc-ground="creator"] .hpw-shell .hp-treescroll .hp-tree:not(.hp-forcetree) { grid-template-columns:repeat(4, minmax(0,1fr)); }
  /* THE FORCE TREE'S FOURTH COLUMN WAS OFF THE PAGE AT THIS BAND TOO (B-600, the walk's Step 9).
     The Force layout puts the power's column (250px) beside the tree, which leaves the tree 494px
     for four 158px columns — 176px past the edge, CONTROL: CONCEALMENT cut to "CONCEALMEN". Four
     fluid columns in that width are 116px cells; so at this band the layout STACKS — the power's
     description, its BUY and the Force rating first, at the pane's width, then the tree at four
     of 180px. The page is a tree page and scrolls (1,060 over), as the specialization and the
     talents do; nothing is clipped. */
  [data-doc-ground="creator"] [data-force-step="1"] .hpw-read .hp-forcelay { display:block; }
  [data-doc-ground="creator"] [data-force-step="1"] .hpw-read .hp-forcecol { width:auto; max-width:none; }
  [data-doc-ground="creator"] [data-force-step="1"] .hpw-read .hp-forcecol .hp-plate[data-pad="read"] .hp-prose { max-width:none; }
  [data-doc-ground="creator"] [data-force-step="1"] .hpw-read .hp-forcetree:not([data-compact]) { grid-template-columns:repeat(4, minmax(0,1fr)); }
  /* THE GEAR PAGE HOLDS A SIX-LINE KIT AT THIS BAND (B-601, the walk's Step 10). Two carried items
     already fit; six ran 160 over at 61px lines. Lines at 40px, the lead a size smaller, secheads
     12/8: six lines fit, a longer kit scrolls as the list it is. The store is its own surface. */
  [data-doc-ground="creator"] [data-gear-step="1"] .hpw-head .hp-lead { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-gear-step="1"] .hpw-head .hp-plate[data-pad="read"] { padding:10px 15px 12px; }
  [data-doc-ground="creator"] [data-gear-step="1"] .hpw-read .hp-plate[data-pad="read"] .hp-prose { max-width:none; font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-gear-step="1"] .hpw-read .hp-sechead { margin:12px 0 8px !important; }
  [data-doc-ground="creator"] [data-gear-step="1"] .hpw-read .hp-buy { padding:2px 0; min-height:0; }
  [data-doc-ground="creator"] [data-gear-step="1"] .hpw-read .hp-buy .hp-buy-btn { min-height:34px; }
  /* THE MOTIVATION IS A SNAPSHOT AT THIS BAND (B-602, the walk's Step 11). Everything sat in the
     first column — description, search, the specifics list, its note, Your Motivation, Write Your
     Own — 943px in a 442 pane beside an EMPTY second column. The second stack takes that column;
     the description a size smaller, the specifics list 200 (a list), secheads 12/8. */
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-head .hp-lead { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-head .hp-plate[data-pad="read"] { padding:10px 15px 12px; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hp-spend { column-gap:16px; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hp-spend > [data-motiv-stack="pick"] { grid-column:1; grid-row:1; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hp-spend > [data-motiv-stack="own"] { grid-column:2; grid-row:1; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-read .hp-plate[data-pad="read"] .hp-prose { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-read .hp-picklist { max-height:200px; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-read .hp-sechead { margin:12px 0 8px !important; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-read .hp-spend > div > .hp-sechead:first-child { margin-top:0 !important; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-read .hp-ledger td { padding:4px 0; }
  /* THE RAIL'S ROLL IS ONE LINE AT THIS BAND (B-603, Jason on the built page: "a lot going on
     here, distracting and hard to read"). The board's roll block is the row, the bands line
     ("Ambition 1–3 · Cause 4–6 · …") and the table's cite; in a 307px rail that was five lines
     of mono between the CATEGORIES head and its list. The row stays — ROLL applies the bands
     itself and the ledger prints what was rolled — and the bands line and the cite are the wide
     sheet's. */
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-index [data-motiv-rollwhy],
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-index [data-step-cite="motivation-roll"] { display:none; }
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-index [data-motiv-rollblock] { margin-bottom:8px; }
  /* …and the specifics' not-yet notice ("ROLL uses the book's printed ranges — they aren't in the
     app's data yet") is the wide sheet's too (Jason: "quiet that also"): an honest line for the
     record, developer chatter to a player. The specifics list has no ROLL of its own at any band,
     so nothing here promises what the line withdrew. */
  [data-doc-ground="creator"] [data-motivation-step="1"] .hpw-read [data-motiv-noroll] { display:none; }
  /* THE MECHANIC IS A SNAPSHOT AT THIS BAND (B-596, the walk's Step 5). The read pane is 454px
     under a 251px head; the track card (219 — label, name, line, a three-line paragraph and a
     "you may trade" foot), the descriptor list and the party-size + trade panel ran to 678.
     The card keeps its label, name, value and line and drops the paragraph and the foot here —
     the trade panel's own head says "on the group track only" — trade rows sit at 40px, the
     secheads at 12/8, the descriptor list at 220 (a list; it scrolls as one), the lead a size
     smaller. Obligation · Duty · Morality all fit with nothing scrolling but the list. */
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-head .hp-lead { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-track .hp-prose,
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-track .hp-track-foot { display:none; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-track { padding-top:12px; padding-bottom:12px; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-buy { padding:2px 0; min-height:0; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-head .hp-plate[data-pad="read"] { padding:10px 15px 12px; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-buy .hp-buy-btn { min-height:34px; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-sechead { margin:12px 0 8px !important; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-spend > div > .hp-sechead:first-child { margin-top:0 !important; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-picklist { max-height:220px; }
  [data-doc-ground="creator"] [data-mechanic-step="1"] .hpw-read .hp-plate[data-pad="data"]:has(> .hp-partyrow) { padding-top:6px; padding-bottom:7px; }
  /* THE CHARACTERISTICS ARE A SNAPSHOT AT THIS BAND (B-598, the walk's Step 6). The working half
     fits once the raise rows sit at 40px and the secheads at 12/8; the gloss is ONE entry, the tapped characteristic's (the doors above). */
  [data-doc-ground="creator"] [data-char-step="1"] .hpw-head .hp-lead { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-char-step="1"] .hpw-head .hp-plate[data-pad="read"] { padding:10px 15px 12px; }
  [data-doc-ground="creator"] [data-char-step="1"] .hpw-read .hp-buy { padding:2px 0; min-height:0; }
  [data-doc-ground="creator"] [data-char-step="1"] .hpw-read .hp-buy .hp-buy-btn { min-height:34px; }
  [data-doc-ground="creator"] [data-char-step="1"] .hpw-read .hp-sechead { margin:12px 0 8px !important; }
  [data-doc-ground="creator"] [data-char-step="1"] .hpw-read .hp-spend > div > .hp-sechead:first-child { margin-top:0 !important; }
  [data-doc-ground="creator"] [data-char-step="1"] .hpw-read .hp-glosswrap .hp-sechead { margin:14px 0 8px !important; }
  /* THE SKILLS ARE A SNAPSHOT AT THIS BAND (B-599, the walk's Step 7). The two pick lists at 30px
     rows fill the left column; on the right the roll ledger and Buy Ranks share the pane's height
     — the column is a flex column the height of the pane, and the Buy Ranks LIST is what scrolls
     (B-483's rule, with the plate taking whatever the ledger leaves it). The dice lesson under
     them is the fold above; the lead a size smaller. A third pick list (species skills) still
     scrolls the pane, with the cue. */
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-head .hp-lead { font-size:14px; line-height:1.4; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-head .hp-plate[data-pad="read"] { padding:10px 15px 12px; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-skill { min-height:30px; padding:2px 8px; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read [data-skills-list] { padding:6px 11px 7px; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-sechead { margin:12px 0 8px !important; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-spend > div > .hp-sechead:first-child { margin-top:0 !important; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-buy { padding:2px 0; min-height:0; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-buy .hp-buy-btn { min-height:34px; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-ledger td { padding:4px 0; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-spendwrap,
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-spend { height:100%; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-spend { align-items:stretch; grid-template-rows:minmax(0,1fr); }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-spend > div:nth-child(2) { display:flex; flex-direction:column; min-height:0; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read [data-skills-buy="1"] { flex:1 1 0; min-height:100px; max-height:none; overflow:hidden; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read [data-skills-buy-scroll="1"] { flex:1 1 0; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-fold > summary .hp-sechead { margin:10px 0 0 !important; }
  [data-doc-ground="creator"] [data-skills-step="1"] .hpw-read .hp-fold[open] > summary .hp-sechead { margin-bottom:8px !important; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hpw-grid { grid-template-columns:minmax(400px,1fr) 633px 520px minmax(430px,1.05fr);
             grid-template-areas:"index head head ledger" "index plate read ledger";
             --desk-prose-max:486px; }
  [data-doc-ground="creator"] .hpw-shell .hp-prose,
  [data-doc-ground="creator"] .hpw-shell .hp-lead { font-size:21.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-note p { font-size:19.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-prose.hp-prose-sm { font-size:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-none { font-size:13.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-lkey { font-size:14.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-lval { font-size:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-ledger td { padding:10px 0; }
  [data-doc-ground="creator"] .hpw-shell .hp-head { font-size:15px; min-height:46px; padding:8px 34px 8px 15px; }
  [data-doc-ground="creator"] .hpw-shell .hp-box { width:14px; height:14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-maker,
  [data-doc-ground="creator"] .hpw-shell .hp-note-title { font-size:14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-runhead,
  [data-doc-ground="creator"] .hpw-shell .hp-artlabel { font-size:13px; }
  [data-doc-ground="creator"] .hpw-shell .hp-sechead h2 { font-size:15.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-cite { font-size:12.5px; padding:3px 11px; }
  [data-doc-ground="creator"] .hpw-shell .hp-desig { font-size:60px; }
  [data-doc-ground="creator"] .hpw-shell .hp-run { font-size:14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-row { min-height:84px; }
  [data-doc-ground="creator"] .hpw-shell .hp-row-plate { width:60px; }
  [data-doc-ground="creator"] .hpw-shell .hp-row-desig { font-size:17px; }
  [data-doc-ground="creator"] .hpw-shell .hp-row-tab { font-size:15.5px; width:98px; padding:0 15px; }
  [data-doc-ground="creator"] .hpw-shell .hp-xpu { font-size:11.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-char-bead { font-size:22px; }
  [data-doc-ground="creator"] .hpw-shell .hp-char-lab { font-size:12px; padding:7px 2px 5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-char-val { padding:11px 0 9px; }
  [data-doc-ground="creator"] .hpw-shell .hp-commit { font-size:17px; min-height:62px; padding:0 40px 0 28px; }
  [data-doc-ground="creator"] .hpw-shell .hp-quiet { font-size:14px; min-height:56px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate { --doc-cut:16px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate[data-pad="read"] { padding:22px 25px 25px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate[data-pad="data"] { padding:14px 16px 16px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate[data-pad="snug"] { padding:12px 13px 13px; }
  [data-doc-ground="creator"] .hpw-shell .hp-nest { margin-left:24px; padding-left:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-steps { height:15px; }
  [data-doc-ground="creator"] .hpw-shell .hp-step[data-now="1"] { height:11px; }
  [data-doc-ground="creator"] .hpw-shell .hp-artplate-in[data-band] { height:auto; aspect-ratio:183/250; }
  [data-doc-ground="creator"] .hpw-shell .hpw-headrail { display:block; }
  [data-doc-ground="creator"] .hpw-shell .hpw-title,
  [data-doc-ground="creator"] .hpw-shell .hpw-desc,
  [data-doc-ground="creator"] .hpw-shell .hpw-act { grid-column:1; padding-right:6px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-headrail { margin-top:13px; padding-right:10px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-headmain .hp-plate[data-pad="read"] { max-width:none; }
  [data-doc-ground="creator"] .hpw-shell .hpw-headmain .hp-lead { max-width:none; }
  [data-doc-ground="creator"] .hpw-shell .hpw-statrail-rail { display:none; }
  [data-doc-ground="creator"] .hpw-shell .hpw-headpick { margin-top:0; }
  [data-doc-ground="creator"] .hpw-shell .hpw-read { --doc-unit-max:900px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-grid { flex:1 1 auto; }
  [data-doc-ground="creator"] .hpw-shell .hp-spend { --spend-rail:860px; --spend-buy:546px; gap:34px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-size="lg"] .hp-char-bead { font-size:39px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-size="lg"] .hp-char-lab { font-size:14px; padding:8px 2px 6px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-size="lg"] .hp-char-val { padding:18px 0 15px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss-sub { font-size:17px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss-nm { font-size:14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss-gp { font-size:13px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss-rt { min-width:26px; height:26px; font-size:14px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-grid-spend { --spend-index:430px; }
  [data-doc-ground="creator"] .hpw-shell .hp-xp dt { font-size:14.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-xp dd { font-size:25px; }
  [data-doc-ground="creator"] .hpw-shell .hp-xp[data-total="1"] dd { font-size:34px; }
  [data-doc-ground="creator"] .hpw-shell .hp-overspent { font-size:14.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy { padding:9px 0; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy-name { font-size:14.5px; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy-step { font-size:21px; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy-cost { font-size:15px; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy-btn { font-size:13.5px; min-height:44px; padding:0 17px; }
  [data-doc-ground="creator"] .hpw-shell .hp-skill { grid-template-columns:minmax(0,1fr) 56px 152px; padding:10px 12px; }
  [data-doc-ground="creator"] .hpw-shell .hp-skill[data-charword] { grid-template-columns:minmax(0,1fr) auto 152px; }   /* R-CPD-8 */
  [data-doc-ground="creator"] .hpw-shell .hp-skill-name { font-size:21px; }
  [data-doc-ground="creator"] .hpw-shell .hp-skill-char { font-size:14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-pool .hp-sym { font-size:25px; }
  [data-doc-ground="creator"] .hpw-shell .hp-teach-lab { font-size:14px; min-width:196px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-cols="3"] { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hpw-grid { --desk-prose-max:655px; --doc-lead-max:1111px; }
  /* M1's ROOM rung — the board raises the same quantity to 1111 here (`--pp-lead-max`), so the card
     does too. A DESCENDANT selector on purpose: `.hpw-shell` is the size container this query is
     asking about, and the board's own note records that a token set on the shell inside its own
     container query SILENTLY never applies — "which is exactly what happened, and the description
     kept its 1440px cap on a 4K panel". `.hpw-shell .hp-track` is a descendant and is fine. */
  [data-doc-ground="creator"] .hpw-shell .hp-track { max-width:1111px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-read { --doc-unit-max:1080px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-grid { grid-template-columns:minmax(0,1fr) 732px 710px minmax(0,1.05fr); }
  [data-doc-ground="creator"] .hpw-shell .hp-prose,
  [data-doc-ground="creator"] .hpw-shell .hp-lead { font-size:29px; }
  [data-doc-ground="creator"] .hpw-shell .hp-note p { font-size:27px; }
  [data-doc-ground="creator"] .hpw-shell .hp-prose.hp-prose-sm { font-size:27px; }
  [data-doc-ground="creator"] .hpw-shell .hp-none { font-size:18px; }
  [data-doc-ground="creator"] .hpw-shell .hp-lkey { font-size:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-lval { font-size:28px; }
  [data-doc-ground="creator"] .hpw-shell .hp-ledger td { padding:8px 0; line-height:1.18; }
  [data-doc-ground="creator"] .hpw-shell .hp-none { display:inline-block; line-height:1.1; }
  [data-doc-ground="creator"] .hpw-shell .hp-head { font-size:20px; min-height:60px; padding:10px 44px 10px 19px; }
  [data-doc-ground="creator"] .hpw-shell .hp-head .hp-box,
  [data-doc-ground="creator"] .hpw-shell .hp-box { width:19px; height:19px; }
  [data-doc-ground="creator"] .hpw-shell .hp-maker,
  [data-doc-ground="creator"] .hpw-shell .hp-note-title { font-size:19px; }
  [data-doc-ground="creator"] .hpw-shell .hp-runhead,
  [data-doc-ground="creator"] .hpw-shell .hp-artlabel { font-size:18px; }
  [data-doc-ground="creator"] .hpw-shell .hp-sechead h2 { font-size:21px; }
  [data-doc-ground="creator"] .hpw-shell .hp-cite { font-size:17px; padding:4px 14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-desig { font-size:78px; }
  [data-doc-ground="creator"] .hpw-shell .hp-run { font-size:19px; }
  [data-doc-ground="creator"] .hpw-shell .hp-row { min-height:112px; }
  [data-doc-ground="creator"] .hpw-shell .hp-row-plate { width:80px; }
  [data-doc-ground="creator"] .hpw-shell .hp-row-desig { font-size:23px; }
  [data-doc-ground="creator"] .hpw-shell .hp-row-tab { font-size:21px; padding:0 22px; width:132px; gap:8px; }
  [data-doc-ground="creator"] .hpw-shell .hp-xpu { font-size:15px; }
  [data-doc-ground="creator"] .hpw-shell .hp-char-bead { font-size:42px; }
  [data-doc-ground="creator"] .hpw-shell .hp-char-lab { font-size:20px; padding:8px 2px 6px; letter-spacing:.02em; }
  [data-doc-ground="creator"] .hpw-shell .hp-char-val { padding:12px 0 10px; }
  [data-doc-ground="creator"] .hpw-shell .hp-commit { font-size:23px; min-height:84px; padding:0 52px 0 38px; }
  [data-doc-ground="creator"] .hpw-shell .hp-quiet { font-size:19px; min-height:76px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate { --doc-cut:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate[data-pad="read"] { padding:30px 34px 34px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate[data-pad="data"] { padding:23px 21px 25px; }
  [data-doc-ground="creator"] .hpw-shell .hp-plate[data-pad="snug"] { padding:16px 18px 18px; }
  [data-doc-ground="creator"] .hpw-shell .hp-nest { margin-left:32px; padding-left:26px; }
  [data-doc-ground="creator"] .hpw-shell .hp-steps { height:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-step[data-now="1"] { height:14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-spend { --spend-rail:1180px; --spend-buy:756px; gap:44px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-size="lg"] .hp-char-bead { font-size:54px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-size="lg"] .hp-char-lab { font-size:19px; padding:10px 3px 8px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-size="lg"] .hp-char-val { padding:24px 0 20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss { gap:32px 40px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss-sub { font-size:23px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss-nm { font-size:19px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss-gp { font-size:17px; }
  [data-doc-ground="creator"] .hpw-shell .hp-gloss-rt { min-width:34px; height:34px; font-size:19px; }
  [data-doc-ground="creator"] .hpw-shell .hpw-grid-spend { --spend-index:580px; }
  [data-doc-ground="creator"] .hpw-shell .hp-xp dt { font-size:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-xp dd { font-size:34px; }
  [data-doc-ground="creator"] .hpw-shell .hp-xp { padding:7px 0; }
  [data-doc-ground="creator"] .hpw-shell .hp-xp[data-total="1"] dd { font-size:40px; }
  [data-doc-ground="creator"] .hpw-shell .hp-overspent { font-size:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy { padding:8px 0; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy-name { font-size:20px; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy-step { font-size:29px; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy-cost { font-size:21px; }
  [data-doc-ground="creator"] .hpw-shell .hp-buy-btn { font-size:19px; min-height:52px; padding:0 24px; }
  [data-doc-ground="creator"] .hpw-shell .hp-skill { grid-template-columns:minmax(0,1fr) 76px 202px; padding:12px 14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-skill[data-charword] { grid-template-columns:minmax(0,1fr) auto 202px; }   /* R-CPD-8 */
  [data-doc-ground="creator"] .hpw-shell .hp-skill-name { font-size:29px; }
  [data-doc-ground="creator"] .hpw-shell .hp-skill-char { font-size:19px; }
  [data-doc-ground="creator"] .hpw-shell .hp-pool .hp-sym { font-size:34px; }
  [data-doc-ground="creator"] .hpw-shell .hp-teach-lab { font-size:19px; min-width:270px; }
  [data-doc-ground="creator"] .hpw-shell .hp-rail[data-cols="3"] { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  [data-doc-ground="creator"] .hp-wave-step,
  [data-doc-ground="creator"] .hp-wave-bar,
  [data-doc-ground="creator"] .hp-wave-lab { transition:none; }
}

@container surface (min-width:1024px) {
  [data-doc-ground="creator"] .hp-wave { height:44px; overflow-x:auto; scrollbar-width:none; }
  [data-doc-ground="creator"] .hp-wave::-webkit-scrollbar { display:none; }
  [data-doc-ground="creator"] .hp-wave-step { pointer-events:auto; min-width:44px; }
  [data-doc-ground="creator"] .hp-wave-lab { display:block; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hp-wave { height:52px; }
  [data-doc-ground="creator"] .hp-wave-step[data-now="1"] .hp-wave-bar { height:11px; }
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step:hover .hp-wave-lab,
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step:focus .hp-wave-lab,
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step[data-demo="3"] .hp-wave-lab { font-size:21px; }
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step:hover,
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step:focus,
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step[data-demo="3"] { min-width:255px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hp-wave { height:64px; }
  [data-doc-ground="creator"] .hp-wave-step[data-now="1"] .hp-wave-bar { height:14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step:hover .hp-wave-lab,
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step:focus .hp-wave-lab,
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step[data-demo="3"] .hp-wave-lab { font-size:29px; }
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step:hover,
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step:focus,
  [data-doc-ground="creator"] .hpw-shell .hp-wave-step[data-demo="3"] { min-width:350px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-track-line { font-size:14px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-track-line { font-size:18px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-req { font-size:14px; }
  [data-doc-ground="creator"] .hpw-shell .hp-warn { font-size:14px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-req { font-size:18px; }
  [data-doc-ground="creator"] .hpw-shell .hp-warn { font-size:18px; }
}

@container surface (min-width:2300px) {
  [data-doc-ground="creator"] .hpw-shell .hp-namerun { font-size:21px; }
}

@container surface (min-width:3000px) {
  [data-doc-ground="creator"] .hpw-shell .hp-namerun { font-size:27px; }
}

/* ══ END DERIVED ════════════════════════════════════════════════════════════════════════════
   Everything above this marker between it and "DERIVED FROM THE BOARD" is generated by
   `scripts/derive_board_css.py` and is replaced wholesale on every re-run. Everything BELOW it is
   the app's own, and must survive that.
   THE MARKERS EXIST BECAUSE A REFRESH ATE A BLOCK: the regeneration replaced from the derived
   header to end-of-file, which silently removed P2's interaction states that had been appended
   after it. The style guard caught it — five `:active` asserts went red with the CSS simply gone —
   but only because P2 had an assert of its own. Anything appended without one would have vanished
   quietly. Replace BETWEEN THE MARKERS, never to end-of-file. */

/* THE PURSE CARRIES THE RAISE REFUSAL — ruling `creator-pre-deploy-batch` A2, on Jason's "instead
   of writing it out in the 'Raise' box, just flash red in the remaining xp in 'The Build' box".
   APP-OWN, below the marker, because the board draws no such state.

   A SECOND, WEAKER STATE THAN `data-over`, on the same element and in the same ink: overspent
   already takes the colour AND a 2px underline, and it means "you are in deficit, the step holds".
   This one means "the raise you are looking at costs more than you hold", which is not an error —
   the player has spent nothing they should not have — so it takes the colour and no rule beneath
   it. A separate attribute, never a widened `data-over` (A2-3): the overspent prose must not fire
   for this condition.

   IT FLASHES ONCE AND SETTLES (A2-4). The animation runs when the element STARTS matching the
   selector, which is the moment the state becomes true, and then the colour simply stays — a flash,
   never a loop, on a number the player is trying to read. `prefers-reduced-motion: reduce` drops the
   animation and keeps the state, the shipped `.hubcard-enter` / `.panel-enter` pattern in
   `tokens.css`.

   COLOUR IS THE THIRD SIGNAL, NOT THE FIRST (C-MU-4, and A2-4 binds it): the button stays
   `disabled` and its `aria-label` keeps the full priced reason, composed independently of anything
   here. A reader who cannot see the flash loses nothing. */
@keyframes hp-purse-short {
  0%   { color:var(--doc-ink); }
  18%  { color:var(--doc-action); }
  100% { color:var(--doc-action); }
}
[data-doc-ground="creator"] .hp-xp[data-short="1"] dd,
[data-doc-ground="creator"] .hp-status-v[data-short="1"] {
  color:var(--doc-action);
  animation:hp-purse-short .5s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-doc-ground="creator"] .hp-xp[data-short="1"] dd,
  [data-doc-ground="creator"] .hp-status-v[data-short="1"] { animation:none; }
}

/* A REFUSED ROW IN A BROWSER RAIL IS STILL NAVIGABLE — app-own, and it is an EXTENSION of the
   board's idiom rather than a disagreement with it.
   The board's refused form was drawn for a RAISE LEDGER, where the row IS the action: refusing it
   and setting `cursor:not-allowed` are the same statement. On a BROWSER step the row is
   NAVIGATION — you select a specialization to read it — and R-C1C-1 refuses the COMMIT, not the
   row ("the refused-commit replacement on the affected rows").
   WHY IT MATTERS CONCRETELY: R-SPP-1 puts the short-path offer ON THE REFUSAL IT ANSWERS. If the
   refused row cannot be selected, its detail cannot be read and the offer becomes unreachable —
   the purchase that exists to answer that refusal. The derived rule made the row `not-allowed`,
   which also made the shared click helper skip it (it resolves only pointer-cursor elements), so
   five AS-9 asserts reported the offer missing from a screen it could no longer be reached on.
   Scoped to the INDEX RAIL so the ledger's refused rows keep the board's behaviour exactly. */
[data-doc-ground="creator"] .hpw-index .hp-row[data-refused="1"] { cursor: pointer; }
[data-doc-ground="creator"] .hpw-index .hp-row[data-refused="1"]:hover { background: rgba(23,22,27,.05); }
/* AND THE PHONE'S PICKER IS THE SAME RAIL, one band down (`phone-spec-census` R-PSpC-1). The rule
   above is scoped to `.hpw-index`, which the phone sheet does not render — its register is the
   `hp-picklist` inside the step's `<details class="hp-unit">` — so lighting the specialization step
   at 390 reproduced the exact defect this comment records: `not-allowed` on a refused row, the
   shared click helper skipping it, and `smoke_short_path`'s three offer asserts red because the
   Jedi's Knight row could no longer be reached. Measured, not inferred: `creator_card_click(pg,
   'Knight')` returned False at 402 with the row on screen and its reason rendered beside it.
   Same scope discipline as the line above — the picker's rows only, so the ledger's refused rows
   keep the board's behaviour exactly. */
[data-doc-ground="creator"].hp-phonesheet .hp-picklist .hp-row[data-refused="1"] { cursor: pointer; }
[data-doc-ground="creator"].hp-phonesheet .hp-picklist .hp-row[data-refused="1"]:hover {
  background: rgba(23,22,27,.05); }

/* ══ P2 — THE RAISE CONTROL'S INTERACTION STATES ═════════════════════════════════════════════
   Jason: "Raise button is different. Add hover over button where it turns red or when tapped."
   Ruling `template-visual-punch-list` P2 — and where the board's CSS does not carry the state, his
   word IS the rule and the gate cites this line.

   HOVER TAKES THE ACTION RED, which is what `--doc-action-lift` was published for: the palette's
   own note calls it "HOVER ONLY — never a resting state". A value that exists for a job and is
   never wired to it is one the next reader assumes is dead.

   :ACTIVE IS THE TAP EQUIVALENT, and not politeness — hover does not exist on a touch device, so
   without it a phone gets no feedback at all for the most expensive purchase in character creation.

   These sit AFTER the derived block on purpose: the board's own `.hp-buy-btn:hover` moves only the
   border, which is the board describing a mockup nobody clicks. */
[data-doc-ground="creator"] .hp-buy-btn[data-afford="1"]:hover,
[data-doc-ground="creator"] .hp-buy-btn[data-afford="1"]:active {
  background: var(--doc-action-lift);
  border-color: var(--doc-action-lift);
  color: var(--doc-action-ink);
}
/* A control that cannot act must not answer a finger as though it can (R-CSC-1's refusal register,
   applied to interaction). */
[data-doc-ground="creator"] .hp-buy-btn:disabled:hover,
[data-doc-ground="creator"] .hp-buy-btn:disabled:active { background: transparent; }
/* The refund and the door get the same pair, so no live control on this page is silent to a thumb. */
[data-doc-ground="creator"] .hp-buy-btn[data-refund]:not(:disabled):hover,
[data-doc-ground="creator"] .hp-buy-btn[data-refund]:not(:disabled):active,
[data-doc-ground="creator"] .hp-commit:not(:disabled):hover,
[data-doc-ground="creator"] .hp-commit:not(:disabled):active {
  background: var(--doc-action-lift); color: var(--doc-action-ink);
}

/* ── THE PLATE PAINTS ONE WASH — ruling `creator-pre-deploy-batch` R-CPD-5 ───────────────────
   Jason: the species plate does not match the board's. It did not, and the divergence was never
   the SIZING — production's `cover`/`center` and its portrait inset match the lab's record
   character for character (UI_Architect, LAB_NOTES §71). It was a SECOND LAYER.

   The rule that stood here overrode the base plate rule with two background layers — the species
   wash over `--doc-wash-default` (the algorithmic wear) on `multiply`. It was written when the
   board's per-species washes were still held on provenance and every plate needed something under
   it. 532 washes have since crossed, so the wear was no longer a floor; it was a second coat, and
   the sheet ALREADY paints wear beneath everything (`.hp-sheet::before/::after`, above). The board
   draws ONE layer: `background-color:--pp-mat` under `background-image:--pp-wash`, with its wear
   under the whole sheet and plates promoted above it. The base rule at the top of this file is
   that composition exactly, so the override is deleted rather than edited.

   NAMED, NOT HIDDEN (the ruling names it too): production's washes carry alpha where the lab's are
   opaque, so with the wear gone they composite over the flat mat. That is the board's own
   structure; if an asset was generated expecting texture beneath it, it will read thinner, and the
   two Jason named — Wookiee and Twi'lek — are the acceptance specimens. The five species with no
   wash at all now take the mat, which is what the board draws for a plate with no wash.

   `--doc-wash-default` stays DECLARED in `grounds/creator.css`: it is the ground's token, not this
   rule's, and the sheet-level wear still reads the same asset. Nothing else consumed the pair. */

/* ── THE ONE-COLUMN STEP STRETCHES TO ITS CAP ────────────────────────────────────────────────
   The board's `.hp-onecol` computes 1500px at 1920 — its own `max-width`, reached because the
   board's sheet stretches it. Ours computed 1171.59px: the CONTENT width, because our sheet is a
   flex container whose cross-axis does not stretch this child, so the cap could never bind and
   every object inside inherited the shortfall (26 differing objects at 1920, all of them width).
   `align-self` + `width` make the child ask for the room the cap is there to limit. An app-own
   rule, below the marker, because the board has no such declaration to derive — its sheet simply
   behaves differently, and this is the app matching the board's COMPUTED result, which is what
   the style layer measures. */
[data-doc-ground="creator"] .hp-onecol { align-self: stretch; width: 100%; }

/* ══ DERIVED: SOURCES BOX (F-102) — BEGIN ═══ generated by scripts/derive_sources_box_css.py; do not hand-edit ══ */
/* specimen `sb-*` idiom @ facet 443d54b4 (crossed via build_sources_box_mockup.facet_sb_css)
   + the approved mockup's V4 grid (build_sources_box_mockup.V4_CSS); rescoped only. */
[data-doc-ground="creator"] .sb-band, [data-doc-ground="creator"] .fx { background:var(--doc-paper-raised); padding:22px 24px 20px; position:relative; }
[data-doc-ground="creator"] .sb-band::after, [data-doc-ground="creator"] .fx::after { content:""; position:absolute; inset:0; border:1px solid var(--doc-rule-fine); pointer-events:none; }
[data-doc-ground="creator"] .sb-band-h { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:14px; border-bottom:1px solid var(--doc-rule); }
[data-doc-ground="creator"] .sb-band-t { font-family:var(--font-display,'Orbitron',sans-serif); font-weight:900; font-size:19px; letter-spacing:.05em; text-transform:uppercase; color:var(--doc-ink); }
[data-doc-ground="creator"] .sb-band-scope { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:16px; margin-top:4px; color:var(--doc-ink-muted); max-width:62ch; }
[data-doc-ground="creator"] .sb-band-scope em { font-style:normal; color:var(--doc-ink); }
[data-doc-ground="creator"] .sb-toggle { flex:none; background:transparent; border:1px solid var(--doc-action); color:var(--doc-action); font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:11px 15px; min-height:44px; cursor:pointer; }
[data-doc-ground="creator"] .sb-chev { margin-left:8px; }
[data-doc-ground="creator"] .sb-summary { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:17px; color:var(--doc-ink); padding-top:14px; }
[data-doc-ground="creator"] .sb-zones { display:grid; gap:26px; padding-top:16px; }
[data-doc-ground="creator"] .sb-zones[data-wide] { grid-template-columns:1.55fr 1fr; gap:38px; }
[data-doc-ground="creator"] .sb-zone { min-width:0; }
[data-doc-ground="creator"] .sb-zone-h { display:flex; flex-direction:column; gap:2px; padding-bottom:9px; border-bottom:1px solid var(--doc-rule-fine); margin-bottom:4px; }
[data-doc-ground="creator"] .sb-zone-t { font-family:var(--font-display,'Orbitron',sans-serif); font-weight:700; font-size:14px; letter-spacing:.07em; text-transform:uppercase; color:var(--doc-ink); }
[data-doc-ground="creator"] .sb-zone-s { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:15px; color:var(--doc-ink-muted); }
[data-doc-ground="creator"] .sb-grp { margin-top:14px; }
[data-doc-ground="creator"] .sb-grp-h { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--doc-ink-muted); margin-bottom:2px; }
[data-doc-ground="creator"] .sb-bk { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:9px 4px; background:transparent; border:0; border-top:1px solid var(--doc-rule-fine); cursor:pointer; text-align:left; color:inherit; }
[data-doc-ground="creator"] .sb-bk:first-of-type { border-top:0; }
[data-doc-ground="creator"] .sb-bk:hover { background:rgba(23,22,27,.05); }
[data-doc-ground="creator"] .sb-bk:focus-visible { outline:2px solid var(--doc-action); outline-offset:-2px; }
[data-doc-ground="creator"] .sb-binder { box-shadow:inset 3px 0 0 var(--doc-ink-muted), inset 6px 0 0 var(--doc-paper-raised), inset 8px 0 0 var(--doc-ink-muted); padding-left:18px; }
[data-doc-ground="creator"] .sb-tick { flex:none; width:19px; height:19px; border:1px solid var(--doc-ink-muted); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--doc-paper-raised); }
[data-doc-ground="creator"] .sb-bk[data-on] .sb-tick { background:var(--doc-action); border-color:var(--doc-action); }
[data-doc-ground="creator"] .sb-bk-body { flex:1; min-width:0; }
[data-doc-ground="creator"] .sb-bk-name { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:17px; color:var(--doc-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
[data-doc-ground="creator"] .sb-bk-add { flex:none; font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:13px; color:var(--doc-ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
[data-doc-ground="creator"] .sb-chip { flex:none; font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 7px; border:1px solid var(--doc-rule); color:var(--doc-ink-muted); margin-right:10px; }
[data-doc-ground="creator"] .sb-chip[data-p="yours"] { border-color:var(--doc-state); color:var(--doc-state); }
[data-doc-ground="creator"] .sb-more { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:15px; color:var(--doc-ink-muted); padding:9px 4px 0; border-top:1px solid var(--doc-rule-fine); }
[data-doc-ground="creator"] .sb-teach { font-family:var(--font-body,'Rajdhani',sans-serif); font-size:15px; color:var(--doc-ink-muted); margin:16px 0 0; padding-top:13px; border-top:1px solid var(--doc-rule-fine); max-width:62ch; line-height:1.5; }
[data-doc-ground="creator"] .sb-teach em { font-style:normal; color:var(--doc-ink); }
[data-doc-ground="creator"] .src-box .sb-chev { margin-left:6px; color:var(--doc-action); }
[data-doc-ground="creator"] .sb-band, [data-doc-ground="creator"] .fx { container-type:inline-size; container-name:band; }
[data-doc-ground="creator"] .sb-bk { display:grid; grid-template-columns:19px 1fr; column-gap:12px; row-gap:4px; align-items:center; padding:11px 4px; }
[data-doc-ground="creator"] .sb-tick { grid-column:1; grid-row:1; }
[data-doc-ground="creator"] .sb-bk-body { grid-column:2; grid-row:1; min-width:0; }
[data-doc-ground="creator"] .sb-bk-name { white-space:normal; overflow:visible; text-overflow:clip; }
[data-doc-ground="creator"] .sb-chip { grid-column:2; grid-row:2; justify-self:start; margin:0; }
[data-doc-ground="creator"] .sb-bk-add { grid-column:2; grid-row:2; justify-self:end; }
[data-doc-ground="creator"] .sb-bk, [data-doc-ground="creator"] .sb-grp-h { display:grid; grid-template-columns:var(--sb-tick,20px) var(--sb-label,300px) 1fr; column-gap:16px; align-items:start; margin:0; padding:8px 0; border:0; border-top:1px solid var(--doc-rule-fine,#cfc9bb); box-sizing:border-box; min-height:40px; }
[data-doc-ground="creator"] .sb-grp { margin:0 0 20px; }
[data-doc-ground="creator"] .sb-bk, [data-doc-ground="creator"] .sb-grp-h { row-gap:0; }
[data-doc-ground="creator"] .sb-tick { grid-column:1; grid-row:1; display:block; width:var(--sb-tick,20px); text-align:center; font-size:12px; line-height:18px; border:0; background:none; color:var(--doc-ink,#1b1a1f); }
[data-doc-ground="creator"] .sb-bk-name { grid-column:2; grid-row:1; font-size:13px; font-weight:600; line-height:18px; color:var(--doc-ink,#1b1a1f); }
[data-doc-ground="creator"] .sb-bk-add, [data-doc-ground="creator"] .mk-grp-sum { grid-column:3; grid-row:1; justify-self:start; text-align:left; margin:0; padding:0; font-family:var(--font-mono,monospace); font-size:12px; font-weight:400; line-height:18px; letter-spacing:0; color:var(--doc-ink,#1b1a1f); }
[data-doc-ground="creator"] .sb-grp-h .sb-bk-name { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--doc-ink-muted,#6b665c); }
[data-doc-ground="creator"] .mk-kind { font-family:var(--font-mono,monospace); font-size:10px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--doc-ink-muted,#6b665c); margin-left:8px; }
[data-doc-ground="creator"] .mk-off .sb-bk-name, [data-doc-ground="creator"] .mk-off .sb-bk-add { color:var(--doc-ink-muted,#6b665c); }
[data-doc-ground="creator"] .mk-none { font-family:var(--font-mono,monospace); font-size:12px; color:var(--doc-ink-muted,#6b665c); }
[data-doc-ground="creator"][data-band="mobile"] .sb-bk, [data-doc-ground="creator"][data-band="mobile"] .sb-grp-h { grid-template-columns:var(--sb-tick,20px) 1fr; row-gap:3px; }
[data-doc-ground="creator"][data-band="mobile"] .sb-bk-add, [data-doc-ground="creator"][data-band="mobile"] .mk-grp-sum { grid-column:2; grid-row:2; }
[data-doc-ground="creator"][data-band="mobile"] .sb-bk, [data-doc-ground="creator"][data-band="mobile"] .sb-grp-h { row-gap:3px; }
[data-doc-ground="creator"] .sb-band-1 .sb-band-h { display:flex; align-items:baseline; gap:16px; }
[data-doc-ground="creator"] .sb-band-1 .sb-band-scope { flex:1 1 auto; font-family:var(--font-mono,monospace); font-size:12px; line-height:1.35; max-width:none; }
[data-doc-ground="creator"] .sb-band-1 .sb-band-t { flex:0 0 auto; }
[data-doc-ground="creator"] .sb-band-1 .sb-toggle { flex:0 0 auto; }
[data-doc-ground="creator"][data-band="mobile"] .sb-band-1 .sb-band-h { flex-wrap:wrap; row-gap:6px; }
[data-doc-ground="creator"][data-band="mobile"] .sb-band-1 .sb-band-t { order:1; flex:1 1 auto; }
[data-doc-ground="creator"][data-band="mobile"] .sb-band-1 .sb-toggle { order:2; }
[data-doc-ground="creator"][data-band="mobile"] .sb-band-1 .sb-band-scope { order:3; flex:1 1 100%; }
/* THE IN-PAGE BOX IS A STRIP (B-581, Jason's iPad walk: "Active sources take up too much space").
   `.sb-band` is the OVERLAY's band — 22/24/20 padding and a rule-and-14px tail for the shelf that
   follows it there. In the game-line head nothing follows, so the same class drew a 160px plate
   around one line and a button. The strip keeps the band's ground, ink and the CHANGE control and
   drops the tail; one row, on one baseline. The overlay's band is untouched. */
[data-doc-ground="creator"] .sb-band[data-sources-box="1"] { padding:10px 18px 10px 20px;
  /* THE PLATE'S OWN TREATMENT (Jason 2026-09-14: "it's missing the corner cuts"): the rule-coloured
     ground with the paper inset 1px and the two cut corners, exactly as `.hp-plate` draws them —
     the same polygon, the same inset. The band's square hairline border (its ::after) is replaced
     by the plate's inset face; the CHANGE control and the line sit above it. */
  background:var(--doc-rule); box-shadow:var(--doc-lift);
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)), calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .sb-band[data-sources-box="1"]::after { content:""; position:absolute; inset:1px; border:0; background:var(--doc-paper-raised); pointer-events:none;
  clip-path:polygon(var(--doc-cut) 0, 100% 0, 100% calc(100% - var(--doc-cut)), calc(100% - var(--doc-cut)) 100%, 0 100%, 0 var(--doc-cut)); }
[data-doc-ground="creator"] .sb-band[data-sources-box="1"] > * { position:relative; z-index:1; }
/* B-583 — the phone's strip: name and door on one row, the mobile wrap rules stood down. */
[data-doc-ground="creator"][data-band="mobile"] .sb-band[data-sources-box="1"][data-compact="1"] { margin-top:16px !important; padding:8px 12px 8px 16px; }
[data-doc-ground="creator"][data-band="mobile"] .sb-band[data-sources-box="1"][data-compact="1"] .sb-band-h { flex-wrap:nowrap; align-items:center; justify-content:space-between; }
[data-doc-ground="creator"][data-band="mobile"] .sb-band[data-sources-box="1"][data-compact="1"] .sb-band-t { order:0; flex:1 1 auto; font-size:14px; }
[data-doc-ground="creator"][data-band="mobile"] .sb-band[data-sources-box="1"][data-compact="1"] .sb-toggle { order:1; min-height:44px; }
[data-doc-ground="creator"] .sb-band[data-sources-box="1"] .sb-band-h { padding-bottom:0; border-bottom:0; align-items:center; }
[data-doc-ground="creator"] .sb-band[data-sources-box="1"] .sb-band-t { font-size:14px; }
[data-doc-ground="creator"] .sb-band[data-sources-box="1"] .sb-toggle { min-height:44px; padding:0 14px; }   /* AS-6: the 44px floor — B-581 typed 40 and as9 caught it */
/* THE THREE LINES FIT WITHOUT SCROLLING AT THE DESK BANDS (B-581 → B-582). B-581 tightened the
   cards' prose and paddings to fit beside a head-mounted sources strip; B-582 moved the strip into
   the act row and the cards have their drawn size back (16/1.55, the board's paddings). What stays
   is the section head's and act row's rhythm. Under Safari's chrome (~700 tall) the box scrolls. */
[data-doc-ground="creator"] .hpw-shell .hp-onecol > .hp-sechead { margin:10px 0 8px; }
[data-doc-ground="creator"] .hpw-shell .hp-onecol-act { margin-top:8px; padding-top:8px; }
[data-doc-ground="creator"] .hpw-shell .hp-onecol-head { margin-top:6px; }
/* B-582 — IN THE ACT ROW: the strip takes the room beside the commit, on the same centre line; the
   consequence note drops to its own line below (order), full width, as the board hangs it. */
[data-doc-ground="creator"] .hpw-shell .hp-onecol-act .sb-band[data-sources-box="1"] { margin-top:0 !important; flex:1 1 380px; min-width:0; }
[data-doc-ground="creator"] .hpw-shell .hp-onecol-act > .hp-none { order:3; flex:1 1 100%; }
[data-doc-ground="creator"] .hpw-shell .hp-onecol-act .sb-band-h { flex-wrap:wrap; row-gap:4px; }
[data-doc-ground="creator"] .hpw-shell .hp-onecol-act .sb-band-scope { min-width:0; white-space:normal; }
/* ══ DERIVED: SOURCES BOX (F-102) — END ══ */
/* ── APP-OWN RULES FOR THE SOURCES BOX, below the derived block (F-102, R-FSA-A9-1) ───────────
   The record draws the box, the overlay and the offer as FRAMES; the app has to put the overlay
   somewhere, and the standards outrank the record where they disagree (C-MU-4):
   · `.sb-overlay` — the A1 overlay's container. The record's caption is "CHANGE opens a
     full-screen overlay"; this is the full screen: fixed, on the creator ground, its own scroll,
     above the sheet. It carries `data-doc-ground="creator"` + `data-band` itself so the derived
     rules above scope onto it whether or not it is a descendant of the sheet.
   · AS-6's 44px TAP FLOOR over the record's 40px row — the same correction the transplant made
     for the wave and the runhead. The row's grid, columns and type are the record's; only the
     minimum height moves (40 -> 44), and `scripts/check_sources_box_layout.py` still measures
     every row equal to every other, which is the property the record was approved for.
   · The refusal line (the last core cannot go off) is a STATE the record has no frame for; it is
     the panel's own sentence, in the run's mono, in the action colour. */
/* THE OVERLAY ROOT CARRIES THE GROUND ITSELF (it is portalled to the body, which has none), so the
   selector is COMPOUND on the root and descendant for the rest — a descendant-only form matched
   nothing on the root and the "fixed" overlay rendered in flow under the sheet. Measured, not
   guessed: the first screenshot showed the game line above it. */
[data-doc-ground="creator"].sb-overlay, [data-doc-ground="creator"] .sb-overlay { position:fixed; inset:0; z-index:9000; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:24px; box-sizing:border-box; background:var(--doc-paper); color:var(--doc-ink);
  font-family:var(--font-body,'Rajdhani',sans-serif); }
[data-doc-ground="creator"] .sb-overlay .sb-band { max-width:1500px; margin:0 auto; }
[data-doc-ground="creator"][data-band="mobile"].sb-overlay { padding:14px; }
[data-doc-ground="creator"] .sb-bk { min-height:44px; }
[data-doc-ground="creator"] .sb-bk[role="switch"] { cursor:pointer; }
[data-doc-ground="creator"] .sb-refused { grid-column:1 / -1; margin:0 0 8px; font-family:var(--font-mono,monospace);
  font-size:12px; line-height:1.4; color:var(--doc-action); }
[data-doc-ground="creator"] .sb-band-1 .sb-toggle:focus-visible { outline:2px solid var(--doc-action); outline-offset:2px; }
/* A ROW'S COUNT WRAPS INSIDE THE OVERLAY'S COLUMN (ruling f100-m6-pack R-M6G-22, B-1001's residue). The derived block keeps
   `.sb-bk-add` on one line, and a long count ("+110 species · +20 careers · +135 specs · …") then sized the row grid's `1fr`
   to its own width: 366 px of list in a 314 px column, rows reaching x=404 on a 390 screen and x=1087 at 1024. Scoped to the
   overlay root, the one element carrying `data-sources-overlay`, so no other paper ground is touched (R-M6G-29). */
[data-doc-ground="creator"][data-sources-overlay] .sb-bk-add { white-space:normal; }

/* ── THE TREE CELL — B-451 / B-452, and the read tree's legend ────────────────────────────────
   Five rules the board draws at pin 5763dc2c that this file did not carry, transplanted VERBATIM
   from `derive_board_css.py`'s output at that pin (not retyped, not re-solved).

   WHY THEY ARE HERE AND NOT IN THE DERIVED BLOCK. The block at :525 still banners `c5bb4836` and
   is 16 rules behind the pin (RIDER 2 of ruling `b483-scroller-face`, row B-489). Regenerating it
   wholesale would land those 16 in one act — and 6 of them are REASONED APP DIVERGENCES with no
   owner yet (`.hp-skill`'s middle column, which R-CPD-8 deliberately keeps at 42px because the
   buy-ranks screen shares the class; and `.hp-row[data-noplate]`'s tab under R-CPD-7). Adopting
   those silently is exactly what a per-rule delta with owners exists to prevent. So this card
   lands ITS OWN five and leaves the block's re-stamp to B-489, which owns the other eleven.

   `.hp-tal > .hp-head` gets the board's `min-height:44px` — B-452, the tap floor AS-6 requires and
   which no check could see, because `audit.py`'s tap-target selector lists buttons, links and
   inputs and this head is a `div`. The compact variant at :948 already carried the floor; the base
   cell never did, so the floor held at one width and not the others. The base rule itself lives in
   the derived block, so this is a later same-specificity override — the pattern this file already
   uses (see R-CPD-8's note on the band blocks). */
[data-doc-ground="creator"] .hp-tal > .hp-head { min-height:44px; }
[data-doc-ground="creator"] .hp-sym-fill { display:inline-block; position:relative; }
[data-doc-ground="creator"] .hp-sym-fill > i { font-style:normal; display:block; }
[data-doc-ground="creator"] .hp-sym-fill[data-fill="half"] > i + i { position:absolute; left:0; top:0;
  clip-path:inset(0 0 0 50%); }
[data-doc-ground="creator"] .hp-treekey { font-family:var(--font-mono,'Share Tech Mono',monospace); font-size:11px;
  letter-spacing:.09em; color:var(--doc-accent); text-transform:uppercase;
  margin:7px 0 2px; line-height:1.5; }

/* ── THE FILL FAMILY ON THE PAPER GROUND (ruling `tree-cell-force-pip-fill` R-FPF-1/3) ──────────
   The geometry is the lab's own (`holocron.css` :795–:801, transplanted with the rest of the
   family above); what is added here are the COLOURS, which the lab's generator writes INLINE and
   which must be CSS for us — an inline colour cannot be neutralised off this ground, and keeping
   every other surface's pixels is R-FPF-2 (iii). Values read from the board's own markup at pin
   5763dc2c: the carrying glyph is `#FFFFFF` with a `0.12em #2B2B2B` stroke, and the half pip's
   second glyph is solid `#2B2B2B` clipped to its right half.

   HOLLOW collapses to one glyph — the board draws it as a single stroked glyph with no children —
   so the second `<i>` is hidden here rather than stacked. HALF keeps both. */
[data-doc-ground="creator"] .hp-sym-fill[data-fill="hollow"] { color: #FFFFFF; -webkit-text-stroke: 0.12em #2B2B2B; }
[data-doc-ground="creator"] .hp-sym-fill[data-fill="hollow"] > i + i { display: none; }
[data-doc-ground="creator"] .hp-sym-fill[data-fill="half"] > i { color: #FFFFFF; -webkit-text-stroke: 0.12em #2B2B2B; }
[data-doc-ground="creator"] .hp-sym-fill[data-fill="half"] > i + i { color: #2B2B2B; -webkit-text-stroke: 0; }

/* ── B-554: `.hp-maker` ON A DARK HEAD TAKES THE HEAD'S INK, NOT THE PAPER'S ──────────────────
   MEASURED, at 1366x768 on the species step with a species that grants a fixed starting skill
   (Aqualish, Brawl rank 1): the "FREE SKILL" label reads **1.76:1** — ink `rgb(94,67,22)` on a
   ground of `rgb(36,30,48)`, ten settled samples, all identical.

   THE SAMPLE WAS VERIFIED BEFORE THE INK, which is what B-554 asks for and what this lap's own
   history earned: a near-black run over a dark sampled ground is the signature that already proved
   to be SAMPLING once (`.hp-row-desig` 'Demolitionist', 2.01:1 mid-travel against 15.91:1 at rest).
   Here the sample is the label's own paint and the occlusion reading is refuted by the element:
   `elementFromPoint` at its centre returns ITSELF, `groundIsInk` is false, `clipped` is false, and
   its DIRECT parent `.hp-head` is `background:rgb(36,30,48)` — opaque, not a translucent scrim and
   not the portrait beneath. Its two siblings inside that same head, `.hp-box` and `.hp-name`, are
   already `rgb(242,241,236)`. One child of the plate kept the paper's ink.

   WHY THIS IS AN APP-OWN RULE AND NOT A FIX AT THE DERIVATION. `.hp-maker`'s `color:var(--doc-accent)`
   (:1144) is DERIVED and is correct where the board draws it: the board's `.hp-maker` always sits on
   paper, and this page's three other instances measure 5.59-5.70:1. **No board fixture draws an
   `hp-maker` inside an `hp-head` at all** — checked across every `board_*.html`. The app composes
   the two at `player/app.jsx` :8827 in a way the board does not, so the derived rule is not wrong
   and must not be re-pointed; the composition the app invents is what owes a rule. Same shape as
   `:1161`, which already gives another child of a dark head the light token.

   NOT A CHOICE OF INK: `--doc-paper-raised` is what `.hp-box` and `.hp-name` on this very plate
   already use. Matching a sibling's treatment on the same ground is a derivation, not a design
   decision, so no approved frame moves and nothing is queued for Jason. */
[data-doc-ground="creator"] .hp-head .hp-maker { color: var(--doc-paper-raised); }

/* ── THE PAPER THUMB (B-1112; ruling `gm-own-screens-concept` R-GOS-8, DECISIONS D-74 "P: Paper thumb") ──────
   The thumb rules above (and the derived copy under `.hp-sheet`) never painted: `tokens.css` sets
   `scrollbar-width: thin` and a white `scrollbar-color` on `*`, and the ground set its own ink `scrollbar-color`;
   in Blink a non-`auto` value of EITHER switches an element's `::-webkit-scrollbar*` rules off, so every paper
   scroller drew the standard bar instead (Docs/PAPER_THUMB_CENSUS.md: 41 scrollers, BLOCKED 32, PAINTS 0).
   WHERE THE WEBKIT THUMB EXISTS, the class gets `auto` back: the ground, everything under it, and the scroller
   that WRAPS a ground (the Yard's `.yd-scroll` is the parent of its `.yd` ground). `:where()` keeps it at zero
   specificity, so an author `scrollbar-width: none` (the chip strips, `.ld-tilebody`, `.hp-wave`) still wins; it
   beats `tokens.css`'s `*` (also zero) by loading after it. Two author rules that set the bar back are named and
   neutralised here rather than edited in place: the DERIVED `[data-doc-ground="creator"].hp-sheet` copy above
   (re-derivation would restore it) and `sheet.css`'s `.sb-unit-body[data-scroll="1"]{scrollbar-width:thin}`
   (loaded after this file; `thin` there is what `tokens.css` already gave every element).
   WHERE IT DOES NOT (Firefox), nothing here applies and the ground keeps its ink `scrollbar-color` (above).
   The ground itself and a wrapping scroller get the thumb too: the rules above reach only `*` UNDER a ground,
   so the ground's own bar would have painted `tokens.css`'s white pill. Same pill, same rest/hover/drag ladder. */
@supports selector(::-webkit-scrollbar) {
  :where([data-doc-ground="creator"], [data-doc-ground="creator"] *, :has(> [data-doc-ground="creator"])) {
    scrollbar-color: auto; scrollbar-width: auto;
  }
  [data-doc-ground="creator"].hp-sheet { scrollbar-color: auto; }
  [data-doc-ground="creator"] .sb-unit-body[data-scroll="1"] { scrollbar-width: auto; }
}
[data-doc-ground="creator"]::-webkit-scrollbar-thumb,
:has(> [data-doc-ground="creator"])::-webkit-scrollbar-thumb { background: rgba(23,22,27,.22); background-clip: padding-box; }
[data-doc-ground="creator"]:hover::-webkit-scrollbar-thumb,
:has(> [data-doc-ground="creator"]):hover::-webkit-scrollbar-thumb { background: rgba(23,22,27,.34); background-clip: padding-box; }
[data-doc-ground="creator"]::-webkit-scrollbar-thumb:hover,
:has(> [data-doc-ground="creator"])::-webkit-scrollbar-thumb:hover { background: rgba(23,22,27,.48); background-clip: padding-box; }

/* ── THE PAPER SCRIM (B-1210; card `paper-n7-b1210-scrim-font-card` ADDENDUM 1 R-B1210-1/2/5) ───────────────────
   The kit's one backdrop PART: the layer that dims the page behind a paper window. It is an EMPTY SIBLING of the
   window (route (A)), never its parent — every approved paper window is drawn so (D-110, D-167, D-169), and the sweep
   grades a holding scrim as itself (`scripts/paper_sweep.py` `candidates()`). UNFENCED, because each adopter is
   portalled to <body>, outside every paper scope. The value is H1Window's, value (i) of the census; each caller keeps
   its own z-index inline. Adopters: `H1Window` (player/app.jsx), `ArtworkPaper` (lib/store/view.jsx), `ConflictPaper`
   and `openActiveSources` (lib/shared/ui.jsx), `M7PaperSheet` below 1024 (player/app.jsx) and `DirectionalTreeSheet`'s
   paper face (lib/shared/treeView.jsx). The last three drew other dims; DECISIONS D-174 moved them here (R-B1210-11/12).
   A surface whose approved record draws another value does not move here without Jason (R-MIL-2). */
.hp-scrim { position:fixed; inset:0; background:rgba(18,16,20,.42); }
/* The talent sheet's panel (lib/shared/treeView.jsx `DirectionalTreeSheet`) carries the ground since B-1210 moved it off
   its scrim, so that every `[data-tree-sheet] …` reader still resolves. Before, the ground was the scrim's and the panel
   lay on it as a plain raised stock with no wear of its own; measured at 390 on PLAYER.SHEET.ADVANCEMENT, the panel
   is flat today. The wear stays off it, by the idiom of chrome.css's bars and map.css's shell. */
[data-tree-sheet="paper"][data-doc-ground="creator"]::before,
[data-tree-sheet="paper"][data-doc-ground="creator"]::after { content:none; }

/* ── A PAPER BUTTON TAKES THE PAPER'S FONT (B-1210; R-B1210-6, its CONDITION, and R-B1210-13) ────────────────────
   A <button> with no family of its own computes the UA's `font: -webkit-small-control`, not the ground's face (447 of
   460 readings in the census). ROW-SCOPED, NOT GROUND-WIDE: the gate's crops (`paper_sweep_b1210_census.py --crops`,
   built tree) show ✕ ▾ ✓ drawn from the same fallback face either way (ink mass x1.0, size unchanged, <=1 CSS px), but
   Rajdhani draws its own › − +, so the bold UA glyph turns light (ink mass x0.43-0.48 on `.hp-plate.gm-tile`,
   `.hp-plate.nl-pick`, `.hp-row` ›; x0.89-0.97 on GM.NPC.CUSTOM.FIGHT's − +). Under R-B1210-6's CONDITION those four
   surfaces drop out and are briefed. The rule reaches the row's four sheets (the M7 sheet, the talent sheet's paper
   face, Active sources' paper panel, the creator's sources box and its overlay) and `.pb-chip` ▾, which passed.
   `:where()` keeps it at zero specificity, so any author family still wins; family only, so no size or weight rule
   moves. Precedent: map.css's `.mp-app:where([data-map-shell]) button{font:inherit}`. */
:where([data-m7-sheet], [data-tree-sheet="paper"], [data-paper-chrome].pb-src, [data-sources-box], [data-sources-overlay]) button,
:where([data-doc-ground] .pb-chip, [data-paper-chrome] .pb-chip) { font-family: inherit; }