efficient-easel 0.0.0 → 0.96.0

package/dist/panel/panel.css

@@ -0,0 +1,1460 @@
+/**
+ * efficient-easel/panel.css — the settings-panel grammar.
+ *
+ * Values come from the shell token layer (`efficient-easel/shell.css`), never from
+ * literals: this file is the storefront editor's approved panel design expressed
+ * once, so both editors read the same rules. Light only — neither editor has a
+ * dark mode.
+ *
+ * Two details are deliberate and were decided by measurement, not taste:
+ *   · rows sit 38px apart while a label sits 11px from its own control, so a
+ *     setting reads as ONE thing with air around it. That inside gap is the
+ *     ONLY thing saying which label owns which control, and the two are a
+ *     RATIO rather than a pair of numbers: measured at 28 and 7 (card 8802.d,
+ *     approved from mockups/8802e-settings-spacing-mockup.html) and re-scaled
+ *     together to 38 and 11 (card 66301), which keeps the gap between settings
+ *     3.5x the gap inside one;
+ *   · the label is small and grey, the value is larger and dark. Before that
+ *     contrast existed, a merchant could not tell a name from a number.
+ */
+
+/* ── the row floor: one setting, and nothing falls below it (card 66203) ───── */
+
+/* Lewis, with a screenshot of the Site styles Text tab: the rows are too tight
+   top to bottom, and he wants ONE global setting keeping every settings row at
+   least 10px from the next.
+
+   THIS IS THAT SETTING, and it is the only place the number lives. Before it,
+   the panel's row rhythm was six hand-written numbers in five rules with no
+   token behind any of them: there was nowhere to change it once, and no floor
+   under any of it.
+
+   ON `.es-editor`, because the panel HAS no root of its own. Puck lays the
+   inspector out as a flat sibling list, so the primitives render no wrapper —
+   and `.es-editor` is the chrome root both editors already put on their own
+   chrome and the root every colour in this sheet is already read from. A host
+   overrides the whole panel's rhythm by setting this one var on, or above, that
+   root. Declaring it HERE rather than in `shell.css` follows `rail.css`, which
+   owns its own `--es-rail-*`: the sheet that owns the rules owns its tokens, and
+   `shell.css` stays a verbatim mirror of the storefront editor's `--sf-*` block.
+
+   HOW A LARGER RHYTHM KEEPS THE FLOOR. Three of the gaps below are deliberately
+   bigger than 10 and were decided by measurement, not by taste (card 8802.d).
+   They are written `max(var(--es-row-gap), <rhythm>)` — never as a bare number
+   beside the token, which would look governed and would not be, and never as
+   `calc()` off it, which would claim an arithmetic relationship that does not
+   exist: 28 was measured, it is not "10 plus 18". The max() is what makes this a
+   FLOOR rather than a default — raise the token past a rhythm and that row rises
+   with it instead of quietly staying tighter than everything around it.
+
+   NOW 16, AND 10 WAS WORTH NOTHING ON SCREEN (card 66206). 66203 shipped the
+   token at 10 and Lewis could see no change at all, which is not a bug in it —
+   it is what a floor of 10 was always going to do here. Four of the six gaps
+   (36, 28, 16, 14) were already above it, and of the two that were not, one is
+   the dead `.es-group + .es-group` rule below. So 10 could only ever reach the
+   drill list, and there it landed on the number that list already had.
+
+   16 is Lewis's own, picked on 2026-08-28 once that was shown to him, and it is
+   the first value that moves anything a merchant looks at. MEASURED in Chromium
+   against these stylesheets (`tests/fixtures/panel-row-spacing.html`):
+
+     one drill row to the next, word to word    23.40px → 35.40px
+     a group head to its first setting          14px    → 16px
+     one setting to the next                    28px      unchanged
+     a one-line boolean row                     16px      unchanged
+     a heading, after the row above it          36px      unchanged
+
+   The three measured rhythms do not move because 16 is still under them, which
+   is the floor doing exactly what it was built to do.
+
+   NOW 20, AND THE RHYTHMS MOVED WITH IT (card 66301). Lewis, 2026-08-31: the
+   vertical spacing is too tight, open it up, roughly 10px more. Asked whether
+   the tightest gap should take the full 10 as well he handed the numbers over —
+   "you decide, whatever feels comfortable" — so the six values below are this
+   desk's, made under that.
+
+   NOT A FLAT +10 ON EVERY TOKEN, which is what was first asked for. A flat rise
+   takes the widest gap against the tightest from 36:7 to 46:17 — 5.1x down to
+   2.7x — so it opens the panel and FLATTENS it at the same time, and "these
+   belong together" stops reading differently from "these are separate". The six
+   values keep it at 4.4x while every seam still grows visibly. */
+/* ── the rhythms: the numbers under the floor, given names (card 66228) ────── */
+
+/* THE FLOOR ABOVE IS NOT THE RHYTHM, and handing a consumer the floor was the
+   whole problem. `--es-row-gap` answers 20 for all five gaps below alike; what
+   the storefront's Layers tree needs in order to "follow the shell's spacing"
+   is the RHYTHM — 38 between two settings against 11 inside one. Under the floor
+   those were bare literals, so the only way to follow them was to COPY them
+   into `efficient-shop/components/storefront-editor.css`: a second source of
+   truth for numbers this sheet was already the source of.
+
+   THE VALUES DID NOT CHANGE WHEN THEY WERE NAMED. Every one was the number
+   that was there before, moved and named; (g) asserted each still resolved to
+   what it resolved to, and (a) still read the scale off the sheet. Card 66301
+   is the first card to turn them, and it turned all six at once — which is what
+   naming them was for.
+
+   NAMES, NOT ARITHMETIC, for the reason this sheet already gives one rule down:
+   38 was measured and then re-scaled (cards 8802.d, 66301), it is not "20 plus
+   18" and never was "16 plus 12". `calc()` off the floor
+   would claim a relationship nobody decided; a name states the value and the
+   job it does.
+
+   WHAT A CONSUMER IS ACTUALLY BUYING is the pair at the end. `--es-rhythm-between`
+   and `--es-rhythm-within` are the two halves of the one rule that has to
+   survive being re-scaled: the gap INSIDE a thing stays plainly smaller than
+   the gap BETWEEN things, because that inside gap is the ONLY thing saying
+   which label owns which control. Card 66301 re-scaled all six and is the proof
+   the pair travels: 28:7 became 38:11, both up, the ratio held. A tree at 38px a
+   row would scroll forever, so a consumer is expected to scale these — and (g)
+   is what stops the two from drifting together while it does. */
+/* ⛔ CUSTOM PROPERTIES ONLY IN THIS BLOCK. Never a paint property.
+
+   `.es-editor` is not this package's own element — it is the class each editor
+   puts on ITS OWN chrome root, and the campaign designer puts it on a root that
+   lives INSIDE the admin portal's DOM (card 66024). A custom property here is
+   inert until something reads it; a `background`, a `padding`, a `font` —
+   anything that PAINTS — applies to that root the moment this sheet is
+   imported, in every editor that imports it.
+
+   Audited 2026-09-02 across every sheet here that opens an `.es-editor` block:
+   shell.css 67/67 custom, panel.css 11/11, menu.css 7/7 — zero paint in all
+   three. ⚠️ Nothing enforces it. If you are adding a declaration here, you are
+   the check. */
+.es-editor {
+  /* THE FLOOR (card 66206) — no row-to-row gap on this panel resolves below it. */
+  --es-row-gap: 20px;
+
+  /* THE RHYTHMS. All five are declared in THIS rule and not a second
+     `.es-editor` block: the panel has ONE root, and a second block would put
+     half the panel's spacing somewhere a reader — and the spec, which reads the
+     root by selector — would not look. */
+  /* between one group heading and whatever is above it */
+  --es-rhythm-group: 48px;
+  /* between a group heading and the first setting under it — closer, because
+     that setting belongs to that heading */
+  --es-rhythm-group-first: 24px;
+  /* BETWEEN two settings */
+  --es-rhythm-between: 38px;
+  /* between two one-line rows, which are one line tall and need less air */
+  --es-rhythm-between-tight: 26px;
+  /* WITHIN one setting: its label to its own control */
+  --es-rhythm-within: 11px;
+
+  /* ── THE CHIP'S OWN METRICS (card 66248) ───────────────────────────────────
+
+     These five were literals inside the chip rules until a SECOND component
+     had to wear the same chip. They are named for one reason, and it is not
+     tidiness: the segmented control's fit thresholds are ARITHMETIC OVER THEM.
+
+     Its words drop where the words stop fitting, and where that is depends on
+     the room the chrome takes before any word is drawn — two chip paddings, a
+     glyph, the gap after it, the gaps between chips and the track's own
+     padding. Card 66138 has already moved one of these once (the track's side
+     padding, 14px → 3px). A threshold holding its own copy of that number would
+     have gone stale that day and said nothing. Read from here, it moves with
+     the chip.
+
+     They are DECLARED lengths and not measurements: the chip is drawn from
+     these, so they are the source, not a reading of one. The one thing that
+     cannot be named here is the width of a WORD — see `.es-segs` below. */
+  --es-chip-pad-x: 8px;
+  --es-chip-icon: 16px;
+  --es-chip-icon-gap: 6px;
+  --es-track-pad: 3px;
+  --es-track-gap: 3px;
+}
+
+/* ── the tab strip: a segmented control ────────────────────────────────────── */
+
+/* The strip's own container context (card 8810), and the reason `SettingsTabs`
+   renders a wrapper at all.
+
+   The drop rules further down turn on the width of the PANEL, and `@container`
+   is the only thing that can ask for it. A media query asks the WINDOW, and the
+   window is the wrong box: the inspector is a column the merchant drags, so a
+   220px panel on a 2560px screen is the ordinary case, not an edge one — a
+   media query would answer for that panel with the width of the screen behind
+   it.
+
+   The context lives HERE rather than in a host's own panel rule so the shell is
+   self-contained: a host that never declares `container-type` would silently
+   pin the strip to one state with nothing to see and nothing to fail.
+
+   `.es-rail-fit` is the top-bar rail's column (`TopBarRail`), which reads the
+   word-fit rule below: its container is the left panel's own width. */
+.es-tabs-fit,
+.es-segs-fit,
+.es-rail-fit {
+  container-type: inline-size;
+  flex: none;
+}
+
+/* …EXCEPT IN THE ONE SLOT THIS PACKAGE HANDS CONSUMERS (card 66516).
+
+   `SettingsField` stacks its control into `.es-field-ctl`, and that slot is
+   `display: flex`. So `flex: none` above stops meaning "do not stretch" and
+   starts meaning "size to your own content" — and `container-type:
+   inline-size` is size containment on that axis, so this wrapper HAS no
+   content width to size to. The strip comes out at ZERO.
+
+   ⚠️ NEITHER DECLARATION ABOVE IS WRONG, WHICH IS WHY THIS IS AN EXCEPTION AND
+   NOT AN EDIT. The containment is what lets `100cqi` mean the strip's own
+   width for the word-drop arithmetic further down; `flex: none` is what keeps
+   the strip from stretching in the contexts it was written for. They collide
+   only here.
+
+   MEASURED, `tests/fixtures/field-slot-basis.html`, Chromium, before this rule:
+
+       panel   field content   strip in .es-field-ctl   strip in a block row
+       320px   320px           0px                      320px
+       220px   220px           0px                      220px
+
+   The block-row column is the control: it is where every one of these strips
+   lived until now — a consumer's own block row, where `flex: none` is inert
+   and the box fills the line. That is why this looked right for a year and
+   why it broke for the first consumer that took this package's own advice.
+
+   ⚠️ FOUND BY A PERSON LOOKING, NOT BY A GUARD. Card 66508 shipped 1198 green
+   checks over this: every button present, `aria-pressed` correct, exactly one
+   chip active, the glyph in its slot, `tsc` clean, the PR MERGEABLE. All of
+   that is true of a control 0px wide. Our checks ask whether markup EXISTS;
+   this one asks whether it OCCUPIES SPACE, which is the gap that let it ship.
+
+   `flex: 1 1 auto` rather than a percentage width: the slot is a flex row that
+   may hold a value readout or a second control beside the strip, and a
+   percentage would overflow it the day it does. `min-width: 0` because a flex
+   item's automatic minimum is its content size, and the containment above
+   makes that meaningless here — without it the strip cannot shrink below the
+   basis the parent gives it.
+
+   BOTH `-fit` WRAPPERS, though only the segmented one has a live consumer
+   today. Measured in the shop at the time of writing: 1845 custom fields
+   rendered, 68 draw a tab strip, 0 of them inside `.es-field-ctl`. But
+   `PanelTabs` already draws a strip AMONG the fields and is one refactor from
+   the slot, and the two wrappers share the declaration that causes this — a
+   rule that fixed one and left the other would be a trap wearing a fix. */
+.es-field-ctl > .es-tabs-fit,
+.es-field-ctl > .es-segs-fit {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* THE TRACK (card 66138). Lewis, looking at a real settings panel: the tab he
+   is NOT on does not invite a click — it does not even look like a button. He
+   was shown six treatments in `mockups/settings-tab-strip-options.html` and
+   picked B, the segmented control.
+
+   This REPLACES the underline strip, and with it card 8811's accent-tint ground
+   (see `.es-tab.is-active` below). The grey track is the part doing the work
+   Lewis asked for: it is what makes every segment look pressable, where a mark
+   under the chosen tab only ever made the chosen tab louder.
+
+   FULL WIDTH, no side inset. The old strip carried `padding: 0 14px` because
+   underline tabs must start inset from the panel edge. A track is a FILLED row,
+   and every other filled row here — `.es-group-head` at `width: 100%` — runs
+   the full width of the body's content box; a track inset 14px further than the
+   rows beneath it is visibly out of line. It is also worth 28px of room, which
+   is the difference between three segments fitting the shop's default panel and
+   not.
+
+   NOWRAP, unlike the strip it replaces. A segmented control is one row by
+   definition — a second row of track under the first is not a wrapped control,
+   it is two controls. The guarantee that no bucket is ever out of reach is
+   re-made out of different parts: segments that share the leftover space, and
+   the drop rules below. */
+.es-tabs,
+.es-segs {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--es-track-gap);
+  padding: var(--es-track-pad);
+  background: var(--es-track-bg);
+  border-radius: var(--es-row-radius);
+  flex: none;
+}
+
+/* A SEGMENT TAKES ITS OWN WIDTH, THEN SHARES WHAT IS LEFT.
+
+   `1 1 auto` and not `1 1 0`: equal segments were measured and are too
+   expensive. Every equal segment takes the width of the WIDEST label, and
+   "Content" is 85.36px at 12px/600, so three equal segments need a 267px track
+   and four need 355px — against the 281px the shop's default panel gives. With
+   natural widths the track still reaches both edges, and "Style" is not forced
+   to be as wide as "Content" to get there.
+
+   `box-sizing` for the same reason the switch sets it: this file assumes no
+   reset of the host's. */
+.es-tab,
+.es-seg {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  border: 0;
+  background: transparent;
+  border-radius: 6px;
+  padding: 6px var(--es-chip-pad-x);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--es-text-secondary);
+  white-space: nowrap;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--es-chip-icon-gap);
+  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
+}
+
+/* A quiet segment is READABLE, not faint. It was `--es-muted`, which on the new
+   grey track sits at about 4.3:1 and misses AA; this is about 8.9:1. The track
+   is what says "pressable" now, so the label no longer has to whisper to stay
+   out of the chosen tab's way. */
+.es-tab:hover:not(.is-active),
+.es-seg:hover:not(.is-active) { color: var(--es-text); }
+
+/* Keyboard focus, themed rather than left to the UA. Same ring as the switch,
+   so the panel answers a keyboard the one way. */
+.es-tab:focus-visible,
+.es-seg:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--es-accent-ring);
+}
+
+/* THE CHOSEN CHIP IS THE DARKEST THING IN THE ROW (card 66302).
+
+   IT WAS A RAISED WHITE CHIP, AND THAT WAS NOT A MISTAKE. Card 66138 put white
+   on the grey track with a soft lift, and Lewis picked that look himself from
+   six treatments. He picked it BY EYE, AT A WIDTH WHERE THE WORDS WERE STILL
+   THERE — which is the whole reason this is a revision and not a correction.
+
+   WHAT CHANGED IS THE CONDITION, TWICE.
+
+   First the words went. A four-tab strip is already wordless below 200px, and
+   the panel's drag band bottoms out at 181px, so that state is live in the
+   editor today; card 66246 then made the shop's Weight row show one word of
+   four at the DEFAULT panel and none at the narrow end. A chip that used to sit
+   beside a word became the only thing saying which option is set.
+
+   Then the second mark went, and nobody noticed. Card 66248 moved the strip
+   into this package and the quiet label darkened from the muted grey to
+   `--es-text-secondary`. That darkening is right on its own terms — it is card
+   66138's AA fix, 4.39:1 to 9.37:1 on the track — but it also cut the
+   chosen-vs-quiet GLYPH contrast from 3.67:1 to 1.72:1. The strip lost the one
+   state cue that was already above 3:1, and the change was described as
+   cosmetic when it merged.
+
+   So the raised white chip was left carrying the whole message alone, at
+   1.10:1 against its own track, where WCAG 1.4.11 asks 3:1 of anything
+   identifying a control's STATE.
+
+   WHY DARK AND NOT A RING. Four treatments were drawn and measured for Lewis;
+   two of the routes were closed by arithmetic before he saw them (darkening the
+   track drops the quiet label to 3.40:1 and fails AA; pushing the glyph delta
+   only reaches 3:1 by putting that label back where 66138 moved it FROM). Of
+   what was left, this is the one that survives the DISABLED state:
+   `.es-segs[data-disabled]` fades the strip to 0.5 over the panel, and a ring
+   at 4.39:1 composites down to 1.89:1 while this holds 3.24:1. A cue that only
+   works while the control is live is a cue with a hole in it.
+
+   ⚠️ THE LIFT STAYS, AND IT IS NO LONGER THE MESSAGE. `--es-raised-shadow`
+   still seats the chip on the track. What it must not go back to being is the
+   thing telling the two states apart — a shadow is not a colour, so no
+   contrast ratio can score it, and that is exactly how this got to 1.10:1
+   without any guard noticing. `tests/panel-chip-contrast.test.ts` pins the
+   RATIO and not this colour, so a better answer is free to replace it. */
+.es-tab.is-active,
+.es-seg.is-active {
+  background: var(--es-text);
+  color: var(--es-on-accent);
+  box-shadow: var(--es-raised-shadow);
+  border-radius: 6px;
+}
+
+/* Focused AND chosen: keep the lift, or the chip drops flat the moment a
+   keyboard reaches it. */
+.es-tab.is-active:focus-visible,
+.es-seg.is-active:focus-visible {
+  box-shadow: var(--es-raised-shadow), 0 0 0 3px var(--es-accent-ring);
+}
+
+.es-tab-badge {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--es-accent);
+  color: var(--es-on-accent);
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* The glyph in the chip: 16px of drawing, the same size a field's icon takes,
+   standing in an 18px box.
+
+   DRAWN AT EVERY WIDTH, unlike the strip this replaces, where the glyph only
+   appeared once the words started failing. In a segmented control the glyph is
+   part of the chip — it is what the chip still says when its word has gone, and
+   mockup B draws it in both states.
+
+   The 18 is not a second opinion about the glyph — it is the WORD's own line
+   box (12px/600 in `--es-font` lays out an 18px line). Give the box that height
+   and a chip is the same height whether it is showing a word, a glyph, or both,
+   so the track keeps one height as the merchant drags the panel past a
+   threshold. It is also what keeps a badge from moving anything: the badge is
+   16px, so it is never the tallest thing in the chip.
+
+   `flex: none` because a glyph that shrinks is a squeezed segment in a smaller
+   box. */
+.es-tab-icon,
+.es-seg-icon {
+  display: inline-flex;
+  width: var(--es-chip-icon);
+  height: 18px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.es-tab-icon svg,
+.es-seg-icon svg { width: var(--es-chip-icon); height: var(--es-chip-icon); display: block; }
+
+/* ── where the word stops fitting ──────────────────────────────────────────── */
+
+/* MEASURED in Chromium, `tests/fixtures/tabs-segmented-fit.html`, against these
+ * stylesheets and the shop's four buckets Content / Media / Style / Layout, by
+ * EDGE GEOMETRY — the right edge of the last segment against the right content
+ * edge of the track. Not `scrollWidth`: a flex button reports a `scrollWidth`
+ * equal to its `clientWidth` while its own content is drawn outside it, so it
+ * says "fits" about a strip that visibly does not.
+ *
+ * Smallest container width with nothing drawn past the track edge:
+ *
+ *     tabs   words   glyph + active word   glyphs only
+ *      2     168px          126px              73px
+ *      3     239px          161px             108px
+ *      4     320px          196px             143px
+ *
+ * THE GLYPHS-ONLY COLUMN SAID 120px FOR BOTH 2 AND 3 TABS UNTIL CARD 66248,
+ * and it was wrong twice over. `tabs-segmented-fit.html` searched upward from
+ * 110px, so it could never have reported anything smaller than 110 whatever the
+ * truth was — and 120 is not even that, so a second hand had been on it. The
+ * truth is arithmetic and there is nothing to measure: a chip with no word is a
+ * glyph in its padding, so the strip is `n × 32px` plus `(n − 1)` gaps plus the
+ * track's own padding — 73, 108, 143. The 4-tab cell was right by luck of being
+ * above the floor. Re-measured with the search starting at 40px, all three
+ * agree with the arithmetic to the pixel; `(d)` now pins them to it, so the
+ * cell cannot drift from the sheet again.
+ *
+ * The drag band gives containers from 181px (a 220px panel, the minimum) to
+ * 281px (a 320px panel, the default — the panel minus 28px of body padding
+ * minus the 11px reserved scrollbar gutter). Read against it:
+ *
+ *   · TWO tabs never drop a word. 168px is under the 181px floor, so both words
+ *     survive the whole band — and this is the case Lewis is looking at.
+ *   · THREE tabs carry their words down to 239px.
+ *   · FOUR tabs need 320px, which the band never reaches, so a four-bucket
+ *     section is glyph-plus-one-word at the default panel, and below 196px even
+ *     that one word stops fitting.
+ *
+ * WHY THE RULES ARE KEYED ON THE TAB COUNT. With natural widths, whether the
+ * words fit is a question about the SUM of the labels, so the answer moves with
+ * how many buckets a section has. A width-only rule would have to answer for
+ * the worst case — four tabs — and would then strip the word off a TWO-tab
+ * strip at the default panel width. That is the exact bug this card exists to
+ * remove, so it cannot be the fix for it.
+ *
+ * Only `.has-icon` is ever touched. A tab with no glyph has nothing to fall
+ * back to, so it keeps its word at every width — a button holding neither word
+ * nor glyph is not a narrower segment, it is an empty one. */
+
+/* THREE OR MORE, under 240px: the words on the tabs he is not reading go. The
+   NAME does not go with them — it is still on the button as `title` and
+   `aria-label`, in every state. */
+@container (width < 240px) {
+  .es-tabs:has(.es-tab:nth-child(3)) .es-tab.has-icon:not(.is-active) .es-tab-word { display: none; }
+}
+
+/* FOUR OR MORE: a fourth label is another 78px of track, so the same words stop
+   fitting a long way sooner. */
+@container (width < 320px) {
+  .es-tabs:has(.es-tab:nth-child(4)) .es-tab.has-icon:not(.is-active) .es-tab-word { display: none; }
+}
+
+/* FOUR OR MORE at the narrow end: the last word goes as well, and the strip is
+   four glyphs on a track. It reads — the track and the chips are what say
+   "these are buttons", which is more than the bare glyphs it replaces ever
+   said. */
+@container (width < 200px) {
+  .es-tabs:has(.es-tab:nth-child(4)) .es-tab.has-icon.is-active .es-tab-word { display: none; }
+}
+
+/* ── the segmented control: the same chip, a different promise ─────────────── */
+
+/* WHY A SECOND COMPONENT AND NOT A SECOND CALLER OF `SettingsTabs` (card 66248).
+   `SettingsTabs` is a TABLIST, and `role="tab"` is the promise that pressing a
+   chip switches a panel. The rows this control is for switch nothing: Weight,
+   Case and Alignment WRITE A VALUE and stay where they are. Pointing the tab
+   strip at them would make three controls that are correct today start
+   announcing "tab, 1 of 4, selected" over nothing. Everything a merchant SEES
+   is shared above — one chip, one track, one raised-chip mark — and only the
+   promise differs. It is the split this sheet already made between
+   `.es-group-head` and `button.es-group-head`.
+
+   ── WHY THE @container TIERS ABOVE ARE NOT INHERITED ────────────────────────
+
+   Those three tiers are keyed on the tab COUNT, and that works for the strip
+   they were measured for because the shell KNOWS its four words: Content /
+   Media / Style / Layout. It cannot work here, and the reason is arithmetic,
+   not taste. MEASURED in Chromium, `tests/fixtures/segmented-fit.html`, the
+   width at which each row's words stop fitting:
+
+       row                                       options   words fit from
+       Case       Normal / Uppercase / Lowercase       3        296px
+       Alignment  Left / Centre / Right                3        221px
+
+   Two three-option rows, 75px apart. One threshold at three options is wrong
+   for one of them whichever number is picked — and the panel drags between
+   181px and 281px, so the wrong one is wrong ON SCREEN: at the default 281px
+   panel Alignment's words fit and Case's do not.
+
+   Whether the words fit is a question about the SUM OF THE LABELS, which is
+   what this sheet already says out loud above, and a count is only ever a
+   stand-in for it. The stand-in holds while one strip's words are known and
+   breaks the moment a second strip brings its own.
+
+   ── SO THE THRESHOLD IS COMPUTED, PER STRIP ─────────────────────────────────
+
+   Everything in that sum except the words is the CHIP'S, and named on the
+   panel root above. Only the words belong to the consumer. So the strip
+   declares its own two measurements and this sheet adds the chrome:
+
+       words-from  = the track + every chip with its glyph, its gap and its word
+       chosen-from = the track + every chip's glyph, plus one word — the widest,
+                     because the merchant may be on any option and the strip may
+                     not overflow on the one that costs most
+
+   WHY NOT `@container` HERE. A container query condition takes a literal
+   length; it cannot read a custom property, so it cannot ask a question whose
+   answer differs per strip. Container query UNITS can: `100cqi` is the panel's
+   own width, in a place `calc()` can use it. So the comparison is done in the
+   property instead of in the query — subtract the threshold from the width and
+   scale hard. Above the threshold that is a large positive length and the word
+   is unlimited; below it the result is negative, and `max-width` clamps a
+   negative to zero, which is the word gone. Same two tiers as the strip above,
+   measured continuously instead of at three fixed steps.
+
+   WHY NOT ESTIMATE THE WORDS FROM THEIR LETTERS, and skip the measuring. The
+   chip's font is `--es-font`, which resolves to SF on a Mac, Segoe UI on
+   Windows and something else again elsewhere — one shipped table of letter
+   widths would be wrong on two platforms out of three. Measured against these
+   labels the guess is out by up to 7% either way, which is 12px on a 170px sum:
+   enough to drop a word that fits, or keep one that does not.
+
+   WHY NOT MEASURE IT AT RUNTIME. That is a `ResizeObserver` and an effect, and
+   this module is a hook-free leaf a server component can import. The host could
+   do it, but then every consumer writes its own and they drift — which is the
+   thing this package exists to stop. */
+
+/* ── WORD FIT: ONE RULE FOR EVERY STRIP WHOSE WORDS ARE THE HOST'S ─────────
+
+   Two strips read it: this segmented control, and the top-bar rail
+   (`efficient-easel/chrome` `TopBarRail`, owner 2026-09-18: "the rule must be the
+   same as the top tabs of the right settings panel"). Both have the tab strip's
+   THREE states — every word; the glyphs plus the chosen word; glyphs only —
+   and both have words the shell has never seen, so both need the computed
+   threshold above rather than the tab strip's count-keyed tiers.
+
+   It is written ONCE, here, with neutral names. Each strip declares its own
+   chrome as four inputs, and the component hands in the three measured ones
+   (`wordFitVars`, `src/fit/wordFit.ts`):
+
+       --es-fit-chip       one button with its glyph and no word
+       --es-fit-word-gap   glyph to word
+       --es-fit-gap        between two buttons
+       --es-fit-ends       the strip's own inset at EACH end
+       --es-fit-count · --es-fit-labels · --es-fit-widest     measured
+
+       words-from  = 2 × ends + (count − 1) × gap + count × (chip + word-gap) + labels
+       chosen-from = 2 × ends + (count − 1) × gap + count × chip + word-gap + widest
+
+   NO MEASUREMENT, NO THRESHOLD. `is-measured` is the component's own answer to
+   whether it was given a `fit`, so the arithmetic below is reached by a strip
+   that has one and never by a strip that does not. What an unmeasured strip
+   does is the strip's own call: a segmented control keeps every word (there is
+   nowhere honest to drop one), a top-bar rail stays icon-only (always fits). */
+.es-segs {
+  --es-fit-chip: calc(2 * var(--es-chip-pad-x) + var(--es-chip-icon));
+  --es-fit-word-gap: var(--es-chip-icon-gap);
+  --es-fit-gap: var(--es-track-gap);
+  --es-fit-ends: var(--es-track-pad);
+}
+
+.es-segs.is-measured,
+.es-rail-row.is-measured {
+  --es-fit-strip: calc(2 * var(--es-fit-ends) + (var(--es-fit-count) - 1) * var(--es-fit-gap));
+
+  --es-fit-words-from: calc(
+    var(--es-fit-strip) +
+    var(--es-fit-count) * (var(--es-fit-chip) + var(--es-fit-word-gap)) +
+    var(--es-fit-labels)
+  );
+  --es-fit-chosen-from: calc(
+    var(--es-fit-strip) +
+    var(--es-fit-count) * var(--es-fit-chip) +
+    var(--es-fit-word-gap) +
+    var(--es-fit-widest)
+  );
+}
+
+/* THE ROOM LEFT OVER, once this strip's own words are paid for. Positive and
+   large while they fit, negative below — and the two properties that read it
+   both clamp a negative to zero, which is what makes it a switch rather than a
+   width. The 10000 is what makes the change a step and not a fade: without it
+   the last pixel before the threshold would draw a one-pixel word.
+
+   `100cqi` stays a unit until a word USES it, so it is the width of the
+   container around that word — the strip's own `-fit` wrapper. */
+.es-segs,
+.es-rail-row.is-measured {
+  --es-fit-room-all: calc((100cqi - var(--es-fit-words-from, 0px)) * 10000);
+  --es-fit-room-chosen: calc((100cqi - var(--es-fit-chosen-from, 0px)) * 10000);
+}
+
+/* The word is CLIPPED to nothing rather than `display: none`, because the
+   switch has to be a length for `max-width` to clamp it. Nothing is lost by
+   it: the label is on the button as `title` and `aria-label` in every state, so
+   the name a screen reader reads never depended on the span being drawn. */
+.es-seg-word,
+.es-rail-row.is-measured .es-rail-word {
+  overflow: hidden;
+  max-width: var(--es-fit-room-all);
+}
+
+/* THE CHOSEN SEGMENT KEEPS ITS WORD LONGER — the second tier, and the same one
+   the tab strip drops to. A track of bare glyphs still reads, because the track
+   and the chips are what say "these are buttons"; a track that also still says
+   which value is set reads better, and it costs one word. On the rail "chosen"
+   is the button whose panel is open. */
+.es-seg.is-active .es-seg-word,
+.es-rail-row.is-measured .es-rail-btn.is-active .es-rail-word { max-width: var(--es-fit-room-chosen); }
+
+/* THE GAP GOES WITH THE WORD IT SEPARATES. The chip's `gap` is a flex gap, and
+   a flex gap does not care that the word is now zero wide — it would leave 6px
+   of nothing between the glyph and the panel edge and put every glyphs-only
+   strip 6px per chip over its real width. So the segment spends the gap as the
+   word's OWN margin and switches it with the same room. The tab strip is
+   untouched and keeps the flex gap, which is right there: its word is
+   `display: none`, so the gap goes with the element, and a tab also has a badge
+   on the other side of that word for the gap to separate. */
+.es-seg { gap: 0; }
+.es-seg.has-icon .es-seg-word,
+.es-rail-row.is-measured .es-rail-word { margin-left: clamp(0px, var(--es-fit-room-all), var(--es-fit-word-gap)); }
+.es-seg.has-icon.is-active .es-seg-word,
+.es-rail-row.is-measured .es-rail-btn.is-active .es-rail-word { margin-left: clamp(0px, var(--es-fit-room-chosen), var(--es-fit-word-gap)); }
+
+/* ── a segment out of force (card 66303; the RULE is card 66216's) ──────────
+
+   The setting still EXISTS and still shows the merchant's saved answer. Another
+   setting has simply taken the decision away — the Header's "Text colour at the
+   top" under a pinned Background, which cannot be transparent. DIMMED, NEVER
+   HIDDEN: a control that disappears reads as a feature that was removed, and
+   leaves the merchant no way to see what to change to get it back.
+
+   THE STATE IS ON THE BUTTONS, and `SettingsSegmented` renders it as their own
+   `disabled` rather than as a fade a host paints over them. A faded parent
+   leaves every segment focusable and announcing as ENABLED, which is the defect
+   the 2026-08-06 audit and card 66034 closed; it is also why the prop had to
+   come here at all, since nothing outside this component owns those buttons.
+
+   `--es-disabled` is the shell's existing token for exactly this state, already
+   worn by the drill row's quiet glyph. Nothing here is a literal, and nothing
+   here removes anything: the track keeps its border and the pressed chip keeps
+   its lift, so the strip still READS as a strip with an answer in it. */
+.es-seg:disabled { cursor: not-allowed; color: var(--es-disabled); }
+
+/* The chosen one stays the loudest thing on the track. It is still the
+   merchant's answer — a pressed chip faded to the same grey as the ones beside
+   it stops saying which answer that was.
+
+   ⚠️ THIS COLOUR BELONGS TO THE CHIP'S GROUND, NOT TO THE TRACK (card 66302).
+   It was `--es-text-secondary`, which was right while the chip was white:
+   10.31:1 on it. The moment the chip went dark that same rule drew
+   `--es-text-secondary` on `--es-text` — 1.72:1, an unreadable label on a
+   control that had just been made MORE visible. Nothing about the rule changed; what it sat on moved underneath
+   it. So it reads `--es-on-accent` for the same reason the enabled chip does,
+   and the strip says which option is out of force through the track's fade and
+   its quiet siblings rather than by dimming the one word still worth reading. */
+.es-seg:disabled.is-active { color: var(--es-on-accent); }
+
+/* And none of them answers the pointer any more: the hover rule above would
+   otherwise keep lighting a segment that cannot be chosen. */
+.es-seg:disabled:hover:not(.is-active) { color: var(--es-disabled); }
+
+/* THE WHOLE CONTROL, when every option went at once — one statement instead of
+   three identically faded chips. The track is the part that says "these buttons
+   are one control", so it is the right place to say the control is not in force.
+   A single option out of force leaves the track alone, because the strip still
+   is. */
+.es-segs[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+
+/* ── a group: the soft pill row that folds ─────────────────────────────────── */
+
+/* WAS 6px, AND THE 6 NEVER APPLIED (card 66203). `.es-group` is a plain div, so
+   this margin is adjoining `.es-group-head`'s own 36px below and the two
+   COLLAPSE to the larger — measured in Chromium against these stylesheets, two
+   stacked groups sit 36.00px apart, not 6. The rule was dead as written.
+
+   It is kept, at the floor, because it is a landmine rather than a non-issue: a
+   host that gives `.es-group` a border or padding through `className` stops the
+   collapsing, and then the 6 is real and is the tightest gap in the panel. At
+   `var(--es-row-gap)` the worst case is the floor instead. */
+.es-group + .es-group { margin-top: var(--es-row-gap); }
+
+/* ONE pill, two elements. `SettingsGroup` renders a <button> that folds;
+   `SettingsGroupHead` renders a heading that folds nothing, because Puck's
+   inspector is a flat sibling list and a heading there cannot wrap the rows it
+   heads. Everything a merchant SEES is shared here; the press — the pointer
+   and the hover tint — is scoped to the button below, so the heading never
+   offers a press it cannot honour.
+
+   `box-sizing` for the same reason the switch sets it: this file assumes no
+   reset of the host's, and `width: 100%` plus 22px of padding would otherwise
+   run the pill past the panel. */
+.es-group-head {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  text-align: left;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--es-text);
+  background: var(--es-hover);
+  border-radius: var(--es-row-radius);
+  padding: 8px 11px;
+  /* A heading needs more air above it than the settings it heads have between
+     them (38px), or it reads as one more row. Floored on `--es-row-gap` so it
+     rises with the rest of the panel (card 66203). */
+  margin: max(var(--es-row-gap), var(--es-rhythm-group)) 0 0;
+}
+
+/* THE QUIET TIER (card 66300) — a heading one rung under the pill.
+   NO GROUND AND NO RULE, which is the whole point of it. The pill separates
+   itself from the settings around it with a fill; this separates itself with
+   case and colour, so the two can sit in one panel without competing. And a
+   heading takes no hairline under it: a rule there separates a heading from the
+   rows it heads, which is the opposite of what a heading is for. The storefront
+   ruled BOTH its tiers that way and the owner's words on 2026-08-31 were
+   "these lines, I still find them annoying to look at".
+
+   THE TYPE IS NOT INVENTED HERE. It is `.sf-field-group` and `.sf-group-label`
+   from `efficient-shop`, which are the same look to the decimal, hand-rolled in
+   two panels of one editor. Owning it here is what stops a third copy.
+
+   FLUSH, not inset. `.es-field` has no horizontal padding, so a heading that
+   started 11px in would sit to the RIGHT of the rows it heads and read as those
+   rows being outdented from it. The pill's text is inset only because a pill has
+   padding; this has no such excuse.
+
+   ONE NOTCH UNDER THE PILL IN AIR AS WELL AS IN TYPE. `--es-rhythm-between`
+   rather than the pill's `--es-rhythm-group`, so the tiers stay in order when a
+   reader is skimming rather than reading. Written as NAMES: every one of these
+   tokens grew between 0.20.0 and 0.23.0 (group 36->48, between 28->38,
+   group-first 14->24) and the ladder survived untouched because it reads names.
+   Pinned numbers would have crossed. */
+.es-group-sub {
+  box-sizing: border-box;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--es-muted);
+  margin: max(var(--es-row-gap), var(--es-rhythm-between)) 0
+          max(var(--es-row-gap), var(--es-rhythm-group-first));
+}
+
+/* Directly under a pill it belongs TO that pill, so it does not take a second
+   helping of the air the pill already put above itself. */
+.es-group-head + .es-group-sub { margin-top: max(var(--es-row-gap), var(--es-rhythm-group-first)); }
+
+button.es-group-head {
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+button.es-group-head:hover { background: var(--es-chip-bg); }
+
+.es-group-count {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--es-accent);
+  color: var(--es-on-accent);
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* The sign is drawn from aria-expanded so the open state has ONE home. */
+.es-group-sign {
+  margin-left: auto;
+  width: 16px;
+  text-align: center;
+  color: var(--es-muted);
+  font-size: 14px;
+  line-height: 1;
+  flex: none;
+}
+
+.es-group-head[aria-expanded='true'] .es-group-sign::before { content: '−'; }
+.es-group-head[aria-expanded='false'] .es-group-sign::before { content: '+'; }
+
+/* `hidden` on the body is the fold; this only stops a flex/grid parent from
+   overriding the attribute's own display:none. */
+.es-group-body[hidden] { display: none; }
+/* The first setting under a head sits CLOSER than the settings below it do to
+   each other — it belongs to that head, and 38px would cut it loose.
+
+   AND IT IS LIVE FOR THE FIRST TIME (card 66301). It declared 14 against a 16px
+   floor, so it has never once been 14 on screen — the floor answered every
+   time, and card 66206 measured that very move (14 → 16) and wrote it down as
+   the floor working, which it was. At 24 over a 20px floor the declared number
+   is finally the visible one, so this seam grows 16 → 24 rather than the 14 →
+   24 the file appears to say. `tests/panel-layout.test.ts` (h) is what turns a
+   floored rhythm into a failure instead of a footnote. */
+.es-group-body > .es-field:first-child { margin-top: max(var(--es-row-gap), var(--es-rhythm-group-first)); }
+
+/* ── one setting ───────────────────────────────────────────────────────────── */
+
+/* 38 IS NOT A THIRD OPINION ABOUT THE FLOOR. A setting is TWO lines — a label
+   row and its control — held together by the 11px between them, and that 11px
+   is the only thing saying which label owns which control. The gap between
+   settings has to be plainly larger than the gap inside one or the panel stops
+   being a list of settings and becomes a list of loose parts. The pair was
+   measured at 28 and 7 and approved from mockups (card 8802.d) — 20 was tried
+   there and was too tight — and re-scaled together to 38 and 11 (card 66301),
+   which is the same rule with more air, not a new one.
+
+   Floored, not replaced, and not `calc()`: 38 was measured and then re-scaled,
+   it is not "20 plus 18", so arithmetic off the token would claim a
+   relationship nobody decided. */
+.es-field { margin-top: max(var(--es-row-gap), var(--es-rhythm-between)); }
+
+.es-field-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* THE ONE THAT SAYS WHICH LABEL OWNS WHICH CONTROL. Named so a consumer can
+     read it (card 66228) — it is half of the rule, and the half that is easiest
+     to lose when someone re-scales the other half. */
+  margin-bottom: var(--es-rhythm-within);
+  min-height: 16px;
+}
+
+.es-field-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.es-field-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  color: var(--es-icon);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.es-field-icon svg { width: 16px; height: 16px; }
+
+.es-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--es-muted);
+}
+
+.es-field.is-changed .es-field-label { color: var(--es-accent-text); }
+
+.es-field-value {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--es-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.es-field-ctl {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.es-field-hint {
+  margin: 7px 0 0;
+  padding-left: 24px;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--es-muted);
+}
+
+/* A boolean row is ONE line (card 8801, Option A). The switch rides the label
+   line in the `action` slot, so there is no control row under it — and with no
+   control row, the label line's 7px bottom margin would be a gap to nothing.
+
+   A one-line row is one line tall, so it needs less air above it than a
+   two-line setting does — 26, not 38 — and it is floored on the token for the
+   same reason everything else here is (card 66203).
+
+   IT TIED WITH THE FLOOR UNTIL NOW (card 66301). At 16 against a 16px floor
+   nothing was wrong on screen, but the sheet could not tell you which of the
+   two numbers you were reading, and moving either one alone would have moved
+   nothing. 26 over 20 puts it plainly on its own number. */
+.es-field.is-inline { margin-top: max(var(--es-row-gap), var(--es-rhythm-between-tight)); }
+.es-field.is-inline .es-field-head { margin-bottom: 0; }
+
+/* ── the switch: one yes-or-no shape, both editors ─────────────────────────── */
+
+.es-switch {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  flex: none;
+  position: relative;
+  width: 34px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--es-toggle-off);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+/* The knob. `box-sizing` is load-bearing, not tidiness: the locked knob below
+   takes a 1px border, and under content-box that border would grow it to 18px
+   and eat the 2px gap the whole shape is built on. */
+.es-switch::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--es-knob);
+  /* The knob has to lift off the track, and the shadow is a plain token on
+     purpose. A softer mix reads slightly better, but if color-mix() ever fails
+     to parse the WHOLE declaration drops and the knob goes flat with no
+     warning — not a risk worth carrying in a leaf both editors render
+     thousands of times for the sake of a 1px shadow. */
+  box-shadow: 0 1px 2px var(--es-input-border);
+  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
+}
+
+/* On is the accent — the same blue as an active tab, so the panel keeps ONE
+   accent. The travel is 14px: 34 track − 16 knob − 2 gap − 2 gap. */
+.es-switch[aria-checked='true'] { background: var(--es-accent); }
+.es-switch[aria-checked='true']::after { transform: translateX(14px); }
+
+.es-switch:hover:not(:disabled) { filter: brightness(0.96); }
+
+.es-switch:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--es-accent-ring);
+}
+
+/* Held down: the knob stretches the way a physical one would.
+
+   ON, it must stretch LEFT. The knob is 16px at translateX(14px), so growing it
+   to 19px in place would put its right edge at 2 + 14 + 19 = 35px inside a 34px
+   track and poke it past the round end. Pulling the travel back to 11px lands
+   the right edge on 32 and keeps the 2px gap on both sides. */
+.es-switch:active:not(:disabled)::after { width: 19px; }
+.es-switch[aria-checked='true']:active:not(:disabled)::after { transform: translateX(11px); }
+
+/* Locked. Still readable as on or off, but flat and grey, and the knob trades
+   its shadow for a hairline so it does not look pressable. */
+.es-switch:disabled { background: var(--es-divider); cursor: not-allowed; }
+.es-switch:disabled[aria-checked='true'] { background: var(--es-input-border); }
+.es-switch:disabled::after { box-shadow: none; border: 1px solid var(--es-divider); }
+
+/* ── a drill-in row: name, preview, chevron (card 8819) ────────────────────── */
+
+/* The row a section lists a text part as. Pressing it drills the inspector down
+   a level to that part's own editor.
+
+   A FULL-WIDTH LIST ROW, not the raised pill a group's head is. These stack into
+   a list at the bottom of the section panel: flat rows, a quiet hover tint, no
+   chip elevation.
+
+   ⚠️ THEY ARE SEPARATED BY AIR, NOT BY INK (card 66350). Up to 0.29.0 a hairline
+   was drawn between adjacent rows, `.es-drill + .es-drill`. The owner asked for
+   the settings panel's divider lines to go, repeatedly; card 66334 removed every
+   one the storefront itself draws, and this was the largest source left that the
+   shop could not reach, because it lives here. Sixteen painted lines in one
+   editor, measured. The shop overrode it locally in the meantime, which made
+   this package and its consumer two sources of truth for one line — this
+   deletion is what lets that override go.
+
+   The air between rows does not change with it. It was never the hairline's; it
+   is each row's own padding, on its own side of the seam.
+
+   `box-sizing` for the same reason the switch and the group head set it: this
+   file assumes no reset of the host's, and `width: 100%` plus the padding would
+   otherwise run the row past the panel. */
+.es-drill {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 0;
+  text-align: left;
+  font: inherit;
+  background: transparent;
+  /* THE DRILL LIST SPENDS ITS ROW GAP HERE, AS PADDING, AND THAT IS DELIBERATE
+     (card 66203). The rows' boxes touch and nothing between them adds a margin,
+     so the air a merchant sees is each row's own vertical padding, on its own
+     side of the seam. That was true when a hairline sat on the seam and it is
+     true now that none does — card 66350 removed the INK and moved no spacing,
+     so every number below still stands as its card recorded it. MEASURED in
+     Chromium against these stylesheets (`tests/fixtures/panel-row-spacing.html`):
+
+       token  above the seam  below it  word to word  recorded by
+                                                   (each row taken while the
+                                                    hairline was still drawn)
+         10px      11.40px     12.00px     23.40px      card 66203
+         16px      17.40px     18.00px     35.40px      card 66206
+         16px      17.39px     17.00px     34.39px      card 66301
+         20px      21.39px     21.00px     42.39px      card 66301
+
+     TWO ROWS FOR 16px, AND THEY DISAGREE BY A PIXEL. 66301's pair was taken in
+     one run of Chromium 124 (zenika/alpine-chrome) so its two rows compare; the
+     earlier rows are left as the cards recorded them rather than overwritten,
+     because the difference is the engine and the font it had, not this sheet.
+     Read a row against another row from the same card, never across cards.
+
+     THIS SEAM MOVES AT TWICE THE TOKEN'S RATE, and it is the only one that
+     does: both rows spend the gap, so +4 on the dial buys +8 of air. Under the
+     floor alone it was also the ONLY place raising the token moved a measured
+     distance rather than a declared one — every other seam was held by a bigger
+     rhythm — which is why it is the row Lewis was looking at when he asked for
+     card 66206. Card 66301 moves the rhythms too, so it is no longer alone.
+
+     A MARGIN WOULD STILL BE THE WRONG FIX, and the reason outlived the line it
+     was first written about. Adjacent vertical margins COLLAPSE, so spending the
+     gap that way makes the floor something two rows negotiate rather than
+     something each row owns on its own side. So the gap stays padding — it just reads the token now, which is the whole point: before
+     this, raising the panel's rhythm moved every other row and left the drill
+     list exactly where it was. */
+  padding: var(--es-row-gap) 11px;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.es-drill:hover { background: var(--es-hover); }
+
+/* An INSET ring, unlike the switch's and the tab's outset one: a full-width row
+   has neighbours hard against its edges, and an outset ring would be clipped by
+   the row above and below it. */
+.es-drill:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--es-accent-ring);
+}
+
+/* The two lines, stacked, and allowed to shrink so the preview can ellipsise
+   instead of shoving the chevron off the row. */
+.es-drill-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.es-drill-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--es-text-strong);
+}
+
+/* The preview is one line, clipped. It never wraps: a part's copy can be a
+   paragraph, and a row that grows to fit it stops being a row. */
+.es-drill-preview {
+  font-size: 11px;
+  color: var(--es-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* A part with no place on the page — an identifier the eye never draws. Quiet
+   and italic, so it reads as a note about the part rather than as its copy. */
+.es-drill-preview.is-offpage {
+  font-style: italic;
+  color: var(--es-disabled);
+}
+
+/* The status glyph (the "hidden on the page" eye). Not `aria-hidden` here — the
+   host owns its meaning and names it; this only places it. */
+.es-drill-status {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  color: var(--es-muted);
+}
+
+/* The chevron is drawn from CSS `content`, the way the group sign is: it is pure
+   direction, carries no text of its own, and stays out of the accessible name. */
+.es-drill-chev {
+  flex: none;
+  width: 16px;
+  text-align: center;
+  color: var(--es-muted);
+  font-size: 16px;
+  line-height: 1;
+}
+
+.es-drill-chev::before { content: '\203A'; }
+
+@media (prefers-reduced-motion: reduce) {
+  .es-tab,
+  .es-seg,
+  /* `button.` and not `.es-group-head`: the transition it cancels is declared
+     on `button.es-group-head`, and a plainer selector would lose to it. */
+  button.es-group-head,
+  .es-drill,
+  .es-switch,
+  .es-switch::after { transition: none; }
+}
+
+/* ── SettingsPlacement — the 3×3 position grid ─────────────────────────────
+   One control for two questions a merchant asks the same way: which part of a
+   cropped picture stays in view, and where on the thing behind it a block sits.
+   Both are one of nine positions, and both want the corner PRESSED.
+
+   Promoted out of efficient-shop (`.sf-focal`) the day its own rule fired —
+   card 66189 wrote "the day a second section wants it, that is the card that
+   promotes it"; 66214 declined it early and said why; the sections that hold
+   boxes take it past six callers. The values below are the shop's, token for
+   token, so every existing caller draws exactly what it drew: the only change
+   is that `--sf-*` aliases have become the `--es-*` names they always aliased. */
+.es-placement {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 4px;
+  width: 96px;
+  height: 96px;
+  padding: 4px;
+  background: var(--es-track-bg);
+  border: 1px solid var(--es-input-border);
+  border-radius: 9px;
+}
+.es-placement-cell {
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.12s;
+}
+.es-placement-cell:hover { background: var(--es-hover); }
+/* The dot is the whole of the cell's state: a lit cell grows it and paints it
+   the accent. Size and colour move together so the chosen square reads at a
+   glance and still reads for someone who cannot separate the two colours. */
+.es-placement-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--es-muted);
+  opacity: 0.5;
+  transition: transform 0.12s, background 0.12s, opacity 0.12s;
+}
+.es-placement-cell:hover .es-placement-dot { opacity: 0.85; }
+/* ⚠️ THE CHOSEN CELL IS THE PANEL'S CHIP, NOT THE SHOP'S TINT — and that is a
+   VISIBLE change to the control the shop ships today. `.sf-focal` marked its
+   chosen square with `--sf-accent-tint` and a bigger accent dot; that is card
+   8811's answer, which cards 66138 and 66302 replaced everywhere else in this
+   panel. The strip tells the chosen chip apart by being the DARKEST thing in
+   the row on a grey track, and a nine-square asks the identical question —
+   which one am I on — so it gets the identical answer. Two answers to one
+   question, one panel apart, is the thing this package exists to prevent, and
+   `panel-layout.test.ts` bans the tint token package-wide to keep it that way.
+   The dot inverts with the ground, or it disappears into it. */
+.es-placement-cell.is-active {
+  background: var(--es-text);
+  box-shadow: var(--es-raised-shadow);
+}
+.es-placement-cell.is-active .es-placement-dot {
+  background: var(--es-on-accent);
+  opacity: 1;
+  transform: scale(1.5);
+}
+/* A position the caller has closed. It keeps its square — nine that became
+   eight would read as a broken control — and stops answering the pointer; the
+   reason is on the button's `title`. */
+.es-placement-cell.is-off { cursor: default; }
+.es-placement-cell.is-off:hover { background: transparent; }
+.es-placement-cell.is-off .es-placement-dot { opacity: 0.22; }
+/* A cell that draws a GLYPH instead of its dot — the Scrolling Bar's
+   `Scroll direction`, where four live cells mean a direction of travel and a
+   dot cannot say which way. It follows the cell through every state the dot
+   does, or the chosen square goes dark and the arrow on it stays muted and
+   disappears into the ground it is drawn on.
+   13px, sized against the CELL and not against the settings column: a cell is
+   26.67px across (96px box, 3×3, gap 4, padding 4) and the dot it stands in for
+   is 7px, so 13px reads as a direction without crowding the 6px cell radius. */
+.es-placement-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--es-muted);
+  opacity: 0.5;
+  transition: color 0.12s, opacity 0.12s;
+}
+.es-placement-icon svg { width: 13px; height: 13px; display: block; }
+.es-placement-cell:hover .es-placement-icon { opacity: 0.85; }
+/* ⚠️ IT DOES NOT GROW THE WAY THE DOT DOES. The dot scales to 1.5 on the chosen
+   cell because a dot has no other way to say "chosen"; an arrow says its whole
+   meaning by its shape, and growing it would crowd the square and make it read
+   heavier than its three siblings. Colour alone marks it, on the inverted
+   ground the cell already paints. */
+.es-placement-cell.is-active .es-placement-icon {
+  color: var(--es-on-accent);
+  opacity: 1;
+}
+.es-placement-cell.is-off .es-placement-icon { opacity: 0.22; }
+/* Keyboard focus is visible, like every other control in this panel. */
+.es-placement-cell:focus-visible {
+  outline: 2px solid var(--es-accent-ring);
+  outline-offset: 1px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .es-placement-cell,
+  .es-placement-icon,
+  .es-placement-dot { transition: none; }
+}
+
+/* ── SettingsCorners — four corners of a box, any number of them lit ─────────
+   The sibling of `.es-placement` above and deliberately built from its parts:
+   the same track, the same chip on the chosen cell, the same focus ring. A
+   merchant who has met the nine-square should not have to learn this one.
+
+   TWO COLUMNS, NOT THREE. The grid is 2×2 and each cell sits in the corner it
+   stands for, so the control has the shape of the thing it edits. */
+.es-corners {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 4px;
+  width: 96px;
+  height: 96px;
+  padding: 4px;
+  background: var(--es-track-bg);
+  border-radius: 8px;
+}
+/* The BOX the four corners belong to. Inset so the cells sit ON its corners
+   rather than beside it, dashed so it reads as the outline of the thing being
+   edited rather than as a fifth control. See the note in SettingsCorners.tsx:
+   without this the cells are four switches, not one box. */
+.es-corners-frame {
+  position: absolute;
+  inset: 22px;
+  border: 1.5px dashed var(--es-muted);
+  opacity: 0.45;
+  pointer-events: none;
+}
+.es-corners-cell {
+  position: relative;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.es-corners-cell:hover { background: var(--es-hover); }
+/* THE MARK IS THE ANSWER, drawn rather than labelled. Each cell holds a square
+   whose MATCHING corner is rounded when the corner is on and square when it is
+   off, so the state is carried by SHAPE as well as by fill — which is what
+   keeps it readable for someone who cannot separate the accent from the
+   ground. The per-corner radius is set by the four rules below. */
+.es-corners-mark {
+  width: 18px;
+  height: 18px;
+  background: var(--es-muted);
+  opacity: 0.5;
+  transition: border-radius 0.12s, background 0.12s, opacity 0.12s;
+}
+.es-corners-cell:hover .es-corners-mark { opacity: 0.85; }
+/* ⚠️ THE FOUR RULES ARE WRITTEN OUT, ONE PER CORNER, and must stay written out.
+   The corner a cell stands for is in its class name (`es-corners-tl`), and a
+   radius built by interpolating that name is a string no stylesheet contains —
+   the same trap the shop documents on its own card wells. Four rules is the
+   whole cost of never having that bug. */
+.es-corners-cell.is-on .es-corners-mark {
+  background: var(--es-accent);
+  opacity: 1;
+}
+.es-corners-tl.is-on .es-corners-mark { border-radius: 8px 0 0 0; }
+.es-corners-tr.is-on .es-corners-mark { border-radius: 0 8px 0 0; }
+.es-corners-br.is-on .es-corners-mark { border-radius: 0 0 8px 0; }
+.es-corners-bl.is-on .es-corners-mark { border-radius: 0 0 0 8px; }
+/* A corner the caller has closed. It keeps its cell — four that became three
+   would read as a broken control — and stops answering the pointer; the reason
+   is on the button's `title`. */
+.es-corners-cell.is-off { cursor: default; }
+.es-corners-cell.is-off:hover { background: transparent; }
+.es-corners-cell.is-off .es-corners-mark { opacity: 0.22; }
+/* Keyboard focus is visible, like every other control in this panel. */
+.es-corners-cell:focus-visible {
+  outline: 2px solid var(--es-accent-ring);
+  outline-offset: 1px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .es-corners-mark { transition: none; }
+}
+
+/* ── THE ACTION BUTTON (`[ADD] A Panel Button That Does One Thing`) ─────────────────────────────────────────
+   The full-width press under a group's rows that COMMITS — "Apply to all
+   cards". Measured against `.es-drill`, the panel's other full-width row, and
+   NOT against the shop's `.sf-add-card`: this is a settings row like the rest
+   of the panel, so it takes the panel's row width and the panel's radius.
+
+   IT LOOKS LIKE A BUTTON AND NOT LIKE A ROW, deliberately. The drill is flat
+   with a hover tint, because a list of doorways is a list. This one is a single
+   press that writes, so it carries a border and a field ground: a merchant
+   should be able to tell at a glance that the thing at the bottom of the group
+   is not the twelfth setting.
+
+   NO TOP RULE. The air above it is the separator — the same discipline card
+   66350 applied to the drill list, and `panel-no-divider-lines.test.ts` is what
+   keeps it. */
+.es-action-wrap {
+  /* IT BELONGS TO THE ROWS ABOVE IT, so it sits closer than one setting sits to
+     the next (38) and plainly apart from the last row. The floor rides
+     underneath as `max()`, like every other row-to-row seam on this panel. */
+  margin-top: max(var(--es-row-gap), var(--es-rhythm-between-tight));
+}
+
+.es-action {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 11px;
+  border: 1px solid var(--es-btn-border);
+  border-radius: var(--es-row-radius);
+  background: var(--es-field-bg);
+  color: var(--es-btn-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+
+.es-action:hover:not(:disabled) {
+  background: var(--es-hover);
+}
+
+/* An INSET ring, for the reason the drill gives: a full-width row has the
+   panel's rows hard against its edges, and an outset ring would be clipped. */
+.es-action:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--es-accent-ring);
+}
+
+/* UNAVAILABLE, AND STILL THERE. Dimmed rather than hidden — a control that
+   vanishes leaves a merchant hunting for something they remember, and takes the
+   reason away with it. The reason is the note below, which a screen reader
+   reaches through `aria-describedby` whether the button answers a pointer or
+   not; a `title` here would reach neither. */
+.es-action:disabled {
+  cursor: default;
+  color: var(--es-disabled);
+  background: var(--es-track-bg);
+  border-color: var(--es-line);
+}
+
+/* THE PRESS HAS LANDED.
+
+   THE WORD IS THE STATE, and the colour agrees with it — the button says
+   "Applied to 12 cards" and the live region announces the same string, so
+   nothing here is carried by colour alone.
+
+   ⚠️ NOT A TINTED GROUND. `--es-accent-tint` is card 8811's retired look and
+   this sheet no longer draws it anywhere; `panel-layout.test.ts` sweeps the
+   whole file for it. So the confirmation is drawn the way the rest of the panel
+   draws a positive: the text and the edge move, the ground does not. */
+.es-action.is-done {
+  color: var(--es-success);
+  border-color: var(--es-success);
+}
+
+.es-action-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  color: currentColor;
+}
+
+.es-action-label {
+  min-width: 0;
+}
+
+/* Why the press is unavailable, or what it is about to rewrite. Quiet, under
+   the button, and wrapped — this is a clause, not a name, the same split
+   `.es-field-hint` makes. */
+.es-action-note {
+  margin: 6px 0 0;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--es-muted);
+}
+
+/* THE ANNOUNCEMENT, and nothing on screen. The button already shows the state;
+   this exists so a merchant who cannot see the button HEARS that eleven cards
+   they were not looking at have changed. Taken off screen the standard way —
+   `display: none` and `visibility: hidden` are both skipped by screen readers,
+   which would leave this rendering nothing at all. */
+.es-action-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .es-action { transition: none; }
+}