efficient-web-builder 0.10.0 → 2.0.0

package/dist/components/storefront-editor.css

@@ -0,0 +1,4870 @@
+/*
+ * Storefront editor chrome — themed to the efficient-shell design system.
+ *
+ * The editor is efficient-easel's engine (`efficient-easel/easel`), hosted by
+ * StorefrontEditorChrome. Until blueprint 6.3 (2026-10-02) it was Puck
+ * (@measured/puck) driven through its composition API, and much of the
+ * reasoning below was measured against Puck's sheets; where a note names a
+ * Puck class or `puck.css`, read it as history unless it says otherwise.
+ * This file:
+ *   1. Tunes the canvas's own marks — the engine's lists, outlines and drop
+ *      cells (`efficient-easel/easel.css`, `drag.css`) — to the storefront's
+ *      rules about what a merchant should see.
+ *   2. Styles the bespoke chrome around the engine's pieces (top bar,
+ *      left/right panels, device frame, inspector).
+ *
+ * Everything is scoped under `.sf-editor` so it can never leak into the public
+ * storefront. Colour is driven entirely by the `--sf-*` tokens below so the
+ * chrome themes in ONE place. The editor is deliberately light-only — it does
+ * NOT follow the admin portal's active theme. The admin still bridges its theme
+ * into the iframe, but lib/editor-theme.ts pins the editor to the light base
+ * regardless (see that file), so there is no dark block.
+ *
+ * WHERE THE VALUES LIVE (card 66034). They no longer live here. Every `--sf-*`
+ * colour, radius, shadow and font below is now an ALIAS onto the `--es-*` shell
+ * token layer that card 66024 promoted into the `efficient-easel` package
+ * (`efficient-easel/shell.css`, imported by each editor entry and scoped to the
+ * `es-editor` class this same root carries). The campaign designer aliases its
+ * own `--cd-*` names onto the identical set, so the two editors are guaranteed to
+ * agree by construction rather than by two lists being kept in step by hand.
+ *
+ * The alias layer is kept — rather than renaming every call site to `--es-*` —
+ * because `--sf-*` is the storefront chrome's own vocabulary, used ~700 times
+ * below and in the components' inline styles; the indirection is what lets the
+ * shared layer change underneath without touching any of them. Add a NEW value
+ * to editor-shell and alias it here; never re-introduce a literal.
+ */
+
+/* Mounted inside another app's window (the efficient-web-builder package — the admin
+   portal's Storefront editor): the editor fills the WINDOW it is drawn in, not
+   the browser viewport, or its bottom edge (the canvas's last rows, "+ New
+   page") would sit under the window's own frame. The package wraps the editor
+   in `.sf-embedded`; the shop's own /edit routes never do. */
+.sf-embedded {
+  height: 100%;
+  min-height: 0;
+}
+.sf-embedded .sf-editor {
+  height: 100%;
+}
+
+/* Visually-hidden, screen-reader-only (e.g. the live search-result count). */
+.sf-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+/* ── Top bar ─────────────────────────────────────────────────────────────
+   The bar, its clusters, the icon buttons, the divider, the device switch and
+   the ghost / primary buttons are editor-shell's (efficient-easel/chrome.css,
+   `.es-topbar` and friends), lifted from this sheet and shared with the
+   campaign editor (redesign PR 2a). Only the website's own additions follow. */
+
+/* Reuse-component buttons in the top bar inherit the ghost look */
+.sf-actions-slot > button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  border: 1px solid var(--sf-btn-border);
+  background: var(--sf-panel);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--sf-btn-text);
+}
+.sf-actions-slot > button:hover {
+  background: var(--sf-hover);
+}
+
+/* ── Body / floating panels ───────────────────────────────────────────── */
+/* The panel's title and, beside it, WHICH SITE it is styling (card 66167).
+   `min-width: 0` on both so the name — which is a merchant's own words and can
+   be any length — is what gives way when the panel is dragged narrow, rather
+   than pushing the ✕ off the head. `baseline`, not `center`: the two are
+   different sizes and a shared baseline is what makes them read as one line. */
+.sf-panel-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+/* The site's name, read-only. Quiet and small — it is context, not a setting,
+   and the title beside it is the thing being named. It ellipsises rather than
+   wrapping, because a two-line head would move every row in the panel below it;
+   the whole name is on the `title`, along with where to change it. */
+.sf-panel-site {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--sf-muted);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sf-panel-site::before {
+  content: "·";
+  margin-right: 6px;
+}
+.sf-x {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--sf-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+.sf-x:hover {
+  background: var(--sf-hover);
+}
+
+/* ── Left panel: section tree (wraps Puck.Outline) ────────────────────── */
+
+/* EVERY SEAM THE TREE STACKS, and no bare number among them.
+   The pairs are spelled out rather than written `> * + *` because the tree
+   interleaves group labels and subtrees between its rows: a rule that only
+   knows about `.sf-row` leaves those seams to whatever padding happens to be
+   nearby, which looks governed and is not.
+   `.sf-group-label` keeps its own `padding` and takes no margin here — it is a
+   heading, and a heading's air is part of the heading. */
+.sf-tree > .sf-row + .sf-row,
+.sf-tree > .sf-subtree + .sf-row {
+  margin-top: var(--es-rhythm-between);
+}
+.sf-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* ONE ROW, EVERY DEPTH (the owner's "One Ladder", 2026-09-04). The tree used
+     to draw three: a top-level bar (11px/600 in a 1px outline), a nested bar
+     (10.5px/600 on a mixed fill) and a leaf (11.5px/400). A merchant reading
+     down the panel had to learn three shapes that all meant "a level". Depth is
+     now said ONCE, by `.sf-subtree` — an indent and a hairline — and by nothing
+     else, so a row's look never has to be decided twice. */
+  padding: 7px 11px;
+  border-radius: var(--sf-row-radius);
+  cursor: pointer;
+  transition: background 0.12s;
+  /* Anchors the drop-indicator rules drawn during a drag-to-reorder, and the
+     drag grip, which sits in this row's own left padding. */
+  position: relative;
+  /* THE GROUND THIS ROW IS PAINTED ON, as a value the row's own children can
+     read. `.sf-row-actions` fades the name out beneath the hover eye/trash, and
+     a fade has to end in the colour that is actually behind the row — which
+     differs per state (plain, hovered, selected, bar, nested bar).
+     Every rule that changes the row's background changes this in the SAME
+     declaration block and then paints `background: var(--sf-row-scrim)`, so the
+     two can never name different colours. A resting row paints nothing, so its
+     ground is the panel it sits on. */
+  --sf-row-scrim: var(--sf-panel);
+}
+.sf-row:hover {
+  --sf-row-scrim: var(--sf-hover);
+  background: var(--sf-row-scrim);
+}
+/* The Layers rows' drag / drop marks (the dimmed grabbed row, the before /
+   after line, the drop-INTO box) and the group label are editor-shell's since
+   redesign 2b (`.es-tree-row.is-*`, `.es-tree-group`). The `.sf-row` rules here
+   serve the Pages list and the standalone section editor, which keep them. */
+.sf-row.is-selected {
+  --sf-row-scrim: var(--sf-accent-tint);
+  background: var(--sf-row-scrim);
+  box-shadow: inset 2px 0 0 var(--sf-accent);
+}
+.sf-row.is-selected .sf-chip {
+  background: var(--sf-raised);
+  color: var(--sf-accent);
+}
+.sf-row.is-selected .sf-row-name {
+  color: var(--sf-accent-text);
+  font-weight: 600;
+}
+/* `.sf-add-section` WAS HERE, and it is gone on purpose (card 66228). Lewis
+   ruled on 2026-08-31 that ONE `+` in the top bar replaces every other add door
+   — the drawing is `editor-add-and-context-v1.html` in the SHARED `mockups/`
+   folder that sits beside the repo checkouts, NOT in this repo (card 66400.c:
+   the path here read `mockups/…`, which resolves to nothing from inside
+   efficient-storefront and has never existed in any commit of it, so a reader
+   checking the citation that justifies this removal found an empty hole):
+   「加东西只有一个入口。树底下原来那个 + Add block 也去掉了。」 Two doors to one
+   action is the fault this line keeps removing.
+   Removing THIS door is safe on its own — it was one of three ways into the
+   same picker, and the other two stay: the `.sf-gap` seam between two rows
+   (`openPickerAt(index)`) and the `.sf-preview-gap` overlay in the canvas
+   (`openPickerAt(g.index)`). The Footer panel's own Add block row also still
+   works. Do not remove those in the same breath as the top-bar `+`: the earlier
+   round said it plainly — 「右边那一行不能先删」 — get the order backwards and a
+   merchant loses a route.
+   `.sf-plus` is untouched; both of its rules are scoped to other buttons
+   (`.sf-add-card .sf-plus`) and `PagesPanel` / `AddChildRow` still render it. */
+
+/* ── "Add section" seam between two tree rows ──────────────────────────────
+   A slim hover target sitting in the gap between rows; on hover (or keyboard
+   focus) it draws an accent insertion line with a centred "+" and clicking it
+   opens the Add-section picker targeted at that seam. Negative margin keeps it
+   from adding visible bulk to the resting tree. */
+.sf-gap {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 9px;
+  /* Small negative margin so the seam mostly lives in the inter-row gap; kept
+     shallow so it barely overlaps the neighbouring rows' padding. */
+  margin: -2px 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  z-index: 1;
+}
+.sf-gap-line {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  border-radius: 2px;
+  background: var(--sf-accent);
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.sf-gap-plus {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0.7);
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--sf-accent);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 1;
+  box-shadow: 0 0 0 2px var(--sf-panel);
+  opacity: 0;
+  transition: opacity 0.12s, transform 0.12s;
+}
+.sf-gap:hover .sf-gap-line,
+.sf-gap:focus-visible .sf-gap-line {
+  opacity: 1;
+}
+.sf-gap:hover .sf-gap-plus,
+.sf-gap:focus-visible .sf-gap-plus {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* ── Nested slot children (e.g. each Collections column) ────────────────────
+   ONE level of nesting costs 10px, and that is the whole indent — no 17px
+   margin, no rule down the left any more. Both were doing the job the row
+   ANATOMY was undoing: the parent above paid for a grip and a caret its
+   children did not have, so 26px of wrapper still left a child's name 18px to
+   the LEFT of its parent's (card 66199). With the grip out of the flow and the
+   caret at the row's right end, the wrapper is the only thing left that moves a
+   row sideways, so it can be small and still be the whole answer. The guide
+   rule goes with it: the bars now say what contains what, and a hairline down
+   the side of a grey bar reads as a border that failed to close. */
+.sf-subtree {
+  /* THE ONLY THING IN THIS TREE THAT SAYS DEPTH (One Ladder, 2026-09-04).
+     Every row is now the same shape, so this wrapper carries the whole job:
+     16px of indent and a 1px rule down the left of the group it opens.
+
+     THE RULE IS NOT DECORATION. The fill it replaces was ~2% off white and
+     disappeared on a cheap panel; a hairline at `--sf-line` #e5e7eb is 10% and
+     does not. It also does something the fill never could — it runs the HEIGHT
+     of the group, so a child eight rows down still shows which parent it is
+     under without that parent being on screen.
+
+     The gap is the tree's own `--es-rhythm-between`, not a number of its own —
+     rows inside a group sit exactly as far apart as rows outside one, which is
+     what makes the ladder read as one list at three depths rather than three
+     lists. */
+  margin: var(--es-rhythm-between) 0 var(--es-rhythm-between) 16px;
+  padding-left: 9px;
+  border-left: 1px solid var(--sf-line);
+  display: flex;
+  flex-direction: column;
+  gap: var(--es-rhythm-between);
+}
+
+/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+
+/* ── Add — a mode over the left panel (components/AddSidePanel) ────────────
+   Blueprint step 3.7: the floating `.sf-picker` dialog is gone, and Add is the
+   left panel's content while it is open. The search, the headed groups and the
+   tiles are efficient-easel/drag's `AddPanel` (drag.css); a section is a CARD
+   with its cover there (`.es-add-grid.is-cards`). What is the website's alone
+   is the panel's inset and the Live chat row under the groups. */
+/* The Live chat bubble: site-wide and not a section, so a switch on a row
+   rather than a tile. The name opens its settings; the switch turns it on. */
+.sf-addside-sitewide {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 16px;
+  padding: 10px;
+  border: 1px solid var(--sf-divider);
+  border-radius: 10px;
+}
+.sf-addside-sitewide-glyph {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: var(--sf-hover);
+  color: var(--sf-muted);
+}
+.sf-addside-sitewide-name {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: 600 12.5px/1.3 var(--sf-font);
+  color: var(--sf-text);
+  text-align: left;
+  cursor: pointer;
+}
+.sf-addside-sitewide-name:hover {
+  color: var(--sf-accent);
+}
+.sf-addside-sitewide-desc {
+  font-weight: 400;
+  font-size: 11.5px;
+  color: var(--sf-muted);
+}
+
+/* "Switch to Box footer" (blueprint step H.4) — a short note and its button
+   under the old footer's settings. A confirmation replaces the button in place
+   rather than opening a dialog: it is one decision, made where it is offered. */
+.sf-box-footer-switch {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  margin: 18px 0 6px;
+  padding: 12px;
+  border: 1px solid var(--sf-divider);
+  border-radius: 10px;
+}
+.sf-box-footer-switch-text {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--sf-muted);
+}
+.sf-box-footer-switch-row {
+  display: flex;
+  gap: 8px;
+}
+
+/* Section-cover wireframe tokens — the bespoke palette the SectionThumbnail
+ * covers draw with (see components/SectionThumbnail.tsx). Defined once here so no
+ * colour literal lives in the .tsx (doc/no-hardcoding.md R3); the admin mirror
+ * defines the same block in src/index.css. Light-only: the picker + the console
+ * catalog both sit on a light surface. */
+.sf-thumb {
+  --sf-thumb-card: #ffffff;
+  --sf-thumb-thumb-bg: #fcfdff;
+  --sf-thumb-thumb-border: #edeff4;
+  --sf-thumb-block: #e9ebf0;
+  --sf-thumb-bar-light: #dde1e8;
+  --sf-thumb-bar-dark: #c3c9d3;
+  --sf-thumb-hatch1: #e2e5ec;
+  --sf-thumb-hatch2: #edeff4;
+  --sf-thumb-accent: #2f6bed;
+  --sf-thumb-accent-tint: #e6edfd;
+  --sf-thumb-border: #e7eaf1;
+
+  /* ── THE SCENE PALETTE ─────────────────────────────────────────────────
+     Added when the covers stopped being grey wireframes. The eleven tokens
+     above are all pale grey-blue, because the old covers only ever drew bars:
+     they could say WHERE things sat and nothing else, which is why the owner
+     said he could not get any useful information out of them (2026-09-04).
+
+     A cover that reads at 196px needs the two things a wireframe throws away —
+     colour and content — so these are the grounds a scene is painted on, plus
+     the one warm highlight that stands in for a brand accent. Still tokens and
+     still no literals in the component (doc/no-hardcoding.md R3), and still
+     ONE definition per app.
+
+     ⚠️ THE GROUNDS ARE NOT SITE COLOURS, and are not wired to a site's theme.
+     A cover pictures a KIND of section, and has to read the same in every
+     tenant and in the admin portal's catalog — a merchant comparing "Hero"
+     against "Split" is choosing a layout, not previewing their own palette.
+     Wiring the grounds to `--sf-accent` would repaint all 68 the moment a site
+     changed its accent, and make two shops disagree about what one section is.
+
+     ⚠️ `--sf-thumb-accent` IS THE EXCEPTION, and it was here first. The ADMIN
+     portal overrides it per site (`--sf-cover-accent`, src/index.css) so a
+     Sites card's covers wear that site's real accent. That is a deliberate,
+     scoped override of ONE token — not a licence to theme the grounds, which
+     would take the same cover to a different picture rather than a different
+     highlight. */
+  --sf-thumb-ink: #1b2027; /* dark photographic ground, top */
+  --sf-thumb-ink-2: #39434f; /* …and its gradient end */
+  --sf-thumb-ink-soft: #2c3540; /* the lighter dark ground, for split scenes */
+  --sf-thumb-ink-soft-2: #4a5763;
+  --sf-thumb-paper: #f4f1ed; /* warm light ground */
+  --sf-thumb-paper-2: #cfc8bf; /* …and its gradient end */
+  --sf-thumb-warm: #e7c26a; /* the highlight — overline + CTA on a dark ground */
+  --sf-thumb-rust: #b4652a; /* the overline on a light ground */
+  --sf-thumb-on-ink: #ffffff;
+  --sf-thumb-scene-text: #171412; /* headline / price on a light ground */
+  --sf-thumb-scene-muted: #6b7280; /* section titles and secondary lines */
+  --sf-thumb-scene-rule: #eceef1; /* the hairline between table rows */
+  /* The product MARK — option 甲, picked by the owner on 2026-09-04: two soft
+     blocks, deliberately NOT a picture of a wheel. The catalogue also sells
+     tyres, lift kits, lights and pedals, so a round mark would be wrong on most
+     of it; this says "a product sits here" and claims nothing more. */
+  --sf-thumb-mark-1: #c8ccd1;
+  --sf-thumb-mark-2: #8e9aa6;
+  /* The scrim that keeps a headline legible over a dark photographic ground —
+     the one place a cover needs transparency, so it is a token like every other
+     colour here rather than an `rgba()` sitting in the component. */
+  --sf-thumb-scrim: rgba(0, 0, 0, 0.55);
+}
+/* Drives the Ticker cover's scrolling strip. */
+@keyframes sf-thumb-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-33.34%);
+  }
+}
+
+/* ── The one destructive confirm in the panel (Reset color) ─────────────────
+   [ADD] Reset On Every Site Style. Every other reset on Site styles clears a
+   number or a rung; this one deletes a merchant's authored palettes, so it asks
+   first (owner's ruling 2026-09-05, option B).
+
+   THE COLOURS LIVE HERE RATHER THAN ON THE COMPONENT, and that is the rule
+   rather than a preference. `test-panel-colour-tokens` sweeps `components/` for
+   literals — "a literal there is a private copy of one step of that scale: it
+   does not move when the scale moves". The older `LeaveConfirmDialog` spells its
+   palette in Tailwind literals and predates that sweep; a second dialog copying
+   it would have passed review and failed the gate.
+
+   The destructive button takes the `--sf-danger*` family that already exists,
+   not a red of its own. The radius is the 9px the theme cards and the add-card
+   button already wear, so the dialog reads as the same object as the rest of the
+   panel rather than a new shape. */
+.sf-cleardlg-veil {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: var(--sf-addcard-veil);
+}
+.sf-cleardlg {
+  width: 100%;
+  max-width: 360px;
+  box-sizing: border-box;
+  padding: 20px;
+  border: 1px solid var(--sf-line);
+  border-radius: 9px;
+  background: var(--sf-panel);
+  color: var(--sf-text);
+  box-shadow: 0 20px 50px var(--sf-accent-shadow);
+}
+.sf-cleardlg-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--sf-text);
+}
+.sf-cleardlg-body {
+  margin: 8px 0 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--sf-muted);
+}
+/* The one line a merchant must not skim. NOT red — the button already carries
+   the danger colour, and a red sentence over a red button is the panel shouting
+   twice. Full-strength ink and a heavier weight instead. */
+.sf-cleardlg-final {
+  margin: 8px 0 0;
+  font-size: 13px;
+  line-height: 1.6;
+  font-weight: 500;
+  color: var(--sf-text);
+}
+.sf-cleardlg-btns {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 18px;
+}
+.sf-cleardlg-btn {
+  font-family: var(--sf-font);
+  font-size: 13px;
+  padding: 7px 14px;
+  border-radius: var(--sf-field-radius);
+  border: 1px solid var(--sf-btn-border);
+  background: var(--sf-panel);
+  color: var(--sf-btn-text);
+  cursor: pointer;
+}
+.sf-cleardlg-btn:hover { background: var(--sf-hover); }
+.sf-cleardlg-btn--danger {
+  font-weight: 600;
+  border-color: var(--sf-danger-strong);
+  background: var(--sf-danger-strong);
+  color: var(--sf-on-accent);
+}
+.sf-cleardlg-btn--danger:hover { filter: brightness(0.94); }
+
+.sf-addcard-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--sf-addcard-veil);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  opacity: 0;
+  transition: opacity 0.15s;
+  pointer-events: none;
+}
+.sf-addcard:hover .sf-addcard-overlay,
+.sf-addcard:focus-visible .sf-addcard-overlay {
+  opacity: 1;
+}
+.sf-addcard-addbtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--sf-accent);
+  color: #fff;
+  border-radius: 9px;
+  padding: 8px 14px;
+  font-size: 12.5px;
+  font-weight: 600;
+  box-shadow: 0 4px 12px var(--sf-accent-shadow);
+}
+.sf-addcard-plus {
+  font-size: 15px;
+  line-height: 1;
+  margin-top: -1px;
+}
+.sf-addcard-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 2px 2px;
+}
+.sf-addcard-name {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--sf-text);
+}
+.sf-addcard-desc {
+  font-size: 10.5px;
+  line-height: 1.35;
+  color: var(--sf-muted);
+}
+
+/* Empty-search state */
+.sf-addempty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  padding: 64px 20px;
+  text-align: center;
+  color: var(--sf-muted);
+}
+.sf-addempty-icon {
+  display: flex;
+  color: var(--sf-field-placeholder);
+}
+.sf-addempty-icon svg {
+  width: 30px;
+  height: 30px;
+}
+.sf-addempty-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--sf-text);
+}
+.sf-addempty-sub {
+  font-size: 12.5px;
+}
+
+/* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
+.sf-frame--tablet,
+.sf-frame--mobile {
+  /* device frames don't stretch to full width but still fill height */
+  align-self: stretch;
+}
+/* The device's edge is an OUTLINE drawn inside the frame, not a border: the
+   frame is border-box, so a 1px border sat inside the 390px width and the page
+   was laid out at 388 (800 → 798 on tablet) — card `[FIX] Editor Canvas Runs
+   The Live Page Head`. An outline takes no width, so the page gets the whole
+   device (DEVICE_W in StorefrontEditorChrome); painted last, it sits over the
+   page's outermost pixel. No radius of their own: `.sf-frame` above is square
+   and these follow it, so the website's corners are never clipped. */
+.sf-frame--tablet {
+  width: 800px;
+  outline: 1px solid var(--sf-device-border);
+  outline-offset: -1px;
+}
+.sf-frame--mobile {
+  width: 390px;
+  outline: 1px solid var(--sf-device-border);
+  outline-offset: -1px;
+}
+
+/* The Cart / Checkout surfaces are previewed in-canvas by rendering the real
+   components inside the Puck preview iframe (same-document, no nested `<iframe
+   src>`) — see components/EditorPreviewSurface. No editor-side frame CSS is
+   needed; the ribbon is styled inline in that component. */
+
+/* ── One dashed outline on hover, not a field of them (card 66395) ─────────
+   The owner, 2026-09-01: hovering a section shows too many dashed lines. He
+   wants to find the hover target directly, and ONE is enough.
+
+   He was right, and the hover outline was never the cause. Puck draws FIVE
+   dashed outlines and four of them are STATES -- they paint only while a
+   merchant is hovering, selecting or dragging. The fifth has no state in its
+   selector at all:
+
+       ._DropZone_<hash>:empty { background: <azure tint>; outline: 2px dashed }
+
+   `:empty` is true whenever a slot holds nothing, so that box is painted the
+   whole time. Measured in the real editor on the `sharpen` homepage: FOUR of
+   those boxes standing with nothing hovered, three of them stacked inside the
+   hero. Hovering added the fifth, and his eye had to find it among the four
+   that were already there.
+
+   So the standing one goes and the four states stay. Puck set
+   `[data-puck-dragging]` on `[data-puck-entry]` for the length of a drag, so
+   scoping to `:not([data-puck-dragging])` left every drag affordance exactly
+   as Puck shipped it -- a merchant still sees where a block can land, which is
+   the one thing that must not be traded away for this. (The engine sets no
+   such attribute and draws its drop targets over the frame, not in it, so the
+   scope is gone; the note on the rule below says why that is safe.)
+
+   ONLY the outline. Puck's rule paints a background tint as well, and that is
+   left alone: an empty slot stays a visible block, so nothing becomes
+   unfindable -- it just stops drawing a line round itself.
+
+   SPECIFICITY, NOT `!important`. Ours was (0,4,0) against Puck's (0,2,0), and
+   `storefront-editor.css` was imported after `puck.css` at every call site so
+   source order settled any tie (it is imported after the engine's
+   `efficient-easel/easel.css` now; guard §9). An `!important` here would also beat
+   `._DropZone--isDestination_`, which IS `!important`, and blind the merchant
+   mid-drag.
+
+   `[class*=]`, NOT the literal class. Puck's CSS-module names carry a build
+   hash (`_DropZone_1i2sv_1`); a literal one would stop matching on the next
+   Puck bump with no error at all, and the field of outlines would come back
+   silently. `scripts/test-one-hover-outline.tsx` asserts all of this, and
+   asserts Puck still draws the rule we are overriding -- if it ever stops,
+   this becomes dead code and the guard turns that into a red rather than
+   leaving something that looks load-bearing.
+
+   ── An empty slot still ANSWERS when you point at it (card 66395.b) ────────
+
+   The paragraph above is right about the standing box and wrong about what
+   else it took. `:empty` does not stop being true while a slot is HOVERED or
+   SELECTED -- it only says the slot holds nothing -- and this selector is
+   LONGER than the Puck rules that paint those two states:
+
+       ours  [data-puck-entry]:not([data-puck-dragging]) …:empty     (0,4,0)
+       Puck  --hoveringOverArea_:not(--isRootZone_)                  (0,2,0)
+       Puck  --isAreaSelected_                                       (0,1,0)
+
+   So on an empty slot this rule won everywhere instead of only at rest.
+   Measured in the real editor on the `sharpen` homepage, merged main
+   8603ffd82: all four empty zones read `outline: none 0px` while hovered with
+   `--hoveringOverArea_` set, and two of them read the same while
+   `--isAreaSelected_` was set.
+
+   That matters more than a missing line. Hovering an empty slot IS the
+   deliberate act of pointing at it to put the first block in, so the merchant
+   got nothing at the one moment the affordance was being asked for. The
+   background tint the paragraph above relies on is true while nothing is
+   happening -- and something IS happening here.
+
+   THE TWO EXCLUSIONS ARE PUCK'S OWN CONDITIONS, NEGATED, NOT NEW ONES. Puck
+   paints a non-drag dashed outline on a zone in exactly two cases:
+
+       ._DropZone--isAreaSelected_
+       ._DropZone--hoveringOverArea_:not(._DropZone--isRootZone_)
+
+   and this rule now stands aside for each, character for character. §6 of
+   the guard BUILDS those two exclusions out of Puck's stylesheet and fails if
+   ours do not match, so a sixth state upstream becomes a red on the day Puck
+   ships it rather than a silent hole like this one.
+
+   ⚠️ WHY THE HOVER EXCLUSION KEEPS ITS `:not(--isRootZone_)`, AND MUST. Puck
+   computes `hoveringOverArea = inNextDeepestArea || isRootZone`, so THE ROOT
+   ZONE CARRIES IT AT ALL TIMES -- that is why Puck's own rule qualifies it.
+   A bare `:not(--hoveringOverArea_)` here would therefore stop neutralising
+   the root zone, and an empty page would get its standing dashed box back:
+   half of the defect this rule exists to remove, restored quietly by a fix
+   for the other half. Nesting the qualifier keeps that box gone; measured on
+   the board, `empty · ROOT ZONE at rest` still reads `none 0px`.
+
+   ONE RULE, NOT TWO. `:not(A:not(B))` says "not (hovering AND not root)" in
+   one compound, so the root zone needs no second rule fighting this one over
+   the same outline. Specificity rises to (0,7,0), which still loses to
+   `--isDestination_` because that is `!important` and this is not -- the drag
+   affordance does not move in either direction, and the three DRAGGING rows
+   on the board read `dashed 2px` before and after.
+
+   Whether any of this is really PAINTED is not a question CSS text can
+   answer. `scripts/probe-empty-slot-outline.mjs` rendered these states in a
+   browser over Puck's classes; it went with Puck (blueprint 6.3), so measure
+   the engine's canvas in the live editor. */
+/* Since blueprint 5.5 the lists are efficient-easel's `.es-zone`, and the
+   states this section answers are its classes: `.is-area-selected` (Puck's
+   `--isAreaSelected_`), `.is-hovering-area` (`--hoveringOverArea_`) and
+   `.is-root` (`--isRootZone_`). The reasoning above is unchanged; only the
+   names moved, from Puck's hashed modules to classes this repo can spell.
+
+   ⚠️ NO DRAG SCOPE ANY MORE, AND A DRAG STILL SHOWS WHERE A BLOCK CAN LAND.
+   This rule and A/B below were scoped to `:not([data-puck-dragging])` so a
+   drag kept Puck's in-frame drop targets (`--isDestination_`). Nothing has
+   set that attribute since 5.5 — the engine has no such state — so the
+   `:not()` matched every time and only added specificity: dead code that
+   looked load-bearing. The engine draws a drag's targets in the HOST page,
+   over the frame: the drop line, and on an empty slot the dashed
+   `.es-canvas-empty` "+ Add block" cell (efficient-easel/drag.css), sized
+   to the zone, at rest and mid-drag alike. Measured 2026-10-03 in
+   /edit/preview-newpage with a drag from the Add panel: the cell stays over
+   the empty slot for the whole drag, so the zone's own outline under it is
+   not what the merchant sees during one. Every zone state (rest, selected,
+   hovered, root; empty and filled) computed the same outline before and
+   after the scope went. Without it this rule is (0,6,0) against the engine's
+   `.es-zone:empty` (0,2,0). */
+[data-puck-entry]
+  .es-zone:empty:not(.is-area-selected):not(.is-hovering-area:not(.is-root)) {
+  outline: none;
+}
+
+/* ── No dashed lines while pointing, and ONE line, not three (card 66517) ───
+   ⚠️ THIS CARD'S MERGED COMMITS ON `main` SAY 66511, AND THAT IS NOT A TYPO.
+   Two cards were allocated 66511 on 2026-09-02: this one, and the `ground` glyph
+   card whose number is baked into a published `efficient-easel` icon entry and
+   named in this repo's released CHANGELOG. That one keeps the number, because
+   its copies cannot be recalled; this one moved, because comments can. The
+   squash subjects on `main` still read `66511 · …` and are deliberately NOT
+   rewritten — a merged subject is a record of what was done on the day, not a
+   pointer, and rewriting `main`'s history for a number costs more than the
+   confusion it saves. Follow 66517; `components/ThemeCard.tsx` is the other.
+   The owner, 2026-09-02, with a screenshot of the sharpen homepage: pointing
+   at the hero heading draws three nested dashed rectangles, and he does not
+   want dashed lines.
+
+   THIS IS THE SECOND TIME HE HAS RAISED IT, and card 66395 above did not miss.
+   It removed a box that was painted the whole time, on every empty slot,
+   whether or not anything was happening — a real defect, and it is gone. What
+   he is pointing at now is the set that is SUPPOSED to appear. Three rules
+   fire at once and each is correct on its own terms:
+
+       the zone whose owner you CLICKED     --isAreaSelected_
+       the deepest zone you are INSIDE      --hoveringOverArea_:not(--isRootZone_)
+       the block you are POINTING AT        [data-puck-overlay-portal]:hover
+
+   MEASURED, not inferred, by scripts/probe-hover-outline-count.mjs (retired
+   with Puck in blueprint 6.3) against both stylesheets in the app's own import
+   order, with a real pointer:
+
+       pointing at a block                       2 dashed boxes
+       pointing at a block you have clicked      3 dashed boxes   <- his picture
+
+   ⚠️ THE ROOT ZONE IS THE THIRD ONE, AND IT SURPRISES PEOPLE. Puck's
+   `isAreaSelected` rule carries no `:not(--isRootZone_)`, unlike its hover
+   rule, so selecting a top-level section outlines the whole page as well as
+   the section. That is why the count goes 2 -> 3 on a click rather than
+   staying at 2.
+
+   WHAT THIS DOES. One line, on the thing you are pointing at, and it is
+   SOLID. The zones keep their background tint and lose their line: the tint
+   already says which slot you are in, and it says it without drawing a
+   rectangle round a rectangle.
+
+   ⚠️ AN EMPTY SLOT STILL HAS TO ANSWER. Card 66395.b exists because the first
+   version of the rule above took that away — hovering an empty slot IS the
+   deliberate act of pointing at it to put the first block in, and it got
+   nothing at the one moment the affordance was being asked for. An empty zone
+   has no block in it and therefore no overlay to carry the line, so rule B
+   below gives it one of its own. Solid, like everything else here.
+
+   ⚠️ A DRAG IS NOT TOUCHED, AND MUST NOT BE. Under Puck every rule here sat
+   inside `:not([data-puck-dragging])`, so `--isDestination_` and
+   `--isEnabled_` shipped exactly as Puck wrote them. Dashed means something
+   during a drag — it is where a block can land — and that is the one
+   affordance card 66395 said must never be traded away for this. It still
+   holds, by other means: the engine draws a drag's targets over the frame
+   (the drop line, the `.es-canvas-empty` cell), where nothing here reaches,
+   so the scope went with Puck — see the note on the empty-slot rule above.
+
+   SPECIFICITY, NOT `!important`, the same as the rule above. A is (0,4,0)
+   against the engine's (0,3,0) state rules; its first selector carries
+   `:not(.is-root)` for that, in place of the old drag scope — without either
+   it would only TIE `.es-zone.is-area-selected:not(.is-root)` and win on
+   source order. Nothing is lost on the root: the engine never outlines a
+   selected root list, and an EMPTY selected root still gets B. B is (0,5,0)
+   so it wins over A on an empty zone. C has no upstream rule left to answer
+   (Puck's overlay-portal sheet went in 5.5). Ours is imported after the
+   engine's sheet at every call site all the same (guard §9).
+
+   `[class*=]`, NOT the literal class names — Puck's CSS-module names carry a
+   build hash, and a literal one would stop matching on the next Puck bump with
+   no error at all, silently putting all three boxes back. */
+
+/* A · a zone draws no line while you point at it or after you click it. */
+[data-puck-entry] .es-zone.is-area-selected:not(.is-root),
+[data-puck-entry] .es-zone.is-hovering-area:not(.is-root) {
+  outline: none;
+}
+
+/* ⚠️ EVERY COLOUR BELOW CARRIES ITS OWN FALLBACK, AND THAT IS NOT DECORATION.
+   These rules paint inside the canvas FRAME, whose document has no `.es-editor`
+   root, so no `--es-*` token is defined there (efficient-easel/easel.css
+   falls back the same way). Until blueprint 5.5 they leaned on Puck's
+   `puck.css`, which declared its `--puck-color-azure-*` ramp on the frame's
+   `:root` and drew the pointed-at block's colour and offset itself. 5.5 took
+   that sheet off the canvas: a bare `var(--puck-color-azure-08)` then resolved
+   to nothing, and an `outline` with an unresolvable colour is no outline at all
+   — the empty slot stopped answering when pointed at, silently. The colours are
+   Puck's ramp as the shell re-tints it (`--es-accent-line` = azure-08,
+   `--es-accent-tint-strong` = azure-09). */
+
+/* B · …except an EMPTY one, which has no block to carry the line for it. */
+[data-puck-entry]
+  .es-zone:empty:is(.is-area-selected, .is-hovering-area:not(.is-root)) {
+  outline: 1px solid var(--es-accent-line, #bfdbfe);
+}
+
+/* C · the block you are pointing at: one line, solid, 1px, 2px off the words.
+   Puck's own overlay-portal sheet drew it 2px dashed and this file narrowed it;
+   since that sheet left with 5.5 the whole line is declared here. */
+[data-puck-overlay-portal]:hover {
+  outline: 1px solid var(--es-accent-tint-strong, #dbeafe);
+  outline-offset: 2px;
+}
+
+/* …and the rest of what Puck's overlay-portal sheet (lib/overlay-portal/
+   styles.css) gave a text-part anchor, carried here for the same reason: the
+   anchor takes the pointer, and draws a ring while the caret is in it. The
+   OPEN part's own hairline (PART_PICK_CSS, (0,3,0)) still outranks the ring
+   (0,2,0) — one line, card 11103. */
+[data-puck-overlay-portal],
+[data-puck-overlay-portal] * {
+  pointer-events: auto !important;
+}
+[data-puck-overlay-portal]:focus-within {
+  outline: 2px solid var(--es-accent-line, #bfdbfe);
+  outline-offset: 2px;
+}
+
+/* D · …and ONLY the innermost one.
+   ⚠️ FOUND IN THE REAL EDITOR, NOT ON THE BOARD, AND IT IS THE HALF THE BOARD
+   COULD NOT SEE. Puck nests an overlay per component, and `:hover` matches
+   every ancestor in that chain — so pointing at the heading of a section put
+   FOUR overlays in `:hover` at once. Measured at /edit/preview-footer with a
+   real pointer: 4 hovered overlays, 4 painted lines. Rules A-C removed every
+   dashed line and still left him four thin ones.
+
+   The board modelled ONE overlay because that is what a nesting sketch needs;
+   the editor stacks them because that is what a component tree does. Same
+   family as measuring a component outside the container it ships in — the
+   experiment was honest and the population was wrong.
+
+   `:has()` reads "an overlay that contains another hovered overlay stands
+   aside", which leaves exactly the deepest one — the thing under the cursor,
+   which is the one you are actually reaching for. Re-measured with this rule
+   live in the same editor: 4 hovered, 1 painted, 225x46, the heading itself.
+
+   ⚠️ SETTLED BY THE OWNER, 2026-09-02: keep the innermost. He was shown the
+   alternative and the reason the choice is not obvious — on a heading the
+   innermost box hugs the text, which is right, but on the Subscribe button the
+   innermost is the button's LABEL (63x16) rather than the button (97x38). He
+   picked innermost anyway. DO NOT re-open this as "the button's box looks
+   small": that is the known cost of the rule he chose.
+
+   ⚠️ AND THIS ONLY HIDES THE LINE. The duplicate overlays are still in the DOM.
+   Measured on /edit/preview-footer: TWELVE overlays carrying only FOUR distinct
+   `data-sf-part` ids, and all EIGHT nested pairs share their ancestor's id — so
+   the extra boxes were never separate things to select and never had settings
+   of their own. Marking one element per part is a separate card touching
+   several components; it is not this one. */
+[data-puck-overlay-portal]:hover:has([data-puck-overlay-portal]:hover) {
+  outline: none;
+}
+
+/* ── Canvas "Add section" seams (overlay between preview sections) ──────────
+   Absolutely positioned over .sf-preview-host (the iframe's box), one band per
+   seam between top-level sections, placed at the boundary Y measured from the
+   live iframe. The container ignores pointer events so the canvas stays
+   interactive; only the slim bands are clickable. On hover a band shows an accent
+   insertion line + a dark "Add section" pill; clicking opens the picker targeted
+   at that seam. It sits inside the scaled device frame, so it tracks the zoom. */
+
+/* ── Right panel: inspector (wraps Puck.Fields) ──────────────────────── */
+/* The head — chip, the panel's name as its h2 (card 66127), the kind line and
+   the Duplicate / Copy-to-page / Remove buttons — is editor-shell's
+   `.es-insp-head` (efficient-easel/chrome.css), lifted from this sheet (redesign 2a). */
+/* The settings panel's scrolling body — and the settings TAB STRIP is inside it,
+   not above it (`PanelTabs` in lib/puck/controls.tsx renders the shell's
+   `SettingsTabs` among the fields). So the strip's width is this box's content
+   width, and `.sf-scroll`'s scrollbar is 11px of SPACE, not an overlay: a bucket
+   whose fields overflow used to take 11px off the strip.
+
+   `scrollbar-gutter: stable` is what stops that, and it is a fix rather than a
+   polish because the strip has three tiers (card 8810) that turn on its width —
+   glyphs replace the words under 270px, and the active tab's word goes too under
+   240px. A tier line is a cliff, so a saved panel width whose two strip widths
+   straddle one changes the TABS as a scrollbar comes and goes: the merchant
+   clicks Layout, its fields overflow, and the four bucket words they were just
+   reading become four glyphs. Two bands did this — saved 298-308 and 268-278 —
+   and `scripts/test-panel-strip-width-stable.ts` sweeps the whole resizable band
+   rather than trusting those two numbers.
+
+   AND THE 320 DEFAULT DID NOT ALREADY FIX IT, which is the part that reads like
+   it should. Card 8810 took `DEFAULT_PANEL_W.right` to 320, whose strip widths
+   (292 and 281) clear both bands — but `StorefrontEditorChrome.tsx` seeds the
+   width from `localStorage` under `PANEL_WIDTHS_KEY` and falls back to the
+   default ONLY when nothing is stored. A merchant who has ever dragged this
+   panel keeps their width permanently, and the old default was 308, sitting at
+   the top of the first band. So the merchants left inside it are the ones who
+   have used the editor most, and no change to a default can reach them.
+
+   The cost is 11px: a panel that is not scrolling is now as narrow as one that
+   is, never the reverse — at 320 the body is 281 in both states instead of 292
+   and 281. Nothing gets wider. Accepted (Lewis, from the mockup) as the price of
+   a strip that never jumps.
+
+   `stable` and not `stable both-edges`: reserve the gutter on the scrollbar's
+   own side, so the fields keep the padding they have on the other. */
+.sf-insp-body {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  /* THE SIDE PADDING, ONCE. It was the literal `14px` below and a second
+     literal `8px` in the container query further down, and the module rule this
+     card adds needed a THIRD copy to cancel it — which is exactly how that rule
+     came to hang 6px OUTSIDE the panel at every width under 280 (measured: gap
+     -6.0px at 260 and at 220, against 0.0 at the default 320). One name, read
+     by the padding, by the narrow override, and by anything that undoes it. */
+  --sf-insp-pad-x: 14px;
+  padding: 4px var(--sf-insp-pad-x) 18px;
+
+  /* THE DROPDOWN ARROW, WRITTEN ONCE — card 66399.c.
+     Read by `.sf-insp-body select` at rest AND by the hover rule beside it. The
+     hover rule HAS to restate the image (overriding without `!important`
+     replaces only the properties you name, and Puck's hover repaints the arrow
+     darker), so without this token the glyph would be spelled out twice —
+     putting back the second copy card 66399 had just removed, and leaving the
+     two to drift apart on the next Puck bump.
+
+     ⚠️ NOT AN `--es-*` ALIAS, and deliberately not one. Every other `--sf-*`
+     above is a design value we choose, so it belongs in the shell. This is
+     PUCK'S OWN GLYPH, matched to the package polygon for polygon so the six
+     rows Puck drew and the 55 the panel drew could not look different. Since
+     Puck left (blueprint 6.3) it is the panel's one arrow, declared here once;
+     `scripts/test-panel-one-arrow.tsx` §4 fails if a second copy appears or a
+     select resolves to anything else. */
+  --sf-select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>");
+}
+
+/* …AND THE 14 IS A DIFFERENT COST AT EACH END OF A PANEL THE MERCHANT DRAGS
+   (card 66212). One number, held at every width from 220 to 560:
+
+     320px default   308 client (1px seam + 11px scrollbar) − 28 = 280 content
+     220px minimum   208 client                             − 28 = 180 content
+
+   — 8.8% of the body at the default and 13.4% at the minimum, spent on the same
+   gap. Lewis reported it on 2026-08-29 with a screenshot of the right panel at
+   its minimum width.
+
+   WHY 280, WHICH IS NOT A ROUND NUMBER AND NOT AN OPINION. All 88 registered
+   sections were rendered as real inspector panels — the live Puck config's own
+   fields, each field's own `render()`, over this sheet and the shell's two — and
+   swept across the resizable band in Chromium, counting elements whose
+   `scrollWidth` exceeds their `clientWidth`:
+
+     panel 281px   content 241   0 fields overflow
+     panel 280px   content 240   1 field  overflows   ← the first one to go
+     panel 240px   content 200   29 fields overflow
+     panel 220px   content 180   337 fields overflow
+
+   280 is the widest panel at which anything in the inspector stops fitting
+   (ProductGrid's empty multi-value chip wants 204px and has 203px), so it is
+   where the 12px is owed and not one pixel earlier. With 8px each side the first
+   overflow moves down to a 268px panel, and at the 220px minimum the count falls
+   337 → 97.
+
+   `< 280px` AND NOT `<= 280px`, because the query is answered by the CONTAINER's
+   content box and `.sf-panel` draws a 1px seam border (card 66161): a panel
+   saved at 281 asks with 280 and keeps its 14, a panel saved at 280 asks with
+   279 and gets the 8. `scripts/test-panel-padding-narrows.ts` holds both ends.
+
+   ONLY THE SIDES MOVE. The 4px above and the 18px below are vertical room and
+   this card is horizontal; `padding-inline` says so in the declaration rather
+   than repeating the other two numbers where they could drift.
+
+   NOT A FONT SIZE, deliberately. The panel's sizes are already 12 / 11 / 10px
+   and 10 has nothing to spare, and type is paid vertically as well — card 66206
+   has just set the row rhythm to 16px, which shrinking type would hand straight
+   back. The padding was the horizontal cost, so the padding is what moved. */
+@container (width < 280px) {
+  .sf-insp-body {
+    /* The TOKEN, not `padding-inline` — so everything that reads the padding
+       narrows with it, instead of only the padding itself. */
+    --sf-insp-pad-x: 8px;
+  }
+}
+
+/* "Duplicate to another page" dropdown — portalled to <body> and pinned under
+   the inspector button (see DuplicateToPageMenu), so it's position:fixed and
+   right-aligned. Shares the floating-menu language of .sf-blockmenu. */
+.sf-dupmenu-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+.sf-dupmenu {
+  position: fixed;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 200px;
+  max-width: 280px;
+  max-height: 60vh;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--sf-line);
+  border-radius: 8px;
+  background: var(--sf-panel);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+.sf-dupmenu-head {
+  padding: 6px 9px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--sf-muted);
+}
+.sf-dupmenu-empty {
+  padding: 8px 9px;
+  font-size: 13px;
+  color: var(--sf-muted);
+}
+.sf-dupmenu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 9px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  text-align: left;
+  color: var(--sf-text);
+}
+.sf-dupmenu-item:hover:not(:disabled) {
+  background: var(--sf-accent-tint);
+  color: var(--sf-accent);
+}
+.sf-dupmenu-item:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.sf-dupmenu-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Here the note is a word trailing a menu row ("draft", "Copying…"), not a
+   block: no inset of its own, and it takes the ROW's leading rather than the
+   note's, or a draft row would stand 4px taller than a published one and the
+   menu would lose its even rhythm. It stays quiet against the page name beside
+   it by COLOUR, which is the note's own and the whole reason one class can
+   serve both places. Placement only; the note style itself is .sf-note. */
+.sf-dupmenu-item > .sf-note {
+  padding: 0;
+  flex: none;
+  line-height: inherit;
+}
+
+/* Floating-styled form controls for Puck's native fields */
+.sf-insp-body input[type="text"],
+.sf-insp-body input[type="number"],
+.sf-insp-body input:not([type]),
+.sf-insp-body textarea {
+  width: 100%;
+  border: 1px solid var(--sf-input-border);
+  background: var(--sf-field-bg);
+  border-radius: var(--sf-field-radius);
+  padding: 8px 11px;
+  font-size: 13px;
+  color: var(--sf-field-text);
+  font-family: var(--sf-font);
+}
+.sf-insp-body input::placeholder,
+.sf-insp-body textarea::placeholder {
+  color: var(--sf-field-placeholder);
+  opacity: 1; /* Firefox dims placeholders by default; keep our grey exact */
+}
+.sf-insp-body textarea {
+  min-height: 74px;
+  line-height: 1.45;
+  resize: vertical;
+}
+.sf-insp-body input[type="text"]:focus,
+.sf-insp-body input:not([type]):focus,
+.sf-insp-body textarea:focus {
+  outline: none;
+  border-color: var(--sf-accent);
+  box-shadow: 0 0 0 3px var(--sf-accent-ring);
+}
+/* A value the backend refused — the row says why in an `.sf-note--error` under
+   it (Site settings ▸ Social links is the first user). Keyed on `aria-invalid`,
+   not a class, so the red a sighted merchant sees and the "invalid" a screen
+   reader announces are one attribute and cannot disagree. */
+.sf-insp-body input[aria-invalid="true"] {
+  border-color: var(--sf-danger);
+}
+.sf-insp-body select {
+  width: 100%;
+  border: 1px solid var(--sf-input-border);
+  /* ⚠️ LONGHAND, NEVER `background:` — card 66397. Puck draws this control's
+     dropdown arrow as a 100x100 SVG polygon and then shrinks it with longhands
+     (`background-size: 12px`, `background-repeat: no-repeat`). The shorthand
+     that used to sit here reset every longhand it did not name, so on hover —
+     where Puck re-declares only the IMAGE — the full-size tile repeated 2.48
+     times across the 248px row and drew a dark bar with three triangles. That
+     is what Lewis filed. It shipped in 486bf97fd and was never a regression.
+
+     Setting only the colour leaves Puck's own geometry alone, which is why this
+     needs no override of the package's rules and no hashed Puck class name to
+     rot on the next bump. `scripts/test-panel-one-arrow.tsx` §3 holds the
+     invariant (moved there when Puck left): the arrow is drawn ONCE or not at
+     all, never tiled, at rest or on hover.
+
+     🎨 THE ARROW COMING BACK IS THE OWNER'S OWN RULING, not a side effect. It
+     puts a visible arrow into the panel's six Puck selects, which have not had
+     one since the editor shipped. He was shown the row as it is today, this,
+     and an arrow-less alternative — three shots of the real panel at its own
+     320px — and on 2026-09-01 he chose this one: "the little arrow is fine."
+     Do not quietly take it away again; it is a decision, with a date.
+
+     🎯 AND IT IS THE SAME ARROW ON EVERY ROW — card 66399. That ruling put an
+     arrow on the SIX selects Puck draws. The panel draws 55 more from its own
+     markup (the `select()` helper's custom field, and the `<select>`s panel
+     components write themselves), and Puck never styles those: nothing set
+     `appearance`, so each one drew whatever arrow the merchant's own browser
+     draws. Measured on origin/main at 320px and again at the 220px minimum, the
+     Divider block's "Style" row and its "Spacing" row — three rows apart in one
+     panel — resolved `appearance: auto` / no image against `appearance: none` /
+     the 12px triangle. A merchant could ask why two rows look different and the
+     only true answer was "because of which library declared them".
+
+     So the five declarations below repeat Puck's OWN geometry, exactly, onto
+     every select the panel draws. Two things follow from that, and both are the
+     point rather than a side effect:
+
+       • THE SIX DO NOT MOVE. Puck's `select._Input-input_…` is (0,1,1) and this
+         rule is (0,1,1) too, so the two collide at equal weight and source order
+         decides — but they now declare the SAME values, so it does not matter
+         which wins. Nothing here has to out-specify the package, and no hashed
+         Puck class is named where it would rot on the next bump.
+       • NEITHER TRAP IS SPRUNG. `appearance: none` alone leaves a row with NO
+         arrow, which looks exactly like a stylesheet that failed to load; the
+         image alone leaves the browser's arrow beside ours, TWO on one row.
+         They only work as a pair.
+
+     ⚠️ LONGHANDS, for card 66397's reason above — and this rule is now the one
+     that would break if that were forgotten, because it is the rule that holds
+     the image. `scripts/test-panel-one-arrow.tsx` resolves the whole cascade per
+     markup shape and fails if any shape's arrow differs from any other's, and if
+     this image ever stops matching the one Puck ships.
+
+     ✅ NOW UNIFIED, one state along — card 66399.c. Puck darkens its own arrow on
+     HOVER at (0,4,1), and that rule can reach only its six. This card's rule
+     below holds it off at (0,5,1) so all 61 rows answer the pointer the same
+     way; `scripts/test-panel-one-hover.tsx` is the guard for it.
+
+     ⚠️ THAT NUMBER WAS WRONG HERE UNTIL 66399.c. It read (0,4,2), and so did the
+     arrow guard's header and sh#1024's body. `:has(> select)` counts in the
+     ELEMENT column, not the class one — and one column out is exactly the
+     difference between three of our classes tying with Puck and losing to it. */
+  background-color: var(--sf-field-bg);
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: var(--sf-select-arrow);
+  background-size: 12px;
+  background-repeat: no-repeat;
+  background-position: calc(100% - 12px) calc(50% + 3px);
+  border-radius: var(--sf-field-radius);
+  padding: 8px 11px;
+  font-size: 13px;
+  color: var(--sf-field-text);
+  cursor: pointer;
+}
+
+/* ── EVERY DROPDOWN ANSWERS THE POINTER THE SAME WAY — card 66399.c ─────────
+   Card 66399 gave all 61 panel dropdowns the same arrow AT REST. Under the
+   pointer they still split: Puck repaints its own six — ground, arrow AND
+   border — from a rule the other 55 have no equivalent of, so one row lights up
+   and the row three above it does nothing.
+
+   🎨 THIS IS THE OWNER'S PICK, WITH A DATE. Lewis was shown four treatments at
+   the panel's own 320px and again at the 220px minimum on 2026-09-02 and chose
+   this one: the ground goes to the panel's own `--sf-hover` and NOTHING ELSE
+   MOVES. He was choosing against a darkened glyph and against a border that
+   jumps 93 points — both of which exist nowhere else in this editor. Changing
+   what this looks like is his call, not a later card's.
+
+   RULE ZERO, ONE GRAMMAR: `--sf-hover` is already what `.sf-row`, `.sf-chooser`,
+   `.sf-rung`, `.sf-seg2 button` and the shell's own `.es-drill` do on hover. The
+   dropdowns join that vocabulary instead of inventing a fifth one — which is
+   also why nothing needs to change in `efficient-easel`: the shell already owns the
+   VALUE (`--es-hover`), and this is the shop agreeing with it.
+
+   ⚠️ WHY FOUR CLASSES, AND WHY THAT IS NOT COSMETIC. Puck's hover rule is
+   (0,4,1) — `._Input_`(class) + `:has(> select)`(ELEMENT: `:has()` takes its
+   argument's specificity) + `:hover`(class) + `._Input-input_`(class) +
+   `:not([disabled])`(attribute). Measured, three of our classes TIES it and then
+   wins only because `storefront-editor.css` is imported after `puck.css` at
+   every editor entry; move an import anywhere and the six rows silently revert
+   to Puck's azure with nothing going red. The fourth class buys independence
+   from load order. No `!important`, and no hashed Puck class name that would rot
+   on the next bump.
+
+   ⚠️ ALL THREE DECLARATIONS ARE LOAD-BEARING. Overriding without `!important`
+   replaces only the properties you NAME, so the arrow and the border are
+   restated at their RESTING values purely to hold Puck's darker pair off. They
+   are not a second opinion about how the row should look.
+
+   AND IT STANDS ASIDE EVERYWHERE ELSE. It needs `:hover`, so it cannot touch the
+   row at rest; it is inside `.sf-insp-body`, so it cannot reach the storefront's
+   own selects; and carrying no `!important` is what keeps Puck's drag paint
+   (`[data-dnd-placeholder]`, which IS `!important`) out of its reach. Card 66395
+   §6 is the precedent for getting that wrong — a shop rule that out-specified
+   Puck the same way went on to win states it should have stood aside for, and
+   every guard stayed green. `scripts/test-panel-one-hover.tsx` resolves the
+   whole cascade per markup shape and asserts what must NOT move as well as what
+   must. */
+.sf-editor .sf-body .sf-panel .sf-insp-body select:hover {
+  background-color: var(--sf-hover);
+  background-image: var(--sf-select-arrow);
+  border-color: var(--sf-input-border);
+}
+.sf-insp-body input[type="range"] {
+  accent-color: var(--sf-accent);
+}
+
+/* The panel's one-line dropdown TRIGGER and its in-flow MENU box, worn by the
+   section Theme row (SectionThemePicker) and the part style chooser. They were
+   MultiSelectField's; that control and SearchSelectField are efficient-easel's
+   FieldSelect now (card [MERGE] One Pop-up List For Editor And One For
+   Shoppers), so their option rows and readout went with them. */
+.sf-multi-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border: 1px solid var(--sf-input-border);
+  background: var(--sf-field-bg);
+  border-radius: var(--sf-field-radius);
+  padding: 8px 11px;
+  font-size: 13px;
+  font-family: var(--sf-font);
+  color: var(--sf-field-text);
+  text-align: left;
+  cursor: pointer;
+}
+.sf-multi-btn:focus-visible {
+  outline: none;
+  border-color: var(--sf-accent);
+  box-shadow: 0 0 0 3px var(--sf-accent-ring);
+}
+.sf-multi-caret {
+  font-size: 10px;
+  color: var(--sf-text-secondary);
+  flex: none;
+}
+.sf-multi-menu {
+  margin: 6px 0 0;
+  padding: 4px;
+  border: 1px solid var(--sf-input-border);
+  border-radius: var(--sf-field-radius);
+  background: var(--sf-field-bg);
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── The section's Theme row (card 66313) ──────────────────────────────────
+   A dropdown, not a swatch strip. The TRIGGER is `.sf-multi-btn` — the panel's
+   existing dropdown trigger, worn rather than copied, because two triggers with
+   different metrics in one panel is a difference nobody decided. What is new is
+   the colour chip, the per-row Edit and the edit sheet, and only those take
+   names here.
+
+   The menu is IN FLOW (`.sf-multi-menu`, inherited), never absolutely
+   positioned: the inspector is its own scroll container, so a floating menu
+   clips against it once the control sits near the bottom of a long section. */
+/* ── The closed trigger: the card, shut ────────────────────────────────────
+   It no longer wears `.sf-multi-btn`. That class is the panel's ONE-LINE
+   dropdown trigger — a 13px row with 8px of padding — and the reason it was
+   worn here (two triggers with different metrics is a difference nobody
+   decided) now points the other way: this control draws a theme card, so the
+   thing it must match is the card, and it matches it by sharing the rule above.
+   The caret is still `.sf-multi-caret`, the panel's own arrow, so the part that
+   says "this opens" is unchanged.
+
+   THE HEIGHT IS THE DESIGN, not an overflow. ~110px against the old ~36px row,
+   in a 320px panel, and Lewis was told the cost and chose it on 2026-09-03:
+   seeing the theme happens every time the tab is opened, editing it happens
+   occasionally. A shorter third drawing to win the space back would be a third
+   way of drawing one thing, which is worse than the space. */
+/* ⚠️ A FRAME, NOT A BUTTON, SINCE 2026-09-03 — it holds one. `Edit` on the
+   closed control has to be clickable, and a <button> inside a <button> is
+   invalid markup that no two browsers un-nest the same way. So the press moved
+   inside: `.sf-theme-pick` (the shared card's own press) wraps the preview and
+   owns the disclosure, and the foot below it holds the name, the Edit and the
+   caret. See `ThemeCardTrigger`. */
+.sf-secttheme-btn {
+  display: block;
+  width: 100%;
+}
+/* THE PANEL'S BUTTON RING, unchanged — `editor-focus-ring-vocabulary`: a button
+   answers focus with the accent border and the ring, exactly as `.sf-multi-btn`
+   did when it was worn here, so keyboard focus looks the same as it did before
+   the drawing changed. */
+/* THE PANEL'S BUTTON RING, on whichever child actually took focus. It is drawn
+   on the FRAME (`:focus-within`) rather than on the press, because the press has
+   no border of its own — the frame is what a merchant sees, so the frame is what
+   must light up. Same three tokens `.sf-multi-btn` used when this control was
+   one button, so keyboard focus looks exactly as it did. */
+.sf-secttheme-btn:focus-within {
+  outline: none;
+  border-color: var(--sf-accent);
+  box-shadow: 0 0 0 3px var(--sf-accent-ring);
+}
+.sf-secttheme-btn .sf-theme-pick:focus-visible,
+.sf-secttheme-btn .sf-theme-edit:focus-visible {
+  outline: none;
+}
+/* THE CARET'S OWN BOX. A pointer target only (`aria-hidden`, out of the tab
+   order — see `ThemeCardTrigger`), so it takes no ring and no hover treatment
+   of its own: the frame's hover already answers the pointer. Sized to the row
+   rather than to the glyph, so the click area is the whole right end. */
+.sf-secttheme-caret {
+  flex: none;
+  border: 0;
+  background: none;
+  padding: 3px 2px 3px 6px;
+  font: inherit;
+  line-height: 1;
+  color: var(--sf-text-secondary);
+  cursor: pointer;
+}
+/* WHERE THE SELECTED CARD WENT. Panel-quiet — the muted grey every other
+   readout uses, never a colour that would read as a warning. It exists because
+   a theme's name is positional, so hiding one leaves 1 · 2 · 4 · 5 · 6 and a
+   missing number reads as missing data. Not a row: there is nothing here to
+   choose. */
+.sf-secttheme-oncard {
+  margin: 0;
+  padding: 5px 4px 7px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--sf-text-secondary);
+}
+/* A site that stores no palette at all has nothing to draw. Sized to the
+   preview it stands in for, and dashed rather than empty for the reason
+   `.sf-secttheme-chip--none` is: a bare outline reads as an image that failed.
+   `Follow the page` does NOT come here — it borrows the page's own palette. */
+.sf-secttheme-nopreview {
+  display: block;
+  height: 74px;
+  background: var(--sf-field-bg);
+  border-bottom: 1px dashed var(--sf-input-border);
+}
+.sf-secttheme-chip {
+  width: 30px;
+  height: 20px;
+  flex: none;
+  display: flex;
+  overflow: hidden;
+  border-radius: 4px;
+  /* A hairline of the merchant's own ink would vanish on a theme whose paper is
+     that ink. A translucent black keeps the chip's edge on every palette. */
+  border: 1px solid rgba(0, 0, 0, 0.14);
+}
+.sf-secttheme-chip i {
+  display: block;
+  height: 100%;
+  flex: 1 1 auto;
+}
+/* The accent is the SMALLER half. The paper is what a merchant recognises a
+   theme by — it is most of what the page is — and the accent is the thing
+   picked out on it, so the chip is drawn in the proportion the page is. */
+/* `i.` MATTERS. `.sf-secttheme-chip i` above is (0,1,1) and a bare class is
+   (0,1,0), so without the element it loses to the rule it is meant to override
+   and both halves take `flex: 1 1 auto` — an even 14/14 split. Measured in
+   Chromium: 14/14 before, 16.8/11.2 after, which is the 60/40 the design asks
+   for. No guard we own looks at a proportion, so this could only be found by
+   drawing it and reading the boxes back. */
+.sf-secttheme-chip i.sf-secttheme-chip-accent {
+  flex: 0 0 40%;
+}
+/* "Follow the page" has no palette of its own to show. A neutral block, not an
+   empty box: an outline with nothing in it reads as an image that failed. */
+.sf-secttheme-chip--none {
+  background: var(--sf-field-bg);
+  border-style: dashed;
+}
+.sf-secttheme-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+/* ⚠️ THE MENU HOLDS CARDS NOW, NOT ONE-LINE ROWS (card 66503), so it is spaced
+   like the Site styles theme list it shares its drawing with — `.sf-theme-list`
+   is `gap: 8px` and this matches it, because two lists of the same cards sitting
+   at two different rhythms is the same drift one level up from the one this card
+   closed. The 1px gap below was right for rows 30px tall and wrong for cards. */
+.sf-secttheme-menu {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  gap: 8px;
+  /* ── THE TINT SAYS "THESE ARE OPTIONS" ────────────────────────────────────
+     Lewis, 2026-09-04: 「代表这些是选项.」 It is a job, not decoration, and the
+     job exists because of a deliberate earlier decision: the closed control and
+     these rows draw the SAME card (66503), so the only thing separating *what
+     this section is on* from *what you could pick* was position.
+
+     ⚠️ THE FILL, NOT THE BORDER, and that is the whole of the choice. The cards
+     are `--sf-panel` white and this container was `--sf-field-bg` white, so the
+     container was invisible — which was the complaint. Filling it makes the 4px
+     padding and the 8px gaps read as ONE REGION: the tint DRAWS the set instead
+     of outlining it. A 1px line has to enclose a 707px stack to say the same
+     thing, and at the 220px minimum it says it more quietly still. He was shown
+     border-only, fill-only and both, at 320 and 220, and chose the fill.
+
+     ⚠️ AND IT KEEPS BLUE OFF THE PALETTES. Every card is a page in the
+     merchant's OWN colours on its own white fill, so a tinted CONTAINER never
+     puts blue against a palette. Same care `.sf-secttheme-chip` takes when it
+     draws its hairline in translucent black rather than in a colour.
+
+     ⚠️ RULE ZERO — THIS IS AN EXCEPTION AND HERE IS ITS REASON. `.sf-multi-menu`
+     is the shared dropdown container and exactly two controls wear it: this
+     list, and `MultiSelectField` (components/MultiSelectField.tsx:144), a list
+     of plain text options. That one is NOT tinted, and must not be "fixed" to
+     match: a list of WORDS in a bordered box already looks like a menu, because
+     that is what a menu is. A list of preview CARDS does not — each card is a
+     miniature web page, so the region reads as CONTENT. The tint buys back the
+     "these are choices" that the card drawing spent. He was offered the other
+     answer (tint every dropdown) on the same board and did not take it.
+
+     No new hex: `--sf-accent-tint` is the shell's own (#eff6ff). A blue invented
+     in a panel stylesheet is a second source for a decision the shell made. */
+  background: var(--sf-accent-tint);
+}
+/* The follow row is still a ROW — it has no palette, so there is nothing for a
+   card to draw. It keeps its own height rather than being stretched to a card's. */
+.sf-secttheme-menu > .sf-secttheme-item {
+  flex: none;
+}
+.sf-secttheme-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 6px 7px;
+  border: 0;
+  background: transparent;
+  border-radius: max(calc(var(--sf-field-radius) - 2px), 2px);
+  font-size: 13px;
+  font-family: var(--sf-font);
+  color: var(--sf-field-text);
+  text-align: left;
+  cursor: pointer;
+}
+.sf-secttheme-item:hover {
+  background: var(--sf-accent-ring);
+}
+/* ⚠️ ONLY THE FOLLOW ROW WEARS `.sf-secttheme-item` SINCE CARD 66503. Its
+   theme siblings are `.sf-theme-card`, the Site styles card, so `is-active`
+   here has one owner and one meaning again — the `:has(.sf-secttheme-pick…)`
+   half went with the two-button row it described, along with `.sf-secttheme-pick`
+   and `.sf-secttheme-edit`, which now have nothing to draw. */
+.sf-secttheme-item.is-active {
+  background: var(--sf-accent-ring);
+  font-weight: 600;
+}
+.sf-secttheme-item:focus-visible,
+.sf-secttheme-done:focus-visible {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+.sf-secttheme-sep {
+  height: 1px;
+  margin: 3px 0;
+  background: var(--sf-input-border);
+}
+/* ── The edit sheet ─────────────────────────────────────────────────────── */
+.sf-secttheme-sheet {
+  margin-top: 6px;
+  border: 1px solid var(--sf-input-border);
+  border-radius: var(--sf-field-radius);
+  overflow: hidden;
+}
+.sf-secttheme-sheet-head {
+  display: flex;
+  align-items: center;
+  padding: 6px 9px;
+  background: var(--sf-field-bg);
+  border-bottom: 1px solid var(--sf-input-border);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sf-field-text);
+}
+.sf-secttheme-done {
+  margin-left: auto;
+  padding: 2px 4px;
+  border: 0;
+  background: transparent;
+  color: var(--sf-text-secondary);
+  font-size: 11px;
+  font-family: var(--sf-font);
+  cursor: pointer;
+}
+/* ⚠️ THE SHEET'S FIVE COLOUR ROWS ARE `ThemeColourRow` SINCE CARD 66503 — the
+   shell's `SettingsField` wearing the shop's picker, the same row the Site
+   styles card opens. So the row draws itself and the sheet only has to inset
+   it, exactly as `.sf-theme-colours` does for the card. The local
+   `.sf-secttheme-row` / `-hex` that used to draw a second, smaller colour row
+   went with it, and with them the 11px hex that E6 would have had something to
+   say about. */
+.sf-secttheme-rows {
+  padding: 0 12px 12px;
+}
+.sf-secttheme-rows > .es-field:first-child {
+  margin-top: var(--es-rhythm-group-first);
+}
+/* THE WARNING IS THE LAST THING IN THE SHEET AND IT IS NOT QUIET. A theme is a
+   shared preset: editing it from one section repaints every section and page on
+   it. Drawn in the panel's own warning ink rather than a new colour. */
+.sf-secttheme-warn {
+  margin: 0;
+  padding: 7px 9px;
+  border-top: 1px solid var(--sf-input-border);
+  background: var(--sf-accent-ring);
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--sf-text-secondary);
+}
+
+/* Collapsed-panel state hook (when Puck's UI flags hide a side) */
+.sf-panel--hidden {
+  display: none;
+}
+
+/* ── The icon rail: the shared editor-shell EaselRail (`.es-rail`) ───────────
+   The rail markup + base styles live in the `efficient-easel` package (imported via
+   `efficient-easel/rail.css`); the storefront no longer hand-rolls `.sf-rail`.
+   editor-shell ships its own defaults, so we remap the themeable `--es-rail-*`
+   custom properties onto the storefront's own `--sf-*` tokens, which is what
+   keeps the shared rail reading as this editor's chrome rather than as the
+   package's. (One mode only — the editor is deliberately light-only; see the
+   note at the top of this file.)
+   Scoped `.sf-editor .es-rail` (specificity 0,2,0) so it always beats rail.css's
+   base `.es-rail` (0,1,0) whatever order the two stylesheets load in.
+
+   THREE TOKENS ARE DELIBERATELY NOT REMAPPED HERE, and each absence is load-
+   bearing since card 66198 laid the rail into the top bar as a row:
+
+     --es-rail-w        only the COLUMN reads it (`.es-rail { width:
+                        var(--es-rail-w) }`); the row is `width: auto` and sizes
+                        to its buttons, so a remap would be config nothing reads.
+     --es-rail-bg       the row variant re-points these to transparent / none / 0
+     --es-rail-shadow   ON PURPOSE: the bar already has its own surface, and a
+     --es-rail-radius   second white card floating inside it is the bug. This
+                        rule ties with `.es-rail.es-rail-row` on specificity
+                        (0,2,0 both), so setting them here would silently WIN
+                        and put that card back. The rail's surface is the bar's.
+
+   Everything left below is colour the row variant does not touch. */
+
+/* ── Left panel: Pages view (Wix-style page list) ───────────────────────── */
+.sf-pages {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+/* Site styles left panel — same column shell as .sf-pages; its body reuses the
+   inspector's .sf-insp-body so the (right-inspector) field styling applies. */
+.sf-styles {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+/* The left panel's search field. It had a second wearer — the Add panel's own
+   search (card 66400.c) — until that panel was deleted and the `+` was pointed
+   at the one picker; the picker has its own `.sf-addsearch`, sized for a 772px
+   dialog. So this is the Pages list's control alone again. */
+.sf-pages-search {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 0 12px 8px;
+  padding: 7px 10px;
+  background: var(--sf-track-bg);
+  border-radius: 8px;
+  color: var(--sf-muted);
+}
+.sf-pages-search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  font-family: var(--sf-font);
+  font-size: 13px;
+  color: var(--sf-text);
+  outline: none;
+}
+.sf-pages-search-input::placeholder {
+  color: var(--sf-muted);
+}
+.sf-pages-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 8px 8px;
+}
+/* A note in this list is not the panel's body — it stands where a page row
+   would, so it takes the ROW's inset and lines up with the group heads above
+   it rather than with the panel edge. Placement only; the note style itself is
+   .sf-note. */
+.sf-pages-list > .sf-note {
+  padding: 10px 12px;
+}
+.sf-pages-list > .sf-note--error {
+  margin: 4px 4px 0;
+}
+.sf-pgroup {
+  margin-top: 2px;
+}
+.sf-pgroup-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 8px 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--sf-muted);
+}
+.sf-pgroup-head:hover {
+  color: var(--sf-text);
+}
+.sf-pgroup-label {
+  flex: 1;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+}
+.sf-pgroup-count {
+  flex: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sf-muted);
+  background: var(--sf-track-bg);
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+.sf-pgroup-body {
+  display: flex;
+  flex-direction: column;
+}
+/* Page rows reuse .sf-row; anchors (Cart/Checkout) reset link chrome. */
+.sf-prow {
+  text-decoration: none;
+  color: inherit;
+}
+.sf-page-draft {
+  flex: none;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--sf-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+/* Page-TYPE pills — mirror the admin Console's Pages list so a per-product PDP
+   template (dynamic, blue) or an editable popup (lightbox, green) is as obvious
+   in the editor's page list as it is in the Console. */
+.sf-badge-dynamic,
+.sf-badge-lightbox {
+  flex: none;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: 999px;
+}
+.sf-badge-dynamic {
+  color: var(--sf-accent-text);
+  background: var(--sf-accent-tint);
+}
+.sf-badge-lightbox {
+  color: #047857; /* emerald-700 — matches the Console's Lightbox pill */
+  background: #ecfdf5; /* emerald-50 */
+}
+.sf-page-edit {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  color: var(--sf-muted);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.sf-row:hover .sf-page-edit,
+.sf-row:focus-within .sf-page-edit {
+  display: flex;
+}
+.sf-page-edit:hover {
+  background: var(--sf-hover);
+  color: var(--sf-text);
+}
+/* Row hover-delete (template pages — inline page management). */
+.sf-page-edit--danger:hover {
+  background: var(--sf-danger-tint);
+  color: var(--sf-danger);
+}
+.sf-page-edit--danger:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+/* "Preview" pill on Cart / Checkout — signals "opens the live page, view-only". */
+.sf-badge-preview {
+  flex: none;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: 999px;
+  color: var(--sf-warning);
+  background: var(--sf-preview-tint);
+}
+.sf-pages-new {
+  flex: none;
+  margin: 6px 10px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 9px;
+  border: 1px dashed var(--sf-line);
+  border-radius: var(--sf-row-radius);
+  background: transparent;
+  color: var(--sf-accent-text);
+  font-family: var(--sf-font);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.sf-pages-new:hover {
+  background: var(--sf-hover);
+}
+
+/* ── Layers rows (redesign 2b) ──────────────────────────────────────────
+   The Layers tree's rows are editor-shell's `TreeRow` (efficient-easel/tree.css):
+   the name box with the eye and trash laid over its END (card 66199), the
+   hover / focus-within reveal, a hidden row's permanent eye, the grip in the
+   row's own left padding, the caret-or-spacer column (One Ladder), the drag and
+   drop marks and the rename box — all lifted from this sheet. What stays below
+   is `.sf-row-del`, which the standalone section editor's own rows still wear. */
+/* Per-row delete — a hover-revealed trash on section, slot-child and
+   footer-block rows. Laid out inside `.sf-row-actions` above, invisible +
+   non-interactive until the row is hovered or a control inside it is focused,
+   so it stays out of the way of the visibility eye.
+   Deleting is a normal dispatch, so Undo restores the row. */
+.sf-row-del {
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--sf-danger);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  flex: none;
+  transition: opacity 0.12s, background 0.12s, color 0.12s;
+}
+.sf-row:hover .sf-row-del,
+.sf-row:focus-within .sf-row-del {
+  opacity: 0.7;
+  pointer-events: auto;
+}
+.sf-row-del:hover {
+  opacity: 1;
+  background: var(--sf-danger-tint);
+  color: var(--sf-danger-strong);
+}
+.sf-panel-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* The relocated heading-outline tool sits muted at the bottom of the tree. */
+.sf-tree-tool {
+  margin-top: 14px;
+  /* The left inset is the tree's 11px column, not `.sf-tree`'s padding — that
+     is 0 on this side now so the bars can bleed. */
+  padding: 10px 0 0 11px;
+}
+
+/* `.sf-field-section` AND `.sf-field-group` WERE HERE, and they are gone on
+   purpose (card 66300). They were the panel's two heading tiers — a 12px label
+   over a 1.5px rule, and a 10.5px label over a 1px one — and the rules are what
+   the owner objected to on 2026-08-31: "these lines, I still find them annoying
+   to look at".
+   Both tiers are drawn by `efficient-easel/panel` now: `SettingsGroupHead` (the
+   filled pill) and `SettingsGroupSub` (the quiet tier, added in 0.25.0 for this).
+   Nothing in this repo renders either class any more — the four panels that
+   inlined `.sf-field-group` as a bare div (HeroText, Ticker, HeroMedia, Chat)
+   call `GroupLabel` in the same card, because leaving them behind would have put
+   the hairline back in four panels and given the editor two answers to "what does
+   a group heading look like" — which is the fault the conversion is fixing.
+   Deleted rather than left dead: a rule nobody renders is a rule the next person
+   edits and watches do nothing.
+   CARD 66300.a FINISHED THE JOB. The last selector that named `.sf-field-section`
+   went with them: a `[class*="_PuckFields-field_"]:first-child` descendant that
+   pulled the first header flush to the panel top. It had matched nothing since the
+   rule above was deleted in this same pull request. The two comments that described
+   the pair went with it, and so did the section header that had nothing left under
+   it — the real "floating custom controls" rules live further up, at
+   `Floating-styled form controls for Puck's native fields`.
+   MEASURED BEFORE CUTTING, with controls in the same sweep, so the zero is a
+   measurement and not a query that finds nothing: `.sf-field-section` and
+   `.sf-field-group` return ZERO renders across app/, components/, lib/ AND the
+   installed `efficient-easel` / `efficient-shell` bundles, while the same query returns
+   `.sf-field-label` 45, `.sf-panel-title` 5, `.sf-insp-name` 1, `.es-group-head` 2
+   and `.es-group-sub` 1. The shell controls are the ones that matter: they prove the
+   sweep reaches into the package that draws the replacement markup, so a class
+   rendered THERE could not have hidden from it. */
+
+/* ── The settings TABS (card 8802; the Inspector's since blueprint 4.4) ───────
+   The strip is `.es-tabs` from `efficient-easel/panel.css`, drawn by
+   efficient-easel's `Inspector` (components/SiteFields) above its rows. Puck's
+   flat list of hashed wrappers, which made `lib/puck/controls.tsx` mark each
+   bucket and hide the others' rows with a DOM pass, is gone: a row on another
+   tab is `hidden` by the Inspector itself, and a bucket header is a marker
+   field that draws no row at all. What is left here is only the storefront's
+   own look of the strip.
+
+   Editor-only, like every rule around it — never on the published page. */
+
+/* AND IT IS PINNED TO THE TOP OF THE PANEL (card [FIX] Pin The Settings Tabs).
+   Lewis, 2026-09-03, scrolling a Product Grid's settings: the four bucket tabs
+   scrolled away with the rows, so a merchant three screens down had no way to
+   change bucket without scrolling back up. The strip is a BOUNDARY, not a row —
+   it should behave like the panel head it sits under.
+
+   `position: sticky` on the STRIP'S WRAPPER, and the two conditions it needs
+   are both already true here, which is why this is three declarations and not a
+   restructure:
+
+     the nearest scrolling ancestor is `.sf-insp-body` (`overflow-y: auto`
+     above); the Inspector's own `.es-insp` / `.es-insp-rows` carry NO
+     overflow, and `SectionTextSuppressProvider` / `FoldHeadingScope` are
+     context only and draw no element — so nothing between the wrapper and the
+     scroll box clips it. Checked, not assumed: a sticky that does not stick
+     reports nothing at all.
+
+   THE BACKGROUND IS NOT DECORATION. A pinned element with no background lets
+   the rows scroll through it, and `.es-tabs` paints none of its own — it draws
+   only the rule along its bottom edge. `var(--sf-panel)` is the same token the
+   panel behind it uses, so the strip stays the surface it is already sitting
+   on rather than becoming a second one.
+
+   NOTHING HERE TOUCHES `.es-tabs` — the shell owns the strip's own looks, and
+   `scripts/test-panel-tabs-single-home.ts` fails if this repo reaches into it.
+   What is styled is the strip's place in this panel (`.es-insp-tabs`, the
+   Inspector's own wrapper around it); that place is this repo's to set. */
+.sf-insp-body .es-insp-tabs {
+  padding: 0;
+  position: sticky;
+  /* Flush with the top of the scroll box, so the rows pass UNDER the strip
+     rather than beside it. The body's own 4px of top padding is above this
+     line and scrolls away with the first row, which is what makes the strip
+     land against the panel head. */
+  top: 0;
+  /* Over the rows and over the fold headings, under the panel head — which is
+     outside this scroll box entirely and cannot be overlapped. */
+  z-index: 2;
+  background: var(--sf-panel);
+  /* …AND THE PAINT REACHES ABOVE IT. Lewis, 2026-09-03, with a screenshot: the
+     strip pins, but a row's words show through a thin band above it.
+
+     MEASURED, not guessed. In a real `.sf-panel` scrolled 260px, the band
+     between the scrollport's top edge and the pinned strip is exactly 4px —
+     `.sf-insp-body`'s own `padding-top` — and `elementFromPoint` in the middle
+     of it returns a row's `.sf-field-label`. The strip is doing its job; the
+     4px above it simply belongs to nobody, so the rows keep it.
+
+     A SHADOW AND NOT LAYOUT, because the gap is not the complaint: the spacing
+     is right and only the transparency is wrong. `box-shadow` paints and
+     occupies nothing, so the strip stays exactly where it is and every row
+     below keeps its position — a `padding-top` here, or a negative `top`,
+     would move the strip and change the spacing he asked to keep.
+
+     16px AND NOT 4, deliberately. The scroll box clips its own overflow, so
+     paint above the scrollport's top edge cannot escape into the panel head no
+     matter how far it reaches — the value only has to be AT LEAST the body's
+     padding. Pinning it to 4 would mean a future change to
+     `.sf-insp-body`'s padding silently reopens this leak, and a leak that
+     comes back looks like the fix was never made. */
+  box-shadow: 0 -16px 0 0 var(--sf-panel);
+}
+/* The NARROW panel is the shell's problem, and the shell solves it. Nothing
+   here styles `.es-tabs` — see scripts/test-panel-tabs-single-home.ts, which
+   fails if anything does.
+
+   Why the upstream rule exists, since this is where the defect was found: the
+   settings panel is draggable down to MIN_PANEL_W = 220px
+   (components/panel-widths.ts) and four tabs need 267px, so at anything under
+   ~270 the last tab — Layout — was clipped off the right edge and could not be
+   reached at all. Measured: at 220px and at 260px the fourth tab sat past the
+   strip's right edge; wrapping runs the strip to two rows (37px → 75px) and
+   every tab stays reachable, while the default 308px panel is untouched at one
+   row.
+
+   `efficient-easel/src/panel/panel.css` now carries that as `flex-wrap: wrap` on
+   `.es-tabs` itself, with `flex: none; white-space: nowrap` on `.es-tab` so a
+   wrapped tab keeps the width its label needs. Both editors get it, which is
+   the point — the storefront had been fixing this for itself while the campaign
+   designer went without. Card 8802 held a local copy here under a comment
+   claiming card 8802.d had already deleted it; 8802.d had done the upstream
+   half only, so the copy outlived its own obituary until card 66130. */
+/* ── THE PANEL'S VERTICAL RHYTHM COMES FROM THE SHELL ──────────────────────
+   Card [PLAN] Panel Spacing Rules. Lewis, 2026-09-03: the panel is too loose.
+   Measured before anything was changed, in Chromium against these stylesheets
+   and editor-shell 0.29.0, on a Product Grid's Media tab at the real 320px:
+
+     a group heading to its first setting     74px
+     one setting to the next                  50px
+     the last setting to the next heading      74px
+
+   36px OF EVERY ONE OF THOSE WAS NEVER A DECISION. Puck wraps each field in
+   `._PuckFields-field_` and gives it `padding: 16px 16px 12px` plus an 8px
+   `margin-top` between wrappers. That padding was the air around a RULED cell
+   — Puck draws a `border-top` between fields. Card 66334 deleted every one of
+   those lines, on the owner's word, and left the padding behind. It has been
+   dead air stacked on top of the shell's rhythm ever since, and it is why a
+   panel that reads as "too loose" measures as one nobody has loosened.
+
+   ⚠️ ZEROED, NOT TUNED — and since blueprint 4.4 there is nothing left to zero.
+   The rows are efficient-easel's `.es-insp-row`, which carry no padding, no
+   gap and no rule of their own, so every gap below comes from ONE place.
+
+   `--es-rhythm-*` ARE THE SHELL'S AND ARE NOT COPIED. They are declared on
+   `.es-editor` in `efficient-easel/src/panel/panel.css`, floored on
+   `--es-row-gap`, and the six values are the owner's own from 2026-08-31
+   (card 66301, "too tight, open it up"). Reading them here is what stops this
+   sheet from being a second source for numbers that sheet already owns — the
+   fault card 66228 removed from the Layers tree and this leaves in the
+   settings panel. Never re-state one as a literal beside the token.
+
+   ⛔ NO RAW VERTICAL PX BETWEEN TWO THINGS IN THIS PANEL. A control's own
+   INNER padding is not a gap and is not covered. Enforced by
+   `scripts/test-panel-spacing-tokens.ts`, which reads this file and fails on a
+   raw length in a between-element margin — the allow-list there carries a
+   written reason for each of the few that remain. */
+/* BETWEEN two settings. */
+.sf-field {
+  margin-top: var(--es-rhythm-between);
+}
+
+/* ── ONE SETTINGS MODULE ENDS AND THE NEXT BEGINS ──────────────────────────
+   Owner ruling, Lewis, 2026-09-03. He asked for "a line after each settings
+   module" because two modules in one panel read as one long list, then
+   rejected the first drawing of it in his own words: it read like a header's
+   rule with its options under it, not like a boundary between two things.
+
+   THAT IS NOT A DRAWING MISTAKE, and it is why this rule looks the way it
+   does. A hairline INSET to the rows belongs to the content column, and so to
+   the heading directly beneath it; an interface's commonest use of that shape
+   is a header rule, so that is what the eye picks. Five versions were drawn at
+   the panel's real 320px and he chose this one:
+
+     FULL BLEED — the rule runs to the panel's own edges, past the rows, so it
+     reads as the panel's structure rather than as something belonging to the
+     text under it. This is the ONLY difference from the version he rejected,
+     and `scripts/test-panel-no-divider-lines.tsx` asserts it: without that
+     check, insetting the line is a one-word edit that turns the allowed rule
+     back into the rejected one with every test still green.
+
+     30px OF AIR ON EACH SIDE — his number, picked on the real editor after
+     looking at 28. Symmetric on purpose: the full bleed is what says which
+     side the rule belongs to, so the air does not have to.
+
+   ⚠️ WRITTEN AS `field + field`, FOUR CLASSES, AND THAT IS NOT COSMETIC. Two
+   rules further down are (0,3,0) — card 66334's `border-top: 0` and this
+   card's own `margin-top: 0` — and a two-class rule loses to both SILENTLY:
+   the line never paints and the panel looks untouched. Measured in a fixture
+   against this stylesheet before it reached the preview door. Same specificity
+   trap as the 8px below, on the same card, found the same way.
+
+   THE FIRST MODULE TAKES NO RULE. A module heading is not `:first-child`
+   here — the hidden bucket header and the tab strip come before it — so
+   excluding it means naming the wrappers that can precede it. The strip
+   already draws its own bottom rule; a second one under it is two lines.
+
+   ⚠️ THIS IS A LINE, so it is on card 66334's allow-list as a KEEP with his
+   words. It is NOT one of the twenty-eight that card removed: those were drawn
+   between every ROW, which is what he called annoying. This is one per
+   module — three or four in a panel. */
+/* ⚠️ THE THEME SHEET REACHES THE SAME RULE BY JOINING THIS SELECTOR LIST, never
+   by declaring the values again. Lewis, 2026-09-04, looking at the open theme
+   card: `SURFACES` sat against the row above it and there was no line between
+   the two modules. Both symptoms had one cause — the sheet hand-rolled its own
+   `.sf-subgroup` heading while the shell shipped `SettingsGroupSub`, so this
+   rule, which keys on `.es-group-sub`, could never see it.
+
+   The heading is the shell's now, and these two selectors are what carry the
+   rule into a sheet that does not draw Puck field wrappers: it renders its rows
+   as bare `SettingsField`s inside its own container. Same 30px, same full
+   bleed, same token-read cancel — one block, because a second copy of his
+   number is the thing that goes stale.
+
+   ⚠️ AND THE COMMENT LIVES ABOVE THE RULE, NOT INSIDE THE SELECTOR LIST. Put
+   between two selectors it split the list in the divider guard's parser, which
+   then reported half of one rule as an unlisted line — a comment changing what
+   a guard sees. */
+.sf-insp-body .es-insp-row:has(.es-group-sub),
+.sf-theme-colours .es-group-sub,
+.sf-secttheme-rows .es-group-sub {
+  border-top: 1px solid var(--sf-line);
+  margin-top: 30px;
+  padding-top: 30px;
+  /* Cancel the panel body's side padding, then put it back inside, so the rule
+     reaches the panel edge while the words stay on the rows' left edge.
+     ⚠️ READ FROM THE TOKEN, never typed. A literal `14px` here hung the line
+     6px OUTSIDE the panel at every width under 280, where card 66212 narrows
+     the padding to 8 — measured at 260 and at 220 before this was a `var()`. */
+  margin-left: calc(var(--sf-insp-pad-x) * -1);
+  margin-right: calc(var(--sf-insp-pad-x) * -1);
+  padding-left: var(--sf-insp-pad-x);
+  padding-right: var(--sf-insp-pad-x);
+}
+/* The heading's own top margin is the wrapper's job now. */
+.sf-insp-body .es-insp-row:has(.es-group-sub) .es-group-sub {
+  margin-top: 0;
+}
+/* No rule directly under the tab strip, or under a hidden bucket header. */
+.sf-insp-body .es-insp-row:nth-child(1 of :not([hidden], :empty, :has(> [data-sf-device-hidden], > [data-sf-no-control]))):has(.es-group-sub) {
+  border-top: 0;
+  margin-top: 0;
+  padding-top: var(--es-rhythm-group-first);
+}
+/* A HEADING OWNS ITS FIRST SETTING, so that setting sits closer to it than to
+   the settings below it. The shell says this as
+   `.es-group-body > .es-field:first-child`, which cannot fire here: Puck's
+   inspector is a FLAT sibling list, so a heading never wraps the rows it heads
+   and there is no `:first-child` to select. Same rule, said the only way this
+   DOM can say it — the row after the heading's wrapper. Without it the
+   heading's own 24px bottom margin simply loses the collapse to the 38px above
+   the row, and every heading sits as far from its own settings as from
+   somebody else's. */
+.sf-insp-body .es-insp-row:has(.es-group-sub) + .es-insp-row .sf-field,
+.sf-insp-body .es-insp-row:has(.es-group-head) + .es-insp-row .sf-field {
+  margin-top: var(--es-rhythm-group-first);
+}
+.sf-field-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sf-text-secondary);
+  /* WITHIN one setting: its label to its own control. This gap is the only
+     thing saying which label owns which control, so it stays plainly smaller
+     than the gap BETWEEN settings — the pair the shell asks a consumer to keep
+     when it re-scales (panel.css, `--es-rhythm-within`). */
+  margin-bottom: var(--es-rhythm-within);
+}
+.sf-field-label--inline {
+  margin-bottom: 0;
+}
+/* A hint that answers a question you only have WHILE TYPING waits until the box
+   is in use (card 8802.g). Which sentence is which — and why one waits and the
+   other never does — is decided once, in `hintIsWhileTyping` in
+   lib/puck/controls.tsx; this is only the showing and the hiding.
+
+   CSS rather than React state, the same call card 8802.h made in editor-shell:
+   a repaint on focus drops the browser's text selection, and the formatting bar
+   above the box exists to act on that selection.
+
+   SCOPED TO THE MODIFIER, NEVER TO .es-field-hint ITSELF. The shared caption
+   class also carries the anchor sentence, which is on every section and is the
+   only thing that says what the term of art "Anchor name" means. A rule written
+   one class wider would take that explanation off all of them at once. */
+/* ── The section panel's own hints switch ───────────────────────────────────
+   [ADD] Section Panel Folds Its Hints, 2026-09-06. Owner asked for the same
+   control the Basics tab has had since card 66177 — a section's Style tab was
+   carrying two- and three-line explanations on rows a merchant has read once.
+
+   ⚠️ IT FOLDS A ROW'S EXPLANATION, NEVER A STATE. Every quiet line is
+   `.es-field-hint` now, and two kinds must stay on screen: the "Anchor name"
+   sentence, the only place that term of art is explained, and the source note,
+   which tells a merchant why clicking a hydrated word gave them no caret. Both
+   are marked `.sf-hint-keep`, and the rule below leaves them alone. */
+/* ⚠️ AND NEVER A HINT THAT HOLDS `.sf-hint-keep` ([MERGE] One Settings Row And
+   Hint In The Website Editor, 2026-10-06). The shop's own hint classes are
+   gone; every quiet line under a control is `SettingsField`'s `hint`. The few
+   that are a STATE rather than an explanation — loading, empty, why a control
+   is disabled — wrap their words in `components/KeepHint.tsx`, and a line under
+   no row wears `sf-hint-keep` itself; this rule leaves both on screen. `scripts/test-section-hints-fold.ts` holds both. */
+.sf-panel--right.sf-hints-folded .es-field-hint:not(.sf-hint-keep):not(:has(.sf-hint-keep)) {
+  display: none;
+}
+
+.es-field-hint:has(.sf-hint-while-typing) {
+  display: none;
+}
+.es-field:focus-within > .es-field-hint:has(.sf-hint-while-typing) {
+  display: block;
+}
+
+/* ── Device-aware fields (lib/puck/device-fields.tsx) ─────────────────────────
+   The rule that collapses a row holding the device gate's marker
+   (`[data-sf-device-hidden]`) is efficient-easel/screen.css's since 0.103.0:
+   the screen's own gate paints the marker, so every host that mounts the screen
+   needs the rule, and this sheet goes to one of them. It loads before this
+   sheet, where the rule stood; no rule here meets it on `display !important`. */
+/* ── A field that draws NO CONTROL here (card 66178) ──────────────────────────
+   Puck owned the wrapper around every top-level field and ruled the gap between
+   two of them, so a field whose render returned nothing still took its
+   `16px 16px 12px` and still drew the line: a hairline with only blank space on
+   one side. (Since blueprint 4.4 the row is efficient-easel's `.es-insp-row`.) It was three of
+   them stacked on the Collections Content tab, and 338 such rows across 74
+   panels.
+
+   The field says so instead, and the wrapper goes — `display: none`, so the row
+   leaves the accessibility tree with it rather than lingering as an unlabelled
+   blank a screen reader still walks through. Declarative, like the device
+   gate's rule (efficient-easel/screen.css) and the one below, so it cannot race
+   the tab pass; and the attribute name is stated once in
+   `lib/puck/panel-no-control-mark`, which `scripts/test-panel-no-empty-rows.tsx`
+   §4 reads back to prove this rule is really here.
+   The marker is the screen's (efficient-easel paints it), so the rule belongs
+   in efficient-easel/screen.css too, and moves there once that storefront guard
+   reads both sheets (`editorSheet()`); easel's tests/screen-css-closure lists it
+   as open until then. */
+.es-insp-row:has(> [data-sf-no-control]) {
+  display: none !important;
+}
+
+/* ── NO DIVIDER HAIRLINES IN THIS PANEL (card 66334) ──────────────────────────
+   The owner asked for these lines to go twice. Deleting our own was only part of
+   it: the rule below is drawn by a PACKAGE, it is the majority of what is
+   actually on screen, and it cannot be deleted from here.
+
+   Puck rules the gap between every pair of top-level fields, so it draws once
+   per field for the whole panel — 28 lines in a single section panel, measured.
+   That is most of the panel's lines on its own, which is why removing the shop's
+   own two heading rules (card 66300) did not change what he saw.
+
+   ⚠️ THERE WERE TWO OF THESE, AND THE OTHER ONE IS GONE. The shell drew
+   `.es-drill + .es-drill`, 16 more lines between the rows that list a section's
+   text parts. It was held here under a written expiry, because a rule that lives
+   in another repo could not be reached from this one. editor-shell 0.29.0 (card
+   66350) deleted it AT SOURCE and card 66351 deleted this repo's copy with it —
+   the ending the Puck rule below cannot have, since `@measured/puck` is not ours
+   to change. That seam is now held from both ends by
+   `scripts/test-drill-rows-separated-by-air.ts`: it fails if the shell starts
+   drawing on it again, and it fails if a local override for it reappears here.
+
+   ⚠️ SPECIFICITY, NOT `!important`. Puck's rule is (0,3,0) —
+   `wrapFields field + field` — so this restates all three parts to match it, and
+   wins on order: `storefront-editor.css` is imported after `puck.css` and after
+   `panel.css` at every call site. The `[class*=]` form is this file's existing
+   idiom for Puck's hashed module names (see the three rules above); a bare class
+   would break on the next Puck bump, silently, by putting the lines back.
+
+   This is an override of a live upstream rule, not dead code:
+   `scripts/test-panel-no-divider-lines.tsx` §2 asserts the upstream rule still
+   exists before checking it, so if Puck ever drops its own line, the guard says
+   to delete the override rather than leave it lying here — which is exactly what
+   happened to the drill one above. */
+
+/* The header panel's px readouts (Size, Space from the logo, Height) follow
+   option E (Lewis, 2026-10-07): grey while the setting is unchanged — the grey
+   is what says "default" — and the text colour once it is set, beside the ↺. */
+.sf-header-value[data-changed] { color: var(--sf-text); }
+
+/* ── Inherit / overridden badge: GONE (owner 2026-10-06) ─────────────────────
+   The `.sf-inherit` chip ("Inherits · Site" / "Overridden ↺") was replaced by
+   easel's `SettingsDefaultReset` — the word "Default", and a "Reset" button —
+   which draws itself from `efficient-easel/panel.css`. One part, both editors;
+   no shop rule styles it. `scripts/test-one-default-reset.ts` fails on a new
+   `.sf-inherit` rule. */
+
+/* Read-only value display — same metrics as an inspector input, but styled as a
+   system-set value the panel SHOWS rather than edits (e.g. the Website name,
+   which is renamed in the Console). Muted fill + secondary text + a default
+   cursor so it never reads as an editable field; a long name ellipsises. */
+.sf-field-readonly {
+  border: 1px solid var(--sf-input-border);
+  background: var(--sf-chip-bg);
+  border-radius: var(--sf-field-radius);
+  padding: 8px 11px;
+  font-size: 13px;
+  color: var(--sf-text-secondary);
+  font-family: var(--sf-font);
+  cursor: default;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Text field with a visibility eye: leading type glyph · label · trailing eye.
+   The eye flips a stored `hidden` flag that drops the element from the slide
+   render — see controls.tsx. The input stays editable (dimmed) while hidden. */
+.sf-field-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* The same label-to-control gap as `.sf-field-label` above — this is that
+     label, with a glyph and an eye beside it. */
+  margin-bottom: var(--es-rhythm-within);
+}
+.sf-field-head .sf-field-label {
+  flex: 1;
+  min-width: 0;
+  margin-bottom: 0;
+}
+.sf-field-eye {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--sf-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+  transition: background 0.12s, color 0.12s, opacity 0.12s;
+}
+.sf-field-eye:hover {
+  background: var(--sf-hover);
+  opacity: 1;
+  color: var(--sf-text-secondary);
+}
+/* Hidden: the element is dropped from the slide, but the input stays so the copy
+   is preserved and editable. Strike the label + dim the input + light the eye —
+   mirroring the section tree's hidden-row cue. */
+.es-field.is-hidden .es-field-label {
+  color: var(--sf-muted);
+  text-decoration: line-through;
+}
+.es-field.is-hidden .sf-field-eye {
+  opacity: 1;
+  color: var(--sf-text-secondary);
+}
+.es-field.is-hidden input,
+.es-field.is-hidden textarea {
+  opacity: 0.5;
+}
+
+/* Formatting bar above a copy field — bold · italic · strike · highlight.
+   Select words in the field, press a button; the button writes the markup the
+   renderer understands, so a merchant never types a delimiter. Sits between the
+   label row and the input, at the icon-button metrics the eye already uses, so a
+   copy field gains a row of chrome rather than a new visual language.
+   The buttons take their ink from the same tokens as every other inspector icon,
+   so light and dark both follow the panel — no colour is named here. */
+/* ⚠️ THE ROW ITSELF IS `efficient-easel/copy`'s `MarkBar` NOW (`.es-copy-bar`), and
+   these rules are what keep it looking like the shop's. The shell dresses its
+   bar from `--es-*` with its own metrics; the inspector's bar has to belong to
+   the inspector. Same rule, two skins — the split the two editors already make.
+
+   `.sf-markup` — the container class this repo's own bar carried — is GONE from
+   these selectors, because nothing renders it any more (swept: no `"sf-markup"`
+   class in app / components / lib). `.sf-markup-btn` stays: the Clear button is
+   still the host's own and still takes its metrics from it. */
+.sf-copybox > .es-copy-bar,
+.es-list-above > .es-copy-bar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  /* ZERO, and it is the shell's 4px being neutralised rather than a gap being
+     chosen. `copy.css` gives its bar a gap to the box below it, because in the
+     campaign designer the bar floats above a separately framed box. Here the
+     bar sits INSIDE the frame (card 8802.g) and the list column already spaces
+     its children — both places set 0, which is what the two rules further down
+     used to do one at a time. */
+  margin-bottom: 0;
+}
+/* ⚠️ THE BAR WRAPS, and it has to now that three of its buttons are WORDS.
+
+   It was `nowrap` to reproduce the old `.sf-markup` exactly, which was right
+   while every button was a 24px glyph. Highlight / Bold / Quiet are names
+   (card: the three blank buttons), and three names do not share a line with
+   four glyphs and a Clear button in a narrow panel. Measured, `text` row:
+
+       panel   nowrap                 wrap
+       320px   Clear 6px inside       6px inside, one line
+       220px   Clear 12px OUTSIDE     6px inside, two lines
+       181px   Clear 51px OUTSIDE     6px inside, two lines
+
+   So the wrap is not a preference: without it the fix for the blank buttons
+   would trade three unreadable buttons for an unreachable one. `copy.css`
+   already wraps; this rule now only exists to say why that is wanted here. */
+.sf-copybox > .es-copy-bar,
+.es-list-above > .es-copy-bar {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+/* A button that draws a GLYPH is a square; a button that draws a WORD is as
+   wide as its word. `has-glyph` is the shell's own marker for the difference
+   (editor-shell 0.62.0), so the two cases are told apart by what they hold
+   rather than by a list of style names kept in step by hand. */
+.sf-markup-btn,
+.sf-copybox .es-copy-mark.has-glyph,
+.es-list-above .es-copy-mark.has-glyph {
+  width: 24px;
+}
+.sf-copybox .es-copy-mark:not(.has-glyph),
+.es-list-above .es-copy-mark:not(.has-glyph) {
+  /* The style's NAME — Highlight / Bold / Quiet. Padded so two of them do not
+     read as one word, and never wrapped mid-name. */
+  padding: 0 6px;
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.sf-markup-btn,
+.sf-copybox .es-copy-mark,
+.es-list-above .es-copy-mark {
+  height: 22px;
+  border: none;
+  background: transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--sf-icon);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.75;
+  transition: background 0.12s, color 0.12s, opacity 0.12s;
+}
+.sf-markup-btn:hover:not(:disabled),
+.sf-copybox .es-copy-mark:hover:not(:disabled),
+.es-list-above .es-copy-mark:hover:not(:disabled) {
+  background: var(--sf-hover);
+  color: var(--sf-text-secondary);
+  opacity: 1;
+}
+.sf-markup-btn:active:not(:disabled),
+.sf-copybox .es-copy-mark:active:not(:disabled),
+.es-list-above .es-copy-mark:active:not(:disabled) {
+  background: var(--sf-accent-tint);
+  color: var(--sf-accent-text);
+}
+.sf-markup-btn:disabled,
+.sf-copybox .es-copy-mark:disabled,
+.es-list-above .es-copy-mark:disabled {
+  color: var(--sf-disabled);
+  cursor: default;
+}
+/* The fifth button — clear formatting (card 8809) — pushed away from the four.
+   The four ADD a mark to a selection; this one TAKES every mark off the whole
+   field, so it does not stand shoulder to shoulder with them. This one rule is
+   the whole separation: `margin-left: auto` makes the bar's own `.es-divider-v`
+   eat the free space, which IS the flexible spacer, and carries the button after
+   it to the far end. No new class, no new line and no new colour — the divider
+   already draws itself in --sf-divider, and the button takes `.sf-markup-btn`
+   for its metrics, its hover and its :disabled look.
+
+   The height is the one adjustment: `.es-divider-v` is 22px for the 30px icon
+   buttons of the top toolbar, which in a 22px row would run edge to edge and
+   read as a wall rather than a seam. 14px matches the glyphs it separates. */
+.sf-copybox > .es-copy-bar > .es-copy-bar-split,
+.es-list-above > .es-copy-bar > .es-copy-bar-split {
+  margin-left: auto;
+  height: 14px;
+}
+/* ⚠️ AND THE AUTO MARGIN IS ON THE BUTTON TOO, not only on the divider.
+   `margin-left: auto` eats the free space of the line the item is ON. While
+   the bar was one line that was the same thing. Now that it wraps, the divider
+   can end line 1 while Clear starts line 2 — and Clear, with no auto margin of
+   its own, sat at the LEFT of that line. Measured at 181px: three rows, glyphs
+   / names / Clear, with Clear 135px from the right edge it is supposed to be
+   at. One declaration, and it is at the far end of whichever line it lands on. */
+.sf-copybox > .es-copy-bar > .sf-markup-clear,
+.es-list-above > .es-copy-bar > .sf-markup-clear {
+  margin-left: auto;
+}
+/* The shell's divider dressed as the shop's `.es-divider-v`: the same seam, so
+   the bar has ONE divider rather than the shell's plus a hand-rolled one.
+   NO COLOUR IS NAMED — copy.css already draws it in `--es-copy-rule`, which the
+   editor aliases onto its own border token, exactly as `.es-divider-v` drew
+   itself in `--es-divider`. A colour here would be a second answer. */
+.sf-copybox > .es-copy-bar > .es-copy-bar-split,
+.es-list-above > .es-copy-bar > .es-copy-bar-split {
+  align-self: center;
+  margin-right: 2px;
+}
+/* A hidden element's copy is still editable, so the bar dims with the input
+   rather than disappearing — same cue, same reason as the input's 0.5. */
+.es-field.is-hidden .es-copy-bar {
+  opacity: 0.5;
+}
+
+/* ── The copy box: ONE frame around the bar and the words ─────────────────────
+   Card 8802.g. The bar and the input used to be siblings — the bar with no
+   frame of its own, the input with one — so a copy field read as a row of loose
+   glyphs floating above a box rather than as a single control, and the eye had
+   to decide which box the bar belonged to. The border, the radius and the field
+   background move onto this wrapper; the input inside gives up all three; and
+   the WHOLE box takes the focus ring, so a click anywhere in it lights up the
+   thing you are about to type into.
+
+   The shared-bar list keeps its own shape on purpose: `.es-list-above` holds ONE
+   bar above N rows, which cannot be framed together with the words the way one
+   bar above one box can. Every rule here is scoped to a DIRECT child of
+   .sf-copybox, so none of them reaches it. */
+.sf-copybox {
+  border: 1px solid var(--sf-input-border);
+  border-radius: var(--sf-field-radius);
+  background: var(--sf-field-bg);
+  /* The bar's strip is square; this is what bends it to the frame's radius. */
+  overflow: hidden;
+}
+.sf-copybox:focus-within {
+  border-color: var(--sf-accent);
+  box-shadow: 0 0 0 3px var(--sf-accent-ring);
+}
+/* The bar, inside the frame: a strip at the top, divided from the words by a
+   hairline. --sf-hover is the panel's own faintest fill, the tint every other
+   inspector control uses to say "chrome, not content", so no new colour and no
+   literal is introduced here. */
+.sf-copybox > .es-copy-bar {
+  margin-bottom: 0;
+  padding: 3px 6px;
+  /* ⚠️ NOT a panel divider, and card 66334 deliberately left it. This hairline
+     is INSIDE one control: it divides the formatting bar from the words, and it
+     exists instead of giving the bar a second full frame -- which is the thing
+     card 8802.g removed. `scripts/test-copy-field-box.tsx` asserts both halves
+     ("divided by a hairline" AND "takes no second frame"), so deleting it here
+     puts that card's defect back. */
+  border-bottom: 1px solid var(--sf-input-border);
+  background: var(--sf-hover);
+}
+/* THE BAR WHILE TYPING (blueprint 4.9's text box design, 4.10 here): at rest a
+   copy box is its words, and the strip arrives with the caret — a column of
+   text settings is a column of words, not a column of toolbars. Hidden, not
+   unmounted: the bar keeps its place in the markup, and a keyboard user who
+   Shift+Tabs out of the words lands on its last button, which keeps the box
+   focused and the bar shown. */
+.sf-copybox:not(:focus-within) > .es-copy-bar {
+  display: none;
+}
+/* PRESSED: the selection already wears this mark, so a press takes it off. The
+   same tint as the :active press above, held — under the pointer too, which is
+   where it is right after the press (the hover rule would otherwise win). */
+.sf-copybox .es-copy-mark.is-active,
+.sf-copybox .es-copy-mark.is-active:hover:not(:disabled),
+.es-list-above .es-copy-mark.is-active,
+.es-list-above .es-copy-mark.is-active:hover:not(:disabled) {
+  background: var(--sf-accent-tint);
+  color: var(--sf-accent-text);
+}
+/* The input gives up its own frame to the wrapper. The `.sf-insp-body` +
+   attribute selectors are not decoration: the base control rule near the top of
+   this file is `.sf-insp-body input[type="text"]`, which ties on specificity
+   with a plain `.sf-copybox > input`, and a reader would have to know both line
+   numbers to see why this one wins. `display: block` kills the inline
+   descender gap that would otherwise show a sliver of background under a
+   textarea, inside the frame. */
+.sf-copybox > input,
+.sf-copybox > textarea,
+.sf-insp-body .sf-copybox > input[type="text"],
+.sf-insp-body .sf-copybox > input:not([type]),
+.sf-insp-body .sf-copybox > textarea {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  display: block;
+  width: 100%;
+}
+.sf-copybox > input:focus,
+.sf-copybox > textarea:focus,
+.sf-insp-body .sf-copybox > input[type="text"]:focus,
+.sf-insp-body .sf-copybox > input:not([type]):focus,
+.sf-insp-body .sf-copybox > textarea:focus {
+  box-shadow: none;
+}
+
+/* Color swatches */
+.sf-swatches {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.sf-swatch {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+}
+.sf-swatch.is-active {
+  box-shadow: 0 0 0 2px var(--sf-panel), 0 0 0 4px var(--sf-accent);
+}
+.sf-swatch-hex {
+  font-size: 11px;
+  color: var(--sf-muted);
+  font-variant-numeric: tabular-nums;
+  margin-left: 2px;
+}
+
+/* ── THE colour control — efficient-easel's `ColourPicker` (blueprint 4.8) ──
+   One swatch, one typeable hex, and — pressing the swatch — the package's own
+   window under the row: the site's theme colours, a saturation square, a hue
+   strip and the hex. Its look is `efficient-easel/pick.css`; what is here is
+   only how the shop's rows hold it. There used to be two colour controls in
+   this file's rows, then one on `<input type="color">`, whose window was the
+   operating system's. See lib/puck/ColourControl.tsx.
+
+   THE ROW HOLDS THE PICKER IN ITS LABEL LINE — `SettingsField`'s `action`
+   slot (`colorInput()` too, since [MERGE] One Settings Row And Hint) — so the picker's own box steps aside
+   (`display: contents`) and its two halves become items of that line: the
+   swatch and hex stay at the end of the label line (`margin-left: auto`, which
+   the shell gives `.es-field-value` and nothing else), and the window wraps
+   onto a line of its own at the row's FULL width. Left inside the picker's box
+   it would open in the few pixels the action slot has. */
+.es-field-head:has(> .es-pick-colour) {
+  flex-wrap: wrap;
+}
+.es-field-head > .es-pick-colour {
+  display: contents;
+}
+.es-field-head > .es-pick-colour > .es-pick-colour-row {
+  margin-left: auto;
+}
+.es-field-head > .es-pick-colour > .es-pick-window {
+  flex: 1 0 100%;
+  min-width: 0;
+  /* LAST on the line, whatever follows it in the markup: the row's Default /
+     Reset part (easel's `SettingsDefaultReset`, owner 2026-10-06) comes after
+     the picker, and without this an open window pushed Reset onto a line of
+     its own UNDER the window, away from the swatch it belongs beside. */
+  order: 1;
+}
+
+/* ⚠️ THE HEX BOX MUST OUT-SPECIFY THE SHARED INSPECTOR INPUT. `.sf-insp-body
+   input[type="text"]` (0,2,1) is `width: 100%`, `padding: 8px 11px`,
+   `font-size: 13px` — a full-width form field — and it beats the package's
+   one-class rule. Inherited here it would eat the row and shove the swatch out
+   of it, and at 13px `#DDDDDD` rendered `#DDDDD`, one digit short, on a control
+   whose whole job is to show a hex exactly (the 2026-09-04 drawing). So EVERY
+   property the shared rule sets is restated, at the package's own values, on
+   a selector that wins on specificity (0,3,1) and not on source order. */
+.sf-insp-body input[type="text"].es-pick-hex {
+  width: var(--es-pick-readout-w);
+  border: 1px solid transparent;
+  background: transparent;
+  border-radius: 6px;
+  padding: 4px 6px;
+  font-size: 12px;
+  color: var(--es-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  flex: none;
+}
+.sf-insp-body input[type="text"].es-pick-hex:hover {
+  border-color: var(--es-input-border);
+}
+.sf-insp-body input[type="text"].es-pick-hex:focus {
+  outline: none;
+  border-color: var(--es-accent);
+  box-shadow: none;
+  background: var(--es-panel);
+}
+
+
+/* ── Site styles' own controls (card 66148) ───────────────────────────────────
+   These three shapes -- a dropdown, a strip of choice rungs, and the small text
+   around them -- were spelled out in raw Tailwind `zinc-*` inside ThemeField,
+   TypeGroupsField and CornersField, and never read a token.
+
+   ⚠️ `zinc` and `gray` ARE NOT THE SAME RAMP, which is what made this invisible
+   for so long: every pair is close enough to look deliberate and none of them
+   match. Measured in this project (Tailwind v4, no config override), resolved
+   through a canvas because v4 emits lab():
+
+     border  zinc-300 #d4d4d8   --sf-input-border    #d1d5db
+     menu    zinc-200 #e4e4e7   --sf-divider         #e5e7eb
+     quiet   zinc-400 #9f9fa9   --sf-disabled        #9ca3af
+     hint    zinc-500 #71717b   --sf-muted           #6b7280
+     text    zinc-800 #27272a   --sf-field-text      #1f2937
+     loud    zinc-900 #18181b   --sf-text            #111827
+     ground  zinc-100 #f4f4f5   --sf-chip-bg         #f3f4f6
+
+   So the panel ran two neutral ramps as well as two spacings, and along the same
+   boundary. These classes put every one of them on the panel's own tokens, which
+   alias the shell's -- the alias block at the top of this file is untouched.
+
+   They are CLASSES, not a copy per component, because the dropdown was written
+   twice (ThemeField's preset picker, TypeGroupsField's font picker) and the rung
+   strip three times (Corners, Capitals, Spacing). Same markup, same colours,
+   three chances to drift. */
+
+/* The dropdown: a full-width button that opens a menu under itself. */
+.sf-chooser {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 1px solid var(--sf-input-border);
+  border-radius: var(--sf-field-radius);
+  background: var(--sf-field-bg);
+  color: var(--sf-field-text);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.sf-chooser:hover {
+  background: var(--sf-hover);
+}
+/* The chosen thing's name. Clips rather than wraps: a long font name must not
+   push the category and the caret off the end of a 288px row. */
+.sf-chooser-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* SANS / SERIF / MONO beside a font's name -- a classification, not the value,
+   so it reads quieter than everything else on the row. */
+.sf-chooser-meta {
+  flex: none;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--sf-disabled);
+}
+.sf-chooser-caret {
+  flex: none;
+  color: var(--sf-disabled);
+}
+.sf-chooser-menu {
+  position: absolute;
+  left: 0;
+  z-index: 50;
+  margin-top: 4px;
+  width: 100%;
+  overflow: hidden;
+  padding: 4px 0;
+  border: 1px solid var(--sf-divider);
+  border-radius: var(--sf-field-radius);
+  background: var(--sf-panel);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+/* The font menu is long enough to need its own ceiling; the theme menu is not. */
+.sf-chooser-menu--tall {
+  max-height: 256px;
+  overflow: hidden auto;
+}
+.sf-chooser-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 0;
+  background: none;
+  text-align: left;
+  font-size: 13px;
+  color: var(--sf-text-secondary);
+  cursor: pointer;
+}
+.sf-chooser-item:hover {
+  background: var(--sf-hover);
+}
+.sf-chooser-item.is-active {
+  font-weight: 600;
+  color: var(--sf-text);
+}
+/* "Add new theme" -- an action rather than a choice, so it takes the accent.
+   That colour is the whole signal now (card 66334 removed the rule that used to
+   sit above it). `--sf-accent-text` and not `--sf-accent`: the shell keeps a
+   darker variant for accent-coloured TEXT, which is what this is. */
+.sf-chooser-add {
+  color: var(--sf-accent-text);
+  font-weight: 500;
+}
+.sf-chooser-add:hover {
+  background: var(--sf-hover);
+}
+
+/* The choice rungs: two or three buttons in a row, one of them held down.
+
+   ⏳ LEAVING. Every pick-one row draws efficient-easel's SettingsSegmented since
+   [MERGE] One Pick-One Control (2026-10-06); only TextStylesField still draws
+   this strip, because the S2 card owns that file, and `.sf-rung` alone is the
+   hints switch's base. `test-segmented-controls` §8 stops a new strip. Delete
+   these rules when the last of those two moves.
+
+   `--sf-disabled` on the pressed border is not a disabled state -- it is the one
+   token on the gray ramp that lands where `zinc-400` did, a mid-grey a step
+   darker than a field border. */
+.sf-rungs {
+  display: flex;
+  width: 100%;
+  gap: 4px;
+}
+.sf-rung {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid var(--sf-input-border);
+  border-radius: var(--sf-field-radius);
+  background: var(--sf-field-bg);
+  color: var(--sf-text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+}
+.sf-rung:hover:not(.is-active) {
+  background: var(--sf-hover);
+}
+.sf-rung.is-active {
+  border-color: var(--sf-disabled);
+  background: var(--sf-chip-bg);
+  color: var(--sf-text);
+  font-weight: 600;
+}
+/* The Card shadow miniature: a tiny card showing the shadow each option casts,
+   drawn in the package's segmented-control glyph slot beside the word (it was
+   `.sf-rung-chip` in the hand-built `.sf-rung--inline` strip until [MERGE] One
+   Pick-One Control, 2026-10-06). Its shadow is set inline, per option, because
+   that IS what the option is showing.
+
+   16px wide to sit inside the slot (`--es-chip-icon`). Small, but it only has
+   to answer "none, a little, or a lot", and the 1px border keeps all three
+   legible at this size. */
+.sf-shadow-chip {
+  display: block;
+  flex: none;
+  box-sizing: border-box;
+  width: 16px;
+  height: 11px;
+  border: 1px solid var(--sf-disabled);
+  background: var(--sf-field-bg);
+}
+
+/* The one control that folds the Basics tab's five explanations (card 66177).
+   It sits at the FOOT of the tab, under the last row's own separation, and it
+   is deliberately quiet: it is chrome about the panel, not one of the
+   merchant's settings, so it must not read as loudly as the rows above it. */
+.sf-hints {
+  display: flex;
+  margin-top: 28px;
+}
+/* A rung that is not part of a strip: it sizes to its own word rather than
+   sharing a row, so the `flex: 1` every rung takes has to come back off. */
+.sf-hints-toggle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 5px;
+  color: var(--sf-muted);
+}
+.sf-hints-toggle svg {
+  flex: none;
+}
+
+/* A heading INSIDE one control, below the row's own label: "Dark surfaces",
+   "Light surfaces". Deliberately not `.sf-field-group`, which heads a group of
+   settings -- these head a group of colours inside ONE setting. */
+/* ⛔ `.sf-subgroup` LIVED HERE AND IS GONE (2026-09-04). It was this panel's
+   hand-rolled group heading, and the shell has shipped `SettingsGroupSub` all
+   along — the theme sheet draws that now, so nothing renders this class. It is
+   deleted rather than left: a rule nobody paints is the shape `ss.focal-dead-css`
+   was a whole card to clean up, and the next person reading it would take it for
+   the panel's heading and match the wrong thing.
+
+   ⚠️ ITS ABSENCE IS THE FIX, not tidiness. It declared a font and NO MARGIN, so
+   the heading took whatever air happened to be there — which is why `SURFACES`
+   sat against the row above it — and card 1103's module rule keys on
+   `.es-group-sub`, so a heading wearing this name could never draw the line
+   between two modules. */
+/* The small and large A flanking a size slider. */
+.sf-scale-a {
+  flex: none;
+  font-size: 11px;
+  line-height: 1;
+  color: var(--sf-disabled);
+}
+.sf-scale-a--lg {
+  font-size: 15px;
+  color: var(--sf-muted);
+}
+/* The "Auto" button that clears an optional number back to the built-in. */
+.sf-auto-reset {
+  padding: 2px 6px;
+  border: 1px solid var(--sf-input-border);
+  border-radius: var(--sf-field-radius);
+  background: var(--sf-field-bg);
+  font-size: 11px;
+  color: var(--sf-text-secondary);
+  cursor: pointer;
+}
+.sf-auto-reset:hover {
+  background: var(--sf-hover);
+}
+/* ─── The Text list (card 66162) ──────────────────────────────────────────
+   ONE list of text styles, one row per font role. Rows are separated by a rule
+   rather than boxed: the old three groups were cards, and four cards in a 288px
+   panel spend more of it on borders than on settings. */
+/* ── SITE STYLES: THE SAME AIR UNDER THE TAB STRIP, IN EVERY TAB ───────────
+   Lewis, 2026-09-04, on SHARPEN, unprompted: Basics and Theme have a band of
+   space above their first row and Text has none — why is it not uniform?
+
+   MEASURED at the left panel's real 288px, before anything changed:
+
+     Basics   38px      first element is `CornersField` → the shell's `.es-field`
+     Theme    38px      first element is a `.es-field` too
+     Text      0px      first element is `.sf-style-list`, which states no margin
+
+   NOBODY DECIDED EITHER NUMBER, and that is the whole finding. `.es-field`'s
+   38 is `--es-rhythm-between` — the gap BETWEEN two settings. The first row has
+   nothing above it, so that rule is spending a between-rows gap on a boundary
+   it was never measured against; and the Text tab simply has no rule at all.
+   Two tabs are wrong in one direction, the third in the other, and no line
+   anywhere said what the air under the strip should be.
+
+   ⚠️ NOT CAUSED BY THE PANEL-SPACING CARD. Checked rather than assumed: the
+   same three tabs measure 38 / 38 / 0 on `ad353cf60`, the commit before that
+   card's three PRs. Those changed `.sf-field` and Puck's field wrappers; this
+   panel draws the shell's `.es-field`, whose 38 has stood since card 66301 —
+   the owner's own re-scale on 2026-08-31.
+
+   `--es-rhythm-group-first` IS THE NAME THIS ALREADY HAD. It means "a boundary
+   to the first thing under it", which is exactly what the tab strip is. Not a
+   new number, and not the nearest number picked for its arithmetic: 24 is
+   tighter than 38, which is the direction the owner asked for, and it is not 0,
+   which reads as the first row having fallen through the strip.
+
+   ON THE TAB PANEL'S FIRST CHILD, whatever that child is. A rule per tab would
+   be three statements of one fact, and would go stale the first time a tab's
+   opening control changes — which is precisely how these three drifted apart. */
+#sf-site-styles-tabpanel > :first-child {
+  margin-top: var(--es-rhythm-group-first);
+}
+
+.sf-style-list {
+  display: flex;
+  flex-direction: column;
+}
+/* The whole row is the control -- there is no Edit button, because the row's
+   own name is what a merchant points at.
+
+   ⚠️ `center`, NOT `baseline` (card 66177). The row used to hold one word; it
+   now holds a chevron, a name and a readout drawn at that style's own size, and
+   sitting a 15px readout on the same baseline as an 11px name tips the whole
+   line. */
+.sf-style-head {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+  background: none;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+}
+.sf-style-head:hover .sf-style-sample {
+  color: var(--sf-text);
+}
+/* The visible sign that a row opens (card 66177): `aria-expanded` had said so
+   to a screen reader since 66162, and nothing had said it to an eye. One glyph,
+   turned a quarter when the row is open. */
+.sf-style-caret {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--sf-disabled);
+  transition: transform 120ms ease;
+}
+.sf-style-row.is-open .sf-style-caret {
+  transform: rotate(90deg);
+}
+/* The style's NAME, in the panel's own label type -- the same 11px/600 quiet
+   word every `SettingsField` on the other two tabs wears, so a merchant moving
+   between tabs does not have to learn how to read a second kind of row. */
+.sf-style-name {
+  flex: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sf-muted);
+}
+/* The row's READOUT -- the face it is set in, named, and drawn in itself.
+   Everything about how it looks is inline, per row, because that IS what the
+   row is showing; the only things the stylesheet may decide here are where it
+   sits, its colour and its overflow.
+
+   `margin-left: auto` puts it at the end of the line, which is where every
+   other row in this panel carries its value (`.es-field-value` does the same).
+   A long face name ellipses rather than pushing the tick off the row. */
+.sf-style-sample {
+  min-width: 0;
+  margin-left: auto;
+  overflow: hidden;
+  color: var(--sf-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Where Done used to sit. The editor autosaves, so the thing to say here is
+   "stored", and it says it once and goes quiet again. */
+.sf-style-slot {
+  display: inline-flex;
+  flex: none;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+  /* Quiet ink, not green — and the REASON is the panel, not the palette.
+
+     ⚠️ THIS NOTE USED TO SAY THE SHARED LAYER HAS NO GREEN. That was WRONG:
+     `--es-success` has shipped in editor-shell since card 8802.g, and the top
+     bar's saved dot (editor-shell's `.es-savestate.is-saved`) wears it. The rule that
+     is real and still binding is the other half — a shop-LOCAL green would be a
+     second source for a design-system colour (doc/editor-ui.md E2, enforced by
+     scripts/test-inspector-inherit.tsx). Take the token; never invent the value.
+
+     So this tick stays muted because of WHERE it is. It sits at the end of a
+     settings row, inches from the Reset button, which is already an accent-blue
+     mark on the same line; a second coloured mark beside it would read as a
+     second thing to act on. The top bar has no such neighbour — its dot is the
+     only mark in the corner — which is why the same idea is allowed a colour
+     there and not here. Card 66103 is not the reason: it settled the WORD. */
+  color: var(--sf-muted);
+  opacity: 0;
+  transform: scale(0.6);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+.sf-style-slot.is-saved {
+  opacity: 1;
+  transform: scale(1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sf-style-slot {
+    transition: none;
+  }
+}
+/* The settings under an open row. */
+.sf-style-body {
+  padding: 2px 0 12px;
+}
+/* The face picker -- a native select, so the platform draws the list, the
+   keyboard works and a phone gets its own wheel. */
+.sf-select {
+  padding: 5px 8px;
+  border: 1px solid var(--sf-input-border);
+  border-radius: var(--sf-field-radius);
+  background: var(--sf-field-bg);
+  color: var(--sf-text);
+  font-size: 12px;
+  cursor: pointer;
+}
+/* A rung showing a LETTERFORM rather than a word -- the B and the I. It is the
+   letter's own shape that carries the meaning, so it is sized to be read as a
+   glyph and it keeps its accessible name in `aria-label`. */
+.sf-rung--glyph {
+  flex: 0 0 34px;
+  font-size: 13px;
+  line-height: 18px;
+  text-align: center;
+}
+.sf-rung--glyph:disabled {
+  color: var(--sf-disabled);
+  cursor: not-allowed;
+}
+.sf-rung--glyph:disabled:hover {
+  background: var(--sf-field-bg);
+}
+/* One theme's swatch in the preset dropdown, and one colour row's chip. */
+/* ── The theme list: one card per theme, each a small page in its own palette ──
+   Card 66304. Sized against the RIGHT panel's real widths — 320px default and
+   220px the narrowest a merchant can drag to (components/panel-widths.ts). The
+   approved drawing says 288px six times; 288 is the LEFT panel's default and
+   this control never opens at it, so every measurement below was re-derived
+   rather than inherited.
+
+   The OUTER spacing is the shell's — `--es-rhythm-*`, shipped in editor-shell
+   0.22.0 — so this list sits in the panel's rhythm rather than a hand-tuned one.
+   The spacing INSIDE a card is the preview's own: it is a picture of a web page,
+   not a run of settings, and the panel's row rhythm would be the wrong ruler. */
+.sf-theme-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: max(var(--es-row-gap), var(--es-rhythm-group-first));
+}
+
+/* ⚠️ THE CLOSED TRIGGER WEARS THIS FRAME TOO (`.sf-secttheme-btn`), rather than
+   a second frame with the same numbers in it. It is the same card — one open in
+   a list, one shut in a row — so the border, the radius and the clip are
+   declared once and both wear them. Only what is genuinely different about a
+   BUTTON (its resets, its focus ring) is written under its own name below. */
+.sf-theme-card,
+.sf-secttheme-btn {
+  border: 1px solid var(--sf-input-border);
+  border-radius: 9px;
+  overflow: hidden;
+  background: var(--sf-panel);
+}
+.sf-theme-card:hover,
+.sf-secttheme-btn:hover { border-color: var(--sf-muted); }
+/* The ring says WHICH theme is live. Colour alone would not: `aria-checked` on
+   the radio carries the same fact for a screen reader. */
+.sf-theme-card.is-selected {
+  border-color: var(--sf-accent);
+  box-shadow: 0 0 0 2px var(--sf-accent-ring);
+}
+
+.sf-theme-pick {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* ── The preview itself: a page, drawn in the theme's own colours ───────────
+   Every length here is fixed rather than relative, and deliberately: this is a
+   picture of a page at a small size, so the type scale is the drawing's own and
+   must not follow the panel's. It stays legible at 220px because nothing in it
+   wraps — the one line that could is clipped. */
+.sf-theme-page {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+}
+.sf-theme-eyebrow {
+  font-size: 7.5px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  line-height: 1;
+}
+.sf-theme-headline {
+  font-size: 14px;
+  font-weight: 750;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+}
+.sf-theme-body {
+  font-size: 9.5px;
+  line-height: 1.4;
+  opacity: 0.9;
+  /* One line, clipped. A preview that wraps changes height with its own words
+     and the list stops being a set of comparable cards. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sf-theme-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 1px;
+}
+.sf-theme-btn {
+  font-size: 8.5px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  padding: 5px 11px;
+  border-radius: 4px;
+  white-space: nowrap;
+  flex: none;
+}
+.sf-theme-mini {
+  flex: 1;
+  min-width: 0;
+  height: 22px;
+  border-radius: 3px;
+  border: 1px solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 7.5px;
+  font-weight: 600;
+  opacity: 0.75;
+}
+
+/* ── The name strip: which theme this is, and the way into its colours ────── */
+.sf-theme-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 5px 8px 6px 12px;
+  background: var(--sf-hover);
+}
+.sf-theme-card.is-selected .sf-theme-foot { color: var(--sf-accent-text); }
+.sf-theme-name {
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The one sentence a card says when its content colour cannot be read on its own
+   page. Amber rather than red: the theme still works, it is a warning about the
+   colour a merchant chose, not a failure of the editor. It never carries a
+   number — the ratio it was measured from stays out of the panel. */
+.sf-theme-warn {
+  flex: none;
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 700;
+  color: #b45309;
+  white-space: nowrap;
+}
+.sf-theme-warn + .sf-theme-edit { margin-left: 8px; }
+/* With no warning beside it the Edit still sits hard right. */
+.sf-theme-name { margin-right: auto; }
+
+.sf-theme-edit {
+  flex: none;
+  border: 1px solid var(--sf-input-border);
+  background: var(--sf-panel);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  color: var(--sf-text-secondary);
+  padding: 3px 8px;
+  line-height: 1.3;
+  cursor: pointer;
+}
+.sf-theme-edit:hover { border-color: var(--sf-muted); color: var(--sf-text); }
+.sf-theme-edit.is-open {
+  background: var(--sf-accent);
+  border-color: var(--sf-accent);
+  color: #fff;
+}
+
+/* This theme's own colours, inside this theme's own card. The first row carries
+   the shell's group-first rhythm so it clears the strip above it by the same
+   distance a first setting clears any heading. */
+.sf-theme-colours { padding: 0 12px 12px; }
+.sf-theme-colours[hidden] { display: none; }
+.sf-theme-colours > .es-field:first-child { margin-top: var(--es-rhythm-group-first); }
+
+.sf-theme-reset {
+  width: 100%;
+  margin-top: var(--es-rhythm-between-tight);
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--sf-accent-text);
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+}
+.sf-theme-reset:disabled { color: var(--sf-muted); cursor: default; }
+
+.sf-theme-add {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sf-accent-text);
+  padding: 4px 0;
+  cursor: pointer;
+}
+.sf-theme-add:hover { text-decoration: underline; }
+
+/* `.sf-ink-row` / `.sf-ink-hex` RETIRED — the second colour control.
+   It drew Page settings' Background, the five rows a theme carries and Theme
+   button colour, at 32x24 with a border and a monospaced hex, while
+   `.sf-colorinput` drew the other seven rows at 26x26. Owner 2026-09-04 chose
+   the 26x26 one and the two became one; every row those rules used to paint now
+   draws the one colour control (efficient-easel's `ColourPicker` since
+   blueprint 4.8, held by the rules above). */
+
+/* ── Theme colour, one per mode (components/ThemeColourField.tsx) ─────────────
+   Two colour rows joined by the link switch, then the readability line. The card
+   around them is what says the three belong together: they are one decision. */
+.sf-colour-lede {
+  margin-top: -3px;
+  margin-bottom: 10px;
+}
+.sf-colour-pair {
+  border: 1px solid var(--sf-divider);
+  border-radius: var(--sf-row-radius);
+  padding: 2px 11px 11px;
+  background: var(--sf-app-bg);
+}
+/* The rows sit inside a card that already spaces them, so they set their own
+   top margin rather than taking a second one from the panel's row class.
+   Card 66148 moved the FLEX half here too: these three declarations came from
+   `.sf-field--row`, the panel row class Site styles no longer draws, and a
+   sub-row inside one setting's card has no business borrowing the class that
+   sets the distance between two settings. Copied exactly — nothing moves. */
+.sf-colour-row {
+  margin-top: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+/* The two mode names inside the colour card. They used to borrow their type
+   from `.sf-field-label`, which is the class the whole panel stopped drawing in
+   card 66148 — so the three declarations they actually used are written here,
+   against the same token, and nothing moves. They stay 12px/500 rather than
+   joining the shell's 11px/600 row label on purpose: these name a colour input
+   INSIDE one setting, and reading as a quieter copy of the row above them is
+   what said they were the same thing. */
+.sf-colour-mode {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sf-text-secondary);
+}
+.sf-colour-mode small {
+  display: block;
+  margin-top: 1px;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--sf-muted);
+}
+
+.sf-readability {
+  margin-top: 10px;
+  padding: 11px 12px 12px;
+  border: 1px solid var(--sf-divider);
+  border-radius: var(--sf-row-radius);
+}
+.sf-readability-head {
+  margin-bottom: 7px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--sf-muted);
+}
+.sf-readability-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 4px 0;
+  font-size: 12px;
+}
+.sf-readability-who {
+  flex: 1;
+  color: var(--sf-text-secondary);
+}
+.sf-readability-dot {
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--sf-disabled);
+}
+/* No `tabular-nums` here, unlike the candidate buttons below: card 66204 took
+   the ratio off this row and it prints a grade in words, so there are no digits
+   left to line up. */
+.sf-readability-val {
+  color: var(--sf-muted);
+}
+/* Grade, in colour AND in the words beside it — the dot summarises the label,
+   it never carries the meaning on its own.
+   TWO colours for three grades, deliberately. The shared --es-* layer carries
+   danger and warning and no counterpart for "this reads fine", and a shop-local
+   green would be a second source for a design-system colour (doc/editor-ui.md
+   E2, enforced by scripts/test-inspector-inherit.tsx). It is also the better
+   panel: a settings row that lights up green on every healthy value is noise,
+   and the words already say which grade it is. So GOOD is drawn as an ordinary
+   measurement in the panel's own ink, and only the two states that want the
+   merchant's attention take a colour. */
+.sf-readability-dot.is-good { background: var(--sf-muted); }
+.sf-readability-dot.is-large-only { background: var(--sf-warning); }
+.sf-readability-dot.is-hard { background: var(--sf-danger); }
+.sf-readability-val.is-good { color: var(--sf-text-secondary); }
+.sf-readability-val.is-large-only { color: var(--sf-warning); }
+.sf-readability-val.is-hard { color: var(--sf-danger); }
+
+.sf-readability-advice {
+  margin-top: 7px;
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--sf-muted);
+}
+.sf-readability-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+.sf-readability-suggestion {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 26px;
+  padding: 0 9px;
+  border: 1px solid var(--sf-input-border);
+  border-radius: var(--sf-field-radius);
+  background: var(--sf-field-bg);
+  color: var(--sf-btn-text);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+.sf-readability-suggestion:hover {
+  background: var(--sf-hover);
+}
+.sf-readability-chip {
+  width: 9px;
+  height: 9px;
+  flex: none;
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+}
+
+/* The nine-square grid moved into `efficient-easel/panel` as `SettingsPlacement`
+   (0.35.0), so the `.sf-focal*` rules that lived here are gone rather than left
+   as a second copy nobody would remember to update. The chosen cell also stopped
+   being card 8811's tint on the way: the shell tells the chosen thing apart by
+   being the darkest in the row on a grey track (66138 / 66302), and its suite
+   bans the tint token package-wide, so the retired look could not travel. */
+
+/* Slider */
+.sf-slider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+/* …AND IT TAKES THE WHOLE ROW WHEREVER THE SHELL STACKS IT (card 66247, owner
+   2026-08-31: the slider fills the row).
+
+   `efficient-easel`'s `SettingsField` puts a control on its own line for one stated
+   reason — its own comment, `src/panel/SettingsField.tsx`: "The row is stacked
+   rather than side-by-side so the control gets the panel's full width — a 308px
+   panel cannot afford a label column AND a usable slider." The slot it stacks
+   into is `.es-field-ctl`, and that slot is `display: flex`.
+
+   A block-level `.sf-slider` fills its parent, which is why the sliders in this
+   panel's OWN `.sf-field` rows always looked right. As a flex ITEM it does not:
+   with no `flex` and no `width` it is `flex: 0 1 auto` and sizes to its content,
+   a bare `input[type=range]` — 129px in Chromium, and 129px whatever the panel
+   is dragged to. Measured before this rule existed (scripts/harness/part-slider-width.tsx):
+
+       panel 220 (MIN_PANEL_W)   field content 192   track 129   67% of the row
+       panel 320 (the default)   field content 280   track 129   46% of the row
+       panel 560 (MAX_PANEL_W)   field content 520   track 129   25% of the row
+
+   So the slot fills the row and the track inside it did not, and the wider a
+   merchant dragged the panel the smaller a fraction of it the control took.
+
+   `flex: 1`, not `width: 100%`, and that is the same call the rule ten lines
+   below already made for the range input inside this box: a percentage width is
+   right only while the slider is alone in the slot, and would overflow the row
+   the day a second thing joined it. Written against `.es-field-ctl` rather than
+   against this panel or that one, because the promise being kept is the SHELL's
+   and every row it stacks is owed it — `PartSettingsPanel`'s Size / Line
+   spacing / Letter spacing and `SiteWidthField`'s Site width are the four this
+   reaches today. Guarded by `scripts/test-part-slider-fills-row.ts`. */
+.es-field-ctl > .sf-slider {
+  flex: 1;
+  min-width: 0;
+}
+/* The range was the one control still drawn entirely by the browser — a native
+   track and thumb tinted with `accent-color`, sitting beside a panel of bespoke
+   toggles, segmenteds and swatches. It read as an unstyled leftover at every OS,
+   and each OS drew it differently. Drawn explicitly here instead, off the same
+   tokens as its neighbours: a 4px rail on the field track colour, and a white
+   thumb ringed in the accent (the shell's control shape — cf. `.es-switch`).
+
+   `accent-color` is deliberately dropped: with an explicit thumb + track it only
+   fights the rules below. The two vendor thumb selectors CANNOT be combined into
+   one rule — a selector list is discarded wholesale by any browser that doesn't
+   recognise one member, which would leave the thumb unstyled. */
+.sf-slider input[type="range"] {
+  flex: 1;
+  min-width: 0;
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.sf-slider input[type="range"]::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--sf-track-bg);
+  box-shadow: inset 0 0 0 1px var(--sf-input-border);
+}
+.sf-slider input[type="range"]::-moz-range-track {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--sf-track-bg);
+  box-shadow: inset 0 0 0 1px var(--sf-input-border);
+}
+.sf-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  /* Centre the thumb on a 4px track: (4 - 14) / 2. Webkit lays the thumb out
+     from the track's top edge, so without this it hangs below the rail. */
+  margin-top: -5px;
+  border-radius: 50%;
+  background: var(--sf-knob);
+  border: 2px solid var(--sf-accent);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  transition: transform 0.12s;
+}
+.sf-slider input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--sf-knob);
+  border: 2px solid var(--sf-accent);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  transition: transform 0.12s;
+}
+.sf-slider input[type="range"]:hover::-webkit-slider-thumb {
+  transform: scale(1.12);
+}
+.sf-slider input[type="range"]:hover::-moz-range-thumb {
+  transform: scale(1.12);
+}
+/* THE NOTCH — where the style is, on a track that overrides it (card 66116).
+   Drag away from it to override; land on it and the override is cleared, so the
+   way back is on the control the merchant is already holding.
+
+   Placed against the thumb's REAL travel, not the track's width: a range input
+   moves the thumb's centre from half a thumb in to half a thumb short of the
+   end, so a plain percentage would sit beside the thumb rather than under it at
+   both ends. `--sf-notch` is the 0-1 position the control computes. */
+.sf-slider.has-notch {
+  position: relative;
+}
+.sf-slider.has-notch::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: calc(7px + (100% - 14px) * var(--sf-notch));
+  width: 2px;
+  height: 10px;
+  margin-top: -5px;
+  border-radius: 1px;
+  background: var(--sf-input-border);
+  pointer-events: none;
+}
+
+/* THE NUMBER, AND IT IS A BUTTON (card 66275). A track that runs 200–900 in
+   tens has seventy stops on it, and 380 is one of them — reachable by dragging
+   only if the merchant lands the thumb on exactly the right pixel. So the
+   readout is pressed to type into, which means it is a real <button> and needs
+   the browser's own button drawing taken off it: everything below the first
+   five declarations is undoing an appearance, not adding one. It must measure
+   exactly what the <span> measured, because `.es-field-value` and this box sit
+   in the same 42px column and a merchant reads down it. */
+.sf-slider-val {
+  font-size: 12px;
+  color: var(--sf-icon);
+  font-variant-numeric: tabular-nums;
+  min-width: 42px;
+  text-align: right;
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: inherit;
+  line-height: inherit;
+}
+button.sf-slider-val {
+  cursor: text;
+  border-radius: 4px;
+}
+button.sf-slider-val:hover {
+  color: var(--sf-text);
+  box-shadow: inset 0 0 0 1px var(--sf-input-border);
+}
+/* The same box, being typed into. It keeps the readout's own width and
+   alignment so the row does not shift under the merchant's caret the moment
+   they click it — a number that jumps sideways as it becomes editable reads as
+   two different controls. */
+input.sf-slider-typed {
+  width: 42px;
+  color: var(--sf-text);
+  box-shadow: inset 0 0 0 1px var(--sf-accent);
+  border-radius: 4px;
+  padding: 1px 3px;
+  /* iOS zooms a focused input under 16px unless the page says otherwise; the
+     editor is desktop-first but the panel is reachable on a tablet. */
+  touch-action: manipulation;
+}
+input.sf-slider-typed:focus {
+  outline: none;
+}
+
+/* Pinned editor-only toggle bar — sits BETWEEN the inspector head and the
+   scrolling body (SectionEditor), so an aid like "Preview hover state" stays
+   put at the top while the fields below it scroll. `flex: none` keeps it from
+   shrinking; the body (`flex: 1`) takes the remaining height and scrolls. */
+.sf-preview-pin {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: none;
+  padding: 9px 14px;
+  background: var(--sf-panel);
+}
+.sf-preview-pin-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.sf-preview-pin-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--sf-text);
+}
+.sf-preview-pin-hint {
+  font-size: 11px;
+  color: var(--sf-muted);
+}
+
+/* Columns-per-line stepper — a compact − N + shown for the view the footer's
+   "Columns per line" control is currently editing (the top-bar device). */
+.sf-colstep {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.sf-colstep-btn {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--sf-line);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sf-text);
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sf-colstep-btn:hover:not(:disabled) {
+  border-color: var(--sf-accent);
+}
+.sf-colstep-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.sf-colstep-value {
+  min-width: 14px;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--sf-text);
+}
+
+/* Checkbox — a literal tick box tinted to the editor accent. The row is the
+   shell's SettingsField with the box in its `action` slot (label left, box
+   right); the label points at the box, so the text is clickable. */
+.sf-checkbox {
+  cursor: pointer;
+}
+.sf-checkbox input[type="checkbox"] {
+  width: 17px;
+  height: 17px;
+  margin: 0;
+  accent-color: var(--sf-accent);
+  cursor: pointer;
+}
+
+/* A field group greyed out because a higher-level setting overrides it — e.g. the
+   manual ProductPicker (Category + Product) when the Product Grid's Products
+   source is set to All wheels / a collection. */
+.sf-locked {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Keyboard focus rings on the inspector controls (card 66034) ──────────────
+   The inspector's bespoke controls are all <button>/<input>, so they were always
+   reachable by Tab — but every one of them had its browser outline suppressed by
+   the reset at the top of this file and nothing put back, leaving a keyboard user
+   with no visible caret anywhere in the panel (flagged by the 2026-08-06 audit).
+
+   `:focus-visible`, not `:focus`, so a mouse click never paints a ring — the
+   reason the outline was dropped in the first place. Same 2px accent ring as
+   the top bar's `.es-btn-ghost` (editor-shell) / `.sf-addcard`, so focus reads identically across the whole
+   editor rather than per-control. */
+.sf-seg2 button:focus-visible,
+.sf-readability-suggestion:focus-visible,
+.sf-swatch:focus-visible,
+.sf-field-eye:focus-visible,
+.sf-slider input[type="range"]:focus-visible,
+.sf-insp-body select:focus-visible,
+.sf-checkbox input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: 2px;
+}
+/* The segmented sits in a 3px-padded track, so a 2px offset ring would be clipped
+   by the track's own rounding — tuck it inside instead. */
+.sf-seg2 button:focus-visible {
+  outline-offset: -1px;
+}
+/* The text list's × and "+ Add item" (card 22118) are efficient-easel's since
+   2026-10-06 and ring themselves (fields.css). Its row input keeps the shared
+   `.sf-insp-body input[type="text"]:focus` cue every text input draws. */
+
+/* Segmented */
+.sf-seg2 {
+  display: flex;
+  gap: 3px;
+  background: var(--sf-track-bg);
+  border: 1px solid var(--sf-input-border);
+  border-radius: 9px;
+  padding: 3px;
+}
+.sf-seg2 button {
+  flex: 1;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  padding: 6px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sf-icon);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
+}
+/* …AND AT THE NARROW END, THE LAST 3.48px (card 66221). Wrapping the header
+   panel's rows put every strip onto a line of its own, which took the widest of
+   them — Background, four options — from 88px over the body to 3.48px over it.
+   The strip's own width is where those last pixels are, and it is spent like
+   this at a 220px panel:
+
+     border   1 × 2                                          2.00
+     padding  3 × 2                                          6.00
+     gaps     3 × 3                                          9.00
+     buttons  Page 44.75 + Dark 43.09 + Light 45.30
+              + Accent 56.34                               189.48
+                                                     total 206.48   body: 203
+
+   Every button is ALREADY at its min-content width — `flex: 1` cannot shrink one
+   below its own word, because `min-width` is `auto`. So the strip does not get
+   narrower by being asked; something has to cost less. The word is not available
+   (the four options are derived from `SECTION_SURFACES` so they match a section's
+   own Background row exactly) and neither is the type (12 / 11 / 10px already,
+   and type is paid vertically too). That leaves the padding either side of each
+   word, and taking it 8 → 6 gives back 4 × 4 = 16px:
+
+     220px panel   strip 190.48 of 203   12.52px spare, on the widest strip we draw
+
+   HEADROOM AND NOT A HAIRLINE, deliberately: this file's own probe records that
+   these widths depend on the platform UI font, so a fix that cleared the defect
+   by half a pixel would be a fix that held on the machine that measured it. The
+   other rows gain the same 16px, which is what moves Alignment off its 3.05px
+   margin and "Text colour at the top" off its 0.00.
+
+   SCOPED TO THE NARROW PANEL, on the container card 66212 already put on
+   `.sf-panel` — the same rule, one level down: that card paid the horizontal
+   cost out of the body's padding, and this pays the rest out of the strip's.
+   Above 280px nothing changes, so all 23 `segmented()` call sites and the four
+   panels that draw their own label rows are byte-identical at every width where
+   they already fit. A `.sf-seg2` that is not inside a `.sf-panel` matches no
+   container and is untouched by construction. */
+@container (width < 280px) {
+  .sf-seg2 button {
+    padding-inline: 6px;
+  }
+}
+
+/* ─── The strip needs a parent with a WIDTH (card 66248) ──────────────────────
+   The shared strip is `efficient-easel`'s `SettingsSegmented` now, and its outer
+   box `.es-segs-fit` is `container-type: inline-size` — so it takes its inline
+   size FROM its parent and contributes NOTHING to it. `HeaderSettingsPanel`'s
+   `Field` puts the control in a `flex-shrink-0` div, which sizes TO its content.
+
+   A parent sizing to a child that sizes to its parent resolves to ZERO. Measured
+   in a real browser at both panel widths: control 0px, strip 0px, every word
+   clamped to `max-width: 0`, and each button reduced to its own 16px of padding.
+   Seven rows drew a label and no control, and every automated gate we own was
+   green over it — a zero-width box is present in every tree walk and absent to
+   every merchant. Forcing `container-type: normal` restores the strip to
+   104.37px, which is what says the containment is the cause and not a symptom.
+
+   THE RULE HAS TO SIT ABOVE THE CONTAINMENT, so this is not something the strip
+   or a wrapper inside it can fix — a child cannot bootstrap width from a parent
+   that has none. Measured: a full-width wrapper INSIDE the control div leaves
+   all three at 0.
+
+   `:has()` KEEPS IT OFF THE ROWS THIS CARD DID NOT MOVE. `Field`'s control div
+   also carries switches and selects, which ride the LABEL line by card 8801's
+   deliberate design — that is what lets a 308px panel show four settings instead
+   of three. Matching only a control div that actually contains a strip leaves
+   them exactly as they were. Not a new dependency: `efficient-easel`'s own
+   `panel.css` uses `:has()` three times, so the package this panel renders
+   already requires it.
+
+   FULL WIDTH IS THE HOUSE SHAPE, not a compromise — `efficient-easel`'s
+   `SettingsField` stacks its own rows for the same reason ("a 308px panel cannot
+   afford a label column AND a usable slider"). The label moves above the strip
+   and the strip takes the body's width. Scoped to `.sf-panel` because
+   `.flex-shrink-0` is a Tailwind utility used in seven other files, and none of
+   them is this panel. */
+/* An inactive segment gave no feedback at all before the click, so the strip read
+   as static text until you hit it. */
+.sf-seg2 button:hover:not(.is-active) {
+  color: var(--sf-text-secondary);
+  background: var(--sf-hover);
+}
+.sf-seg2 button.is-active {
+  background: var(--sf-raised);
+  color: var(--sf-text-strong);
+  /* Softer and shorter than the old flat 0.14 drop: the active segment should
+     look lifted off the track, not outlined against it. */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+/* ─── A control the panel has taken out of force (card 66216) ─────────────
+   The setting still exists and still shows the merchant's saved answer; another
+   setting in the same panel has simply taken the decision away — the Header's
+   "Transparent at the top" and "Text colour at the top" under a pinned
+   Background. 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.
+
+   `--sf-disabled` is the panel's existing token for exactly this — the same dim
+   the top bar's icon and ghost buttons wear (editor-shell's `.es-iconbtn` /
+   `.es-btn-ghost`, lifted from this sheet); this is the same state on
+   the control that had no rule for it (the switch is efficient-easel's
+   `.es-switch`, which dims itself). The track keeps its border and the
+   pressed segment keeps its lift, so the strip still READS as a strip with an
+   answer in it — it is quieter, not broken. */
+.sf-seg2[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.sf-seg2[data-disabled] button {
+  cursor: not-allowed;
+  color: var(--sf-disabled);
+}
+.sf-seg2[data-disabled] button.is-active {
+  color: var(--sf-text-secondary);
+}
+/* Neither may answer the pointer any more — `:hover:not(.is-active)` above would
+   otherwise still light a segment the merchant cannot choose. */
+.sf-seg2[data-disabled] button:hover:not(.is-active) {
+  background: transparent;
+  color: var(--sf-disabled);
+}
+
+/* A segment whose label is a DRAWING rather than a word — the part panel's three
+   alignment rules, which have no honest three-letter word between them. Laid out
+   as a block so it centres on the button instead of sitting on a text baseline
+   with a descender's worth of space beneath it. */
+.sf-seg2 button > svg {
+  display: block;
+  margin: 0 auto;
+}
+
+/* Lines of copy (textList, the ticker): efficient-easel's ONE list since the
+   owner's ruling of 2026-10-06 — its rows, its ×, its "+ Add item" and its
+   drag are fields.css's (`.es-list-*`). What is the storefront's own is the ONE
+   formatting bar it carries (`.es-list-above`, rules further up, with the copy
+   box's) and the row that bar is aimed at.
+
+   The row the bar is aimed at has to stay visible AFTER the caret leaves — the
+   merchant clicks the bar, which takes the focus ring off the row — so the cue
+   is painted rather than borrowed from :focus. Accent tokens only. */
+.es-list-above > .es-copy-bar {
+  margin-bottom: 0;
+}
+input.sf-list-marking {
+  border-color: var(--sf-accent);
+  box-shadow: 0 0 0 1px var(--sf-accent-tint);
+}
+
+/* Blog source — the Events block's "link to Storefront → Blog" control:
+   a status line + a refresh button + a hint. Snapshots posts onto the block. */
+.sf-blogsource {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.sf-blogsource-status {
+  margin: 0;
+  font-size: 12px;
+  color: var(--sf-text-secondary);
+}
+.sf-blogsource-status[data-state="error"] {
+  color: var(--sf-danger);
+}
+/* The "Open" control inside a source note — the route the sentence names.
+   [ADD] Source Note Opens The Record, 2026-09-06.
+
+   AN INLINE BUTTON, NOT A BLOCK ONE (`.sf-blogsource-btn` is the block form on
+   the product inspector). This one sits INSIDE the sentence, at the end, so it
+   inherits the caption's 11px and only its colour and underline say it is
+   pressable — a 12px pill on the end of an 11px line would be a second control
+   grammar for the same act.
+
+   It is a real <button> and not an <a>: the editor is embedded and reaches the
+   admin over postMessage, so there is no href to give. Styled as a link because
+   that is what it does, named as a button because that is what it is. */
+.sf-source-open {
+  display: inline;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: var(--sf-accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.sf-source-open:hover { color: var(--sf-accent); }
+.sf-source-open:focus-visible {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.sf-blogsource-btn {
+  align-self: flex-start;
+  padding: 7px 14px;
+  border: 1px solid var(--sf-input-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--sf-text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+}
+.sf-blogsource-btn:hover:not(:disabled) {
+  border-color: var(--sf-accent);
+  color: var(--sf-accent);
+}
+.sf-blogsource-btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+/* Form picker — the "which form does this section show" control. Reuses the
+   blog-source card for its frame, buttons and hint, and adds the read-only
+   summary of the picked form (its fields, and where the answers go). */
+.sf-formpicker {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.sf-formsummary-caption {
+  margin-bottom: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--sf-text-secondary);
+}
+.sf-formsummary-fields {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--sf-text-secondary);
+}
+.sf-formsummary-warn {
+  margin: 0;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--sf-danger);
+}
+.sf-formsummary-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* THE MEDIA ROW IS efficient-easel's `ImageBox` since blueprint step 4.8
+   (`es-pick-image-*`, efficient-easel/pick.css): the picture, its name under
+   it, Replace and Remove. What stays here is the shop's own around it — the
+   button the focus row borrows, the drop's live regions, and the template's
+   inert slot. */
+.sf-image-btn {
+  border: 1px solid var(--sf-btn-border);
+  background: var(--sf-panel);
+  color: var(--sf-btn-text);
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.sf-image-btn:hover:not(:disabled) {
+  background: var(--sf-hover);
+}
+.sf-image-btn:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+/* Loading / error line under the slot, so a slow or failed picker round-trip is
+   visible instead of nothing happening. */
+.sf-image-status {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--sf-muted);
+}
+.sf-image-status--error {
+  color: var(--sf-danger);
+}
+/* The shell's FileIntakeAlert renders a dropped file's rejection as a list whose
+   items carry the kit's own light-theme utilities (text-xs text-red-600). Inside
+   the editor they read the slot's status line instead, so a rejection flips with
+   the editor theme like the error line above it. */
+ul.sf-image-status {
+  list-style: none;
+  padding: 0;
+}
+.sf-image-status--error li {
+  color: inherit;
+  font-size: inherit;
+}
+/* Shown in place of the media slot above when the open document can't hold
+   media (a template): the same dashed frame, plainly not a button. It is the
+   SLOT in its inert state, not a note — it was only ever counted as one
+   because of its old name, `.sf-media-note` (card 66121). */
+.sf-image-slot-inert {
+  border: 1.5px dashed var(--sf-input-border);
+  border-radius: 9px;
+  padding: 12px 14px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--sf-muted);
+  background-image: repeating-linear-gradient(45deg, var(--sf-hatch) 0 1px, transparent 1px 12px);
+}
+
+/* ── The image FOCUS point (card 66226) ──────────────────────────────────────
+   WHICH PART OF A BACKGROUND IMAGE SURVIVES ITS CROP, as any point on the
+   picture rather than as one of nine. The `Image focus` row opens (the shared
+   .sf-style-head grammar, see components/ImageFocusRow.tsx), shows the whole
+   photograph, and a press or an arrow key puts the point where the merchant
+   wants it. The stored value is the same CSS `object-position` string it has
+   always been.
+
+   ⚠️ THE MEDIA ROW'S OWN FRAME IS NOT RESTYLED, EVER. `.es-pick-image-frame`
+   stays `cover` because that is what the PAGE will look like, and that
+   is its job. This block is a second frame, on screen only while a merchant is
+   actually setting the point, because a `cover` view cannot express a point it
+   has already cropped away. */
+.sf-focus {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+/* THE PHOTOGRAPH IS A REAL <button>, not a div wearing a tabIndex. What this
+   card replaced is a `role="radiogroup"` a keyboard could already drive, so the
+   successor has to earn its place in the tab order the same way. `touch-action`
+   is off so a drag on a phone moves the point instead of scrolling the panel. */
+.sf-focus-canvas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 150px;
+  padding: 0;
+  border: 1px solid var(--sf-line);
+  border-radius: 6px;
+  background: var(--sf-preview-bg);
+  cursor: crosshair;
+  touch-action: none;
+}
+.sf-focus-canvas:focus-visible {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: 1px;
+}
+/* Shrink-wraps the picture. The marker and crosshairs are positioned against
+   THIS and not against the canvas, because a whole photograph in a fixed-height
+   box is letterboxed — measuring against the box would land the marker on a
+   different pixel for every aspect ratio, and the merchant would watch the dot
+   drift away from where they pressed. */
+.sf-focus-pane {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+.sf-focus-img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 150px;
+  object-fit: contain;
+}
+.sf-focus-cross {
+  position: absolute;
+  background: rgb(255 255 255 / 45%);
+  pointer-events: none;
+}
+.sf-focus-cross--h {
+  right: 0;
+  left: 0;
+  height: 1px;
+}
+.sf-focus-cross--v {
+  top: 0;
+  bottom: 0;
+  width: 1px;
+}
+/* Drawn in white with a dark ring rather than in a panel token: it sits on a
+   merchant's own photograph, which can be any colour, and a token that read
+   correctly against the panel would vanish against half of them. */
+.sf-focus-marker {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1.5px rgb(0 0 0 / 55%), 0 1px 5px rgb(0 0 0 / 50%);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.sf-focus-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sf-focus-hint {
+  min-width: 0;
+  flex: 1;
+  font-size: 11px;
+  color: var(--sf-muted);
+}
+/* THE PHOTOGRAPH IS NEVER ON SCREEN TWICE. The 96px crop belongs to the
+   Background image field and this row belongs to `imageFocal` — two sibling
+   Puck fields, which cannot reach each other from React — so the crop stands
+   down for as long as a focus session is open, and comes back the moment it
+   closes. The `:has()` on Puck's own field wrapper is this stylesheet's
+   established idiom for exactly that problem (see the `[data-sf-bucket]` and
+   `[data-sf-no-control]` rules above). */
+.es-insp-rows:has([data-sf-focusing]) .es-pick-image-frame {
+  display: none;
+}
+
+/* ── The note (card 66121) ───────────────────────────────────────────────────
+   THE chrome's quiet sentence: what a panel says when it has something to tell
+   the merchant and nothing to let them edit. A whole-panel stand-in for
+   settings that belong to a website the open document does not have; "No pages
+   yet"; "Loading…"; the word "draft" trailing a row in the duplicate-to-page
+   menu. One voice, so it is one class.
+
+   It was six classes at five sizes — .sf-pages-note, .sf-sm-note,
+   .sf-panel-note, .sf-dupmenu-note, and two more that were only counted as
+   notes because of their names (see .sf-image-slot-inert and .sf-device-scope).
+   A third of those arrived with the part panel and was renamed the same way,
+   for the same reason — see .sf-part-style-state, which is a card's subtitle.
+   None of them was wrong on its own; each was written beside the block that
+   needed it, which is exactly how you get six. 13px is where four of the six
+   already were and is the size the panels are set in — a note is a SENTENCE, so
+   it is read at the panel's reading size, and the muted colour is what makes it
+   quiet.
+
+   THE CLASS CARRIES THE TYPE. The padding here is the note's home placement: a
+   panel's own body inset. Where a note sits somewhere else, the block it sits
+   in says so (`.sf-pages-list > .sf-note`, below its own list) — never a
+   `--wide` / `--tight` pair here, because a family of padding variants is the
+   same six classes wearing one name. */
+.sf-note {
+  padding: 14px 16px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--sf-muted);
+}
+.sf-note p + p {
+  margin-top: 8px;
+}
+/* The one word the note lifts out of its own quiet: the thing being explained. */
+.sf-note strong {
+  color: var(--sf-text);
+  font-weight: 600;
+}
+/* The one line in a note that is NOT addressed to the merchant: the part id and
+   the check that failed, on the screen a part could not be resolved on (card
+   [FIX] Part Says It Is Gone). It is in the panel rather than the console
+   because the person who meets this defect first is the one taking the
+   screenshot, and a screenshot carries no console. Quieter and smaller than the
+   sentence above it, so it reads as a footnote and not as an instruction. */
+.sf-note-detail {
+  margin-top: 10px;
+  font-size: 11px;
+  color: var(--sf-muted);
+  opacity: 0.75;
+  word-break: break-all;
+}
+/* Inline create/delete failure (a native alert is a no-op in the iframe). The
+   note's only loud state, and the only one that is not merely informative. */
+.sf-note--error {
+  color: var(--sf-danger);
+  background: var(--sf-danger-tint);
+  border-radius: 6px;
+}
+/* Where this section's words come from, when they are not the merchant's to
+   type (card 66089, owner ruling 7). A MODIFIER rather than a second note
+   style: it sits BESIDE live controls instead of replacing one — under them
+   since 2026-09-03, when the note moved to the foot of the panel so it stops
+   standing between the panel head and the tab strip (`components/SectionEditor.tsx`
+   carries the owner's word and the reason it was kept rather than deleted).
+   It used to draw
+   a rule under itself to say where it stopped; card 66334 removed that with
+   every other divider, and the note's own colour and air carry it instead. It
+   is the panel's quietest thing on purpose; it explains, it does not warn. */
+
+/* ── Part panel: the inspector scoped to ONE clicked control ──────────── */
+/* The style CARD: which site style this part follows, what that style actually
+   looks like, and how far this part has been pulled away from it. Sits above
+   every control because it is the thing the controls are relative TO — a
+   merchant who does not know a part follows a style reads every override below
+   as an ordinary setting.
+
+   It SHOWS the style rather than only naming it (card 66116, v3): deciding
+   whether to override "Headings" is deciding about a face, a size and a weight,
+   and the page has already measured all three. */
+.sf-part-style {
+  position: relative;
+  /* ⚠️ NO `overflow: hidden` HERE, AND IT CANNOT COME BACK. The style chooser's
+     menu is absolutely positioned inside this card, so clipping the card clipped
+     the MENU: a merchant opening it saw one truncated row and no way to reach
+     the other six. The clip existed only to round the 3px accent edge below,
+     which now rounds itself. */
+  margin: 0 0 4px;
+  padding: 11px 13px;
+  border: 1px solid var(--sf-divider);
+  border-radius: 12px;
+  background: var(--sf-track-bg);
+}
+/* Marked only once something has actually been overridden, so the card is quiet
+   on the ~all sections nobody has styled. The edge is the third carrier of that
+   one fact (with the chip and the accent labels below) and the only one visible
+   while the card is scrolled to the top of a long panel. */
+.sf-part-style.has-overrides {
+  border-color: var(--sf-accent-ring);
+}
+.sf-part-style.has-overrides::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: var(--sf-accent);
+  /* Rounds ITSELF against the card's left corners, so the card no longer needs
+     `overflow: hidden` to hide the square ends. Left radii only — the right side
+     is a straight edge into the card. */
+  border-radius: 12px 0 0 12px;
+}
+/* The card's own caption — the panel's small-label voice, so it reads as a
+   heading for the name below rather than as another name. */
+.sf-part-style-caption {
+  margin-bottom: 2px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--sf-muted);
+}
+.sf-part-style-count {
+  margin-bottom: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sf-muted);
+}
+.sf-part-style-name {
+  min-width: 0;
+  font-size: 20px;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  color: var(--sf-text-strong);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+/* ── The style box's name, as a chooser ([ADD] Text Follows Style) ──────────
+   The name was a readout; it is a button now. Everything it looked like it
+   kept: `.sf-part-style-name` still carries the face and weight, still drawn in
+   the style's own type, so the one place in the panel that shows a value BY
+   being it did not become a place that merely names it.
+
+   The popup is `.sf-multi-menu`'s, reused rather than redrawn — the trigger's
+   own chrome is all that is added here. */
+.sf-part-style-pick {
+  position: relative;
+}
+.sf-part-style-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  /* The name can be long and the panel narrows to 220; the caret must not be
+     pushed off the end, so the NAME is what gives way. */
+  min-width: 0;
+}
+.sf-part-style-trigger .sf-part-style-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Matches `.es-group-sign` in editor-shell exactly — same 16px box, same right
+   edge, same `−` / `+`. Deliberately NOT a caret: this panel already teaches one
+   "this opens" mark on Typeface and Size & spacing, and a second vocabulary for
+   the same act is what made the old dot unreadable. */
+.sf-part-style-sign {
+  margin-left: auto;
+  width: 16px;
+  flex: none;
+  text-align: center;
+  color: var(--sf-muted);
+  font-size: 14px;
+  line-height: 1;
+}
+.sf-part-style-trigger[aria-expanded="false"] .sf-part-style-sign::before {
+  content: "+";
+}
+.sf-part-style-trigger[aria-expanded="true"] .sf-part-style-sign::before {
+  content: "−";
+}
+.sf-part-style-trigger:focus-visible {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+/* Sits over the card's own content rather than pushing it down: the card is a
+   summary and a menu that grew it would move the controls under it while a
+   merchant was reading them. */
+.sf-part-style-menu {
+  position: absolute;
+  z-index: 30;
+  left: 0;
+  right: 0;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
+}
+.sf-part-style-option {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 9px;
+  border: 0;
+  background: none;
+  text-align: left;
+  /* E6 — a field label is never smaller than 12px, and an option is a label. */
+  font-size: 13px;
+  color: var(--sf-field-text);
+  border-radius: max(calc(var(--sf-field-radius) - 2px), 2px);
+  cursor: pointer;
+}
+.sf-part-style-option:hover {
+  background: var(--sf-accent-ring);
+}
+.sf-part-style-option:focus-visible {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: -2px;
+}
+.sf-part-style-option.is-on {
+  background: var(--sf-accent-ring);
+  font-weight: 600;
+}
+.sf-part-style-option-name {
+  /* ⚠️ THE NAME NEVER GIVES WAY — it is the whole content of the row. It was
+     `flex: 1 1 auto` with an ellipsis, so a note beside it squeezed "No style"
+     down to "No…": the one row a merchant needs to find became unreadable while
+     its explanation stayed whole. The NOTE gives way now, and only it. */
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+.sf-part-style-option .sf-note {
+  min-width: 0;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The text region's Style row is easel's FieldSelect (card [MERGE] One Pop-up
+   List For Editor And One For Shoppers). Its "No style" row draws its own note
+   so the NAME keeps its width and the NOTE gives way (owner 2026-09-06) — the
+   reverse of FieldSelect's meta, which is right for a price. */
+.es-fsel-label.sf-part-style-keep {
+  flex: none;
+}
+.sf-part-style-aside {
+  min-width: 0;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--es-muted);
+}
+.sf-part-style-meta {
+  margin-top: 1px;
+  font-size: 11px;
+  color: var(--sf-muted);
+  font-variant-numeric: tabular-nums;
+}
+.sf-part-style-top {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-top: 8px;
+}
+/* Pushes "Edit style" to the end whatever sits before it — a note, or the chip
+   and Clear all together. */
+.sf-part-style-gap {
+  flex: 1;
+}
+/* THE STYLE CARD'S OWN SUBTITLE — not a note, and never was one (card 66123).
+   It was called `.sf-part-style-note`, which is the only reason the note gate
+   counted it: the third time a name alone put something in that family, after
+   `.sf-image-slot-inert` and `.sf-device-scope` (card 66121). Two things say it
+   is not a note. It is painted `--sf-text-secondary` where every real note is
+   `--sf-muted` — a note is quiet BY COLOUR, and this line is not. And it does
+   not sit under a block explaining it; it sits INSIDE the bordered style card,
+   in a row with the override chip and "Edit style", finishing the card's own
+   head where `.sf-part-style-name` and `-meta` leave off. Folded onto `.sf-note`
+   it read at 13px and wrapped, taking "Edit style" over two lines with it. So
+   it keeps its look exactly and takes an honest name. */
+.sf-part-style-state {
+  font-size: 11.5px;
+  color: var(--sf-text-secondary);
+}
+/* The override count. A chip rather than plain text because it is a NUMBER a
+   merchant looks for, and because it has to read at a glance beside a link. */
+.sf-part-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 2px 9px;
+  background: var(--sf-accent-tint);
+  color: var(--sf-accent-text);
+  font-size: 10.5px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The panel's one text-button link — "Edit style", "Clear all". Underlined
+   rather than coloured-only, so it is still a link without colour vision. */
+.sf-part-link {
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sf-accent-text);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--sf-accent-ring);
+}
+.sf-part-link:hover {
+  text-decoration-color: currentColor;
+}
+
+/* THE GROUPS AND THE ROWS ARE NOT DRAWN HERE ANY MORE. `.es-group` /
+   `.es-field` come from `efficient-easel/panel.css`, imported by each editor entry
+   — the folding pill with its count chip and the icon + quiet label + loud value
+   row are the shared grammar both editors' panels are built from. What is left
+   below is only what this panel adds to them.
+
+   The override mark, half one, is theirs too: `.es-field.is-changed
+   .es-field-label` takes the accent. Blue AND the dot is deliberately two
+   signals — colour alone would not survive a colour-blind merchant or a
+   greyscale screenshot, which is exactly when "why does this page not match the
+   site" gets asked. */
+
+/* One note for a whole group, where the rule it states belongs to every row in
+   it rather than to any one of them (E6: a label is a name, never a sentence).
+   It stands above the first row, so it takes the ROW's left inset instead of
+   the panel's and pulls the group's own top gap back out from under itself.
+   `.es-group-body` is editor-shell's, which is the block it genuinely sits in.
+   Placement only; the note style itself is .sf-note. */
+.es-group-body > .sf-note {
+  margin: 12px 0 -4px;
+  padding: 0 0 0 2px;
+}
+
+/* …and inside a SLOT LIST the note sits between the group heading and the rows
+   it describes, so it takes the ROW's inset rather than the note's own default
+   16px: `.es-drill` is `10px 11px` and `.sf-slot-rows .sf-add-card` is
+   `8px 11px`, and a sentence stepped five pixels past the rows it is about
+   reads as belonging to something above them. The BOX only — the colour, the
+   size and the line-height stay the one note style's (card 66211). */
+.sf-slot-rows > .sf-note {
+  padding: 10px 11px 12px;
+}
+
+/* A value that reads "style" is not a measurement, so it is drawn as quietly as
+   the label rather than as loudly as a number. */
+/* The `style` word is quieter than a number, because it is the absence of one.
+   Since card 66275 that word lives inside the typeable readout rather than
+   being the value slot's own text, so the rule has to reach the control the
+   slot now holds — without it the row keeps drawing `style` at full strength
+   and the one visual difference between "set" and "following the style"
+   disappears. */
+.sf-part-field.is-style-value > .es-field-head > .es-field-value,
+.sf-part-field.is-style-value > .es-field-head > .es-field-value > .sf-slider-val {
+  color: var(--sf-muted);
+}
+
+/* The font dropdown fills the row like every other control in the panel; the
+   inspector's own `select` rules give it its box. */
+.sf-part-select {
+  width: 100%;
+  min-width: 0;
+}
+
+/* The `Color` row's control row: the dropdown, and — only once `Custom…` is
+   chosen — the swatch and hex under it.
+
+   ⚠️ A COLUMN, NOT A ROW, AND 220px IS WHY. `MIN_PANEL_W` is 220, which leaves
+   a 181px content box; the dropdown alone wants that, and the swatch (26) plus
+   the hex box (57) plus two 8px gaps is another 99. Side by side they do not
+   fit, and the first thing to collapse would be the dropdown showing which
+   colour is selected. Stacked, each keeps its full width at every panel size —
+   and the shell's `SettingsField` already gives a row a control area under its
+   label, so this costs no new shape.
+
+   The swatch pair is right-aligned to sit under the dropdown's own right edge,
+   where `SettingsField`'s `action` slot puts every other trailing control. */
+.sf-part-ink {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+/* In this column the picker keeps its own box: the window opens under the
+   dropdown at the column's width, and the swatch and hex sit at its end. */
+.sf-part-ink > .es-pick-colour > .es-pick-colour-row {
+  align-self: flex-end;
+}
+
+/* The override mark, half two — and it IS the reset button, which is why it is
+   a real <button> with a name and not a painted dot. The dot shrinks away under
+   the pointer and the reset arrow takes its place, so the affordance is
+   discovered by hovering the only new thing on the row. */
+.sf-part-mark {
+  width: 18px;
+  height: 18px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--sf-accent);
+  cursor: pointer;
+}
+.sf-part-mark-dot {
+  transform-origin: center;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.sf-part-mark-arrow {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.sf-part-mark:hover .sf-part-mark-dot,
+.sf-part-mark:focus-visible .sf-part-mark-dot {
+  transform: scale(0);
+  opacity: 0;
+}
+.sf-part-mark:hover .sf-part-mark-arrow,
+.sf-part-mark:focus-visible .sf-part-mark-arrow {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sf-part-mark-dot,
+  .sf-part-mark-arrow {
+    transition: none;
+  }
+}
+
+/* The copy box at the TOP of the drill (card 8819). Clicking a word drills
+   straight to its editor, so the box is the first thing on the part screen —
+   right under the way back, above the style it follows. It is the plain copy box
+   (.sf-copybox) the section screen used to draw; only its placement is here. */
+.sf-part-text {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+/* Roomy in the drill: this is the part's PRIMARY editor now, not a folded-away
+   afterthought, so a multi-line field opens with room to write rather than the
+   browser's two-row default. Scoped to the drill so the identifier rows (a slide
+   name) and every other panel's copy box keep their own height. */
+.sf-part-text .sf-copybox textarea {
+  min-height: 84px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+/* ── The text ENTRY group at the bottom of the section screen (card 8819) ──── */
+
+/* The section screen lists its scalar text parts here, under the real settings,
+   as the way into each part's drill. The rows themselves are the shell's
+   `.es-drill` (single source); this is only the group frame around them. */
+.sf-entries {
+  margin-top: 32px;
+}
+
+
+/* The group's caption — the section panel's small-caps heading, so this group
+   reads like the buckets above it. A real <h3>, so it joins the panel outline. */
+.sf-entries-head {
+  margin: 14px 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--sf-muted);
+}
+
+/* The "hidden on the page" eye a row carries when a part is toggled off — the
+   same cue the copy box's own eye draws, so the two read as one idea. */
+.sf-entry-eye {
+  display: inline-flex;
+  align-items: center;
+  color: var(--sf-muted);
+}
+
+/* ── A slot section's children, listed in its OWN panel (card 66186) ──────────
+   The Hero Slideshow's Content tab was empty: `slides` is a slot, and Puck draws
+   a slot as nothing in the inspector, so the slides were reachable only from the
+   Sections tree. The rows are the shell's `.es-drill` (single source, as in
+   `.sf-entries` above) and the heading is the panel's own `.sf-field-group`, so
+   the only thing this frame owns is where the add row meets them.
+
+   It owns that because the two come from different places and did not line up:
+   `.sf-add-card` is the TREE's affordance and pads `6px 9px`, a drill row pads
+   `10px 11px`, so the "+" sat 2px inside the names above it (measured).
+
+   ⚠️ It used to draw a `border-top` as well, to match the `.es-drill + .es-drill`
+   separator that could not reach a row which is not a drill. That separator is
+   gone entirely now — editor-shell 0.29.0 deleted it and card 66351 deleted this
+   repo's override of it — so matching it means drawing NOTHING, and the padding
+   above is the whole of what this rule still owns. */
+.sf-slot-rows .sf-add-card {
+  padding: 8px 11px;
+  border-radius: 0;
+}
+
+/* The drop zone round the media row's box. `SettingsField` puts its control in
+   `.es-field-ctl`, a flex ROW, where a plain block shrinks to its content: the
+   empty slot drew 190px wide in a 280px row. It takes the row instead. */
+.sf-image-drop {
+  flex: 1;
+  min-width: 0;
+}
+/* Drag-over highlight for the media row (MediaUploadField's drop shortcut):
+   the empty slot takes the accent, a filled picture an accent ring. */
+.sf-image-drop.is-dragover .es-pick-image-slot {
+  border-color: var(--sf-accent);
+  background-color: var(--sf-accent-tint);
+}
+.sf-image-drop.is-dragover .es-pick-image-frame {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: -2px;
+}
+
+
+/* ── THE PHOTO WALL'S LAYOUT PICKER ─────────────────────────────────────────
+   The Customer Photo Grid's one layout control: a strip of pictures, filtered by
+   how many photos sit in a row. The owner, 2026-09-07, on the numbers it
+   replaced: he could not read them, and he was right — 6·3·3, 2·1·1 and "two
+   thirds" were three notations for one idea. There are no numbers on this
+   control at all. The picture is the explanation and the name is only so the
+   layout can be named.
+
+   ⚠️ THE FILTER CHIPS CARRY NO ICON, and that is his ruling of 2026-08-29 about
+   filter rows, applying here for the reason he gave: the buckets are grown from
+   the layouts, so a glyph per bucket is a queue that never empties.
+
+   THE STRIP FILLS BY TILE WIDTH, NOT BY A COLUMN COUNT. `auto-fill` with a 58px
+   minimum gives four across the 320px panel and three at the 220px minimum, so
+   nothing is cut off and nothing scrolls sideways at either width. */
+.sf-gallery-filter {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+.sf-gallery-filter button {
+  border: 1px solid var(--sf-input-border);
+  background: var(--sf-field-bg);
+  border-radius: 999px;
+  padding: 4px 11px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--sf-icon);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.sf-gallery-filter button:hover {
+  background: var(--sf-hover);
+}
+.sf-gallery-filter button[aria-pressed="true"] {
+  background: var(--sf-accent);
+  border-color: var(--sf-accent);
+  color: var(--sf-on-accent);
+}
+
+.sf-gallery-layouts {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
+  gap: 6px;
+  margin-top: 7px;
+}
+/* ⚠️ THE STRIP MUST BE TOLD TO FILL THE SHELL'S CONTROL SLOT, OR IT COLLAPSES.
+   editor-shell card 66516, and the shop is now the second consumer to meet it.
+
+   `SettingsField` stacks its control into `.es-field-ctl`, and that slot is
+   `display: flex`. A grid written for a BLOCK row — which this was, for its whole
+   life — therefore stops stretching and sizes to its own content. Measured on
+   this card's board: 291px wide before the move, 58px after. One tile per line,
+   nineteen lines deep, and every layout still clickable, so nothing looked
+   broken enough to fail.
+
+   The shell already ships this exact two-line cure for its own `.es-tabs-fit`
+   and `.es-segs-fit`, and its note on that rule is the reason this comment is
+   long: card 66508 shipped 1198 green checks over a control 0px wide, because
+   every check asked whether markup EXISTED and none asked whether it OCCUPIED
+   SPACE. `scripts/probe-settings-rows-shared.mjs` now asks that question, which
+   is what caught this one.
+
+   `flex: 1 1 auto` and not a width, because the slot may hold a value readout
+   or a second control beside the strip. `min-width: 0` because a flex item's
+   automatic minimum is its content size, which is what stops it shrinking.
+
+   ⚠️ BOTH GALLERY CONTROLS ARE NAMED, and the second one is why this is a rule
+   and not a patch. `.sf-gallery-filter` — the `Photos in a row` chips — is the
+   same shape, and it did NOT look broken: measured 291px before and 185px after
+   at a 320px panel, with the row a pixel and a half SHORTER, because the chips
+   simply stopped stretching. Nothing wrapped at the two widths that were
+   measured, so every height check passed. What it had was a smaller box to wrap
+   inside at any width nobody happened to measure.
+
+   ⚠️ SO THIS IS A DEFECT A HEIGHT RULE CANNOT CATCH, AND THAT IS THE POINT.
+   The card that made this change stops at a row moving more than about 6px
+   (GG, 2026-09-22). This row moved 1.5px, in the RIGHT direction, and was
+   wrong. Measuring how tall a row stands cannot see a control that quietly
+   stopped filling it — only asking the width can, which is why
+   `scripts/probe-settings-rows-shared.mjs` now asks it of every row on both
+   sides, and why that question found both of these on its first run.
+
+   A rule that fixed the strip and left the chips would be a trap wearing a fix
+   — which is exactly what the shell says about naming both of its own `-fit`
+   wrappers. This is the FOURTH instance of this collapse in this repo:
+   `.sf-slider` carries the same two lines from card 66247, and the shell
+   carries them for `.es-tabs-fit` and `.es-segs-fit`.
+
+   `.sf-linkstack` was on this list until the link field became the shared
+   picker ([MERGE] One Link Picker For Both Editors): its stack is now the
+   shell's own `.es-flink`, and the shell carries the same two lines for it.
+   Every consumer control that is a flex or grid box written for a block row
+   belongs on this selector; the day one is fixed somewhere else instead, the
+   list stops being the place to look. */
+.es-field-ctl > .sf-gallery-layouts,
+.es-field-ctl > .sf-gallery-filter {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.sf-gallery-layouts button {
+  border: 1px solid var(--sf-input-border);
+  background: var(--sf-field-bg);
+  border-radius: 7px;
+  padding: 5px;
+  cursor: pointer;
+  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+}
+.sf-gallery-layouts button:hover {
+  background: var(--sf-hover);
+}
+.sf-gallery-layouts button[aria-pressed="true"] {
+  border-color: var(--sf-accent);
+  box-shadow: 0 0 0 2px var(--sf-accent-ring);
+  background: var(--sf-panel);
+}
+
+/* The little drawing of a wall. Same twelve positions the real wall uses, so the
+   picture cannot disagree with what pressing it draws. */
+.sf-gallery-pic {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-auto-rows: 6px;
+  grid-auto-flow: row dense;
+  gap: 2px;
+}
+.sf-gallery-pic i {
+  display: block;
+  background: var(--sf-track-bg);
+  border-radius: 1.5px;
+}
+.sf-gallery-layouts button[aria-pressed="true"] .sf-gallery-pic i {
+  background: var(--sf-accent);
+}
+
+/* How many the filter left. Without it an empty-looking strip is a mystery. */
+.sf-gallery-count {
+  font-size: 10.5px;
+  color: var(--sf-disabled);
+  margin-top: 7px;
+}
+
+/* ── Side panel heads (components/SidePanelHead) ─────────────────────────
+   Every side panel's head is efficient-easel's `InspectorHead`; these two
+   are the pieces the website editor adds to it. The hairline parts a panel's
+   own tools from the hide button that ends every head, and a mode's way out
+   is a word ("Done", "Cancel") on the engine's ghost button, drawn to the
+   28px of the head's icon buttons so the row keeps one height. */
+
+/* ── The Contact / Locations inspector's level views ────────────────────────
+   LocationsGroupedField shows ONE level at a time (section, group, city, its
+   image or map). Each level used to be wrapped in a bare `.sf-field`, which
+   made the whole view one "row" with rows inside it. The rows are
+   efficient-easel's `SettingsField` now ([MERGE] One Settings Row And Hint In
+   The Website Editor, 2026-10-06); this keeps the view's own top air, from the
+   shell's rhythm token like every row beside it. */
+.sf-locations-view {
+  margin-top: var(--es-rhythm-between);
+}
+
+/* ── A quiet line that belongs to no row ────────────────────────────────────
+   [MERGE] One Settings Row And Hint In The Website Editor, 2026-10-06. A line
+   UNDER A CONTROL is `SettingsField`'s own `hint`. A few lines sit under no
+   row — the caption inside a linked-source card, a panel's opening sentence,
+   the empty state of an open focus picker — and they wear the SAME class,
+   `<p class="es-field-hint sf-hint-keep">`: one hint line in the whole editor,
+   not a shop copy of its look. That replaces the shop's `.sf-field-hint` and
+   `.sf-blogsource-hint`, which drew this idea twice, slightly differently.
+
+   Not a NEW class, and not `.sf-note`: `test-editor-chrome-note` holds the
+   chrome to ONE note style, and these are hints, at the hint's size.
+   `sf-hint-keep` on the element keeps the hints switch off them — none is a
+   row's explanation.
+
+   Inside a source card the card's own gap spaces it. */
+.sf-blogsource > .es-field-hint,
+.sf-formsummary .es-field-hint {
+  margin: 0;
+}
+
+/* The copy box sits in `SettingsField`'s control slot, which is
+   `display: flex` — the trap the Gallery layouts note above describes. Told to
+   fill the slot, or it shrinks to its own words. (The select fields need no
+   rule: easel's `.es-fsel` is `width: 100%` itself.) */
+.es-field-ctl > .sf-copybox {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The focal-point picker's row is TextStyleRow's disclosure row, not a
+   SettingsField; this keeps the gap above it that its old bare `.sf-field`
+   wrapper gave, from the same rhythm token. */
+.sf-focal-row {
+  margin-top: var(--es-rhythm-between);
+}