efficient-easel 0.101.0 → 0.102.0

package/dist/screen/screen.css

@@ -0,0 +1,1088 @@
+/*
+ * efficient-easel/screen.css — the assembled editor screen's own rules: its
+ * frame (`.sf-editor`, and the `--sf-*` names it aliases onto easel's `--es-*`
+ * tokens), the panels' heads, the add panel and block menu, the media panel,
+ * the preview's frame and the gaps between sections, toasts and messages.
+ *
+ * They came from efficient-web-builder's components/storefront-editor.css with
+ * the screen (that repo's doc/adr/0004): a rule is here when every `sf-` class
+ * it names is drawn by the screen, so every host that mounts the screen gets
+ * it; a rule that names a class only a host draws stays in that host's sheet.
+ * The `sf-` names are kept: the hosts' sheets and their guards address them.
+ *
+ * Load it after the other easel sheets and before a host's own sheet, which is
+ * where these rules sat in the builder's; that order is the one the cascade
+ * was measured in.
+ */
+
+.sf-editor {
+  /* ── Accent (efficient-shell blue) ───────────────────────────────────── */
+  --sf-accent: var(--es-accent);
+  --sf-accent-tint: var(--es-accent-tint);
+  --sf-accent-tint-strong: var(--es-accent-tint-strong);
+  --sf-accent-text: var(--es-accent-text);
+  --sf-accent-ring: var(--es-accent-ring);
+  --sf-accent-shadow: var(--es-accent-shadow);
+  --sf-on-accent: var(--es-on-accent);
+
+  /* ── Surfaces (cool gray ramp) ──────────────────────────────────────── */
+  --sf-app-bg: var(--es-app-bg);
+  --sf-preview-bg: var(--es-preview-bg);
+  --sf-panel: var(--es-panel);
+  --sf-raised: var(--es-raised);
+  --sf-frame-bg: var(--es-frame-bg);
+  --sf-hover: var(--es-hover);
+  --sf-hatch: var(--es-hatch);
+  --sf-addcard-veil: var(--es-addcard-veil);
+
+  /* ── Fields ─────────────────────────────────────────────────────────── */
+  --sf-field-bg: var(--es-field-bg);
+  --sf-track-bg: var(--es-track-bg);
+  --sf-input-border: var(--es-input-border);
+  --sf-field-text: var(--es-field-text);
+  --sf-field-placeholder: var(--es-field-placeholder);
+  --sf-knob: var(--es-knob);
+
+  /* ── Text ───────────────────────────────────────────────────────────── */
+  --sf-text: var(--es-text);
+  --sf-text-strong: var(--es-text-strong);
+  --sf-text-secondary: var(--es-text-secondary);
+  --sf-muted: var(--es-muted);
+  --sf-icon: var(--es-icon);
+  --sf-disabled: var(--es-disabled);
+
+  /* ── Lines / chips / buttons ────────────────────────────────────────── */
+  --sf-divider: var(--es-divider);
+  --sf-line: var(--es-line);
+  --sf-btn-border: var(--es-btn-border);
+  --sf-btn-text: var(--es-btn-text);
+  --sf-chip-bg: var(--es-chip-bg);
+  --sf-chip-fg: var(--es-chip-fg);
+
+  /* ── Named chrome literals ──────────────────────────────────────────── */
+  --sf-device-border: var(--es-device-border);
+  --sf-toast-bg: var(--es-toast-bg);
+  --sf-scrollbar: var(--es-scrollbar);
+  --sf-scrollbar-hover: var(--es-scrollbar-hover);
+
+  /* ── Danger / warning / success (shell red / amber / green) ─────────── */
+  --sf-danger: var(--es-danger);
+  --sf-danger-strong: var(--es-danger-strong);
+  --sf-danger-tint: var(--es-danger-tint);
+  --sf-warning: var(--es-warning);
+  --sf-preview-tint: var(--es-preview-tint);
+
+  /* ── Radii / shape (tighter, shell-like) ────────────────────────────── */
+  /*
+   * ┌─ FLAT CHROME (card 66161) — these three do NOT alias the shell. ─────────
+   * │
+   * │ The panels used to be floating cards: rounded, drop-shadowed, sitting on
+   * │ the grey app background with a 10px gap between each pair and a 10px frame
+   * │ padding around the lot. The owner asked for lines instead. On a 1280px
+   * │ laptop that gave the website preview 50px back — 576px to 626px — because
+   * │ gaps, corners and shadows hold nothing. No panel got narrower and no
+   * │ vertical measurement changed.
+   * │
+   * │ WHY THESE STOPPED ALIASING, AND EXACTLY WHAT ENDS IT
+   * │
+   * │ The `--sf-*` block exists exactly so the shop can pick its own values off
+   * │ the shared `--es-*` layer. Flat is the SHOP's decision, not the shell's.
+   * │
+   * │ Note the ORIGINAL reason is already gone, so do not go looking for it:
+   * │ when this was written, card 66160 was mid-release on editor-shell and two
+   * │ windows bumping one package version would have collided. That released as
+   * │ `editor-shell@0.13.0` the same day, and the shop still declares `^0.12.0`.
+   * │ The values stayed local anyway, for a reason that has nothing to do with
+   * │ release timing:
+   * │
+   * │   THE OWNER DECIDED FLAT FOR THE STOREFRONT EDITOR ONLY.
+   * │
+   * │ Putting these in the shell's defaults would make the campaign editor flat
+   * │ too, which nobody has asked for. The campaign editor is also still pinned
+   * │ to `editor-shell@0.2.0` and cannot receive shell changes at all until it
+   * │ comes off that pin.
+   * │
+   * │ So this is NOT a half-finished alias block, and it is NOT drift. Do not
+   * │ "fix" these back into `var(--es-…)`.
+   * │
+   * │ IT ENDS WHEN BOTH ARE TRUE:
+   * │   1. the campaign editor comes off its `editor-shell@0.2.0` pin, AND
+   * │   2. the owner decides the campaign editor should go flat as well.
+   * │ Then promote the three values into the shell defaults, delete these three
+   * │ lines, and drop the matching waiver in `scripts/test-inspector-inherit.tsx`
+   * │ in the same change. Either one alone is not enough.
+   * │
+   * │ `scripts/test-editor-flat-chrome.ts` fails if they are re-aliased.
+   * └──────────────────────────────────────────────────────────────────────────
+   */
+  --sf-panel-radius: 0;
+  --sf-row-radius: var(--es-row-radius);
+  --sf-field-radius: var(--es-field-radius);
+  /* The editor "frame" gap: the space between the panels and the preview, and
+     the padding around the whole framed area (top/bottom + outer left/right).
+     One token so the frame tightens in ONE place — .sf-body drives it, and the
+     Add-section picker + section-editor top strip track it.
+     Flat since 66161 (see the note above). It MUST stay a length rather than a
+     bare `0`: it is spent inside calc() below and in the picker's width, and
+     `calc(0 + 46px)` is invalid CSS — the whole declaration would be dropped and
+     the left grip would land at the frame's edge instead of on its seam. */
+  --sf-panel-gap: 0px;
+  /* Side-panel widths ride in as editor-shell's --es-left-w / --es-right-w, set
+     on the editor ROOT by BOTH editors through components/panel-widths.ts (the
+     page chrome per drag; the standalone section editor at the fixed defaults).
+     The literal widths deliberately do NOT live here — see that module. */
+  /* Top-bar height. ONE source for both the chrome that draws it AND the
+     working-area overlay (the Add-section picker) that must clear
+     it to sit inside the frame, not cover it.
+     Storefront-LOCAL geometry: the top bar is this editor's own chrome
+     dimension, not part of the shared token layer. */
+  --sf-topbar-h: 52px;
+  /* There is no `--sf-rail-w`. Card 66198 moved the icon rail into the top bar,
+     where editor-shell's row variant is `width: auto` — the rail is as wide as
+     its buttons, so no element has a width for that token to name. It was NOT
+     set to 0: a 0 would leave every calc() below arithmetically correct while
+     keeping a token still aimed at the content column, so restoring a
+     non-zero value would move it. Deleting it means the
+     next person has to write the term back on purpose.
+
+     Where the content column BEGINS. Now the frame padding and nothing else:
+     the left panel is `.sf-body`'s first in-flow child, so its box starts at the
+     padding edge. Everything drawn against that box — the left resize grip — and
+     every overlay framed in the working area reads this one name.
+
+     Card 66149 is why the name exists: the left grip spent
+     `--sf-panel-gap + --es-left-w` while a rail really was in front of the
+     panel, and landed 56px inside it where no merchant could reach it. This
+     card is the mirror image — the danger now is a pin that keeps PAYING for a
+     rail nobody renders — and the guard is the same, because
+     `scripts/test-editor-rail-in-topbar.ts` evaluates this at probe values with
+     no `--sf-rail-w` in the table at all: a restored rail term throws by name
+     rather than quietly reserving 46px of website.
+
+     Still written as `var(--sf-panel-gap)` and not a bare `0`, for the reason
+     given at that token above: it is spent inside calc() and `calc(0 + 288px)`
+     is invalid CSS — the whole declaration would be dropped and the left grip
+     would land at the frame's edge instead of on its seam. */
+  --sf-content-x: var(--sf-panel-gap);
+  /* Flat since 66161 — see the note at --sf-panel-radius above. */
+  --sf-panel-shadow: none;
+  --sf-font: var(--es-font);
+
+  /* No `--puck-*` names here. Puck read its `--puck-color-azure-*` ramp and
+     `--puck-font-family` from editor-shell's shell.css on this same root, and
+     they were deliberately never re-declared in this file — one blue is the
+     point. Puck and those names left with blueprint 6.1/6.3; the blue is the
+     `--es-*` set in efficient-easel/shell.css. */
+
+  /*
+   * Fill the iframe viewport. `100dvh` resolves against the viewport directly,
+   * so the editor always fills the embedding iframe with no flex/min-height
+   * dependency (percentage heights don't resolve against the app shell's
+   * min-height, which otherwise left a gap below the editor). Mounted inside
+   * another app's window it fills that window instead — `.sf-embedded`, below.
+   */
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative; /* positioning context for the floating add-section modal + toast */
+  background: var(--sf-app-bg);
+  color: var(--sf-text);
+  font-family: var(--sf-font);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+.sf-editor *,
+.sf-editor *::before,
+.sf-editor *::after {
+  box-sizing: border-box;
+}
+
+/* Scrollbars inside the editor panels */
+.sf-scroll::-webkit-scrollbar {
+  width: 11px;
+  height: 11px;
+}
+
+.sf-scroll::-webkit-scrollbar-thumb {
+  background: var(--sf-scrollbar);
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+
+.sf-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--sf-scrollbar-hover);
+  background-clip: content-box;
+}
+
+.sf-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Standalone section editor — a slim top strip carrying the "Preview mode"
+   switch (left) and the autosave pill (right), above the reused sf-body
+   (canvas + inspector). */
+.sf-section-bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  /* PINNED at 10px by card 66161, which took `--sf-panel-gap` to 0 to flatten
+     the PAGE chrome. This strip belongs to the standalone SECTION editor — a
+     different surface — and the 10px here is real padding holding the
+     "Preview mode" switch and the autosave pill off the window edge, not a gap
+     that existed so a card could float. Following the token to 0 would have
+     changed a surface this card was never about, so it is spelled out instead.
+     Deliberately its own literal rather than a shared "inset" token: one token
+     quietly deciding the padding of a dialog AND a different editor's strip is
+     the coupling that made this a question at all. Whether this strip should go
+     flat too is its own decision, on its own card. */
+  padding: 8px 10px;
+}
+
+/* The save pill (dot, ring, words, the autosave switch around it) is
+   editor-shell's `.es-savestate` (efficient-easel/chrome.css), lifted from this
+   sheet with its card-66103 quiet state and the countdown ring (redesign 2a). */
+/* ── Body / floating panels ───────────────────────────────────────────── */
+.sf-body {
+  flex: 1;
+  display: flex;
+  gap: var(--sf-panel-gap);
+  padding: var(--sf-panel-gap);
+  min-height: 0;
+  /* Positioning context for the absolutely-placed resize grips (editor-shell's .es-resizer),
+     which the chrome pins over each panel↔preview seam. */
+  position: relative;
+}
+
+/* ── Body / floating panels ───────────────────────────────────────────── */
+/* THE SIDE PANELS AND THEIR GRIPS ARE editor-shell's (efficient-easel/chrome.css):
+   `.es-sidepanel` — flush, a hairline on the SEAM side only (card 66161: draw the
+   seams, leave the outer edges alone), the size-container context every
+   `@container` rule in this sheet asks (card 66212) — and `.es-resizer`, pinned
+   over each seam from `--es-left-w` / `--es-right-w`, with the drag's
+   `body.es-col-resizing`. Lifted from this sheet (redesign 2a). The panels keep
+   `.sf-panel` / `.sf-panel--left|right` as well, which is what this sheet's own
+   descendant rules (`.sf-panel--right .sf-insp-body`, …) hang on. */
+.sf-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px 14px 11px;
+  flex: none;
+}
+
+/* ── Body / floating panels ───────────────────────────────────────────── */
+/* A panel's own name. It is an `h2` in the views that own their title
+   (StylesPanel), so the rule states the three properties a heading element
+   would otherwise inherit from the UA sheet — `margin` above all, which is
+   `0.83em 0` on an h2 and would push the whole head open. The `--btn` variant
+   below re-states its own margin and wins by source order. */
+.sf-panel-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--sf-text);
+  margin: 0;
+}
+
+/* In the standalone section editor the title doubles as the SELECT-ROOT control
+   (clicking the section name selects the section node → its section-level
+   fields), so it renders as a <button>. Reset the UA button chrome back to the
+   heading it replaces, then add row-style hover / selected affordance so it
+   reads as interactive and shows when the root is the active selection. */
+.sf-panel-title--btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  padding: 5px 8px;
+  margin: -5px -8px;
+  border-radius: var(--sf-row-radius);
+  transition: background 0.12s;
+}
+
+.sf-panel-title--btn:hover {
+  background: var(--sf-hover);
+}
+
+.sf-panel-title--btn.is-selected {
+  color: var(--sf-accent-text);
+  background: var(--sf-accent-tint);
+  box-shadow: inset 2px 0 0 var(--sf-accent);
+}
+
+/* ── Left panel: section tree (wraps Puck.Outline) ────────────────────── */
+.sf-tree {
+  flex: 1;
+  overflow-y: auto;
+  /* THE TWO SIDES PAY FOR DIFFERENT THINGS, and they always did.
+       LEFT 8 — the inset a rounded row needs. The reason WAS "a rounded bar
+       cannot bleed to a panel edge"; the bars are gone (One Ladder, 2026-09-04)
+       and the reason survives them unchanged, because every row in the tree is
+       still a rounded control and an inset control is simply a control.
+       RIGHT 11 — this element also carries `.sf-scroll`, and
+       `.sf-scroll::-webkit-scrollbar` is `width: 11px` of REAL, space-taking
+       gutter, not an overlay. This tree scrolls on almost every page. What used
+       to live at the row's right end was the caret; it is the count pill now,
+       and a count sitting under a scrollbar thumb is the same defect wearing a
+       different glyph.
+     Everything inside still starts on the same 11px text column, which is what
+     keeps the words aligned down the panel. */
+  padding: 0 11px 10px 8px;
+
+  /* ── THE TREE'S RHYTHM — the shell's names, the tree's own density ─────────
+     `efficient-easel` 0.19.0 stopped hiding its spacing inside literals and gave
+     each rhythm a name (card 66228, `efficient-easel/panel.css`). The tree reads
+     those names. It does NOT read the panel's VALUES and does not compute them:
+
+       · Copying 28/7 in would be a second source of truth for numbers the shell
+         is already the source of — the one rule that sits above a green suite.
+       · A scale FACTOR off them would be a lie. Lewis picked the tree's two
+         numbers by eye on 2026-08-31 (`mockups/layers-panel-v9-left-only-and-drag.html`
+         and `editor-add-and-context-v1.html`): 10 between bars, 6 between rows.
+         Against the panel that is 10/36 = 0.28 and 6/28 = 0.21 — TWO factors,
+         not one, so there is no single number to scale by. `panel.css` already
+         refuses this shape for the same reason, in its own words: 28 was
+         measured, it is not "10 plus 18".
+
+     So what is shared is the VOCABULARY and the RULE, not the values: `-group`
+     means "a heading, from what is above it" in both panels and `-between`
+     means "one row, from the next" in both, each stated once at its own
+     density. A tree at the panel's 28px a row would scroll forever.
+
+     Declared HERE rather than on `.sf-editor` deliberately — the settings panel
+     is a sibling reading the same names from the shell, and an override at the
+     editor root would re-rhythm IT too. `scripts/test-tree-rhythm-tokens.ts` is
+     the gate. */
+  --es-rhythm-group: 10px;
+  --es-rhythm-between: 6px;
+}
+
+.sf-chip {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  flex: none;
+  /* NO GROUND AND NO RULE. Every row carries a glyph now, so a filled tile on
+     each one is 40 tiles down a page — the chip was a way of picking the icon
+     row out of a list that mostly had none, and there is no such list any more.
+     The glyph itself is the mark; `--sf-icon` is the same grey the top bar's
+     icons wear. */
+  background: transparent;
+  color: var(--sf-icon);
+}
+
+.sf-row-name {
+  flex: 1;
+  /* One size at every depth — the tree's three (11 / 10.5 / 11.5) were a second
+     way of saying the indent already says. 12px/500 is `.es-group-head`'s size
+     at a row's weight, so the tree and the inspector's headings agree on how big
+     a name in this editor is. */
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sf-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* THE TWO BAR TIERS ARE GONE (One Ladder, 2026-09-04).
+
+   `.sf-row--bar` (a 1px outline, 11px/600) and `.sf-row--bar-nested` (a
+   `color-mix` ground one shade off the panel, 10.5px/600) were how this tree
+   said "a level". Both are deleted, and with them the whole question of which
+   tier a row belongs to.
+
+   THE NESTED BAR IS THE ONE WORTH RECORDING. Its own note said it: at ~2% off
+   white the fill alone disappears on a cheap panel, so it needed a hairline
+   beside the fill to survive. A difference that has to be said twice to be seen
+   once is not carrying its weight — and the indent and the subtree's guide line
+   were already saying the same thing, legibly, for free.
+
+   What replaced them is `.sf-subtree` below: an indent and a 1px rule. Nothing
+   in this tree is told apart by a fill any more except the SELECTED row, which
+   is the one place a fill is not competing with anything. */
+.sf-add-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 9px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--sf-accent);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.sf-add-card:hover {
+  background: var(--sf-accent-tint);
+}
+
+.sf-add-card .sf-plus {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  flex: none;
+  background: var(--sf-accent-tint);
+}
+
+/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+.sf-blockmenu {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin: 2px 0 4px;
+  padding: 4px;
+  border: 1px solid var(--sf-line);
+  border-radius: 8px;
+  background: var(--sf-panel);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+}
+
+/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+.sf-blockmenu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 9px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--sf-text, var(--sf-text));
+  font-size: 12.5px;
+  text-align: left;
+}
+
+/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+.sf-blockmenu-item:hover {
+  background: var(--sf-accent-tint);
+  color: var(--sf-accent);
+}
+
+/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+/* A group heading inside that menu — drawn only where a choice list carries
+   groups (a Box's does; the Footer's and the Slide box's do not, and render
+   exactly as before).
+
+   ⚠️ THE SAME TYPE AS `.sf-addgroup-title` BELOW, and deliberately not a second
+   look: that is the heading the Add-section panel puts over every one of its
+   categories, and this menu is the OTHER door a merchant adds something
+   through. One grammar for "these belong together" (rule zero). It is not the
+   same CLASS because the two live in different boxes — a 4px-padded floating
+   menu and a 20px panel column — so only the spacing differs, and it differs
+   because the container does.
+
+   `role="presentation"` on the row: it is a label, not a menuitem, and a
+   keyboard user arrowing through the menu must not land on it. */
+.sf-menugroup-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 9px 9px 5px;
+}
+
+/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+/* No top padding on the first heading — the menu's own 4px inset already sets
+   it in, and a second inset would leave the first group sitting lower than the
+   rows it names. */
+.sf-menugroup-head:first-child {
+  padding-top: 4px;
+}
+
+/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+.sf-menugroup-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--sf-muted);
+}
+
+/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+.sf-menugroup-count {
+  font-size: 11px;
+  color: var(--sf-field-placeholder);
+}
+
+/* ── 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. */
+.sf-addside {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 14px 16px;
+}
+
+/* ── 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 hairline round a section's cover — the one the dialog's cards wore
+   (`--sf-thumb-thumb-border`'s value). The cover box is a containing block in
+   the engine itself since efficient-easel 0.80.1: a scene drawn to fill it
+   painted over the whole panel before. */
+.sf-addside .es-add-tile-cover {
+  border: 1px solid #edeff4;
+}
+
+/* ── 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 Media view's body — the HOST's library (lib/media-panel), drawn
+   in whatever the panel leaves under the head. It scrolls itself (its grid
+   keeps its own toolbar pinned), so this box only hands it the height. */
+.sf-media-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Toast — transient confirmation (e.g. after adding a section) */
+.sf-toast {
+  position: absolute;
+  left: 50%;
+  bottom: 34px;
+  transform: translateX(-50%);
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 17px;
+  border-radius: 11px;
+  background: var(--sf-toast-bg);
+  color: #fff;
+  font-size: 13px;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
+}
+
+.sf-toast-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--sf-accent);
+  color: #fff;
+  font-size: 11px;
+  flex: none;
+}
+
+/* Error variant — same dark pill, red mark instead of the green check. */
+.sf-toast--error .sf-toast-check {
+  background: var(--sf-danger);
+}
+
+/* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
+.sf-center {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  background: var(--sf-preview-bg);
+  border-radius: var(--sf-panel-radius);
+  box-shadow: var(--sf-panel-shadow);
+  overflow: hidden;
+  display: flex;
+  /* `safe center`: centre the device sizer when it fits, but fall back to
+     flex-start when a zoom makes it larger than the well, so the near edge
+     stays reachable while the well scrolls (overflow-x set inline per-zoom). */
+  justify-content: safe center;
+  align-items: safe center;
+  /* No inset: the preview frame fills the well so it flows flush with the panels
+     at exactly the --sf-panel-gap frame gap (the flex gap between panel and this
+     well). Any padding here would ADD to that gap. In tablet/mobile the fixed-width
+     device frame still centres, showing the well's tint down its sides. */
+  padding: 0;
+}
+
+/* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
+.sf-frame {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  background: var(--sf-frame-bg);
+  /* SQUARE (owner, 2026-10-07: "the website should not have round corners").
+     The desktop frame fills the well edge to edge and meets the toolbar and the
+     panels directly, and those have been flat since 66161 (--sf-panel-radius:
+     0) — so a 10px radius here drew one rounded notch, top-left, where the
+     page meets the chrome, and clipped that corner of the website itself. The
+     tablet and phone frames below are square for the same reason (owner, the
+     same day): their 18px radius read as a device's edge, and it clipped all
+     four corners of the page inside. They are told apart from the well by their
+     width and their outline, not by a corner. */
+  border-radius: 0;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 36px rgba(0, 0, 0, 0.1);
+  transition: width 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
+/* Sizer box for the device frame: its layout size is the frame's *painted*
+   (scaled) size, so the .sf-center well centres it when it fits and scrolls it
+   when a zoom makes it larger. The frame inside is scaled from its top-left. */
+.sf-frame-scaler {
+  flex: none;
+  position: relative;
+}
+
+/* The template editor's faux browser bar (dots · page switcher · URL ·
+   "Preview mode" toggle) is gone: pages switch from the shared left Pages
+   panel, the URL is drawn by the editor WINDOW's title bar (the admin console
+   owns that chrome; card 66159), and Preview mode was removed — the canvas
+   meets the toolbar directly in both modes. */
+.sf-preview-host {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+/* Puck.Preview fills the frame */
+.sf-preview-host > div,
+.sf-preview-host iframe {
+  width: 100% !important;
+  height: 100% !important;
+  border: 0;
+}
+
+/* …but `height: 100%` only means anything when the host's OWN height is
+   definite, and that depends on which shell mounted it.
+
+   The page editor wraps the host in `.sf-frame` — a column flex the chrome
+   sizes in pixels (`frameStyle`/`scalerStyle` in ScreenChrome) — so
+   the host's `flex: 1` above resolves against a real number and the rule works.
+
+   The SECTION editor has no device switch, so it drops the host straight into
+   the `.sf-center` well (SectionScreenShell). That well is a ROW flex with
+   `align-items: safe center`: the host is centred on the cross axis instead of
+   stretched, so its height stays `auto`. `height: 100%` then has no definite
+   containing block, the iframe falls back to its intrinsic 150px, and a
+   `100vh`/`h-screen` section inside the frame measures the viewport as 150px —
+   which is how a full-bleed Hero came out as a thin band floating mid-canvas.
+
+   Stretching the host restores a definite height, so the frame's viewport IS
+   the canvas. Scoped to the direct child so the page editor, whose host is a
+   child of `.sf-frame`, is untouched. */
+.sf-center > .sf-preview-host {
+  align-self: stretch;
+}
+
+/* ── 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. */
+.sf-preview-gaps {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 6;
+}
+
+/* ── 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. */
+/* The full-width band only POSITIONS the affordance over a seam — it is itself
+   click-through (pointer-events:none) so it never steals canvas clicks / Puck
+   selection near a section boundary. Only the centred pill is interactive. */
+.sf-preview-gap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 24px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  pointer-events: 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. */
+.sf-preview-gap-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  background: var(--sf-accent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+
+/* ── 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. */
+/* The only clickable element: a compact "+" chip that is hidden at rest and
+   fades in on hover, expanding to the full "Add section" pill. Keeping it
+   invisible until hovered means the canvas carries no persistent affordance,
+   while the dead zone stays no larger than this small chip (opacity:0 still
+   hit-tests, so the seam remains hoverable). */
+.sf-preview-gap-pill {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 4px;
+  border-radius: 999px;
+  background: var(--sf-toast-bg);
+  color: #fff;
+  font-family: var(--sf-font);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
+  opacity: 0;
+  cursor: pointer;
+  pointer-events: auto;
+  transition: opacity 0.12s, padding 0.12s;
+}
+
+/* ── 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. */
+.sf-preview-gap-pill:hover {
+  opacity: 1;
+  padding: 4px 12px 4px 4px;
+}
+
+/* ── 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. */
+.sf-preview-gap-plus {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--sf-accent);
+  color: #fff;
+  font-size: 13px;
+  line-height: 1;
+  flex: 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. */
+/* Label collapsed until hover so the resting chip is just the "+". */
+.sf-preview-gap-label {
+  max-width: 0;
+  margin-left: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-width 0.14s, margin-left 0.14s, opacity 0.12s;
+}
+
+/* ── 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. */
+.sf-preview-gap-pill:hover .sf-preview-gap-label {
+  max-width: 140px;
+  margin-left: 6px;
+  opacity: 1;
+}
+
+/* ── 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. */
+.sf-preview-gap:has(.sf-preview-gap-pill:hover) .sf-preview-gap-line {
+  opacity: 1;
+}
+
+.sf-msg {
+  padding: 24px;
+  font-size: 13px;
+  color: var(--sf-icon);
+}
+
+.sf-msg--error {
+  color: var(--sf-danger);
+}
+
+/* ── 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. */
+.sf-editor .es-rail {
+  --es-rail-fg: var(--sf-muted);
+  --es-rail-hover-bg: var(--sf-hover);
+  --es-rail-hover-fg: var(--sf-text);
+  --es-rail-accent: var(--sf-accent);
+  --es-rail-accent-tint: var(--sf-accent-tint);
+}
+
+/* ── 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. */
+/* THE RAIL COLUMN (owner, 2026-09-04: "the top control panel and the panel
+   below it" must read as one) — the cluster exactly the left panel's width,
+   carrying its hairline up through the bar, the buttons spread across it (his
+   option A, spread evenly), and the arrow under the open panel's icon — is editor-shell's
+   `.es-cluster--rail` (efficient-easel/chrome.css), lifted from this sheet with its
+   `flex: none` and its clip-path triangle (redesign 2a). ⚠️ `MIN_PANEL_W` 220 is
+   still load-bearing on it: six 34px buttons fill 204 exactly, and a SEVENTH
+   rail button does not fit at 220. `scripts/test-editor-rail-in-topbar.ts`
+   holds that arithmetic. */
+/* The "+" is a plain character in a rail button, the way it was a plain
+   character in the toolbar button it replaces — every other "+" affordance in
+   this editor is one (`.sf-gap-plus`, `.sf-addcard-plus`, `.sf-plus`). The rail
+   sizes SVGs and has nothing to say about text, so its one line is here. */
+.sf-rail-plus {
+  font-size: 20px;
+  line-height: 1;
+}
+
+/* ── 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 one line that says WHICH device's settings are on screen. Quiet on
+   purpose — it sits above every group, so it earns its space by being read once
+   and then ignored. Hidden entirely on desktop, the resting state.
+
+   It is a SCOPE banner, not a note (card 66121): it does not explain, it says
+   what the panel below it is showing, and it is tinted so it reads as a state.
+   Nor is it one of this file's chips — those are all small square glyph holders
+   (.sf-chip, .sf-insp-chip) or a colour swatch (.sf-readability-chip); this is
+   a full-width strip, so it keeps its own rule. */
+.sf-device-scope {
+  margin: 8px 0 2px;
+  padding: 7px 10px;
+  border-radius: 7px;
+  background: var(--sf-chip-bg);
+  font-size: 11.5px;
+  line-height: 1.35;
+  color: var(--sf-muted);
+}
+
+/* ─── 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. */
+.sf-panel .flex-shrink-0:has(.es-segs-fit) {
+  flex-basis: 100%;
+  min-width: 0;
+}
+
+/* ── 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. */
+.sf-head-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: var(--sf-line);
+  flex: none;
+}
+
+/* ── 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. */
+.es-btn-ghost.sf-head-textbtn {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12.5px;
+  border-radius: 7px;
+  white-space: nowrap;
+}
+
+/* ── 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. */
+/* A hidden side panel's strip (components/SidePanelHead `PanelShowStrip`):
+   one Show panel button where the panel was. It IS a side panel — the
+   engine's `.es-sidepanel--left|right` gives it the panels' ground and the
+   hairline on the seam side — only 40px wide, its button level with the
+   heads' buttons (the head's 12px top padding, a 28px button). */
+.es-sidepanel.sf-panel-strip {
+  width: 40px;
+  align-items: center;
+  padding-top: 12px;
+}