/* ──────────────────────────────────────────────────────────────────────────
   Studio portal — served at /studio/css/studio.css (with tokens.css before it).
   Hand-written, no framework, no build step. Compact by default.
   ────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
    margin: 0;
    background: var(--st-bg);
    color: var(--st-ink);
    font: 400 var(--st-fs)/1.45 var(--st-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--st-trim); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.st-shell { display: flex; min-height: 100vh; }

.st-rail {
    width: var(--st-rail-w); flex: 0 0 var(--st-rail-w);
    background: var(--st-rail); color: var(--st-ink-invert);
    display: flex; flex-direction: column; align-items: center;
    padding: var(--st-s2) 0; gap: var(--st-s1);
    position: sticky; top: 0; height: 100vh;
}
.st-rail__mark {
    width: 28px; height: 28px; border-radius: var(--st-radius);
    background: var(--st-primary); color: var(--st-primary-ink);
    display: grid; place-items: center;
    font-size: var(--st-fs-sm); font-weight: 700; letter-spacing: -.02em;
    margin-bottom: var(--st-s2);
}
.st-rail a {
    width: 32px; height: 32px; border-radius: var(--st-radius);
    display: grid; place-items: center;
    color: #8C97A6; font-size: 14px; text-decoration: none;
    transition: background .12s, color .12s;
}
.st-rail a:hover { background: var(--st-rail-hover); color: #fff; }
.st-rail a.is-active { background: var(--st-primary); color: var(--st-primary-ink); }
.st-rail__spacer { flex: 1; }
.st-rail__mark { background: transparent; }   /* the PrintWisp mark carries its own colour */
.st-rail a.st-rail__mark, .st-rail a.st-rail__mark.is-active { background: transparent; }   /* the home link: no wash behind the logo */
.st-rail a.is-active { background: rgba(255,255,255,.14); color: #fff; }   /* a lighter wash of the rail, not a colour */

.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* The group's screens, over the page. Not sticky: the page's own bar sticks, and two sticky bars
   would take a tenth of a laptop screen for navigation. */
.st-subnav, .st-tabs {
    display: flex; gap: var(--st-s1); align-items: stretch; height: 37px; flex: 0 0 37px;
    padding: 0 var(--st-s4); background: var(--st-surface); border-bottom: 1px solid var(--st-line);
    overflow-x: auto; scrollbar-width: none;
}
.st-subnav a, .st-tabs a {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px var(--st-s3) 8px;
    color: var(--st-ink-2); font-size: var(--st-fs-sm); font-weight: 500; white-space: nowrap;
    border-bottom: 2px solid transparent; text-decoration: none;
}
.st-subnav a:hover, .st-tabs a:hover { color: var(--st-ink); text-decoration: none; }
.st-subnav a.is-active, .st-tabs a.is-active { color: var(--st-ink); border-bottom-color: var(--st-primary); }
/* A screen's own tabs sit on the page colour, under its bar, so they read as part of the screen
   rather than as a second menu. */
.st-tabs { background: var(--st-bg); }
.st-section[hidden] { display: none; }
.st-btn[hidden] { display: none; }   /* a button's own display would otherwise beat `hidden` */
.tpl--unfit { opacity: .55; }
/* The editor's columns scroll inside a fixed height; every strip above it comes off that height,
   or the page scrolls AND the columns scroll. */
.st-main:has(> .st-subnav), .st-main:has(> .st-frame > .st-subnav) { --st-above-1: 37px; }
.st-main:has(.st-tabs)     { --st-above-2: 37px; }
.st-subnav svg { flex: 0 0 auto; }

.st-bar {
    height: var(--st-bar-h); flex: 0 0 var(--st-bar-h);
    background: var(--st-surface); border-bottom: 1px solid var(--st-line);
    display: flex; align-items: center; gap: var(--st-s3);
    padding: 0 var(--st-s4);
    position: sticky; top: 0; z-index: 20;
}
.st-bar h1 { margin: 0; font-size: var(--st-fs-lg); font-weight: 600; letter-spacing: -.01em; }
/* The product name is the one thing here that is somebody else's words, so it is the one thing
   that can be any length. It used to wrap to three lines and shove every control out of the bar;
   now it takes what it can and ellipsises, and the controls keep their places. */
.st-bar h1 {
    flex: 0 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-bar__crumb { white-space: nowrap; }
/*
 * Undo and redo moved to the board's own bar, so the header is only the design and the product.
 * It still has more in it than fits a laptop; it scrolls sideways rather than reflowing, because
 * a control that moves to a new line is a control somebody has to hunt for.
 *
 * ── BUT IT MUST NOT CLIP WHAT HANGS OUT OF IT ────────────────────────────────────────────────
 *
 * The owner: "dropdown is hidden". `overflow-y: hidden` is not optional once `overflow-x` is
 * set -- the pair is what makes an axis scrollable -- and it cut the head off every menu that
 * drops out of this bar, which is where "edit this category" lives. The popup was painted and
 * then clipped, so nothing in the markup or in admin.css could show it: this rule is in the
 * OTHER stylesheet, and the one being read did not mention .st-bar's overflow at all.
 *
 * `clip` only on the EDITOR's bar, which is the crowded one this was written for. Everywhere
 * else the bar reflows within its media query -- crumbs hide, the title ellipsises -- and a
 * menu can hang below it. Measured at 390px by tests/stock-browser.mjs, which fails if the page
 * gains a sideways scroll.
 */
.st-bar { overflow: visible; }
.st-bar--clip { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.st-bar__crumb { color: var(--st-ink-3); font-size: var(--st-fs-sm); }
.st-bar__spacer { flex: 1; }
.st-bar__user { color: var(--st-ink-2); font-size: var(--st-fs-sm); }

.st-body { padding: var(--st-s5); flex: 1; }
.st-body--flush { padding: 0; }

/* ── Type helpers ────────────────────────────────────────────────────────── */
.st-h2 { font-size: var(--st-fs); font-weight: 600; margin: 0 0 var(--st-s2); }
.st-muted { color: var(--st-ink-2); }
.st-dim   { color: var(--st-ink-3); }
.st-sm    { font-size: var(--st-fs-sm); }
.st-xs    { font-size: var(--st-fs-xs); }
.st-mono  { font-family: var(--st-mono); font-size: var(--st-fs-sm); }
.st-num   { font-variant-numeric: tabular-nums; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.st-card {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
}
.st-card__head {
    height: 40px; display: flex; align-items: center; gap: var(--st-s2);
    padding: 0 var(--st-s4); border-bottom: 1px solid var(--st-line);
    font-weight: 600;
}
.st-card__body { padding: var(--st-s4); }

/* ── Buttons — 28px, hairline, no shadow ─────────────────────────────────── */
.st-btn {
    height: var(--st-control); padding: 0 var(--st-s3);
    display: inline-flex; align-items: center; gap: var(--st-s2);
    border: 1px solid var(--st-line-2); border-radius: var(--st-radius);
    background: var(--st-surface); color: var(--st-ink);
    font: 500 var(--st-fs-sm)/1 var(--st-font); cursor: pointer;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.st-btn:hover { background: var(--st-surface-2); border-color: var(--st-ink-3); text-decoration: none; }
.st-btn:focus-visible { outline: none; box-shadow: var(--st-focus); }
.st-btn--primary { background: var(--st-primary); border-color: var(--st-primary); color: var(--st-primary-ink); font-weight: 600; }
.st-btn--primary:hover { background: var(--st-primary-hover); border-color: var(--st-primary-hover); color: var(--st-primary-ink); }
/* A ticked box in the brand colour, as the shop's own forms have it. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--st-primary); }
.st-btn--ghost { border-color: transparent; background: transparent; color: var(--st-ink-2); }
.st-btn--ghost:hover { background: var(--st-surface-2); color: var(--st-ink); }
.st-btn--danger { color: var(--st-bleed); border-color: var(--st-line-2); }
.st-btn--danger:hover { background: var(--st-bleed-soft); border-color: var(--st-bleed); }
.st-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.st-field { display: block; margin-bottom: var(--st-s3); }
.st-label {
    display: block; font-size: var(--st-fs-xs); font-weight: 600;
    color: var(--st-ink-2); margin-bottom: var(--st-s1);
    text-transform: uppercase; letter-spacing: .04em;
}
.st-input, .st-select, .st-textarea {
    width: 100%; height: var(--st-control);
    padding: 0 var(--st-s2);
    border: 1px solid var(--st-line-2); border-radius: var(--st-radius);
    background: var(--st-surface); color: var(--st-ink);
    font: 400 var(--st-fs)/1 var(--st-font);
}
.st-textarea { height: auto; min-height: 56px; padding: var(--st-s2); line-height: 1.45; resize: vertical; }
.st-input:focus, .st-select:focus, .st-textarea:focus {
    outline: none; border-color: var(--st-trim); box-shadow: var(--st-focus);
}
.st-input--num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 26px; }
.st-unit { position: relative; }
.st-unit::after {
    content: attr(data-unit); position: absolute; right: var(--st-s2); top: 0;
    line-height: var(--st-control); font-size: var(--st-fs-xs); color: var(--st-ink-3);
    pointer-events: none;
}
.st-hint { font-size: var(--st-fs-xs); color: var(--st-ink-3); margin-top: var(--st-s1); }
.st-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-s3); }
.st-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--st-s3); }

/* ── Notices ─────────────────────────────────────────────────────────────── */
.st-note {
    border: 1px solid var(--st-line); border-left: 3px solid var(--st-ink-3);
    border-radius: var(--st-radius); padding: var(--st-s2) var(--st-s3);
    font-size: var(--st-fs-sm); margin-bottom: var(--st-s4); background: var(--st-surface);
}
.st-note--error { border-left-color: var(--st-bleed); background: var(--st-bleed-soft); color: #7A1A0F; }
.st-note--ok    { border-left-color: var(--st-face);  background: var(--st-face-soft);  color: #0F5C2E; }
.st-note--warn  { border-left-color: var(--st-warn);  background: var(--st-warn-soft);  color: #7A5210; }

/* ── Table — 32px rows, hairlines ────────────────────────────────────────── */
.st-table { width: 100%; border-collapse: collapse; font-size: var(--st-fs-sm); }
.st-table th {
    text-align: left; font-size: var(--st-fs-xs); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--st-ink-3);
    padding: 0 var(--st-s3); height: var(--st-row);
    border-bottom: 1px solid var(--st-line); white-space: nowrap;
}
.st-table td {
    padding: 0 var(--st-s3); height: var(--st-row);
    border-bottom: 1px solid var(--st-line); vertical-align: middle;
}
.st-table tbody tr:hover td { background: var(--st-surface-2); }
.st-table td.st-r, .st-table th.st-r { text-align: right; font-variant-numeric: tabular-nums; }
.st-table__empty { text-align: center; color: var(--st-ink-3); padding: var(--st-s8) 0; }

.st-tag {
    display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
    border-radius: 3px; font-size: var(--st-fs-xs); font-weight: 600;
    background: var(--st-surface-2); color: var(--st-ink-2); border: 1px solid var(--st-line);
}
.st-tag--v { background: var(--st-primary-soft); color: var(--st-primary-strong); border-color: #EFD98F; }

/* ── Profile editor: accordion | artboard | inspector ────────────────────── */
/* The editor fills the viewport and each column scrolls inside itself. Without a fixed
   height the tallest column sets the height of the grid, so a long sidebar scrolls the
   whole page and takes the artboard off screen with it. */
.st-editor {
    display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px;
    /* --st-bar-real is what the bar MEASURED, set by the editor: on a phone the bar wraps, so its
       height depends on how many choices the product offers and no constant can stand for it. */
    height: calc(100vh - var(--st-bar-real, var(--st-bar-h)) - var(--st-above-1, 0px) - var(--st-above-2, 0px));
    min-height: 420px;
}
.st-editor__left, .st-editor__right {
    background: var(--st-surface); border-right: 1px solid var(--st-line);
    padding: var(--st-s4);
    overflow-y: auto; min-height: 0;
    overscroll-behavior: contain;
}
.st-editor__right { border-right: none; border-left: 1px solid var(--st-line); }
/* The sheet's head belongs to the phone layout; on a desk this column is simply always there. */
.ed-sheet-head { display: none; }
/* The board column: a bar that never moves, and the stage under it that does. */
.st-editor__board {
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: var(--st-bg);
}
.ed-topbar {
    flex: 0 0 auto;
    /* wraps rather than widening the column: a toolbar must never decide how wide the board is */
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0;
    padding: 6px var(--st-s3);
    background: var(--st-surface); border-bottom: 1px solid var(--st-line);
}
.ed-topbar__gap { flex: 1; }
/* Icon tools: square, borderless, grey until pointed at -- the bar reads as one quiet strip, and
   the design keeps the attention. A small + marks the ones that ADD something to the board. */
.ed-topbar .ed-tool {
    width: 30px; height: 30px; padding: 0; justify-content: center; position: relative;
    border-color: transparent; background: transparent; color: #6A7380; font-size: 15px;
}
.ed-topbar .ed-tool:hover:not(:disabled) { background: var(--st-surface-2); border-color: var(--st-line); color: var(--st-ink); }
.ed-topbar .ed-tool:disabled { color: #C5CBD3; cursor: default; }
.ed-topbar .ed-tool--text { width: auto; padding: 0 6px; font-size: var(--st-fs-xs); font-weight: 600; }
.ed-tool__plus {
    position: absolute; top: 2px; right: 1px; font-size: 8px; line-height: 1;
    background: var(--st-surface); border-radius: 50%; padding: 1px;
}
.ed-topbar .ed-tool:hover .ed-tool__plus { background: var(--st-surface-2); }
/* The text tool: an A in a filled square, the same weight as the picture and shapes glyphs. */
.ed-glyph-a {
    display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 3px;
    background: currentColor; font: 800 11px/1 var(--st-font);
}
.ed-glyph-a b { color: var(--st-surface); font-weight: 800; }
.ed-topbar__sep {
    width: 1px; align-self: stretch; margin: 2px 4px; background: var(--st-line);
}
.ed-stage {
    flex: 1 1 auto;
    /* min-width AND min-height, both explicitly.
     *
     * The stage used to be a direct grid child, where minmax(0, 1fr) did this for it. As a FLEX
     * child its automatic minimum size is its CONTENT -- and its content is a canvas that can be
     * several thousand pixels wide. The board column stopped shrinking, the right-hand inspector
     * was pushed off the side of the window, and the board rendered as one blank expanse. */
    min-width: 0;
    background: var(--st-bg);
    display: grid; place-items: center; padding: var(--st-s6);
    /* auto, not hidden: past fit-to-window the board is larger than the stage, and a board you
       cannot scroll to the corner of is a board you cannot check the corner of. place-items keeps
       it centred while it still fits, which is the common case. */
    min-height: 0; overflow: auto;
    position: relative;
}

/* The view zoom sits on the stage rather than in the bar: it is about looking, not about the
   design, and it needs to be near the thing it magnifies. */
/* In the bar now, not stuck to the bottom of the scrolling stage. It used to slide about while
   you worked, which is what the owner meant by "should be fixed to the top of the designer and
   not move along/change positions with the zoom in/out". */
.ed-view {
    display: flex; align-items: center; gap: 2px;
    background: var(--st-panel); border: 1px solid var(--st-line);
    border-radius: var(--st-radius); padding: 2px;
    box-shadow: 0 1px 3px rgba(16,22,30,.10);
    z-index: 3;
}
.ed-view button { min-width: 26px; padding: 2px 6px; }
.ed-view .ed-tool { width: 26px; height: 26px; font-size: 13px; }
.ed-view__pct {
    min-width: 3.4em; text-align: center;
    font-size: var(--st-fs-xs); color: var(--st-ink-2);
    font-variant-numeric: tabular-nums;
}

.st-section { border-bottom: 1px solid var(--st-line); padding-bottom: var(--st-s3); margin-bottom: var(--st-s3); }
.st-section:last-child { border-bottom: none; }
.st-section__title {
    font-size: var(--st-fs-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--st-ink-3); margin-bottom: var(--st-s2);
}

/* Derived geometry read-out: the numbers the press cares about, computed live. */
.st-derived { font-size: var(--st-fs-sm); }
.st-derived__row {
    display: flex; align-items: baseline; gap: var(--st-s2);
    height: 26px; border-bottom: 1px dashed var(--st-line);
}
.st-derived__row:last-child { border-bottom: none; }
.st-derived__key { flex: 0 0 76px; color: var(--st-ink-2); font-size: var(--st-fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.st-derived__val { font-variant-numeric: tabular-nums; font-weight: 600; }
.st-derived__note { margin-left: auto; color: var(--st-ink-3); font-size: var(--st-fs-xs); }
.st-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* The live artboard. Drawn with nested divs, not canvas: it is three rectangles
   and it must be readable at any zoom without a repaint loop. */
.st-art { position: relative; }
.st-art__page {
    position: relative; background: var(--st-surface);
    border: 1px solid var(--st-line-2);
    box-shadow: 0 1px 2px rgba(20, 26, 34, .06);
}
.st-art__bleed { position: absolute; border: 1px dashed var(--st-bleed); }
.st-art__trim  { position: absolute; border: 1px solid var(--st-trim); }
.st-art__face  { position: absolute; border: 1px dashed var(--st-face); }
.st-art__fill  { position: absolute; inset: 0; }
.st-art__cap {
    position: absolute; left: 0; right: 0; bottom: -20px; text-align: center;
    font-size: var(--st-fs-xs); color: var(--st-ink-3); font-variant-numeric: tabular-nums;
}
.st-legend { display: flex; gap: var(--st-s4); justify-content: center; margin-top: var(--st-s6); font-size: var(--st-fs-xs); color: var(--st-ink-2); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Version history strip */
.st-versions { display: flex; flex-direction: column; gap: 2px; }
.st-version {
    display: flex; align-items: center; gap: var(--st-s2);
    height: 26px; padding: 0 var(--st-s2); border-radius: var(--st-radius);
    font-size: var(--st-fs-xs); color: var(--st-ink-2);
}
.st-version:hover { background: var(--st-surface-2); text-decoration: none; }
.st-version.is-current { background: var(--st-primary-soft); color: var(--st-primary-strong); font-weight: 600; }

/* ── Sign in ─────────────────────────────────────────────────────────────── */
.st-signin { min-height: 100vh; display: grid; place-items: center; background: var(--st-bg); }
.st-signin__card { width: 320px; }
.st-signin__mark {
    width: 32px; height: 32px; border-radius: var(--st-radius); background: var(--st-primary);
    color: var(--st-primary-ink); display: grid; place-items: center; font-weight: 700; margin: 0 auto var(--st-s3);
}

@media (max-width: 1100px) {
    /* Stacked, the columns cannot each own a scrollbar, so the page takes it back. */
    .st-editor { grid-template-columns: 1fr; height: auto; }
    .st-editor__left, .st-editor__right {
        border: none; border-bottom: 1px solid var(--st-line);
        overflow-y: visible;
    }
    /* The stage must be told a height here. Stacked, its height comes from the canvas inside it,
       and fit() sizes that canvas from the stage -- circular, so the 200px floor won it every
       time and the artboard never grew on a phone. */
    .st-editor__stage { height: 62vh; padding: var(--st-s3); }
}

/* ── Designer preview ─────────────────────────────────────────────────────
   The product as a customer sees it, with the admin geometry beside it. Customer
   view strips the page, the bleed and the guides, because a shopper has no idea
   those exist and should not be shown them in a demo.
   ───────────────────────────────────────────────────────────────────────── */
.dz-editor { grid-template-columns: 300px minmax(0, 1fr) 300px; }

.dz-stage { position: relative; overflow: hidden; }
.dz-stage.is-drop { outline: 2px dashed var(--st-trim); outline-offset: -8px; background: var(--st-trim-soft); }

#dz-canvas {
    display: block;
    box-shadow: 0 1px 3px rgba(20, 26, 34, .12);
    cursor: grab;
    touch-action: none;
}
#dz-canvas.is-dragging { cursor: grabbing; }

.dz-drop {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    padding: var(--st-s2) var(--st-s4);
    border: 1px dashed var(--st-line-2); border-radius: var(--st-radius);
    background: rgba(255, 255, 255, .92); color: var(--st-ink-3);
    font-size: var(--st-fs-sm); pointer-events: none;
}

.dz-legend { position: absolute; left: 0; right: 0; bottom: var(--st-s3); margin: 0; }
/*
 * ...except in the designer, where it is a line of its own under the board.
 *
 * Absolute is right on the geometry preview, whose picture is a fixed size with room beneath it.
 * In the designer the stage IS the artwork and fills its column, so anything pinned to the stage's
 * bottom is pinned on top of somebody's photograph. It is now a sibling of the stage rather than
 * a child of it, and this puts it back in the flow.
 */
/* The designer's key (v2 slice 4): a dashed red line for the safe line, a tinted chip for the edge the trim may take.
   The chip is the board's tint over white, so it is the colour it names. Wraps to two lines on a phone. */
.dz-key { display: inline-block; flex: 0 0 auto; }
.dz-key--safe { width: 18px; height: 0; border-top: 1px dashed rgba(229,72,77,.85); }
.dz-key--tint { width: 16px; height: 10px; border-radius: 2px; background: linear-gradient(var(--st-safe-tint), var(--st-safe-tint)), #fff; box-shadow: inset 0 0 0 1px rgba(46,58,110,.18); }
.st-editor__board > .dz-legend { flex-wrap: wrap; row-gap: 2px; column-gap: var(--st-s4); }
.st-editor__board > .dz-legend {
    position: static; margin: 2px 0 6px; flex: 0 0 auto;
}

.dz-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--st-fs-sm); color: var(--st-ink-2);
    padding: 0 var(--st-s2); height: var(--st-control);
    border: 1px solid transparent; border-radius: var(--st-radius);
    cursor: pointer; user-select: none; white-space: nowrap;
}
.dz-toggle:hover { background: var(--st-surface-2); }
.dz-toggle input { margin: 0; }

/* The resolution badge is the argument-ender, so it is the loudest thing on the panel. */
.dz-dpi-row { display: flex; align-items: center; gap: var(--st-s3); margin-bottom: var(--st-s2); }
.dz-dpi {
    display: inline-grid; place-items: center;
    min-width: 76px; height: 34px; padding: 0 var(--st-s2);
    border-radius: var(--st-radius); border: 1px solid var(--st-line-2);
    background: var(--st-surface-2); color: var(--st-ink-3);
    font-size: var(--st-fs-lg); font-weight: 700; font-variant-numeric: tabular-nums;
}
.dz-dpi.is-ok    { background: var(--st-face-soft);  border-color: #B4E2C6; color: #0F5C2E; }
.dz-dpi.is-warn  { background: var(--st-warn-soft);  border-color: #EFD9A8; color: #7A5210; }
.dz-dpi.is-block { background: var(--st-bleed-soft); border-color: #F0BDB6; color: #7A1A0F; }

/* In customer view the geometry panels are still there, just out of the way: the point of the
   toggle is to show a prospect their own product, not to hide the controls from ourselves. */
body.dz-customer-view .dz-legend { opacity: 0; }
body.dz-customer-view .dz-stage { background: var(--st-surface-2); }

@media (max-width: 1100px) {
    .dz-editor { grid-template-columns: 1fr; }
}

/* ── Editor ───────────────────────────────────────────────────────────────
   Picture boxes, text boxes and shapes on a free artboard. The chrome stays out
   of the way: the artboard is the only thing with any visual weight.
   ───────────────────────────────────────────────────────────────────────── */
.ed-editor { grid-template-columns: 260px minmax(0, 1fr) 288px; }

.ed-stage {
    position: relative;
    /* NO overflow here. This older rule said `hidden`, and being later it beat the stage's own
       `overflow: auto` above -- so once zoomed in, the board could not be scrolled at all: the wheel
       did nothing, and only the zoom buttons moved it (by setting the scroll in code). */
    overscroll-behavior: contain;   /* reaching the end never scrolls the page -- or the shop's page -- behind */
}
/* The DESIGN is the drop target, not the grey around it: outlined only while a picture is over it. */
.ed-stage.is-drop .canvas-container { outline: 3px dashed #2563EB; outline-offset: 3px; }   /* the board's fixed selection blue (G16) */
/* The spread sits on the board with the approved prototype's gentle drop shadow (designer-v2 .spread.is-stage). */
.ed-stage .canvas-container { box-shadow: 0 22px 44px -22px rgba(16, 22, 30, .55), 0 2px 5px rgba(16, 22, 30, .14); }

/* ── the board: the page, and the thing it is printed onto ───────────────────
 *
 * The page keeps its own canvas, exactly its own size. The photograph of the product sits behind
 * it in this box, which is the two of them together -- so the stage centres and scrolls the whole
 * product, while every measurement the editor makes is still of the page alone.
 */
.ed-board { position: relative; flex: 0 0 auto; }
/* A COVER ON A PHONE: its labels in a row above and a row below the board, never on the design
   (owner, 9 Oct 2026). The margins are the rows' room; fitZoom takes the same 56px off the fit. */
.ed-board.is-cvlab { margin: 24px 0 32px; }
.ed-cvlab { position: absolute; left: 0; right: 0; pointer-events: none; }
.ed-cvlab--top { bottom: 100%; height: 24px; }
.ed-cvlab--bot { top: 100%; height: 32px; }
.ed-cvlab__t {
    position: absolute; white-space: nowrap;
    font: 600 11px/18px system-ui, -apple-system, sans-serif; padding: 0 8px; border-radius: 3px;
}
.ed-cvlab--top .ed-cvlab__t { bottom: 3px; color: rgba(20, 28, 40, .8); background: rgba(255, 255, 255, .9); border: 1px solid rgba(20, 28, 40, .12); }
.ed-cvlab__bar { position: absolute; top: 0; height: 4px; background: #F59E0B; }
.ed-cvlab--bot .ed-cvlab__t { top: 7px; }
.ed-cvlab__t.is-sel { background: #F59E0B; color: #1B1206; }
.ed-cvlab__t.is-spine { background: rgba(20, 28, 40, .82); color: #fff; }
.ed-mockup {
    position: absolute; left: 0; top: 0; pointer-events: none;
    user-select: none; -webkit-user-drag: none;
    border-radius: var(--st-radius);
}
/* A picture in FRONT of the design -- a frame, a mount, a case with a hole in it. Over the canvas
   rather than drawn into it, so the moulding outside the page is not clipped away, and never in
   the way of a pointer: the artwork under it stays reachable. */
.ed-front {
    position: absolute; pointer-events: none;
    user-select: none; -webkit-user-drag: none;
    z-index: 2;
}
/* Nothing is printed here. Fixed in screen pixels: a chequerboard that zooms reads as artwork. */
.ed-board.is-clear {
    background-image:
        linear-gradient(45deg, #E7EBEF 25%, transparent 25%, transparent 75%, #E7EBEF 75%),
        linear-gradient(45deg, #E7EBEF 25%, transparent 25%, transparent 75%, #E7EBEF 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-color: #FFFFFF;
}

.ed-tools { display: flex; flex-wrap: wrap; gap: var(--st-s2); }
.ed-tools .st-btn { flex: 1 1 auto; justify-content: center; }

.ed-colour {
    width: 100%; height: var(--st-control); padding: 2px;
    border: 1px solid var(--st-line-2); border-radius: var(--st-radius);
    background: var(--st-surface); cursor: pointer;
}
.ed-tools .ed-colour { flex: 0 0 46px; width: 46px; }

/* Object list — the keyboard surface as well as the visual one */
.ed-layers { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.ed-layer {
    display: flex; align-items: center; gap: var(--st-s2);
    height: 28px; padding: 0 var(--st-s2);
    border-radius: var(--st-radius); cursor: pointer;
    font-size: var(--st-fs-sm); color: var(--st-ink-2);
}
.ed-layer:hover { background: var(--st-surface-2); }
.ed-layer.is-active { background: var(--st-primary-soft); color: var(--st-primary-strong); font-weight: 600; }
.ed-layer__icon { width: 14px; text-align: center; opacity: .7; }
.ed-layer__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bigger. These are the lock and the delete for a row, and Delete has just left the Arrange
   group because this X is where somebody already is when they decide to remove something -- so
   it needs to be worth aiming at, on a mouse and on a finger. */
.ed-layer__btn {
    border: none; background: none; cursor: pointer;
    width: 24px; height: 24px; padding: 0; border-radius: var(--st-radius);
    display: grid; place-items: center;
    color: var(--st-ink-3); font-size: 15px; line-height: 1;
}
.ed-layer__btn:hover { background: var(--st-surface-2); }
.ed-layer__btn:hover { color: var(--st-ink); }

#ed-status { font-variant-numeric: tabular-nums; }
/* A save that has not got through yet (18 Oct 2026): amber while it retries, red when the server refused it. */
#ed-status.is-retry { color: #8A5A00; }
#ed-status.is-bad { color: #9A2A21; }
/* ...and on the Save button, which every bar shows at every width (the status line is squeezed or hidden). */
.ed-savewarn { position: relative; overflow: visible; }
.ed-savewarn::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #E0A100; box-shadow: 0 0 0 1.5px #fff; pointer-events: none; }
.ed-savewarn.is-refused::after { background: #D93B30; }
#ed-status.is-retry::before, #ed-status.is-bad::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E0A100; margin-right: 6px; vertical-align: 1px; }
#ed-status.is-bad::before { background: #D93B30; }
/* "Restore your unsaved changes?" -- a copy kept on this device while saves failed. */
.ed-draft {
    position: fixed; left: 50%; top: calc(var(--st-bar-h, 52px) + 12px); transform: translateX(-50%); z-index: 70;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
    max-width: calc(100vw - 32px); box-sizing: border-box; padding: 8px 10px 8px 14px;
    background: #FFF8E6; color: #5C3D00; border: 1px solid #F0D48A; border-radius: var(--st-radius, 6px);
    box-shadow: 0 4px 16px rgba(20, 26, 34, .18); font-size: var(--st-fs-sm, 13px);
}
.ed-draft__t { font-weight: 500; }
.ed-draft__b { display: inline-flex; gap: 6px; }
@media (max-width: 520px) { .ed-draft { top: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 32px); } }   /* above the phone's tab bar */
/* The save status ("Saved automatically 14:32") is worth its room on a desk, not on a phone's one bar. */
@media (max-width: 820px) { #ed-status { display: none; } }

/* ── THE STORE'S OWN BAR (3 Oct 2026, 076) ──────────────────────────────────────────────────
   Customer skin: one sticky block, a 44px brand row (logo | Add to cart | Close in a pop-up) over
   a 36px product row (name | status, Save). The product row now always shows the name, so the old
   rule that hid it inside a shop's pop-up is gone. */
.ed-chrome { position: sticky; top: 0; z-index: 20; }
.ed-chrome > .st-bar { position: static; }
.ed-brandbar { height: 44px; flex-basis: 44px; background: var(--brand-bar-bg, #fff); color: var(--brand-bar-ink, #141A22);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-bar-ink, #141A22) 14%, var(--brand-bar-bg, #fff)); }
.ed-brand { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; color: inherit; text-decoration: none; border-radius: 4px; }
a.ed-brand:hover { color: inherit; text-decoration: none; opacity: .9; }
.ed-brand__logo { height: 28px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; flex: 0 1 auto; }
.ed-brand__name { font-weight: 650; font-size: 15px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 280px; }
.ed-brandbar :focus-visible { outline: 2px solid var(--brand-bar-ink, #141A22); outline-offset: 2px; box-shadow: none; }
.ed-brandbar .st-btn--buy { flex: 0 0 auto; }
.ed-brandbar--merge #ed-cart { box-shadow: inset 0 0 0 1px var(--brand-bar-ink); }
.ed-close { flex: 0 0 auto; width: 40px; height: 44px; border: 0; background: transparent; color: inherit; margin-right: calc(-1 * var(--st-s4));
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border-left: 1px solid color-mix(in srgb, var(--brand-bar-ink, #141A22) 18%, transparent); }
.ed-close[hidden] { display: none; }
.ed-prodbar { height: 36px; flex-basis: 36px; background: var(--st-surface); }
/* The product's name takes the whole width up to the save button: on a phone nothing else is on this
   bar, and the general 40vw cap cut "Premium Lay-flat 8x8in Square" short beside empty space (owner, 9 Oct 2026). */
.ed-prodbar .ed-title { font-size: 14px; flex: 1 1 auto; min-width: 0; max-width: none; }
.ed-prodbar .ed-savebtn, .ed-savebtn { height: 28px; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; flex: 0 0 auto; }
.ed-savebtn.is-done { color: #1e6b34; border-color: #b7dcc1; background: #eef8f1; }
@media (max-width: 820px) {
    .ed-savebtn__t { display: none; }
    .ed-savebtn { width: 40px; justify-content: center; padding: 0; }
}
@media (max-width: 479px) {
    .ed-brandbar, .ed-prodbar { padding: 0 12px; }
    .ed-close { margin-right: -12px; }
    .ed-brand__logo { height: 24px; max-width: 45vw; }
    .ed-brand__name { font-size: 14px; max-width: 45vw; }
    .ed-brand__name--beside { display: none; }
    .ed-brandbar .st-btn--buy { padding: 0 12px; }
    .ed-prodbar #ed-what { display: none; }
}

@media (max-width: 1150px) {
    .ed-editor { grid-template-columns: 1fr; }
}

/* Warnings: what would go wrong at the press, while it can still be fixed. Clicking one
   selects the object it is about, so the list is a way to navigate, not just to read. */
.ed-warn {
    display: flex; gap: var(--st-s2); align-items: flex-start;
    padding: var(--st-s2); margin-bottom: 4px;
    border-radius: var(--st-radius); border-left: 3px solid var(--st-line-2);
    font-size: var(--st-fs-xs); line-height: 1.4; cursor: pointer;
}
.ed-warn:hover { filter: brightness(.97); }
.ed-warn::before { content: "!"; font-weight: 700; width: 10px; flex: 0 0 10px; text-align: center; }
.ed-warn--block { background: var(--st-bleed-soft); border-left-color: var(--st-bleed); color: #7A1A0F; }
.ed-warn--warn  { background: var(--st-warn-soft);  border-left-color: var(--st-warn);  color: #7A5210; }
/* The customer's own word that a low-resolution picture is fine (owner, 9 Oct 2026). */
.ed-accept {
    display: flex; gap: var(--st-s2); align-items: flex-start; margin-top: var(--st-s2);
    padding: var(--st-s2); border: 1px solid var(--st-line); border-radius: var(--st-radius);
    font-size: var(--st-fs-xs); line-height: 1.4; color: var(--st-ink); cursor: pointer;
}
.ed-accept input { margin: 2px 0 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--st-accent, #1F6FEB); }
.ed-accept:has(input:checked) { background: var(--st-surface-2); }
/* ALWAYS IN SIGHT (owner, 9 Oct 2026: "the checkbox is not visible when too many warnings"): the slot is
   a child of the whole column, so it can stay pinned at the column's foot -- and at the foot of the phone
   sheet -- while the warnings above it scroll past. Opaque, with a soft edge above. */
/* Flush with the column's bottom edge: the column's own padding (--ed-col-pad) would otherwise leave a strip
   under it where the warnings scroll into view. Pulled down over that padding and painted. */
.st-editor__right { --ed-col-pad: var(--st-s4); }
.ed-accept-slot {
    position: sticky; bottom: calc(-1 * var(--ed-col-pad)); z-index: 2;
    padding-bottom: var(--ed-col-pad); margin-bottom: calc(-1 * var(--ed-col-pad));
    background: var(--st-surface, #fff);
}
.ed-accept-slot:empty { display: none; }
.ed-accept {
    background: var(--st-surface, #fff);
    box-shadow: 0 -8px 14px -6px rgba(20, 26, 34, .18);
}
.ed-accept:has(input:checked) { background: #F3F6F9; }

#ed-undo[disabled], #ed-redo[disabled] { opacity: .35; }
#ed-undo, #ed-redo { font-size: 15px; line-height: 1; padding: 0 9px; }

/* The picture library sits over the artboard rather than in a dialog: you are choosing a photo
   for a frame you can still see. */
.ed-library {
    position: absolute; left: var(--st-s4); right: var(--st-s4); bottom: var(--st-s4);
    max-height: 62%; display: flex; flex-direction: column;
    background: var(--st-surface); border: 1px solid var(--st-line-2);
    border-radius: var(--st-radius-lg); box-shadow: 0 6px 24px rgba(20, 26, 34, .18);
    z-index: 30; overflow: hidden;
}
.ed-library__bar {
    display: flex; align-items: center; gap: var(--st-s2);
    height: 36px; padding: 0 var(--st-s3);
    border-bottom: 1px solid var(--st-line); font-size: var(--st-fs-sm);
}
.ed-library__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--st-s2); padding: var(--st-s3); overflow-y: auto;
}
.ed-thumb {
    padding: 0; border: 1px solid var(--st-line); border-radius: var(--st-radius);
    background: var(--st-surface-2); cursor: pointer; overflow: hidden;
    aspect-ratio: 1 / 1; display: block;
}
.ed-thumb:hover { border-color: var(--st-trim); box-shadow: var(--st-focus); }
.ed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The object list mirrors the artboard: the selected row is the same blue as its handles (G16). */
.ed-layer.is-active {
    background: rgba(37, 99, 235, .10);
    color: var(--st-selected-2);
    box-shadow: inset 2px 0 0 #2563EB;
}

/* The product overlay's own thumbnail. Chequered, because most overlays are mostly transparent
   and a white swatch on white would look like nothing had been chosen. */
.ov-thumb {
    width: 56px; height: 56px; flex: 0 0 56px;
    border: 1px solid var(--st-line-2); border-radius: var(--st-radius);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #EDF0F3 25%, transparent 25%, transparent 75%, #EDF0F3 75%),
        linear-gradient(45deg, #EDF0F3 25%, transparent 25%, transparent 75%, #EDF0F3 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    display: grid; place-items: center;
    font-size: var(--st-fs-xs); color: var(--st-ink-3);
}
.ov-thumb[style*="url"] { background-size: contain, 12px 12px, 12px 12px; background-repeat: no-repeat; }

/* ── Catalogue ────────────────────────────────────────────────────────────
   A product row and a variant row are different kinds of object, so the variant
   deliberately breaks the column grid instead of pretending to share it. That is
   what keeps a variant table readable once a product has four of them.
   ───────────────────────────────────────────────────────────────────────── */
.st-table--products tbody + tbody { border-top: 1px solid var(--st-line); }
.st-prod__row td { height: 32px; }
.st-prod__row:hover td { background: var(--st-surface-2); }

.st-var td {
    height: 28px; padding-left: var(--st-s3);
    background: var(--st-surface-2);
    border-bottom: 1px solid var(--st-line);
    font-size: var(--st-fs-sm);
    display: flex; align-items: center; gap: var(--st-s2);
}
.st-var:hover td { background: #F3F5F8; }
.st-var__rule { width: 14px; height: 1px; background: var(--st-line-2); flex: 0 0 14px; margin-left: 4px; }
.st-var__name { font-weight: 600; color: var(--st-ink); }
.st-var__name .st-dim { font-weight: 400; margin-left: 4px; }
.st-var__geo { margin-left: auto; color: var(--st-ink-2); }
.st-var__acts { display: flex; gap: 2px; }

/* Product detail: content on the left, identity on the right. */
.st-prod-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--st-s4); align-items: start; }
/* The Attributes tab: two cards of equal weight -- identity, and selling -- not a page and a sidebar. */
.st-prod-grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1100px; }
.prd-thumb { width: 72px; height: 72px; flex-basis: 72px; }
.st-unit--wide .st-input--num { padding-right: 40px; }
.st-prod-grid .st-section:last-child { border-bottom: none; }
.st-section__title .st-bar__spacer { flex: 1; }
.st-section__title { display: flex; align-items: center; gap: var(--st-s2); }

@media (max-width: 1000px) {
    .st-prod-grid { grid-template-columns: 1fr; }
}

/* A field whose value is part fixed and part typed: the product's code, then the variant's
   suffix. Showing the fixed part rather than repeating it in a hint is what makes it obvious
   that the two belong together. */
.st-compound { display: flex; align-items: stretch; }
.st-compound__fixed {
    display: inline-flex; align-items: center;
    padding: 0 var(--st-s2); height: var(--st-control);
    border: 1px solid var(--st-line-2); border-right: none;
    border-radius: var(--st-radius) 0 0 var(--st-radius);
    background: var(--st-surface-2); color: var(--st-ink-2);
    font-size: var(--st-fs-sm); white-space: nowrap;
}
.st-compound .st-input { border-radius: 0 var(--st-radius) var(--st-radius) 0; }

/* ── Collapsible panes ────────────────────────────────────────────────────
   A folded pane is a decision somebody made and keeps; a scrollbar hides what you
   are not looking at and what you are about to need, with no way to tell which.
   ───────────────────────────────────────────────────────────────────────── */
.st-section__title.is-pane {
    cursor: pointer; user-select: none;
    margin: 0 calc(var(--st-s2) * -1); padding: 0 var(--st-s2);
    height: 26px; border-radius: var(--st-radius);
}
.st-section__title.is-pane:hover { background: var(--st-surface-2); color: var(--st-ink-2); }
.st-section__title.is-pane:focus-visible { outline: none; box-shadow: var(--st-focus); }

.st-section__chev {
    margin-left: auto; width: 8px; height: 8px; flex: 0 0 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transform-origin: 60% 60%;
    transition: transform .14s ease; opacity: .55;
}
.st-section.is-closed .st-section__chev { transform: rotate(-45deg); }

.st-section__body { padding-top: var(--st-s2); }
.st-section.is-closed > .st-section__body { display: none; }
.st-section.is-closed { padding-bottom: 0; }

/* With panes doing the work the sidebars rarely need to scroll, but a very long object
   list still can. */
.st-editor__left, .st-editor__right { scrollbar-width: thin; }

/* A save that worked should be as visible as one that did not. */
.ed-flash {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
    padding: 8px 16px; border-radius: var(--st-radius);
    background: var(--st-selected-2); color: #fff;
    font-size: var(--st-fs-sm); font-weight: 500;
    box-shadow: 0 4px 16px rgba(20, 26, 34, .24);
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .16s ease, transform .16s ease;
    max-width: 70vw; text-align: center;
}
.ed-flash.is-on { opacity: 1; transform: translate(-50%, 0); }
.ed-flash.is-bad { background: var(--st-bleed); }
/* A message with a button in it (Undo after removing a day's event): the button can be tapped while it shows. */
.ed-flash.has-act { display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 16px; text-align: left; }
.ed-flash.has-act.is-on { pointer-events: auto; }
.ed-flash__act { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
.ed-flash__act:hover { background: rgba(255,255,255,.26); }

/* A design without a picture is a row of text among rows of text. Even the table view carries
   one -- Shopify's own index pattern mandates a thumbnail per row for visual objects, and the
   merchants who lost theirs said the admin had become useless. */
.st-thumb {
    display: block; width: 44px; height: 44px;
    object-fit: contain; border-radius: var(--st-radius);
    border: 1px solid var(--st-line);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #EDF0F3 25%, transparent 25%, transparent 75%, #EDF0F3 75%),
        linear-gradient(45deg, #EDF0F3 25%, transparent 25%, transparent 75%, #EDF0F3 75%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
}

/* The orientation pair reads as one control with one of them chosen, not as two buttons that
   happen to be adjacent. */
.ed-turn { display: inline-flex; gap: 0; }
.ed-turn .st-btn { border-radius: 0; margin: 0; }
.ed-turn .st-btn:first-child { border-radius: var(--st-radius) 0 0 var(--st-radius); }
.ed-turn .st-btn:last-child  { border-radius: 0 var(--st-radius) var(--st-radius) 0; margin-left: -1px; }
.ed-turn .st-btn.is-on {
    background: var(--st-selected); border-color: var(--st-selected);
    color: var(--st-ink); font-weight: 600; position: relative; z-index: 1;
}
/*
 * ── WHAT YOU ARE BUYING, IN THE SETTINGS PANE ─────────────────────────────────
 *
 * A column, not a row. This spent a version as a bar along the foot of the board, which the owner
 * did not want; in the pane there is no horizontal room to scroll and no reason to, so each group
 * puts its name on one line and lets its chips wrap underneath. Three groups cost three blocks
 * instead of pushing the third off the right edge, which is the one thing the bar could not do.
 */

/*
 * ── THE CONTEXT BAR ─────────────────────────────────────────────────────────
 *
 * A shortcut strip under the tools, meant to change with the selection. It is deliberately quieter
 * than both of its neighbours: the toolbar above it acts on the design and the board below it IS
 * the design, so a second loud row between them would be one row too many.
 */
.ed-ctxbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: var(--st-s2);
    padding: 5px var(--st-s3);
    border-bottom: 1px solid var(--st-line); background: var(--st-surface);
    overflow-x: auto; overflow-y: visible; scrollbar-width: thin;
}
/* A fixed height, so filling it or emptying it never moves the board underneath. */
.ed-ctxbar { min-height: 38px; }
/*
 * IT STAYS ON A PHONE. It was hidden there for a while, to buy the board 38px -- and that was the
 * wrong trade: "i dont like the fact that the second bar is hidden on mobile ... i need it
 * especially on small screens", which is right, because a phone is exactly where reaching the
 * settings pane costs a tap and a covered board.
 *
 * What made it look expensive was a separate bug: showObject() measured the strip of board left
 * above an open sheet as `innerHeight - sheetHeight()`, which is only true of a sheet flush to the
 * bottom of the window, so 38px more chrome tipped it over a threshold it should never have been
 * near. That is fixed at the source now -- see sheetTop() -- and the bar costs what it costs.
 */
.ed-ctx { position: relative; flex: 0 0 auto; }
/* The selection's own shortcuts, first in the bar: they change as the selection does, so they go
   where the eye already is rather than after a list that does not move. */
.ed-ctx__tools { display: flex; align-items: center; gap: var(--st-s2); flex: 0 0 auto; }
.ed-ctx__tools:empty { display: none; }
.ed-ctx__sep { width: 1px; align-self: stretch; background: var(--st-line); flex: 0 0 auto; }
.ed-ctx__chip { height: 28px; gap: 6px; padding: 0 8px; font-weight: 400; flex: 0 0 auto; }
.ed-ctx__chip .ed-ctx__name { color: var(--st-ink-3); }
.ed-ctx__chip .ed-ctx__val  { font-weight: 600; max-width: 120px; overflow: hidden;
                              text-overflow: ellipsis; white-space: nowrap; }
.ed-ctx__dot {
    width: 16px; height: 16px; flex: 0 0 16px; border-radius: 3px; border: 1px solid var(--st-line);
    background-image: linear-gradient(45deg, #E3E7EB 25%, transparent 25%, transparent 75%, #E3E7EB 75%),
                      linear-gradient(45deg, #E3E7EB 25%, transparent 25%, transparent 75%, #E3E7EB 75%);
    background-size: 6px 6px; background-position: 0 0, 3px 3px;
    position: relative; overflow: hidden;
}
.ed-ctx__dot::after { content: ""; position: absolute; inset: 0; background: var(--sw, transparent); }

/*
 * WORD'S TWO COLOUR GLYPHS: an A over a bar for the type, a tipping bucket over a bar for what
 * sits behind it. The bar IS the current colour, which is why these beat a word -- the control
 * says what it does and what it is doing at once, in the width of an icon.
 */
.ed-ctx__cg {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; flex: 0 0 auto; line-height: 1;
}
.ed-ctx__cg--text { font-weight: 800; font-size: 12px; }
.ed-ctx__cg--fill { font-size: 11px; }
.ed-ctx__cg__bar {
    display: block; width: 14px; height: 4px; border-radius: 1px;
    border: 1px solid rgba(16, 22, 30, .18); background: transparent;
}
/* No colour at all still has to be seen, or the control reads as broken rather than empty. */
.ed-ctx__cg__bar.is-none {
    background-image: linear-gradient(45deg, #C9D1DA 25%, transparent 25%, transparent 75%, #C9D1DA 75%),
                      linear-gradient(45deg, #C9D1DA 25%, transparent 25%, transparent 75%, #C9D1DA 75%);
    background-size: 4px 4px; background-position: 0 0, 2px 2px; background-color: #fff;
}

/* Typeface and size, joined: one control with two ends, because they are two halves of one
   answer and a gap between them would say they were separate questions. */
.ed-ctx__pair { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ed-ctx__pair > .ed-ctx + .ed-ctx { margin-left: -1px; }
.ed-ctx__chip--l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ed-ctx__chip--r { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ed-ctx__chip--l[aria-expanded="true"], .ed-ctx__chip--r[aria-expanded="true"] { position: relative; z-index: 1; }

.ed-ctx__btn { height: 28px; gap: 6px; padding: 0 8px; font-weight: 400; }
.ed-ctx__name { color: var(--st-ink-3); }
.ed-ctx__val  { font-weight: 600; }
.ed-ctx__caret { font-size: 9px; color: var(--st-ink-3); }
.ed-ctx__btn[aria-expanded="true"] { border-color: var(--st-selected-2); box-shadow: inset 0 0 0 1px var(--st-selected-2); }

/*
 * THE MENU IS FIXED, NOT ABSOLUTE, AND THAT IS NOT A DETAIL.
 *
 * The bar scrolls sideways, so it carries `overflow-x: auto` -- and CSS will not give one axis
 * `auto` and the other `visible`: asking for that computes the visible one to `auto` as well. The
 * bar therefore became a clipping box in BOTH directions and the drop-down opened inside it, to be
 * reached by scrolling. The owner: "the options opens is hidden inside the element and not
 * outside .. i have to scroll".
 *
 * `position: fixed` takes it out of every scroller on the page. The cost is that it no longer
 * follows its button by itself, so the editor places it -- see the [data-ctx-open] handler, which
 * also flips it above the bar when there is no room below.
 */
.ed-ctx__menu {
    position: fixed; z-index: 60;
    min-width: 190px; max-height: 60vh; overflow-y: auto;
    padding: 4px; border: 1px solid var(--st-line); border-radius: var(--st-radius);
    background: var(--st-surface); box-shadow: 0 8px 24px rgba(16, 22, 30, .16);
}
.ed-ctx__item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 8px; border: 0; border-radius: 4px; background: transparent;
    font: inherit; color: var(--st-ink); text-align: left; cursor: pointer;
}
.ed-ctx__item:hover { background: var(--st-surface-2); }
.ed-ctx__item[aria-pressed="true"] { font-weight: 600; }
.ed-ctx__item[aria-pressed="true"]::after { content: "\2713"; margin-left: auto; }
/* The right-click / long-press menu on the board: groups, shortcuts on the right, greyed when not allowed. */
.ed-cmenu { min-width: 220px; max-height: calc(100vh - 16px); }
.ed-cmenu:focus { outline: none; }
.ed-cmenu__item { justify-content: space-between; gap: 24px; white-space: nowrap; }
.ed-cmenu__item:focus-visible { outline: 2px solid var(--st-selected-2); outline-offset: -2px; }
.ed-cmenu__item:focus { background: var(--st-surface-2); }
.ed-cmenu__item[aria-disabled="true"] { color: var(--st-ink-3); opacity: .55; cursor: default; }
.ed-cmenu__item[aria-disabled="true"]:hover { background: transparent; }
/* A choice of several (the page menu's fits): the one in force is ticked, on the right where a shortcut would be. */
.ed-cmenu__item[aria-checked="true"] { font-weight: 600; }
.ed-cmenu__item[aria-checked="true"]::after { content: "\2713"; margin-left: auto; color: var(--st-primary); }
.ed-cmenu__key {
    font: inherit; font-size: var(--st-fs-xs); color: var(--st-ink-3);
    background: none; border: 0; padding: 0;
}
.ed-cmenu__sep { height: 1px; margin: 4px 2px; background: var(--st-line); }
/* A finger: every item a 44 px target, and no shortcuts -- there is no keyboard to press them on. */
@media (pointer: coarse) {
    .ed-cmenu__item { min-height: 44px; padding: 10px 12px; }
    .ed-cmenu__key { display: none; }
}
.ed-ctx__more {
    display: block; width: 100%; margin-top: 4px; padding: 6px 8px;
    border: 0; border-top: 1px solid var(--st-line); background: transparent;
    font: inherit; font-size: var(--st-fs-xs); color: var(--st-ink-3);
    text-align: left; cursor: pointer;
}
.ed-ctx__more:hover { color: var(--st-ink); }

/* The drawn alignment / order glyphs. They take currentColor, so a button's own hover, focus and
   disabled states carry straight into them with nothing extra to keep in step. */
.ed-ico { flex: 0 0 auto; display: block; }
.st-btn .ed-ico { margin-right: 0; }
.ed-align .st-btn { display: inline-flex; align-items: center; justify-content: center; }
/* .ed-align--wide is gone: its two buttons are the last two of the row of eight, and without
   their words there is nothing left to overflow. */

/*
 * ── A COLOUR IS ONE LINE UNTIL IT IS ASKED ABOUT ────────────────────────────────
 *
 * A selected text box used to show three open palettes at once -- text, background, border -- each
 * a scrolling grid, together about 270px of a panel that also has to hold size, line height and
 * letter spacing. Now each is a button wearing the colour it is set to, and the grid is behind it.
 *
 * The swatch is chequered UNDER its colour, so "no colour at all" is a visible answer rather than
 * an empty square: a transparent background and a white one are otherwise the same picture.
 */
/*
 * THE PICKER STAYS ON THE ROW. Only the PALETTE moves behind a button.
 *
 * The first cut of this put the colour picker inside the pane as well, which is not what was
 * asked and is worse: picking an arbitrary colour then cost two clicks instead of none, and the
 * row no longer showed what it was set to. The owner: "i want the colour picker separate than the
 * trigger for the colour pallete .... not hidden inside".
 *
 * So a colour is: the picker, a button that opens the palette, and -- where it means something --
 * a button that clears it. Three small controls on one line, which is still a quarter of the
 * height the open grid took.
 */
.ed-fly__kind {
    font-size: var(--st-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--st-ink-3); background: var(--st-surface-2);
    border: 1px solid var(--st-line); border-radius: 999px; padding: 1px 8px; flex: 0 0 auto;
}
.ed-crow { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.ed-crow input[type="color"] { flex: 1 1 auto; min-width: 34px; height: 28px; padding: 2px; }
.ed-cpal { flex: 0 0 auto; width: 28px; padding: 0; justify-content: center; }
.ed-cpal[aria-expanded="true"] {
    border-color: var(--st-selected-2); box-shadow: inset 0 0 0 1px var(--st-selected-2);
}

/* The pane itself. Fixed for the same reason the context menu is: the inspector scrolls, and a
   palette that opens inside a scroller has to be scrolled to. Placed by the editor. */
.ed-cpop {
    /* 66vh was most of a laptop screen and ran off the bottom of a short one. Six rows of
       swatches is enough to choose from; the rest scrolls, which it always did. */
    position: fixed; z-index: 60; width: 236px; max-height: 268px; overflow-y: auto;
    padding: var(--st-s2); border: 1px solid var(--st-line); border-radius: var(--st-radius);
    background: var(--st-surface); box-shadow: 0 8px 24px rgba(16, 22, 30, .16);
}
.ed-cpop__head {
    display: flex; align-items: center; gap: var(--st-s2); margin-bottom: var(--st-s2);
    font-size: var(--st-fs-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--st-ink-3);
}
.ed-cpop__head .ed-fly__close { margin-left: auto; }
.ed-cpop .ed-swatches { max-height: none; overflow: visible; }
/* The pane holds the palette and nothing else: it is the palette. */
/*
 * TRANSPARENT IS A TILE, not a button beside the tiles.
 *
 * Chequered like the rest of this app's "nothing here" squares, with a stroke across it so it
 * cannot be mistaken for a pale colour. It is the first tile of every palette, so it is in the
 * same place for a text colour, a background, a fill and a border rather than a different place
 * for each -- which is what "an option to all" has to mean to be worth anything.
 */
.ed-swatch--none {
    background-image:
        linear-gradient(to top right, transparent calc(50% - 1px), var(--st-ink-3) calc(50% - 1px),
                        var(--st-ink-3) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(45deg, #E3E7EB 25%, transparent 25%, transparent 75%, #E3E7EB 75%),
        linear-gradient(45deg, #E3E7EB 25%, transparent 25%, transparent 75%, #E3E7EB 75%);
    background-size: 100% 100%, 8px 8px, 8px 8px;
    background-position: 0 0, 0 0, 4px 4px;
    background-color: #fff;
}

.ed-choices { display: flex; flex-direction: column; gap: 12px; }
.ed-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* The name sits on its own line above its chips: in a 300px column it would otherwise steal half
   the width from the things it is labelling. */
.ed-choice__name { flex: 1 0 100%; }
/* The name is a FIELD LABEL in the app's own small-caps style, not the grey whisper it was in the
   bar -- where it was so quiet that the phone layout ended up deleting it to make room. */
.ed-choice__name {
    font-size: var(--st-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--st-ink-3); white-space: nowrap;
}
/* A take-it-or-leave-it choice (065) reads as a sentence with a box, not a field label. */
.ed-choice--check .ed-choice__name {
    display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: normal;
    font-size: var(--st-fs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--st-ink);
}
.ed-choice--check .ed-choice__name input { width: 16px; height: 16px; margin: 0; accent-color: var(--st-primary); }

/* A CHIP. .st-btn first, so focus, hover and disabled all come free. */
.ed-chip { height: 32px; padding: 0 10px 0 4px; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.ed-choices .ed-chip { margin: 0; }
.ed-chip--plain { padding: 0 12px; }
.ed-chip__sw {
    width: 24px; height: 24px; flex: 0 0 24px; border-radius: 3px; overflow: hidden;
    border: 1px solid var(--st-line); background: #fff;
    /*
     * A plain neutral, not the chequerboard .ov-thumb uses.
     *
     * At 96px a chequer reads as "this is transparent"; at 24px, behind a moulding that is itself
     * a thin ring, it reads as noise -- and the noise wins. On a flat ground the ring is simply
     * the frame in its own colour, which is what was wanted.
     *
     * Magnifying the mitred corner to show the MATERIAL was tried first and is worse: the border
     * is a few percent of the picture, so any crop tight enough to fill the square lands inside
     * the transparent window and the swatch goes blank. Checked on the real page, not reasoned
     * about -- three empty squares.
     */
    background: #F2F4F6;
}
.ed-chip__sw img { width: 100%; height: 100%; object-fit: contain; display: block; }


/*
 * SELECTED IS A RING, NEVER A FILL, and that is a rule about the whole screen rather than a taste.
 * `.is-on` was --st-selected #E6BC29 and Add to cart is --st-primary #E6BC28: the same yellow, one
 * hex apart, so the choices competed with the buy button for the only colour that means "press
 * this". Now exactly one filled yellow rectangle exists on a customer's screen and it is the one
 * that takes their money. A fill would also have to repaint the swatch, and you cannot tint a
 * picture of a material and still be telling the truth about it.
 */
.ed-chip[aria-pressed="true"] {
    border-color: var(--st-selected-2);
    box-shadow: inset 0 0 0 1px var(--st-selected-2);
    font-weight: 600; color: var(--st-ink);
}
.ed-chip[aria-pressed="true"]::after { content: "\2713"; font-weight: 700; margin-left: 1px; }
@media (pointer: coarse) {
    .ed-chip { height: 36px; }
    .ed-chip__sw { width: 26px; height: 26px; flex-basis: 26px; }
}
/* The buy button is the biggest thing in the bar, because it is the point of the screen. */
/* What has been chosen, beside the name: the answer, not a control. Gone on a phone, where the
   dock is a thumb's reach away and the bar has one job. */
.ed-title__what { font-size: var(--st-fs-xs); color: var(--st-ink-3); white-space: nowrap; }
@media (max-width: 479px) { .ed-title__what { display: none; } }
.st-btn--buy { height: 34px; padding: 0 var(--st-s4); font-size: var(--st-fs); font-weight: 700; }

/* ORIENTATION, now the only segmented control left, and a VIEW tool among view tools. */
.ed-topbar .ed-turn {
    background: var(--st-surface-2); border: 1px solid var(--st-line);
    border-radius: var(--st-radius); padding: 2px; gap: 2px;
}
.ed-topbar .ed-turn .st-btn { border-color: transparent; background: transparent; border-radius: 3px; margin: 0; }
.ed-topbar .ed-turn .st-btn.is-on {
    background: var(--st-surface); border-color: var(--st-line); color: var(--st-ink);
    box-shadow: 0 1px 2px rgba(16, 22, 30, .12);
}
/* The glyph is the shape itself: upright and on its side. No font to wait for, nothing to read. */
.ed-orient__svg { width: 18px; height: 18px; stroke-width: 1.5; }   /* the 90-degree ruler (18 Oct 2026) */
.ed-orient__g { display: block; border: 1.5px solid currentColor; border-radius: 1px; }
.ed-orient__g--p { width: 10px; height: 14px; }
.ed-orient__g--l { width: 14px; height: 10px; }
/* the way up on the "Your calendar" card (a calendar that may be turned): the glyph before the word */
.ed-cal__seg .ed-orient__g { display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* ── Layout picker ────────────────────────────────────────────────────────
   Shapes, not names. The face is drawn behind the boxes so a full-bleed layout reads as
   different from one that sits inside the face, which is exactly the distinction a name
   like "1-full-bleed" fails to make to anybody who did not write it. */
/* TWO COLUMNS, AND NOTHING POKES OUT SIDEWAYS.
 *
 * Three columns in a 268px panel gave each card about 78px, and `1fr` is min-content by default --
 * so a card whose name would not fit pushed the whole grid wider than the panel and the page
 * scrolled horizontally. The owner: "My page layout still oveflow horizontally ... make sure only
 * vertically, and if you can fit them in a 2xX grid will be better".
 *
 * minmax(0, 1fr) is the fix for the overflow: it lets a column be narrower than its content, and
 * the name inside already ellipsises. Two columns then gives each shape enough room to be read as
 * a shape, which is the whole reason a layout is drawn rather than named. */
.ed-layouts {
    display: block;
    max-height: 340px; overflow-y: auto; overflow-x: hidden; padding-right: 2px;
    min-width: 0;
}
/* THE LIBRARY (11 Oct 2026): the tiles sit in .ed-lgrid now, under the chips and the Suggested heading. */
.ed-lgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-s2); min-width: 0; }
.ed-lchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--st-s2); }
.ed-lchip { min-width: 30px; height: 26px; padding: 0 8px; border: 1px solid var(--st-line); border-radius: 13px;
    background: var(--st-panel); font: inherit; font-size: 12px; color: var(--st-ink-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.ed-lchip:hover { border-color: var(--st-ink-3); }
.ed-lchip.is-on { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
.ed-lchip:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.ed-lhead { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--st-ink-2); margin: var(--st-s2) 0 6px; }
.ed-lhead:first-child { margin-top: 0; }
.ed-layout { position: relative; }
.ed-layout--cap { display: grid; gap: 3px; align-content: start; }
.ed-layout__cap { display: block; font-size: 11px; line-height: 1.2; color: var(--st-ink-2, #344054); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-layout__n { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--st-surface-2); border: 1px solid var(--st-line); font-size: 10px; line-height: 14px; color: var(--st-ink-2); font-variant-numeric: tabular-nums; }
.ed-layout--spread { grid-column: span 2; }
.ed-layout--spread svg { height: 66px; }
.ed-layout__fold { stroke: var(--st-ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ed-layout__rect { fill: #fff; stroke: var(--st-ink-3); stroke-width: 1; }
.ed-layout.is-other { opacity: .55; }
.ed-lother { margin-top: var(--st-s2); }
.ed-lother > summary { font-size: 12px; color: var(--st-ink-2); cursor: pointer; margin-bottom: 6px; }
.ed-layout { min-width: 0; }
.ed-layout {
    display: block; width: 100%; padding: 4px 4px 2px; cursor: pointer;
    background: var(--st-panel); border: 1px solid var(--st-line);
    border-radius: var(--st-radius); text-align: center;
}
.ed-layout:hover:not(:disabled) { border-color: var(--st-selected); }
.ed-layout:disabled { opacity: .38; cursor: not-allowed; }
.ed-layout svg { display: block; width: 100%; height: 66px; }
.ed-layout__face { fill: none; stroke: var(--st-line); stroke-width: 2; }
.ed-layout__box  { fill: rgba(27,40,56,.16); stroke: var(--st-ink-3); stroke-width: 1.5; }
.ed-layout__text { fill: rgba(27,40,56,.40); stroke: none; }
.ed-layout__name {
    display: block; font-size: 10px; line-height: 1.25; color: var(--st-ink-3);
    margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── The photo pool ───────────────────────────────────────────────────────
   Always visible, because filling six frames through a modal that closes after each pick is
   six round trips. The count badge exists for one failure: the same photograph printed twice
   because two frames looked alike on screen, noticed when the parcel is opened. */
/* The portal's rail is icons here: its labels are hidden by admin.css, which the designer does not
   load (its editor has its own layout). Without this they printed over the designer's own rail. */
body[data-editor="1"] .st-rail__label { display: none; }
/* ...and its icons are drawn lines, not shapes: the rule lives in admin.css, which the designer does not load, so here
   they filled solid black (owner, 11 Oct 2026: "what happened to my icons?"). */
.st-rail svg.st-ric { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* BACKGROUND TABS (11 Oct 2026): Colours | Images, one row, the chosen one underlined. */
.ed-bgtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--st-line); margin: 0 0 var(--st-s2); }
.ed-bgtab { flex: 1 1 0; height: 34px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--st-ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ed-bgtab.is-on { color: var(--st-primary); border-bottom-color: var(--st-primary); }
.ed-bgtab:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.ed-bgpane[hidden] { display: none; }
/* The shop's background pictures: a grid of tiles, the one in use ringed. */
.ed-bglib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: var(--st-s2); }
/* THEMES, 2-UP AND LARGER ON A WIDE SCREEN, NO CAPTIONS (designer v2 slice 6): the picture is the choice, its name
   is the tooltip. A phone keeps three across so a whole row fits above the fold. */
@media (min-width: 821px) { .ed-bglib { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.ed-bglib__item.is-on::after { content: ''; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--st-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
    box-shadow: 0 0 0 2px #fff; }
.ed-bglib:empty { display: none; }
.ed-bglib__item { position: relative; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--st-line); border-radius: 8px;
    background: var(--st-surface-2) center / cover no-repeat; cursor: pointer; overflow: hidden; }
.ed-bglib__item:hover { border-color: var(--st-ink-2); }
.ed-bglib__item.is-on { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.ed-bglib__item:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
/* LOADING (owner, 13 Oct 2026: the old pulse "flashed" and was not obvious). The tile stays still under a half veil
   with one clear spinner in the middle -- a white arc on a dark track with a soft shadow, so it reads on a pale tile
   and a dark one alike -- until the picture is on the page. Reduced motion: the same ring, standing still. */
.ed-bglib__item.is-loading, .ed-stk__item.is-loading { outline: 2px solid var(--st-primary); outline-offset: 1px; cursor: progress; }
.ed-bglib__item.is-loading::before, .ed-stk__item.is-loading::before { content: ''; position: absolute; inset: 0; background: rgba(17, 20, 24, .5); }
.ed-bglib__item.is-loading::after,
.ed-bglib__item.is-loading.is-on::after, .ed-stk__item.is-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; right: auto; width: 28px; height: 28px; margin: -14px 0 0 -14px;
    box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .28); border-top-color: #fff; border-right-color: #fff;
    background: rgba(0, 0, 0, .18); box-shadow: 0 1px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .15);
    animation: ed-bgspin .8s linear infinite;
}
@keyframes ed-bgspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ed-bglib__item.is-loading::after, .ed-bglib__item.is-loading.is-on::after, .ed-stk__item.is-loading::after { animation: none; border-color: #fff; border-bottom-color: rgba(255, 255, 255, .28); }
}
/* It did not arrive: a small retry mark in the corner. Pressing the tile tries again. */
.ed-bglib__item.is-failed::after { content: ''; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
    background: #B42318 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.5 7.5A5 5 0 1 0 15 11' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M15 4v3.8h-3.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35); }
.ed-bglib__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 10px; line-height: 1.3; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ed-bglib__head { grid-column: 1 / -1; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--st-ink-2); margin-top: 6px; }
.ed-bglib__head:first-child { margin-top: 0; }

/* The background picture in use: which one, a way to take it off, and how it sits. */
.ed-bgimg { display: flex; gap: var(--st-s2); align-items: stretch; margin: var(--st-s2) 0; }
.ed-bgimg[hidden] { display: none; }
/* The picture, with its own way off it in the corner -- no label needed to say what it is. */
.ed-bgimg__pic { position: relative; flex: 0 0 auto; }
.ed-bgimg__thumb { width: 76px; height: 76px; object-fit: cover; border-radius: var(--st-radius); border: 1px solid var(--st-line); display: block; }
.ed-bgimg__x {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; cursor: pointer;
    border: 1px solid var(--st-line); border-radius: 50%; background: var(--st-surface); color: var(--st-ink-2);
    font: 14px/18px var(--st-font); box-shadow: 0 1px 3px rgba(20, 26, 34, .2);
}
.ed-bgimg__x:hover { background: var(--st-bleed-soft, #FDECEA); color: #7A1A0F; }
/* The controls fill the picture's height beside it: three rows, no labels. */
.ed-bgimg__body { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 4px; min-width: 0; flex: 1 1 auto; align-content: stretch; }
.ed-bgimg__body > * { align-self: center; }
.ed-bgimg input[type="range"] { width: 100%; }
/* Frozen, not gone: the controls hold their place while the picture fits inside the page. */
.ed-bgimg.is-frozen input[type="range"] { opacity: .45; }
.ed-bgimg input:disabled, .ed-bgimg button:disabled { cursor: not-allowed; }
.ed-bgimg .st-select { height: 26px; padding: 0 6px; }

/* The loading screen, over everything until the design and its fonts are in. The spinner above the words, both
   centred, the spinner larger (owner, 16 Oct 2026). */
.ed-loading {
    position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; text-align: center; padding: 0 16px;
    background: var(--st-surface); color: var(--st-ink-2); font-size: var(--st-fs-sm);
}
.ed-loading[hidden] { display: none; }
.ed-loading__spin {
    width: 48px; height: 48px; box-sizing: border-box; border-radius: 50%; border: 4px solid var(--st-line); border-top-color: var(--st-primary);
    animation: ed-spin .8s linear infinite;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ed-loading__spin { animation: none; } }
/* A turn on its way (owner, 16 Oct 2026): a light veil over the board that takes every touch, a spinner in its middle. */
.ed-turnveil {
    position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .55); cursor: progress; touch-action: none;
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.ed-turnveil[hidden] { display: none; }
.ed-turnveil__spin {
    width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 4px solid rgba(17, 20, 24, .15);
    border-top-color: var(--st-primary); animation: ed-spin .8s linear infinite; box-shadow: 0 0 0 6px rgba(255, 255, 255, .6);
}
@media (prefers-reduced-motion: reduce) { .ed-turnveil__spin { animation: none; } }

/* My pictures' upload area: first in the panel, a clear place to drop or click. */
.ed-dropzone {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    margin: 0 0 var(--st-s2); padding: 14px 10px; cursor: pointer; text-align: left;
    border: 2px dashed var(--st-line); border-radius: var(--st-radius); background: var(--st-surface);
    color: var(--st-ink-2); font: inherit; font-size: var(--st-fs-sm); line-height: 1.35;
}
.ed-dropzone i { font-size: 22px; color: var(--st-ink-3); }
.ed-dropzone:hover, .ed-dropzone.is-over { border-color: var(--st-primary); background: var(--st-surface-2); color: var(--st-ink); }
.ed-dropzone:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }
/* MY PICTURES' ROWS ARE AS TALL AS THEIR SQUARES (audit #18, 22 Oct 2026). With "auto" rows a grid squeezed into the
   panel's height sized each row from the tiles' minimum (0: they clip their picture), so 200 photos overlapped as thin
   strips. max-content rows take each square's full height and the panel scrolls instead. */
.ed-pool {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: max-content; gap: 4px;
    max-height: 210px; overflow-y: auto; padding-right: 2px;
}
/* "Nothing uploaded yet" is a sentence, not a thumbnail: across the grid, not squeezed into one cell. */
.ed-pool > .st-hint { grid-column: 1 / -1; margin: 0; }
.ed-pool__item {
    position: relative; padding: 0; cursor: grab; aspect-ratio: 1;
    background: var(--st-bg); border: 1px solid var(--st-line);
    border-radius: var(--st-radius); overflow: hidden;
}
.ed-pool__item:active { cursor: grabbing; }
.ed-pool__item:hover  { border-color: var(--st-selected); }
.ed-pool__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-pool__item.is-used { border-color: var(--st-selected); }
.ed-pool__count {
    position: absolute; right: 2px; bottom: 2px; min-width: 15px; height: 15px;
    display: grid; place-items: center; padding: 0 3px;
    background: var(--st-selected); color: var(--st-ink);
    border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1;
}

/* PHOTOS ON THEIR WAY (owner, 15 Oct 2026): the photo's own local preview, dimmed, a ring and the percentage over it;
   a red retry mark and the reason once it failed. Locked -- no grab cursor, no drag. The finished tile keeps the local
   preview under its 480 px thumbnail until that has arrived, so it never blinks. */
.ed-pool__pv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-pool__item > img { position: relative; }
.ed-pool__up { cursor: default; display: block; outline-offset: -2px; }
.ed-pool__up:hover { border-color: var(--st-line); }
.ed-pool__up:focus-visible { outline: 2px solid var(--st-selected); }
.ed-pool__up .ed-pool__pv { opacity: .45; filter: saturate(.6); }
.ed-pool__up.is-failed .ed-pool__pv { opacity: .3; filter: grayscale(1); }
.ed-up__ring {
    position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    display: grid; place-items: center; pointer-events: none;
}
.ed-up__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ed-up__ring circle { fill: none; stroke-width: 3.2; }
.ed-up__track { stroke: rgba(255,255,255,.85); fill: rgba(15,23,51,.42) !important; }
.ed-up__bar { stroke: var(--st-selected); stroke-dasharray: 100 100; stroke-dashoffset: 100; stroke-linecap: round;
    transition: stroke-dashoffset .25s linear; }
.ed-up__pct { position: relative; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* Waiting its turn, or sent and being stored: the ring turns instead of filling. */
/* A photo WAITING its turn holds still (owner, 25 Oct 2026): sixty turning rings repainted every frame was a phone's
   whole attention while sixty photos uploaded. Only the few actually on their way move. */
.ed-pool__up.is-queued .ed-up__bar { stroke-dashoffset: 78; stroke: rgba(255,255,255,.9); transition: none; }
.ed-pool__up.is-finishing .ed-up__bar { stroke-dashoffset: 70 !important; animation: ed-spin .9s linear infinite; transform-origin: 18px 18px; transition: none; }
.ed-pool__up.is-failed .ed-up__ring { display: none; }
.ed-up__why {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 3px; text-align: center;
    background: rgba(229,72,77,.92); color: #fff; font-size: 9.5px; font-weight: 600; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-up__why:empty { display: none; }
/* A photo this browser cannot preview (an iPhone HEIC outside Safari, 25 Oct 2026): a plain tile under the ring, a quiet
   picture glyph once it could not be added, and -- once sent, while the server turns it into a JPEG -- a neutral
   "Processing…" strip, not a red one. */
.ed-pool__up.is-nopv { background: var(--st-bg); }
.ed-pool__up.is-nopv.is-failed { background: var(--st-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.7'/%3E%3Cpath d='M3.5 17.5l5-5 4 4 2.5-2.5 5.5 5'/%3E%3C/svg%3E") center 32% / 34% no-repeat; }
.ed-up__why.is-note { background: rgba(15,23,51,.72); font-weight: 500; }
.ed-up__retry {
    position: absolute; left: 50%; top: 42%; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--st-safe); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ed-up__retry[hidden] { display: none; }
.ed-up__retry svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed-up__retry:focus-visible, .ed-up__x:focus-visible { outline: 2px solid var(--st-selected); outline-offset: 1px; }
.ed-up__x {
    position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(15,23,51,.62); color: #fff; font-size: 14px; line-height: 1;
}
.ed-up__x:hover { background: rgba(15,23,51,.85); }
/* For a screen reader only: "Uploaded 4 of 10". */
.ed-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A picture box drawn from its preview while the original arrives (addImageBox): a small spinner in its middle. */
.ed-standspin {
    position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none;
    border-radius: 50%; border: 2.5px solid rgba(255,255,255,.75); border-top-color: var(--st-primary);
    box-shadow: 0 0 0 1px rgba(15,23,51,.18), 0 1px 3px rgba(0,0,0,.25);
    animation: ed-spin .8s linear infinite;
}
/* A sticker on its way (19 Oct 2026): the Backgrounds tile's spinner -- a white arc on a dark disc -- so it reads on
   a busy, colourful sticker as well as on a plain page. */
.ed-standspin.ed-standspin--stk {
    width: 28px; height: 28px; margin: -14px 0 0 -14px; box-sizing: border-box;
    border: 3px solid rgba(255, 255, 255, .28); border-top-color: #fff; border-right-color: #fff;
    background: rgba(17, 20, 24, .45); box-shadow: 0 1px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .15);
}
/* A background on its way (19 Oct 2026): the same spinner on a darker disc, so its white arc reads on a pale or white
   page as well as on a dark one. In the middle of the sheet, or of the page whose own picture it is. */
.ed-standspin.ed-standspin--bg { background: rgba(17, 20, 24, .62); }
@media (prefers-reduced-motion: reduce) {
    .ed-standspin, .ed-pool__up.is-finishing .ed-up__bar { animation: none; }
}
/* A picture box whose photo is on its way and nothing of it is here yet (25 Oct 2026): its outline, a soft shimmer
   across it and a small spinner in its middle -- so a page still loading never looks finished and empty. Over the
   board, never on it: not in an export, gone the moment the box has a picture. */
.ed-picwait {
    position: absolute; z-index: 2; box-sizing: border-box; pointer-events: none; overflow: hidden;
    transform-origin: 0 0; border: 1px solid rgba(15, 23, 51, .22); background: rgba(15, 23, 51, .07);
}
.ed-picwait::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%);
    transform: translateX(-100%); animation: ed-picwait 1.5s ease-in-out infinite;
}
.ed-picwait::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(15, 23, 51, .16); border-top-color: var(--st-primary);
    animation: ed-spin .8s linear infinite;
}
@keyframes ed-picwait { to { transform: translateX(100%); } }
/* "Loading photos…" at the top of the board while any box on it is still waiting for its picture. */
.ed-picload {
    position: absolute; left: 50%; top: 8px; z-index: 6; transform: translateX(-50%); pointer-events: none;
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .95); color: #1d2433; font-size: 12px; font-weight: 500; line-height: 1.2;
    white-space: nowrap; box-shadow: 0 1px 4px rgba(15, 23, 51, .22);
}
.ed-picload[hidden] { display: none; }
.ed-picload__spin {
    width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%;
    border: 2px solid rgba(15, 23, 51, .16); border-top-color: var(--st-primary); animation: ed-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ed-picwait::before, .ed-picwait::after, .ed-picload__spin { animation: none; }
}

/* ── The background palette ───────────────────────────────────────────────
   The colours this shop sells, in the groups somebody put them in. The colour picker stays
   underneath for an author who wants an arbitrary one, but these come first because they are
   the answer almost every time. */
.ed-palette { margin-bottom: var(--st-s2); max-height: 190px; overflow-y: auto; }
.ed-palette__group {
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--st-ink-3); margin: 6px 0 3px;
}
.ed-palette__row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.ed-swatch {
    aspect-ratio: 1; padding: 0; border-radius: 3px; cursor: pointer;
    border: 1px solid rgba(27,40,56,.22);
}
.ed-swatch:hover { transform: scale(1.18); }
.ed-swatch.is-on {
    outline: 2px solid var(--st-selected); outline-offset: 1px; border-color: var(--st-ink);
}

/* ── The layouts screen ───────────────────────────────────────────────────
   A grid of shapes. The first version of this screen gave every layout a card with four
   forms in it, which was fine for the six that shipped and several thousand pixels tall the
   moment a real catalogue arrived with a hundred. The forms are still there, shut. */
.tpl-grid {
    display: grid; gap: var(--st-s3);
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tpl {
    background: var(--st-panel); border: 1px solid var(--st-line);
    border-radius: var(--st-radius); padding: var(--st-s2);
}
.tpl__shape { background: var(--st-bg); border-radius: var(--st-radius); padding: 6px; }
.tpl__shape svg { display: block; width: 100%; height: 92px; }
.tpl__basis { fill: #fff; stroke: var(--st-line); stroke-width: 1.2; }
.tpl__box   { fill: rgba(27,40,56,.16); stroke: var(--st-ink-3); stroke-width: 1; }
.tpl__box--text { fill: rgba(27,40,56,.34); stroke: none; }
.tpl__name {
    font-weight: 600; font-size: var(--st-fs-sm); margin-top: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpl__meta { font-size: var(--st-fs-xs); color: var(--st-ink-3); }
.tpl__more { margin-top: 6px; }
.tpl__more summary { cursor: pointer; color: var(--st-ink-3); }
.tpl__form { display: flex; gap: 4px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.tpl__form .st-input, .tpl__form .st-select { flex: 1; min-width: 6em; }
.tpl__edges { margin-top: 6px; }
.tpl__edges td, .tpl__edges th { padding: 2px 3px; }

/* Six buttons in a row, one press each. */
/* Six alignment buttons in one row of a 300px panel are 45px each, which renders as six empty
   boxes with an arrow lost in the middle. Two rows of three: each button is wide enough to read,
   and the two rows group side-to-side above top-to-bottom, which is how anybody thinks of them. */
.ed-align { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ed-align .st-btn { padding: 5px 0; min-width: 0; font-size: 14px; }
/* All EIGHT on one line: lining edges up and spacing things evenly are one idea -- put these
   where they belong relative to each other -- and a second row of two wide buttons read as a
   different tool for the same act. */
.ed-align { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ed-align--text { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ed-align--style { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* Icon buttons: the glyph fills the button rather than sitting in a corner of it. */
.ed-icons .st-btn { padding: 4px 0; }
.ed-icons svg { width: 16px; height: 12px; fill: currentColor; display: block; }
.ed-align .st-btn.is-on { background: var(--st-primary-soft); border-color: var(--st-primary); color: var(--st-primary-strong); }

/* Alignment and style on one line: five buttons, with a rule between the three that answer
   "where do the words sit" and the two that answer "how are they set". No labels -- ragged lines
   and B/I have meant this for thirty years, and a label above them repeats the picture in a panel
   that is short of height. */
/* The same gap as the two-column field grids beside it (--st-s3), so the type controls sit on
   the panel's rhythm instead of being visibly tighter than everything around them. */
.ed-typerow { display: flex; align-items: stretch; gap: var(--st-s3); margin-bottom: var(--st-s2); }
.ed-typerow .st-btn { flex: 1 1 0; min-width: 0; display: grid; place-items: center; padding: 5px 0; }
.ed-typerow .st-btn.is-on { background: var(--st-primary-soft); border-color: var(--st-primary); color: var(--st-primary-strong); }
.ed-typerow__sep { width: 1px; margin: 2px 0; background: var(--st-line); flex: 0 0 auto; }

/* What the customer may do: a row of chips that are on or off. Not checkboxes -- there can be
   nine of them and nine checkboxes is a form; nine chips is a state you can read at a glance. */
.ed-perms { margin-top: var(--st-s2); }
.ed-perms__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-perms__chips button {
    border: 1px solid var(--st-line); background: var(--st-surface-2);
    color: var(--st-ink-3); cursor: pointer;
    font-size: var(--st-fs-xs); line-height: 1;
    padding: 5px 8px; border-radius: 999px;
}
.ed-perms__chips button.is-on {
    background: var(--st-primary-soft); border-color: var(--st-primary); color: var(--st-primary-strong); font-weight: 600;
}
.ed-perms__chips button:hover { border-color: var(--st-ink-3); }

/* "What this thing is" and "where this thing is" are two groups with a rule between them. */
#ed-image-props, #ed-text-props, #ed-shape-props { margin-bottom: var(--st-s2); }
.ed-objprops { margin-top: var(--st-s2); }

/* A label with a reading at the far end of it: "Opacity ............ 100%". */
.ed-label--split { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
/* The arrows are the whole content of these buttons, so they sit in the middle of them. */
.ed-align .st-btn { display: grid; place-items: center; }
/* The text-alignment trio is its own thing and must not inherit the two-column rule that the
   distribute row uses -- nth-of-type counts siblings, and these live in a different parent. */
.ed-align--text { grid-template-columns: repeat(3, 1fr) !important; margin-top: 2px; }
.ed-align--text .st-btn.is-on { background: var(--st-primary-soft); border-color: var(--st-primary); color: var(--st-primary-strong); }

/* ── First run ────────────────────────────────────────────────────────────
   An empty artboard is not an invitation, it is a blank. Over the stage rather than in it,
   so the product is still visible behind: what you are decorating is part of the answer. */
.ed-start {
    position: absolute; inset: 0; z-index: 4;
    display: grid; place-items: center;
    background: rgba(246,247,249,.78); backdrop-filter: blur(1px);
}
.ed-start[hidden] { display: none; }
.ed-start__card {
    max-width: 320px; text-align: center; padding: var(--st-s4);
    background: var(--st-panel); border: 1px solid var(--st-line);
    border-radius: var(--st-radius); box-shadow: 0 2px 10px rgba(16,22,30,.10);
}
.ed-start__lead { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.ed-start__card .st-btn { width: 100%; margin-top: 6px; }

/* The wrap, seen at an angle. Over the artboard, same size, so turning it on and off does not
   move anything. */
.ed-3d {
    position: absolute; z-index: 3; cursor: grab; margin: 0; left: 0; top: 0;   /* inside the board's own container */
    background: var(--st-bg);
}
.ed-3d:active { cursor: grabbing; }
.ed-3d[hidden] { display: none; }

/* A picture of the thing, not a word for it: "Picture, Picture, Picture, Picture" was what this
   list said on a four-up layout. */
.ed-layer__thumb {
    width: 22px; height: 22px; flex: 0 0 22px;
    object-fit: cover; border-radius: 2px;
    border: 1px solid var(--st-line); background: var(--st-bg);
}
.ed-layer__thumb--fill { display: block; }
.ed-layer[draggable="true"] { cursor: grab; }
.ed-layer.is-dragging { opacity: .45; }
.ed-layer.is-over { box-shadow: inset 0 2px 0 var(--st-selected); }

/* Where you left off. Pictures, because that is what somebody recognises their own work by. */
.ov-recent {
    display: grid; gap: var(--st-s3); padding: var(--st-s3);
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.ov-recent__item { display: block; color: inherit; text-decoration: none; }
.ov-recent__item img {
    display: block; width: 100%; height: 96px; object-fit: contain;
    background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-radius);
}
.ov-recent__item:hover img { border-color: var(--st-selected); }
.ov-recent__name {
    display: block; font-size: var(--st-fs-sm); font-weight: 600; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-recent__meta {
    display: block; font-size: var(--st-fs-xs); color: var(--st-ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ── the tool rail and its flyout ─────────────────────────────────────────────
 *
 * The left column used to be a 280px stack of six sections, four of which had their own
 * max-height and their own scrollbar: My pictures 340px, Page Layouts 210px, Background 190px,
 * Objects 260px. The column scrolled, and inside it four boxes scrolled. Scroll within scroll
 * within scroll, and nothing ever showing enough of itself to be useful.
 *
 * Now: a 44px rail of icons, and ONE panel beside it holding whichever tool is open, full height.
 * The panel body is the only thing that scrolls, so a wheel gesture always means one thing. It
 * pushes the artboard rather than covering it -- a panel that hides the thing you are editing is
 * a panel you have to close in order to use.
 */
.ed-editor--rail {
    grid-template-columns: var(--ed-rail-w, 84px) var(--ed-fly, 0px) minmax(0, 1fr) 300px;
}
.ed-rail {
    background: var(--st-surface); border-right: 1px solid var(--st-line);
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: var(--st-s2) 0; min-height: 0;
}
/* DESIGNER V2, slice 1: a word under every icon (owner, 13 Oct 2026). The rail holds "Backgrounds"
   at 11px (84px); the icons are drawn strokes in the ink colour, so the store's brand still owns the
   highlight and nothing here needs Font Awesome. */
.ed-rail button {
    position: relative; width: calc(100% - 10px); min-height: 58px; border: 0; border-radius: 10px;
    background: transparent; color: var(--st-ink-2, var(--st-ink-3));
    font: inherit; font-size: 11px; font-weight: 600; line-height: 1.1; letter-spacing: .01em; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 2px 7px;
}
.ed-rail__ic {
    width: 24px; height: 24px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ed-rail__t { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Photos (n): how many photographs are in this project, on the icon like an unread count. */
.ed-rail__n {
    position: absolute; top: 4px; left: calc(50% + 6px);
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--st-ink, #1C2128); color: #fff; border: 2px solid var(--st-surface, #fff);
    font-style: normal; font-size: 10px; font-weight: 700; line-height: 13px; text-align: center;
}
.ed-rail__n[hidden] { display: none; }
.ed-rail button:hover { background: var(--st-surface-2); color: var(--st-ink); }
.ed-rail button.is-on { background: var(--st-primary-soft); color: var(--st-primary-strong); }
/* The bar beside the open one, as the portal's own rail marks where you are. */
.ed-rail button.is-on::before {
    content: ''; position: absolute; left: -5px; top: 12px; bottom: 12px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--st-primary-strong);
}
.ed-rail__sep { width: 44px; height: 1px; background: var(--st-line); margin: 6px 0; flex: none; }
/* Options (Objects for the author) is on the rail only while something is selected (owner, 13 Oct
   2026): hidden, not greyed, and it fades in when it arrives rather than popping. */
.ed-rail [hidden] { display: none !important; }
.ed-rail [data-fly="objects"] { animation: ed-rail-in .18s ease-out; }
@keyframes ed-rail-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ed-rail [data-fly="objects"] { animation: none; } }
.ed-rail__gap { flex: 1; }
/* Only where the inspector is a sheet. On a wide screen it is a column that is always there, and
   a button to "open" something already open is a button that does nothing. */
/* `.ed-rail button` is (0,1,1) and would out-rank a bare `.ed-rail__mobile` at (0,1,0), so the
   tab showed on a desktop too -- a button to open a panel that is already a column. Scoped to
   (0,2,0) so it actually wins. */
.ed-rail .ed-rail__mobile { display: none; }
@media (max-width: 820px) { .ed-rail .ed-rail__mobile { display: flex; } }

.ed-fly {
    background: var(--st-surface); border-right: 1px solid var(--st-line);
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
/* COLLAPSED, NOT REMOVED.
 *
 * The flyout is a grid COLUMN. display:none takes it out of the grid entirely, and the three
 * remaining items then slide one column to the left: the board landed in the 0px column with a
 * width of zero and the inspector sat in the 1fr middle of the screen. The owner's words: "When
 * left pane has no selection, right pane renders in the middle".
 *
 * So it keeps its place and collapses to nothing. visibility:hidden also takes its contents out
 * of the tab order, which display:none did for free and a plain width:0 would not. */
.ed-fly.is-closed {
    visibility: hidden; border-right: 0; overflow: hidden;
}
.ed-fly__head {
    display: flex; align-items: center; gap: var(--st-s2);
    padding: var(--st-s3) var(--st-s3) var(--st-s2);
    border-bottom: 1px solid var(--st-line); flex: 0 0 auto;
}
.ed-fly__head h2 {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--st-ink-3);
    /* Not flex:1 any more -- see .ed-fly__id, which takes the spare width for the whole group so
       the pencil stays next to the name instead of being pushed to the far end of the bar. */
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The permissions heading carries its own switch and its own (i). */
.ed-perms__head { display: flex; align-items: center; gap: var(--st-s2); }
.ed-perms__head > span { flex: 0 1 auto; min-width: 0; }
.ed-asif-apply {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--st-fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--st-ink-2); white-space: nowrap;
}
.ed-perms__i { flex: 0 0 auto; padding: 0 2px; }
.ed-perms__tip { margin: 2px 0 6px; }
.ed-fly__id { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Typed in place, at the size of the heading it replaces, so the line does not jump when it
   appears. Focus out saves -- there is no other way out of it that could lose the words. */
.ed-fly__edit {
    flex: 1 1 auto; min-width: 0; height: 24px; padding: 0 6px;
    font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
    color: var(--st-ink); background: var(--st-surface);
    border: 1px solid var(--st-selected-2); border-radius: var(--st-radius);
}
.ed-fly__close, .ed-fly__info {
    border: 0; background: transparent; cursor: pointer; font-size: 17px; line-height: 1;
    color: var(--st-ink-3); padding: 2px 6px; border-radius: var(--st-radius);
}
.ed-fly__close:hover, .ed-fly__info:hover { background: var(--st-surface-2); color: var(--st-ink); }
.ed-fly__info { font-size: 13px; }
.ed-fly__info.is-on { color: var(--st-primary); }
.ed-fly__info[hidden] { display: none; }
/* The tip sits above the scroller, so opening it never moves what you were reading. */
.ed-fly__tip {
    flex: 0 0 auto; margin: 0; padding: var(--st-s2) var(--st-s3);
    background: var(--st-surface-2); border-bottom: 1px solid var(--st-line);
}
/* THE ONE SCROLLER. Nothing inside it may grow its own. */
.ed-fly__body {
    flex: 1 1 auto; min-height: 0;
    /* Vertically only. A tool panel that scrolls sideways hides half of itself off an edge
       nobody thinks to look at. */
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    padding: var(--st-s3);
}
.ed-fly__panel[hidden] { display: none; }
/*
 * THE PICTURES PANEL IS A COLUMN, NOT A LIST THAT RUNS OFF THE BOTTOM.
 *
 * Upload at the top, the two buttons pinned at the bottom, and the pictures scrolling between
 * them -- with a dozen photographs uploaded the buttons were somewhere below the fold, which is
 * a poor place for "Fill all picture boxes".
 *
 * `:not([hidden])` matters: this selector out-ranks the hidden rule above and would show every
 * panel at once without it.
 */
.ed-fly__panel[data-panel="pictures"]:not([hidden]) {
    display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0;
}
.ed-fly .ed-fly__panel[data-panel="pictures"] > .ed-pool {
    flex: 1 1 auto; min-height: 72px; overflow-y: auto; overflow-x: hidden; align-content: start;
}
/* STICKERS (designer round 4a; prototypes dz-stickers / dz-sticker-sel): a search and the Filter on one row, then each
   set's heading with See all, tiles 3 across on a desktop and 4 on a phone, the sticker drawn on a soft grey square. */
.ed-stk-tools { display: flex; gap: 8px; align-items: center; margin: 0 0 var(--st-s2); }
.ed-stk-tools[hidden] { display: none; }
.ed-stk-search { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; }
.ed-stk-search svg { position: absolute; left: 10px; width: 16px; height: 16px; fill: none; stroke: var(--st-ink-3); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.ed-stk-search input { width: 100%; min-width: 0; height: 36px; padding: 0 10px 0 32px; border: 1px solid var(--st-line); border-radius: 8px;
    background: var(--st-surface, #fff); color: var(--st-ink); font: inherit; font-size: 14px; box-sizing: border-box; }
.ed-stk-search input:focus { outline: 2px solid var(--st-primary); outline-offset: -1px; border-color: var(--st-primary); }
#ed-stk-filter { flex: 0 0 auto; display: inline-flex; }
#ed-stk-filter:empty { display: none; }
.ed-stk__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 10px 0 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--st-ink-2); }
.ed-stk__head:first-child { margin-top: 0; }
.ed-stk__all { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--st-ink); cursor: pointer; }
.ed-stk__all:hover { text-decoration: underline; }
.ed-stk__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ed-stk__item { position: relative; aspect-ratio: 1 / 1; min-height: 0; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: 8px;
    background: #F1F2F4; cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ed-stk__item img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; display: block; pointer-events: none; }
.ed-stk__item:hover { border-color: var(--st-ink-2); background: #ECEDF0; }
.ed-stk__item:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.ed-stk__item:active { cursor: grabbing; }
/* A sticker on its way (19 Oct 2026): the Backgrounds tile's veil and spinner above the tile picture. */
.ed-stk__item.is-loading::before, .ed-stk__item.is-loading::after { z-index: 1; }
.ed-stk-credit { margin: 12px 0 2px; font-size: 11px; color: var(--st-ink-3); }
.ed-stk-credit[hidden] { display: none; }
.ed-stk-credit a { color: inherit; text-decoration: underline; }
@media (max-width: 820px) { .ed-stk__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
.ed-stickers-empty { padding: var(--st-s5, 32px) var(--st-s3) var(--st-s4); text-align: center; color: var(--st-ink-3); }
.ed-stickers-empty .ed-rail__ic { width: 40px; height: 40px; stroke-width: 1.3; color: var(--st-ink-3); opacity: .7; }
.ed-stickers-empty p { margin: var(--st-s2) 0 0; font-size: var(--st-fs-sm, 13px); }
/* ── The floating action bar (designer v2, slice 2) ────────────────────────────────────────
   Dark on any artwork and any store colour, so it reads as the editor's own chrome, never as part
   of the design. Placed by the editor (position: fixed); the arrow points at the selection. */
.ed-fbar {
    position: fixed; z-index: 30; left: 0; top: 0;
    display: flex; align-items: center; gap: 2px; padding: 4px;
    background: #1C2128; color: #F3F5F7; border-radius: 12px;
    box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .55);
    white-space: nowrap; user-select: none; -webkit-user-select: none;
    --ed-fbar-arrow: 50%;
}
.ed-fbar[hidden] { display: none; }
.ed-fbar::before {
    content: ''; position: absolute; bottom: 100%; left: var(--ed-fbar-arrow); transform: translateX(-50%);
    border: 7px solid transparent; border-bottom-color: #1C2128;
}
.ed-fbar.is-in::before { display: none; }
.ed-fbar.is-up::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: #1C2128; }
.ed-fbar > button {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 13px; border: 0; border-radius: 9px;
    background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ed-fbar > button[hidden] { display: none; }
.ed-fbar > button:hover, .ed-fbar > button:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.ed-fbar > button.is-del { color: #FFB4B0; }
.ed-fbar > button.is-ok { background: var(--st-primary, #2F6F73); color: var(--st-on-primary, #fff); margin-left: 4px; }
.ed-fbar > button[data-fb="zoomout"] span, .ed-fbar > button[data-fb="zoomin"] span { display: none; }
.ed-fbar > button[data-fb="zoomout"], .ed-fbar > button[data-fb="zoomin"] { padding: 0 10px; }
.ed-fbar__ic {
    width: 19px; height: 19px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* C10: on a phone the same buttons DOCK in one fixed row above the page strip -- a bar floating on
   a 350px page covers the photos beside it and lands somewhere different every time. Thumb-sized
   (54px tall), the word under the icon. */
.ed-fbar.is-dock {
    left: 10px; right: 10px; padding: 5px; gap: 2px; border-radius: 14px;
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5);
}
.ed-fbar.is-dock::before { display: none; }
/* No "Picture box" label on the left (owner, 13 Oct 2026): the desktop bar has none and the phone needs
   none either -- the buttons share the row evenly. What is selected is still the bar's aria-label. */
.ed-fbar.is-dock > button {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
    height: 54px; min-height: 44px; padding: 0 4px; border-radius: 10px; font-size: 12.5px;
}
.ed-fbar.is-dock > button span { display: block !important; }
.ed-fbar.is-dock .ed-fbar__ic { width: 22px; height: 22px; }
.ed-panel-tools {
    flex: 0 0 auto; display: grid; gap: 6px;
    padding-top: var(--st-s2); border-top: 1px solid var(--st-line);
}
.ed-panel-tools .st-btn { width: 100%; }
/* The objects panel is two halves: the list, then the editor for whatever is picked in it. The
   list takes what it needs and stops; the editor follows underneath rather than being pushed off
   the bottom, which is why the list keeps a ceiling of its own here and nowhere else. */
.ed-fly .ed-layers { max-height: 34vh; overflow-y: auto; }
.ed-fly__rule { border: 0; border-top: 1px solid var(--st-line); margin: var(--st-s3) 0; }
.ed-fly__panel input[type="range"] { width: 100%; }

/* ── the selected-object panel is a column of numbers ─────────────────────────
 *
 * A label stacked above its field costs two lines to say one number, and this panel says about
 * fifteen of them. Label on the left at a fixed width, field taking the rest: one line each, and
 * the fields line up down the column so the eye can run down them.
 *
 * The owner: "Make label:input as sinlge rows .. ie width, height, Rotation, font etc".
 */
#ed-inspector-geo .st-field,
/* Label and Slug sit above the rule rather than in the column below it, but they are fields in
   the same panel and must read as the same kind of thing -- so they share the rule rather than
   getting a second one that drifts from it. */
.ed-ident .st-field {
    /* 86px fits "Letter space", which is the longest label in here. Every field shares it, so
       every input starts at the same x and the column reads as a column. */
    display: grid; grid-template-columns: 86px minmax(0, 1fr);
    align-items: center; gap: var(--st-s2);
    margin-bottom: 4px;
}
#ed-inspector-geo .st-label,
.ed-ident .st-label { margin: 0; white-space: nowrap; }
/* Clear of the list above and of the rule below, so the pair reads as its own small block. */
.ed-ident { margin-top: var(--st-s3); }
#ed-inspector-geo .st-hint { grid-column: 1 / -1; margin: 0 0 4px; }
/* A field whose control is a whole row of its own -- the alignment buttons -- keeps the label
   above it, because 86px of label beside three buttons leaves no room for the buttons.
   A RANGE is not one of those: it shrinks to whatever it is given, so Opacity sits on one line
   like everything else in the column. It was the only field here that took two. */
#ed-inspector-geo .st-field:has(.ed-align) { grid-template-columns: 1fr; }

/* label | slider | reading -- the reading on a fixed width so the slider does not jump about as
   the number goes from 5% to 100%. */
.ed-range { display: flex; align-items: center; gap: var(--st-s2); min-width: 0; }
.ed-range input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; }
.ed-range .st-dim {
    flex: 0 0 auto; width: 38px; text-align: right; font-variant-numeric: tabular-nums;
}

/* X and Y belong together and are the same size, so they share a line. */

/* A one-letter label needs almost no room, but the field beside it needs all of the rest -- and
   the unit wrapper in between has to pass that width through rather than sizing to its own
   content, which is how X and Y ended up as two "mm" labels with no boxes. */
/* X and Y are ordinary rows now, so there is no pair to special-case. One label width for
   every field in the panel is the thing that makes the inputs line up down the column. */
#ed-inspector-geo .st-unit { display: block; min-width: 0; }
#ed-inspector-geo .st-unit > input { width: 100%; min-width: 0; }

/* Inside this panel the old two-column grids become single rows too, or the label:field pairs
   inside them get squeezed to nothing. */
#ed-inspector-geo .st-grid-2 { grid-template-columns: 1fr; }

/* Inside the flyout these fill the panel instead of each cutting a window in themselves. */
.ed-fly .ed-pool,
.ed-fly .ed-layouts,
.ed-fly .ed-palette,
.ed-fly .ed-layers { max-height: none; overflow: visible; }

/* ── the designer on a phone ──────────────────────────────────────────────────
 *
 * The desktop layout is four columns. On a 390px screen that is four columns of nothing, and the
 * owner's assessment was blunt and correct: "that studio designer is 0% mobile friendly".
 *
 * The principle here is that the BOARD GETS THE SCREEN. Everything else is a sheet that comes up
 * over it when asked and goes away again. Nothing takes a permanent bite out of the width, because
 * on a phone the width is all there is.
 *
 *   ┌───────────────┐
 *   │ header        │  slim, scrolls sideways
 *   │ toolbar       │  icons only; labels are hidden, titles remain
 *   │               │
 *   │    BOARD      │  everything left over
 *   │               │
 *   │ ░ sheet ░     │  a panel, when one is open, over the board
 *   │ ▣ ▤ ▦ ◧ ☰     │  the rail, at the bottom, where a thumb is
 *   └───────────────┘
 *
 * The rail is at the BOTTOM on purpose: it is the one thing that must always be reachable, and
 * the top of a phone screen is the hardest place on it to reach. Sheets sit above the rail rather
 * than under it, so the thing that opened them never disappears.
 *
 * 100dvh, not 100vh: on iOS Safari 100vh is the height WITHOUT the address bar, so the bottom of
 * the layout -- which is where the rail is -- sits underneath it until you scroll. dvh is the
 * measurement that accounts for the browser's own furniture, with vh kept above it as the
 * fallback for anything that does not know dvh.
 */
@media (max-width: 820px) {
    .ed-editor--rail {
        display: flex; flex-direction: column;
        /* The screen LESS the bar above it (and any strip under that). This said the whole screen,
           so the page was one bar taller than the screen and scrolled -- a scrollbar with nothing
           to scroll to. */
        height: calc(100vh - var(--st-bar-real, var(--st-bar-h, 44px)) - var(--st-above-1, 0px) - var(--st-above-2, 0px));
        height: calc(100dvh - var(--st-bar-real, var(--st-bar-h, 44px)) - var(--st-above-1, 0px) - var(--st-above-2, 0px));
        grid-template-columns: none;
    }

    /* The board takes what is left, and reserves the rail's height so it is never underneath it. */
    .st-editor__board {
        order: 1; flex: 1 1 auto; min-height: 0;
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
    /* The designer is exactly one screen; nothing outside the board may scroll. */
    body[data-editor="1"] { overflow: hidden; }
    /* At the top, not centred: fitted to what is visible, the design starts right under the bar. */
    .ed-stage { padding: var(--st-s3); place-items: start center; }

    /* Icons only. The words are what make this bar three rows tall on a phone; the title
       attributes stay, so nothing loses its name, and a long-press still tells you. */
    .ed-topbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ed-topbar::-webkit-scrollbar { display: none; }
    .ed-topbar .st-btn { white-space: nowrap; }
    .ed-topbar .ed-label { display: none; }

    /* THE RAIL: fixed to the bottom, thumb-height, and above everything. */
    .ed-rail {
        order: 3;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        flex-direction: row; justify-content: space-around; align-items: center;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding: 0 var(--st-s2) env(safe-area-inset-bottom, 0px);
        border-right: 0; border-top: 1px solid var(--st-line);
        box-shadow: 0 -1px 3px rgba(20, 26, 34, .06);
    }
    /* Same words as the desktop rail (slice 1), stacked under the icon; six across a 390px phone. */
    .ed-rail button {
        flex: 1 1 0; min-width: 0; width: auto; min-height: 50px; height: 52px;
        padding: 6px 0 4px; gap: 3px; font-size: 9.5px; letter-spacing: 0; border-radius: 10px;
    }
    .ed-rail__ic { width: 23px; height: 23px; }
    .ed-rail button.is-on { background: transparent; }
    .ed-rail button.is-on::before { left: 24%; right: 24%; top: -3px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
    .ed-rail__n { top: 1px; }
    .ed-rail__gap, .ed-rail__sep { display: none; }

    /* SHEETS: the tool panel and the inspector, both over the board, both above the rail. */
    .ed-fly,
    .ed-editor--rail > .st-editor__right {
        position: fixed; left: 0; right: 0;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        z-index: 39;
        max-height: 45dvh;   /* owner, 9 Oct 2026: more of the design in view above an open sheet */
        border: 0; border-top: 1px solid var(--st-line);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 16px rgba(20, 26, 34, .14);
    }
    .ed-fly.is-closed { display: none; }     /* off-screen entirely: it is not a column here */

    /* ...and being a sheet, it gets the same head and the same way out as the rest of them. */
    .ed-sheet-head {
        display: flex; align-items: center; gap: var(--st-s2);
        margin: calc(var(--st-s3) * -1) calc(var(--st-s3) * -1) var(--st-s3);
        padding: var(--st-s2) var(--st-s3);
        border-bottom: 1px solid var(--st-line);
        position: sticky; top: 0; z-index: 1; background: var(--st-surface);
        border-radius: 12px 12px 0 0;
    }
    .ed-sheet-head h2 {
        margin: 0; font-size: var(--st-fs-xs); font-weight: 700;
        letter-spacing: .06em; text-transform: uppercase; color: var(--st-ink-3);
    }
    .ed-sheet-head .ed-fly__close { margin-left: auto; }

    /* The inspector is a sheet too, and only when there is something to inspect. It is opened
       from the rail like any other panel -- see the `inspector` tab, which exists only here. */
    .ed-editor--rail > .st-editor__right {
        display: none; overflow-y: auto; padding: var(--st-s3);
        --ed-col-pad: var(--st-s3);
    }
    .ed-editor--rail.is-inspecting > .st-editor__right { display: block; }

    /* Full width for everything inside a sheet: the desktop two-column fields are unreadable. */
    .st-editor__right .st-grid-2 { grid-template-columns: 1fr 1fr; }
    .ed-lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* A message must not cover the rail it is telling you about. The sheets already sit above
       it; so does this. */
    .ed-flash {
        bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px));
        max-width: 88vw;
    }

    /* The admin rail is 44 of 390 pixels -- eleven per cent of a phone screen, permanently, for
       navigation nobody uses while placing a photograph. Gone on the designer, and only there.
       The header still carries the way back to Designs and Products. */
    body[data-editor] .st-rail { display: none; }

    /* The header is the least important thing on a phone. One line, sideways if it must. */
    .st-bar { gap: var(--st-s2); padding: 0 var(--st-s3); }
    .st-bar h1 { font-size: var(--st-fs-md); max-width: 40vw; }
}

/* Coarse pointers get bigger targets whatever the width -- a tablet is not a phone, but a finger
   is still a finger. 44px is the figure both Apple and Google publish. */
@media (pointer: coarse) {
    .ed-rail button { min-width: 44px; min-height: 44px; }
    .ed-topbar .st-btn { min-height: 30px; }
    .ed-topbar .ed-tool { width: 30px; }
    .ed-topbar .ed-tool--text { width: auto; }
    .ed-layout { padding: 6px 6px 4px; }
}


/* ── Previewing your own permissions ──────────────────────────────────────────
 *
 * The author's mirror: the board bound to the element flags while the panels that set them stay
 * in your hand. The bar is display:none rather than [hidden] because a sibling that vanishes out
 * of a grid takes its track with it -- the inspector once rendered in the middle of the board for
 * exactly that reason.
 */
.ed-asif-bar {
    display: none;
    align-items: center;
    gap: var(--st-s2);
    padding: 6px var(--st-s3);
    font-size: 12px;
    font-weight: 600;
    color: #6A3B00;
    background: #FFF4E0;
    border-bottom: 1px solid #F0D49B;
}
.ed-editor.is-asif .ed-asif-bar { display: flex; }
.ed-asif-bar .st-btn { margin-left: auto; padding: 2px 10px; font-weight: 600; white-space: nowrap; }

/* The switch is a statement about the whole screen, so it reads as a mode rather than as one
 * more section in the run of them. */
.ed-asif { border-bottom: 1px solid var(--st-line); }
.ed-editor.is-asif .ed-asif { background: #FFF4E0; }


/* Fit to box sits in the Size row's grid cell, so it needs the same two-part shape the labelled
 * fields have -- an empty label keeps the checkbox on the baseline of the field beside it rather
 * than floating a row higher. */
.ed-fitbox__row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    font-size: 12px;
    white-space: nowrap;
}
.ed-fitbox__row input { margin: 0; }
.st-input:disabled { background: var(--st-bg-2, #F4F6F8); color: var(--st-dim, #7A8794); cursor: not-allowed; }


/* ── Saved designs, under the page layouts ────────────────────────────────────
 *
 * A list of names rather than a grid of thumbnails: a layout is a SHAPE, so a picture of it is
 * the useful thing, and a design is a piece of work whose name is what its author will recognise.
 * Giving them the same treatment would suggest they do the same thing.
 */
.ed-saved { margin-top: var(--st-s3); }
.ed-saved__head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--st-ink-3, #7A8794);
    margin-bottom: 6px;
}
.ed-saved__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    margin-bottom: 4px;
    font: inherit;
    font-size: 12px;
    text-align: left;
    background: var(--st-bg, #fff);
    border: 1px solid var(--st-line, #E3E8EE);
    border-radius: var(--st-r, 6px);
    cursor: pointer;
}
.ed-saved__item:hover { border-color: var(--st-ink-3, #7A8794); }
.ed-saved__item.is-on { border-color: var(--st-primary); cursor: default; }
.ed-saved__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-saved__now {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--st-primary-strong);
}


/* "to much gap for the Fit to box row". It was a full row of the type grid -- the grid's gap
 * above it, an empty label cell, and a 30px minimum -- so a checkbox that qualifies the Size
 * field sat as far from it as Colour does. It now hangs directly under the Size input: the
 * grid gap is taken back, the empty label goes, and the box lines up with the input's left edge
 * because it is placed in the same column. */
#ed-text-props .ed-fitbox {
    margin-top: calc(-1 * var(--st-s3) + 2px);
}
#ed-text-props .ed-fitbox > .st-label { visibility: hidden; }
#ed-text-props .ed-fitbox .ed-fitbox__row { min-height: 0; padding: 2px 0; }

/* "add some spaceing between Border and Picture buttons". The picture's own buttons -- Fill and
 * Upload on an empty frame, Replace and Clear on a filled one -- ended flush against the Border
 * row beneath them, which made Border read as a third button in the same group. */
#ed-image-props .ed-tools { margin-bottom: var(--st-s3); }


/* Permission chips on a LOCKED element: still readable, not switchable. */
.ed-perms__chips button:disabled { opacity: .5; cursor: not-allowed; }
.ed-perms__locked { flex-basis: 100%; margin: 6px 0 0; }


/* Palette swatches under each colour control. The palette can be a hundred colours, so the row
 * wraps and then scrolls rather than pushing the rest of the panel off the screen. */
.ed-swatches { display: flex; flex-wrap: wrap; gap: 3px; max-height: 98px; overflow-y: auto;
               margin: 2px 0 var(--st-s2); grid-column: 1 / -1; }
.ed-swatches .ed-swatch { width: 30px; height: 30px; }

/* ── A product's Profiles & options tab ─────────────────────────────────── */
.prd-profiles td { vertical-align: middle; }
.prd-profiles__acts { white-space: nowrap; text-align: right; }
.prd-profiles__acts .st-btn + .st-btn, .prd-profiles__acts .st-btn + a { margin-left: 4px; }
.prd-attach { margin-top: var(--st-s3); display: grid; gap: 4px; max-width: 560px; }
.prd-attach__row { display: flex; gap: var(--st-s2); }
.prd-attach__row .st-select { flex: 1 1 auto; min-width: 0; }
.opt { border: 1px solid var(--st-line); border-radius: var(--st-radius); padding: var(--st-s3); margin-bottom: var(--st-s3); background: var(--st-surface); }
.opt__head { display: flex; gap: var(--st-s2); margin-bottom: var(--st-s2); }
.opt__name { flex: 1 1 auto; font-weight: 600; max-width: 360px; }
.opt__values td { vertical-align: middle; }
.opt__values .st-input { width: 100%; min-width: 60px; }
.optv__pic { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.optv__thumb { width: 32px; height: 32px; flex: 0 0 32px; font-size: 9px; }
@media (max-width: 720px) {
    .prd-profiles tr { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: var(--st-s2) 0; }
    .prd-profiles td { border: 0; padding: 0; }
    .prd-profiles__acts { grid-column: 1 / -1; text-align: left; }
    .opt__values thead { display: none; }
    /* Two lines per choice: what it is (name, SKU part, remove), then what it costs and looks like. */
    .opt__values tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
                      grid-template-areas: "label sku del" "price pic pic"; gap: 6px; padding: var(--st-s2) 0;
                      border-bottom: 1px solid var(--st-line); }
    .opt__values td { border: 0; padding: 0; min-width: 0; }
    .opt__values td:nth-child(1) { grid-area: label; }
    .opt__values td:nth-child(2) { grid-area: sku; }
    .opt__values td:nth-child(3) { grid-area: price; }
    .opt__values td:nth-child(4) { grid-area: pic; }
    .opt__values td:nth-child(5) { grid-area: del; }
    .opt__values .st-input { min-width: 0; }
    .optv__pic .st-btn { padding: 0 6px; }
}
/* A button inside a section title is a button, not part of the title's small capitals. */
.st-section__title .st-btn { text-transform: none; letter-spacing: normal; font-size: var(--st-fs-sm); }
/* .st-btn sets display, which beats the hidden attribute: a hidden button must stay hidden. */
.st-btn[hidden] { display: none; }

/* ── THE PAGE BAR ─────────────────────────────────────────────────────────────
 *
 * A strip of sheets under the board. It scrolls sideways and NEVER vertically: a book is a long
 * row, and a page bar that grows downwards eats the board it is a bar for. (overflow-x: auto forces
 * overflow-y to compute to auto as well, so the height is fixed rather than the axis disabled.)
 */
.ed-pages {
    display: flex; align-items: center; gap: var(--st-s3);
    padding: var(--st-s2) 0; min-width: 0;
}
.ed-pages[hidden] { display: none; }
.ed-pages__strip {
    display: flex; align-items: flex-end; gap: var(--st-s2);
    overflow-x: auto; overflow-y: hidden;
    flex: 1 1 auto; min-width: 0; padding-bottom: 2px;
    scrollbar-width: thin;
}
.ed-pages__acts { display: flex; align-items: center; gap: var(--st-s1); flex: 0 0 auto; }

.ed-page {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--st-ink-2);
}
/* The sheet is a PICTURE OF THE PAPER, so a spread reads as twice as wide at a glance -- which is
   the whole reason a book's bar shows spreads rather than pages. */
.ed-page__sheet {
    position: relative; display: block; width: 30px; height: 42px;
    background: var(--st-surface); border: 1px solid var(--st-line-2);
    border-radius: 2px;
}
.ed-page--spread .ed-page__sheet { width: 60px; }
/* The fold, dashed, exactly as it is drawn on the board. */
.ed-page__fold {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
    border-left: 1px dashed var(--st-line-2);
}
.ed-page__label { font-size: var(--st-fs-xs); white-space: nowrap; }
.ed-page:hover .ed-page__sheet { border-color: var(--st-ink-2); }
.ed-page.is-active .ed-page__sheet {
    border-color: var(--st-accent); box-shadow: 0 0 0 2px var(--st-accent-soft, rgba(0,0,0,.08));
}
.ed-page.is-active .ed-page__label { color: var(--st-ink); font-weight: 600; }
.ed-page:focus-visible .ed-page__sheet { outline: 2px solid var(--st-accent); outline-offset: 2px; }

/* On a phone the strip is the whole width and the buttons wrap under it, rather than the strip
   shrinking to nothing beside four icons. */
@media (max-width: 640px) {
    .ed-pages { flex-wrap: wrap; }
    .ed-pages__strip { order: 2; flex: 1 0 100%; }
    .ed-pages__acts { order: 1; margin-left: auto; }
}

/* The sketch of the page, inside its sheet. Absolutely placed so the fold and the greying sit over
   it rather than beside it. */
.ed-page__sheet { overflow: hidden; }
.ed-page__shot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ed-page__fold { z-index: 1; }
/* A spread's fold in the strip is the board's, small (prototype .th .gut): each page its half, 9% of the page
   (4.5% of the sheet); a lay-flat book 4% of the page at half strength. Over the sketch, under nothing. */
.ed-page__gut { position: absolute; top: 0; bottom: 0; width: 4.5%; z-index: 1; pointer-events: none; }
.ed-page__gut--l { right: 50%; background: linear-gradient(90deg, rgba(36,16,24,0) 0%, rgba(36,16,24,.07) 45%, rgba(36,16,24,.22) 80%, rgba(36,16,24,.5) 100%); box-shadow: inset -1px 0 0 rgba(30,12,20,.45); }
.ed-page__gut--r { left: 50%; background: linear-gradient(270deg, rgba(36,16,24,0) 0%, rgba(36,16,24,.06) 45%, rgba(36,16,24,.2) 80%, rgba(36,16,24,.46) 100%); box-shadow: inset 1px 0 0 rgba(255,255,255,.35); }
.ed-page--layflat .ed-page__gut { width: 2%; opacity: .5; }

/* Dragging to sort. The page being carried fades; the one it would land on shows the edge it would
   land against, which is the only thing anybody needs to know mid-drag. */
.ed-page.is-dragging { opacity: .4; }
.ed-page.is-drop .ed-page__sheet { box-shadow: -3px 0 0 0 var(--st-accent); }
.ed-page { cursor: grab; }
.ed-page.is-dragging { cursor: grabbing; }

/* Set apart from add/duplicate/delete: it is the only one that clears the whole book. */
.ed-pages__new { margin-left: var(--st-s2); border-left: 1px solid var(--st-line); padding-left: var(--st-s2); }

/* A spread bound at an end of the book: it can be opened and edited, but not carried. The cursor
   says so before the drag rather than after it, which is the only useful moment. */
.ed-page.is-pinned { cursor: pointer; }
.ed-page.is-pinned .ed-page__sheet { border-style: dashed; }

/* The page-count picker sits in the actions row, so it is sized to its content rather than
   stretching like a form field. */
.ed-pages__count { width: auto; min-width: 7.5em; height: var(--st-control-sm, 28px); padding: 0 24px 0 8px; }
.ed-pages__count[hidden] { display: none; }

/* ── the endpaper choice ────────────────────────────────────────────────── */
.ed-endpaper { display: flex; align-items: center; gap: var(--st-s3); padding: var(--st-s2) 0; }
.ed-endpaper[hidden] { display: none; }
.ed-endpaper__opts { display: flex; gap: var(--st-s2); flex-wrap: wrap; min-width: 0; }
.ed-endpaper__opt {
    display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px;
    border: 1px solid var(--st-line-2); border-radius: 999px; background: var(--st-surface);
    font: inherit; font-size: var(--st-fs-xs); color: var(--st-ink-2); cursor: pointer;
}
.ed-endpaper__sw {
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid rgba(0,0,0,.18); background-size: cover; background-position: center;
}
.ed-endpaper__opt:hover { border-color: var(--st-ink-2); }
.ed-endpaper__opt.is-on { border-color: var(--st-accent); color: var(--st-ink); font-weight: 600; }
.ed-endpaper__txt { white-space: nowrap; }

/* The spine in millimetres, and the single stock shown as a fact rather than an empty box. */
.ed-choice__fixed { font-size: var(--st-fs); color: var(--st-ink); }
.ed-choice[hidden] { display: none; }
.ed-spine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 12px; }
.ed-spine[hidden] { display: none; }
.ed-spine__mm { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--st-ink); }
.ed-spine__why { flex: 1 0 100%; font-size: var(--st-fs-sm); color: var(--st-ink-3); }
.ed-spine__warn { flex: 1 0 100%; font-size: var(--st-fs-sm); color: var(--st-warn); }
.ed-spine__warn[hidden] { display: none; }

/* Details: the shop's questions, one field each. */
.ed-fields { display: flex; flex-direction: column; gap: 10px; }
.ed-field { display: flex; flex-direction: column; gap: 4px; }
.ed-field--check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.ed-field--check .ed-choice__name { text-transform: none; letter-spacing: 0; font-size: var(--st-fs); color: var(--st-ink); font-weight: 500; }

/* ── PrintWisp Stores (083): How you sell, Store products, Delivery, Payments ───────────────── */
.ps-choices { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .ps-choices { grid-template-columns: 1fr; } }
.ps-choice { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--st-line); border-radius: var(--st-radius); cursor: pointer; background: var(--st-surface); }
.ps-choice:has(input:checked) { border-color: var(--st-primary); box-shadow: 0 0 0 1px var(--st-primary); background: var(--st-primary-soft); }
.ps-choice input { margin: 3px 0 0; accent-color: var(--st-primary); }
.ps-choice b { font-size: 14px; }
.ps-choice span { grid-column: 2; font-size: 12px; color: var(--st-ink-2); }
.ps-slug { display: flex; align-items: stretch; max-width: 460px; }
.ps-slug .st-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ps-slug__end { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--st-line); border-left: 0; border-radius: 0 var(--st-radius) var(--st-radius) 0; background: var(--st-surface-2); color: var(--st-ink-2); font-size: 13px; white-space: nowrap; }
.ps-ok { color: #18794e; font-size: 12px; } .ps-bad { color: #b42318; font-size: 12px; }
.ps-err { color: #b42318; font-size: 12px; margin: 2px 0 0; }
.ps-status { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ps-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--st-line); }
.ps-row:first-child { border-top: 0; }
.ps-row img { width: 44px; height: 33px; object-fit: cover; border-radius: 4px; background: var(--st-surface-2); }
.ps-row__main { min-width: 0; }
.ps-row__main b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-row__main small { color: var(--st-ink-2); font-size: 12px; }
.ps-row__price { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.ps-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.ps-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ps-switch i { position: absolute; inset: 0; background: #cdd3dc; border-radius: 999px; transition: background .15s; cursor: pointer; }
.ps-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .15s; }
.ps-switch input:checked + i { background: var(--st-primary); }
.ps-switch input:checked + i::after { transform: translateX(16px); }
.ps-switch input:disabled + i { opacity: .45; cursor: not-allowed; }
.ps-switch input:focus-visible + i { box-shadow: var(--st-focus); }
.ps-blocked { color: #9a5b00; font-size: 12px; }
.ps-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-testtag { display: inline-block; border: 1px dashed #c08a00; color: #7a5300; background: #fff8e1; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; }
.ps-rateform { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--st-surface-2); padding: 12px; border-top: 1px solid var(--st-line); }
@media (max-width: 760px) { .ps-rateform { grid-template-columns: 1fr 1fr; } }
.ps-rateform .ps-span2 { grid-column: span 2; }
.ps-rateform .ps-acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }

/* The designer keeps its narrow icon rail (journey slice 1): the wordmark, labels and the organisation foot are
   for the admin screens (admin.css), so here the logo shows as the mark only and the foot is hidden. */
body[data-editor="1"] .st-rail__logo .st-rail__word, body[data-editor="1"] .st-rail__foot { display: none; }
body[data-editor="1"] .st-rail__logo .st-rail__markimg { display: block; }
body[data-editor="1"] .st-rail a.st-rail__logo { width: 32px; height: 32px; display: grid; place-items: center; }

/* DRAGGING A BACKGROUND (designer v2, owner 13 Oct 2026): the tile follows the pointer; a long press on a phone. */
.ed-bglib__item, #ed-palette .ed-swatch { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ed-bgghost { position: fixed; left: 0; top: 0; width: 56px; height: 56px; border-radius: 10px; z-index: 9999; pointer-events: none;
    background: #fff center / cover no-repeat; box-shadow: 0 6px 18px rgba(20,26,34,.28), 0 0 0 2px #fff; opacity: .92; }
body.is-bgdragging, body.is-bgdragging * { cursor: grabbing !important; user-select: none; }

/* LAYOUT PREVIEWS, v2 (slice 7, owner 13 Oct 2026): the page in its true shape, the boxes soft, no caption; 2-up on a wide
   screen (the 300 px panel), three across on a phone (.ed-lgrid, above). The badge carries a photo glyph and the count. */
.ed-layout { padding: 6px; border-radius: 8px; }
.ed-layout svg.ed-lpv { display: block; width: 100%; height: auto; max-height: 200px; box-shadow: 0 0 0 1px rgba(27,40,56,.14); border-radius: 2px; }
.ed-layout--spread svg.ed-lpv { height: auto; max-height: 150px; }
.ed-lpv__box   { fill: #E2E7ED; stroke: #C3CCD6; stroke-width: .75; vector-effect: non-scaling-stroke; }
.ed-lpv__glyph { fill: none; stroke: #9FAAB7; stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ed-lpv__glyph circle { fill: #9FAAB7; stroke: none; }
.ed-lpv__text  { fill: #8A95A3; }
.ed-lpv__rect  { stroke: #C3CCD6; stroke-width: .75; vector-effect: non-scaling-stroke; }
.ed-lpv__fold  { stroke: rgba(27,40,56,.45); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ed-layout__n { top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px 0 5px; border-radius: 9px;
    background: rgba(255,255,255,.94); border: 1px solid var(--st-line); font-size: 11px; font-weight: 600; line-height: 1; color: var(--st-ink-2); }
.ed-layout__n svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.ed-layout__n svg circle { fill: currentColor; stroke: none; }
.ed-lchip.is-off { opacity: .45; cursor: not-allowed; }
@media (max-width: 820px) { .ed-layout { padding: 4px; } .ed-layout__n { top: 6px; right: 6px; } }

/* ── THE SHARED FILTER POP-OUT (designer round 2, slice 8; prototype dz-layouts-filter) ────────────────────────────
   One Filter button (a count badge when filters are on) and a line saying what shows; the pop-out sits BESIDE the panel,
   over the board, on a wide screen and rises as a sheet over the panel on a phone. Pills are one choice per group. */
.ed-frow { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--st-s2); min-width: 0; }
.ed-fbtn { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 36px; padding: 0 12px;
    font-weight: 600; border-radius: 8px; }
.ed-fbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ed-fbtn.has-on, .ed-fbtn.is-open { border-color: var(--st-primary); box-shadow: inset 0 0 0 1px var(--st-primary); }
.ed-fbtn__n { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--st-primary);
    color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.ed-fsum { min-width: 0; font-size: 12.5px; color: var(--st-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-bgfilter[hidden] { display: none; }
.ed-bgfilter .ed-frow { margin: 0 0 var(--st-s2); }
.ed-fempty { text-align: center; padding: var(--st-s4, 20px) var(--st-s2); color: var(--st-ink-2); font-size: 13px; }
.ed-fempty p { margin: 0 0 10px; }

.ed-fpop { display: flex; flex-direction: column; background: var(--st-surface); color: var(--st-ink);
    border: 1px solid var(--st-line); border-radius: 14px; box-shadow: 0 14px 40px rgba(20, 26, 34, .22); z-index: 45; }
.ed-fpop[hidden] { display: none; }
@media (min-width: 821px) {
    .ed-fly { position: relative; }
    .ed-fpop { position: absolute; top: 10px; left: calc(100% + 10px); width: 288px; max-height: calc(100% - 20px); }
}
.ed-fpop__head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px 16px; flex: 0 0 auto; }
.ed-fpop__t { margin: 0; font-size: 15px; font-weight: 700; flex: 1 1 auto; }
.ed-fpop__x { font-size: 22px; min-width: 32px; min-height: 32px; }
.ed-fpop__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 10px; }
.ed-fpop__g + .ed-fpop__g { margin-top: 14px; }
.ed-fpop__gl { font-size: 12.5px; font-weight: 600; color: var(--st-ink-2); margin: 0 0 7px; }
.ed-fpop__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-fpill { min-width: 38px; height: 36px; padding: 0 13px; border: 0; border-radius: 18px; background: var(--st-surface-2);
    font: inherit; font-size: 13px; font-weight: 600; color: var(--st-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.ed-fpill:hover:not(:disabled) { background: var(--st-line); }
.ed-fpill.is-on { background: var(--st-primary); color: #fff; }
.ed-fpill.is-off { color: var(--st-ink-3); background: var(--st-surface-2); opacity: .7; cursor: not-allowed; }
.ed-fpill:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }
.ed-fpop__note { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; font-size: 12px; color: var(--st-ink-2); }
.ed-fpop__note svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.ed-fpop__foot { display: flex; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--st-line); flex: 0 0 auto; }
.ed-fpop__foot .st-btn { flex: 1 1 0; min-height: 40px; justify-content: center; font-weight: 600; }
@media (max-width: 820px) {
    .ed-fpop { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); max-height: 78dvh;
        border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -6px 24px rgba(20, 26, 34, .2); }
    .ed-fpill { height: 44px; padding: 0 16px; border-radius: 22px; min-width: 44px; }
    .ed-fpop__foot .st-btn { min-height: 46px; }
    .ed-fbtn { height: 40px; }
}
/* The layout this page is showing carries a tick (it is what Apply to all pages applies). */
.ed-layout.is-on { border-color: var(--st-primary); box-shadow: 0 0 0 1px var(--st-primary); }
.ed-layout.is-on::before { content: ''; position: absolute; top: 9px; left: 9px; z-index: 1; width: 20px; height: 20px; border-radius: 50%;
    background: var(--st-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
    box-shadow: 0 0 0 2px #fff; }
@media (max-width: 820px) { .ed-layout.is-on::before { top: 6px; left: 6px; } }

/* ── APPLY TO ALL PAGES… (designer round 2, slice 9) ─────────────────────────────────────────────────────────────
   The panel's foot holds the button (prototype dz-layouts: a full-width outlined button at the foot); the dialog reuses
   the name dialog's look (.ed-ask). A veil covers the editor while a layout walks the book. */
.ed-fly__foot { position: sticky; bottom: calc(var(--st-s3) * -1); z-index: 2; margin: var(--st-s3) calc(var(--st-s3) * -1) calc(var(--st-s3) * -1);
    padding: 10px var(--st-s3) 12px; background: var(--st-surface); border-top: 1px solid var(--st-line); }
.ed-fly__foot[hidden] { display: none; }
.ed-applyall { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 40px; font-weight: 600; border-radius: 8px; }
.ed-applyall__i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ed-applyall__why { margin: 6px 0 0; font-size: 12px; color: var(--st-ink-3); text-align: center; }
.ed-applyall__why[hidden] { display: none; }
.ed-apply__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; font-size: 14px; cursor: pointer; }
.ed-apply__opt[hidden] { display: none; }
.ed-apply__opt input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--st-primary); }
.ed-apply__n { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.ed-batch { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(20, 26, 34, .28); cursor: progress; }
.ed-batch[hidden] { display: none; }
.ed-batch__box { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: var(--st-surface);
    box-shadow: 0 12px 36px rgba(20, 26, 34, .25); font-size: 14px; font-weight: 600; color: var(--st-ink); }
.ed-batch__spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--st-line); border-top-color: var(--st-primary); animation: ed-bgspin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ed-batch__spin { animation: none; } }
@media (max-width: 820px) {
    .ed-applyall { min-height: 44px; }
    .ed-fly__foot { padding-bottom: 10px; }
}
.ed-apply__opts { display: grid; gap: 0; }

/* ── THE OPTIONS PANEL DRILLS IN (designer round 2, slice 12; prototype dz-options) ──────────────────────────────────
   Rows with an icon, the name, what it is set to and a chevron; a detail view with a back arrow over the same controls.
   48 px rows (a finger's width on a phone). Lock is a switch on its row. */
.ed-odrill[hidden], .ed-olist[hidden], .ed-odetail[hidden], .ed-osec[hidden] { display: none; }
.ed-orows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ed-olist #ed-image-empty { margin-bottom: 8px; }
.ed-olist #ed-multi-note { margin: 0 0 8px; }
.ed-orow { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; box-sizing: border-box; min-height: 48px; padding: 0 10px 0 12px; text-align: left;
    background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 10px; font: inherit; color: var(--st-ink); cursor: pointer; }
.ed-orow:hover { border-color: var(--st-ink-3); }
.ed-orow:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.ed-orow__i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--st-ink-2); }
.ed-orow__l { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-orow__v { flex: 0 1 auto; min-width: 0; max-width: 48%; font-size: 12.5px; color: var(--st-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ed-orow__c { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--st-ink-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ed-orow__sw { position: relative; flex: 0 0 auto; width: 34px; height: 20px; border-radius: 10px; background: var(--st-line); transition: background .15s; }
.ed-orow__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.ed-orow.is-on .ed-orow__sw { background: var(--st-primary); }
.ed-orow.is-on .ed-orow__sw::after { transform: translateX(14px); }
.ed-orow--toggle .ed-orow__v { display: none; }
.ed-oback { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin: -4px 0 8px; padding: 0 4px; border: 0;
    border-bottom: 1px solid var(--st-line); background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--st-ink); cursor: pointer; text-align: left; }
.ed-oback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-oback:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
/* Inside a detail its own section title would repeat the back arrow's words. */
.ed-osec > div > .st-section__title:first-child, .ed-osec > .st-section__title:first-child { display: none; }
.ed-osec[data-osec="align"] .st-section__title, .ed-osec[data-osec="arrange"] .st-section__title { display: none; }
@media (prefers-reduced-motion: reduce) { .ed-orow__sw, .ed-orow__sw::after { transition: none; } }
@media (max-width: 820px) { .ed-orow { min-height: 48px; } .ed-orow__v { max-width: 52%; } }

/* ── OPTIONS → SHAPE (designer round 2, slice 11; prototype dz-shape) ──────────────────────────────────────────────── */
.ed-pshapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ed-pshape { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; min-height: 44px; border: 1px solid var(--st-line);
    border-radius: 10px; background: var(--st-surface, #fff); font: inherit; font-size: 13px; font-weight: 600; color: var(--st-ink); cursor: pointer; }
.ed-pshape:hover { border-color: var(--st-ink-3); }
.ed-pshape.is-on { border-color: var(--st-primary); box-shadow: 0 0 0 1px var(--st-primary); }
.ed-pshape:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.ed-pshape__pic { display: block; width: 100%; max-width: 64px; aspect-ratio: 1; background: #9aa6b4 center / cover no-repeat; }
.ed-pshape__pic.is-empty { background: repeating-linear-gradient(45deg, #dde2e8 0 6px, #eef1f4 6px 12px); }
.ed-pshape__pic--rounded { border-radius: 22%; }
.ed-pshape__pic--ellipse { border-radius: 50%; }
.ed-pradius { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.ed-pradius[hidden] { display: none; }
.ed-pradius input { width: 100%; accent-color: var(--st-primary); }
.ed-pradius__v { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.ed-plock { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 13.5px; cursor: pointer; }
.ed-plock input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--st-primary); flex: 0 0 auto; }
.ed-pshape__note { margin: 6px 0 0; }
/* FILTER AND LEVELS (22 Oct 2026): tiles of the shopper's photo, then one line per level -- name, slider, number, reset. */
.ed-adj__h { font-size: 12px; font-weight: 600; color: var(--st-ink-2, #475467); margin: 2px 0 6px; }
.ed-adj__h[hidden] { display: none; }
.ed-adjfs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-bottom: 12px; }
.ed-adjfs[hidden] { display: none; }
.ed-adjf { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px 5px; min-height: 44px; border: 1px solid var(--st-line);
           border-radius: 8px; background: var(--st-surface, #fff); cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.ed-adjf:hover { border-color: var(--st-ink-3); }
.ed-adjf.is-on { border-color: var(--st-primary); box-shadow: 0 0 0 1px var(--st-primary); }
.ed-adjf:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.ed-adjf__pic { display: block; width: 100%; max-width: 56px; aspect-ratio: 1; height: auto; border-radius: 4px; background: #dde2e8; }
.ed-adjf__n { font-size: 11px; line-height: 1.2; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ed-adjls { display: grid; gap: 4px; margin-bottom: 10px; container-type: inline-size; }
/* two lines where the panel is narrow (the desktop side panel): the name, its number and reset, then the whole-width slider;
   one line where there is room (a phone's sheet) */
.ed-adjl { display: grid; grid-template-columns: minmax(0, 1fr) 54px 32px; grid-template-areas: "n v x" "r r r"; align-items: center; column-gap: 6px; row-gap: 0; }
.ed-adjl__n { grid-area: n; }
.ed-adjl__r { grid-area: r; }
.ed-adjl__v { grid-area: v; }
.ed-adjl__x { grid-area: x; }
@container (min-width: 330px) {
  .ed-adjl { grid-template-columns: 82px minmax(0, 1fr) 54px 32px; grid-template-areas: "n r v x"; min-height: 40px; }
}
.ed-adjl__n { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-adjl.is-set .ed-adjl__n { font-weight: 600; }
.ed-adjl__r { width: 100%; min-width: 0; accent-color: var(--st-primary); height: 28px; margin: 0; }
.ed-adjl__v { width: 54px; font-size: 16px; padding: 3px 4px; min-height: 34px; border: 1px solid var(--st-line); border-radius: 6px; text-align: right;
              font-variant-numeric: tabular-nums; background: var(--st-surface, #fff); color: inherit; -moz-appearance: textfield; }
.ed-adjl__v::-webkit-inner-spin-button, .ed-adjl__v::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ed-adjl__x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--st-ink-2, #475467); cursor: pointer; padding: 0; }
.ed-adjl__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-adjl__x:disabled { opacity: .3; cursor: default; }
.ed-adjl__x:not(:disabled):hover { background: var(--st-line); }
.ed-adj__foot { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-adj__foot .st-btn { min-height: 40px; }
.ed-adj__note { margin: 8px 0 0; }


/* ── EDIT TEXT (designer round 2, slice 10; prototype dz-text-edit) ──────────────────────────────────────────────────
   A text-only box over the page, draggable by its head; the page stays visible (and live) behind a light veil. On a
   phone a full-height sheet: the words first, the tools under them, every button 44 px. The colour palette opens above. */
.ed-tedit { position: fixed; inset: 0; z-index: 80; background: rgba(20, 26, 34, .18); }
.ed-tedit[hidden] { display: none; }
body.ed-tedit-open .ed-cpop { z-index: 86; }
.ed-tedit__box { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); width: min(548px, calc(100vw - 32px)); max-height: calc(100vh - 120px);
    display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; box-sizing: border-box; overflow: auto;
    background: var(--st-surface, #fff); color: var(--st-ink, #1d232b); border-radius: 12px; box-shadow: 0 18px 48px rgba(20, 26, 34, .28); }
.ed-tedit__box.is-placed { transform: none; }
.ed-tedit__head { display: flex; align-items: center; gap: 8px; margin: 0 -14px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--st-line); cursor: move;
    user-select: none; -webkit-user-select: none; touch-action: none; }
.ed-tedit__head h2 { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 700; }
.ed-tedit__hi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; color: var(--st-ink-2); }
.ed-tedit__x { width: 36px; height: 36px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--st-ink-2); cursor: pointer; border-radius: 8px; }
.ed-tedit__x:hover { background: var(--st-line); }
.ed-tedit__tools { display: grid; gap: 8px; }
.ed-tedit__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ed-tedit__font { flex: 1 1 160px; min-width: 0; height: 36px; }
.ed-tedit__size { flex: 0 0 84px; }
.ed-tedit__size input { width: 100%; height: 36px; box-sizing: border-box; }
.ed-tedit__col { display: inline-flex; align-items: center; gap: 4px; }
.ed-tedit__col input[type="color"] { width: 40px; height: 36px; padding: 2px; }
.ed-tedit__col .ed-cpal { height: 36px; width: 36px; }
.ed-tedit__grp { display: inline-flex; border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; }
.ed-tedit__b { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-right: 1px solid var(--st-line);
    background: var(--st-surface, #fff); color: var(--st-ink); font: inherit; font-size: 15px; cursor: pointer; padding: 0; }
.ed-tedit__b:last-child { border-right: 0; }
.ed-tedit__b svg { width: 16px; height: 16px; fill: currentColor; }
.ed-tedit__b:hover { background: var(--st-bg, #f4f5f7); }
.ed-tedit__b[aria-pressed="true"] { background: var(--st-primary); color: var(--st-primary-ink, #fff); }
.ed-tedit__b:disabled { opacity: .35; cursor: not-allowed; }
.ed-tedit__b:focus-visible, .ed-tedit__x:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.ed-tedit__lh { display: inline-flex; align-items: center; gap: 4px; color: var(--st-ink-2); }
.ed-tedit__lh svg { width: 16px; height: 16px; fill: currentColor; }
.ed-tedit__lh input { width: 76px; height: 36px; box-sizing: border-box; }
.ed-tedit__area { display: block; width: 100%; min-height: 140px; box-sizing: border-box; resize: vertical; padding: 10px 12px; border: 1px solid var(--st-line);
    border-radius: 8px; font-size: 18px; line-height: 1.35; color: var(--st-ink); background: var(--st-surface, #fff); }
.ed-tedit__area:focus { outline: 2px solid var(--st-primary); outline-offset: -1px; border-color: transparent; }
.ed-tedit__area[readonly] { background: var(--st-bg, #f4f5f7); }
.ed-tedit__fit { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13.5px; cursor: pointer; }
.ed-tedit__fit[hidden] { display: none; }
.ed-tedit__fit input { width: 18px; height: 18px; margin: 0; accent-color: var(--st-primary); }
.ed-tedit__acts { display: flex; justify-content: flex-end; gap: 8px; }
.ed-tedit__acts .st-btn { min-width: 88px; justify-content: center; }
.ed-tedit [hidden] { display: none !important; }
@media (max-width: 820px) {
    .ed-tedit { background: rgba(20, 26, 34, .35); }
    .ed-tedit__box, .ed-tedit__box.is-placed { left: 0 !important; top: 0 !important; transform: none; width: 100%; height: 100%; max-height: none; border-radius: 0; gap: 10px; padding: 0 12px 12px; }
    .ed-tedit__head { cursor: default; padding: 6px 4px 6px 12px; margin: 0 -12px; }
    .ed-tedit__x { width: 44px; height: 44px; }
    /* The words first: the keyboard takes the bottom half, so the box the thumbs type into is at the top. */
    .ed-tedit__area { order: -1; min-height: 120px; flex: 0 0 auto; font-size: 17px; }
    .ed-tedit__head { order: -2; }
    .ed-tedit__b, .ed-tedit__x { width: 44px; height: 44px; }
    .ed-tedit__font, .ed-tedit__size input, .ed-tedit__lh input, .ed-tedit__col input[type="color"], .ed-tedit__col .ed-cpal { height: 44px; }
    .ed-tedit__col .ed-cpal { width: 44px; }
    .ed-tedit__row--fmt { gap: 8px; }
    .ed-tedit__acts { margin-top: auto; }
    .ed-tedit__acts .st-btn { flex: 1 1 0; min-height: 44px; }
}

/* ══ DESIGNER ROUND 3: UI POLISH (docs/35, the R3 rows; prototype mockups/printwisp/designer-v2) ══════════════════════
   Screen only. Nothing in this block reaches a print file. */

/* G2/G3: name · size, and "● Saved" under it, in the product bar. */
.ed-prodbar { height: 40px; flex-basis: 40px; }
.ed-titleblk { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 auto; align-self: stretch; }
.ed-prodbar .ed-titleblk .ed-title { font-size: 13.5px; line-height: 17px; font-weight: 650; margin: 0; flex: 0 0 auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-titleblk .ed-saved { line-height: 14px; margin-top: 1px; }
.ed-title__size { font-weight: 500; color: var(--st-ink-2); }
.ed-saved { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--st-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-saved__t { overflow: hidden; text-overflow: ellipsis; }
.ed-saved__dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #22A35A; }
.ed-saved.is-busy .ed-saved__dot { background: #8B95A3; }
.ed-saved.is-dirty .ed-saved__dot { background: #E0A100; }
.ed-saved.is-bad .ed-saved__dot { background: #D93B30; }
.ed-saved.is-bad { color: #9A2A21; }
.ed-saved.is-ask .ed-saved__dot { background: #E0A100; }
.ed-saved.is-ask { color: #7A5210; }
/* The brand bar's phone copies (S11): only on a phone. */
.ed-saved--m, .ed-mbtn { display: none; }
.ed-mbtn { flex: 0 0 auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent;
    color: inherit; font-size: 17px; cursor: pointer; border-radius: 8px; }
.ed-mbtn:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.ed-mbtn.is-done { color: #22A35A; }
.ed-mbtn.is-on { background: color-mix(in srgb, currentColor 14%, transparent); }

/* G5: one Preview control next to Save. */
.ed-pvbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 28px; padding: 0 10px; flex: 0 0 auto; }
.ed-pv__ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ed-pvbtn.is-on { background: var(--st-primary); border-color: var(--st-primary); color: var(--st-on-primary, #fff); }

/* G4/G8/G11: ONE toolbar row -- undo/redo with words and the selection's tools | ‹ page › | − Fit + -- that never wraps. */
.ed-topbar { flex-wrap: nowrap; gap: 6px; min-height: 44px; }
.ed-tb { flex: 1 1 0; display: flex; align-items: center; gap: 4px; }
.ed-tb--r { justify-content: flex-end; }
.ed-topbar .ed-tool--w { width: auto; gap: 6px; padding: 0 9px; font-size: 13px; color: var(--st-ink-2); }
.ed-topbar .ed-tool--w:disabled { color: #B9C0C9; }
.ed-tool__svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ed-topbar.is-tight .ed-tool__w { display: none; }
.ed-topbar.is-tight .ed-topbar .ed-tool--w { padding: 0; width: 30px; }
#ed-undo, #ed-redo { padding: 0 9px; }
.ed-topbar.is-tight #ed-undo, .ed-topbar.is-tight #ed-redo { padding: 0; width: 30px; }
/* The selection's tools sit in the same row: no bar of their own, no border, no fixed height. */
.ed-topbar .ed-ctxbar { flex: 0 1 auto; min-height: 0; padding: 0 0 0 6px; margin-left: 2px; border: 0; border-left: 1px solid var(--st-line);
    background: transparent; overflow: visible; gap: 6px; }
.ed-topbar .ed-ctxbar:has(.ed-ctx__tools[hidden]):not(:has(.ed-ctx[data-ctx])) { border-left-color: transparent; }
.ed-ctx__chip--edit .ed-ctx__val { font-weight: 600; max-width: none; }
.ed-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.ed-nav[hidden] { display: none; }
.ed-nav__b { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--st-ink-2); cursor: pointer; }
.ed-nav__b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-nav__b:hover:not(:disabled) { background: var(--st-surface-2); color: var(--st-ink); }
.ed-nav__b:disabled { color: #C5CBD3; cursor: default; }
.ed-nav__b:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.ed-nav__t { min-width: 7.5em; text-align: center; font-size: 14px; font-weight: 600; color: var(--st-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* − Fit +: the middle is a button. */
.ed-view .ed-view__pct { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--st-ink-2);
    height: 26px; padding: 0 8px; border-radius: 6px; cursor: pointer; }
.ed-view .ed-view__pct:hover { background: var(--st-surface-2); color: var(--st-ink); }
.ed-view .ed-tool .ed-tool__svg { width: 16px; height: 16px; }

/* P3/G10/P10: the labelled page action bar under the board. */
.ed-acts { flex: 0 0 auto; display: flex; align-items: center; justify-content: safe center; gap: 2px; padding: 4px 8px; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; }
.ed-acts::-webkit-scrollbar { display: none; }
.ed-acts__grp { display: contents; }
.ed-acts__grp[hidden] { display: none; }
.ed-acts__sep { width: 1px; height: 20px; background: var(--st-line-2, #D4DAE1); margin: 0 8px; flex: 0 0 auto; }
.ed-act { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
    background: transparent; color: var(--st-ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ed-act:hover:not(:disabled) { background: var(--st-surface); color: var(--st-ink); box-shadow: 0 0 0 1px var(--st-line); }
.ed-act:disabled { color: #B9C0C9; cursor: default; }
.ed-act:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.ed-act__ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* V5/V6: the strip's Add tile, and its overflow. */
.ed-page--add .ed-page__sheet { display: grid; place-items: center; border-style: dashed; background: transparent; }
.ed-page--add .ed-page__sheet svg { width: 16px; height: 16px; fill: none; stroke: var(--st-ink-3); stroke-width: 1.8; stroke-linecap: round; }
.ed-page--add:hover .ed-page__sheet svg { stroke: var(--st-ink); }
.ed-page--add { cursor: pointer; }
.ed-pmore { position: relative; }
.ed-pmore__b { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--st-ink-3); cursor: pointer; }
.ed-pmore__b svg { width: 18px; height: 18px; fill: currentColor; }
.ed-pmore__b:hover, .ed-pmore__b[aria-expanded="true"] { background: var(--st-surface-2); color: var(--st-ink); }
.ed-pmore__menu { position: fixed; z-index: 60; min-width: 220px; padding: 4px; background: var(--st-surface); border: 1px solid var(--st-line);
    border-radius: var(--st-radius); box-shadow: 0 8px 24px rgba(16, 22, 30, .16); }
.ed-pmore__menu[hidden] { display: none; }
.ed-pmore__item { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 4px; background: transparent;
    font: inherit; font-size: 13px; color: #9A2A21; cursor: pointer; }
.ed-pmore__item:hover { background: var(--st-surface-2); }

/* S7/V3: one row of labels under the board, the side being worked on in bold; the spine as a small pill. */
.ed-board.is-cvlab { margin: 0 0 28px; }
.ed-cvlab--bot { top: 100%; height: 28px; }
.ed-cvlab--bot .ed-cvlab__t { top: 6px; background: transparent; color: var(--st-ink-2); font: 500 12px/18px system-ui, -apple-system, sans-serif; padding: 0 4px; }
.ed-cvlab--bot .ed-cvlab__t.is-sel { background: transparent; color: var(--st-ink); font-weight: 700; }
.ed-cvlab--bot .ed-cvlab__t.is-spine { background: #E8EDF3; color: var(--st-ink-2); border: 1px solid #D4DBE3; border-radius: 4px; padding: 0 6px; font-size: 11px; line-height: 16px; top: 7px; }
.ed-cvlab--bot .ed-cvlab__t.is-spine.is-sel { color: var(--st-ink); font-weight: 700; border-color: #AEB9C6; }

/* R1/R3/V7: Your book, one line per setting. */
.ed-brows { display: flex; flex-direction: column; }
.ed-brows__grp { display: contents; }
.ed-brows__grp[hidden] { display: none; }
.ed-brows .ed-choices { display: contents; }
.ed-brow, .ed-book .ed-choice { display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 40px; padding: 2px 0; flex-wrap: wrap; }
.ed-brow[hidden], .ed-book .ed-choice[hidden] { display: none; }
.ed-book .ed-choice__name, .ed-brow__k { flex: 0 0 auto; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--st-ink-2);
    white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.ed-brow__v { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 0; }
.ed-brow__ro { font-size: 13.5px; font-weight: 650; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.ed-book select.st-select { width: auto; max-width: 62%; min-width: 0; height: 34px; font-size: 13px; }
.ed-book .ed-brow__v select.st-select { max-width: 100%; }
.ed-book .ed-choice__fixed { font-size: 13px; font-weight: 600; color: var(--st-ink); text-align: right; }
/* The product's own options (a frame colour): label left, its chips right, wrapping under one another if they must. */
.ed-book #ed-dock .ed-choice { flex-wrap: wrap; justify-content: flex-start; }
.ed-book #ed-dock .ed-choice__name { flex: 1 0 100%; }
/* A segmented control: two or three values, the chosen one raised. */
.ed-seg { display: inline-flex; align-items: stretch; flex-wrap: nowrap; justify-content: flex-end; gap: 2px; padding: 2px; background: #EEF1F5; border-radius: 9px; max-width: 100%; margin-left: auto; }
.ed-seg > * { flex: 1 1 auto; min-width: 0; justify-content: center; }
.ed-seg__b { white-space: normal; text-align: center; line-height: 1.2; padding: 4px 10px; flex-wrap: wrap; column-gap: 4px; row-gap: 0; }
.ed-seg__b, .ed-seg .ed-endpaper__opt { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border: 0; border-radius: 7px;
    background: transparent; color: var(--st-ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; box-shadow: none; }
.ed-seg__b small { font-size: 11px; color: var(--st-ink-3); }
.ed-seg__b.is-on, .ed-seg .ed-endpaper__opt.is-on { background: var(--st-surface, #fff); color: var(--st-ink); font-weight: 650; box-shadow: 0 1px 2px rgba(16, 22, 30, .16); border: 0; }
.ed-seg__b:focus-visible, .ed-seg .ed-endpaper__opt:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.ed-seg .ed-endpaper__sw { width: 13px; height: 13px; }
.ed-book .ed-choice--check { justify-content: flex-start; }
.ed-book .ed-choice--check .ed-choice__name { color: var(--st-ink); }
/* The spine: read-only, its arithmetic behind the (i). */
.ed-book .ed-spine { margin-top: 0; flex-wrap: wrap; align-items: center; }
.ed-book .ed-spine__mm { font-size: 13.5px; font-weight: 650; }
.ed-book .ed-spine__why, .ed-book .ed-spine__warn { flex: 1 0 100%; font-size: 12px; margin: -4px 0 4px; }
.ed-brow__ib { border: 0; background: transparent; padding: 2px; margin: 0; line-height: 0; color: var(--st-ink-3); cursor: pointer; border-radius: 50%; }
.ed-brow__ib:hover, .ed-brow__ib[aria-expanded="true"] { color: var(--st-ink); }
.ed-brow__i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* The phone's Book sheet: "Your book · Changes apply to the whole book". */
.ed-sheet-head__t { display: flex; flex-direction: column; min-width: 0; }
.ed-sheet-head__sub { font-size: 12px; color: var(--st-ink-3); }

/* R5/P5/G17: Print check -- a meter, a headline, the warnings, the key. */
.ed-meter { --m-b: 37%; --m-w: 67%; position: relative; height: 6px; border-radius: 3px; background: #E9EDF2; overflow: hidden; margin: 2px 0 8px; }
.ed-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, #D93B30 0, #D93B30 var(--m-b), #E0A100 var(--m-b), #E0A100 var(--m-w), #22A35A var(--m-w), #22A35A 100%);
    background-repeat: no-repeat; transition: width .25s ease; }
.ed-meter.is-ok .ed-meter__fill { background: linear-gradient(90deg, #E0A100 0, #8CC152 55%, #22A35A 100%); background-size: 100% 100% !important; }
@media (prefers-reduced-motion: reduce) { .ed-meter__fill { transition: none; } }
.ed-pcheck [hidden] { display: none !important; }
.ed-pcheck__h { margin: 0 0 8px; font-size: 13px; color: var(--st-ink-2); line-height: 1.4; }
.ed-pcheck__h b { color: var(--st-ink); font-weight: 650; }
.ed-pcheck__h.is-warn b { color: #8A5A00; }
.ed-pcheck__h.is-block b { color: #9A2A21; }
.ed-pcheck__h.is-none { color: var(--st-ink-3); }
.ed-pcheck__ok { display: flex; gap: 8px; margin: 0; font-size: 12.5px; color: var(--st-ink-2); line-height: 1.4; }
.ed-pcheck__ok::before { content: "\2713"; color: #22A35A; font-weight: 700; flex: 0 0 auto; }
.ed-key { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--st-line); font-size: 12px; color: var(--st-ink-2); }
.ed-key span { display: flex; align-items: center; gap: 10px; }

/* S1-S5: the Photos panel's way in. */
.ed-fly__tt { display: flex; flex-direction: column; min-width: 0; }
/* Sentence-case panel titles with a sub line (S1; prototype: "Photos" / "Nothing added yet"). */
.ed-fly__head h2 { font-size: 15px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--st-ink); }
.ed-fly__sub { font-size: 12px; color: var(--st-ink-3); line-height: 1.3; }
.ed-fly__sub[hidden] { display: none; }
.ed-addphotos { width: 100%; min-height: 46px; justify-content: center; gap: 8px; font-size: 15px; font-weight: 650; margin: 0 0 10px; border-radius: 8px; }
.ed-addphotos svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* A PHOTO FOR THIS BOX (owner, 18 Oct 2026): the Photos panel targeted at the box that was double-clicked -- one line
   at the top, kept in view while the photos scroll, with its own cancel. */
.ed-target { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 7px 6px 7px 10px;
    background: #EFF4FF; border: 1px solid #2563EB; border-radius: 8px; color: #1E3A8A; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ed-target[hidden] { display: none; }
.ed-target__i { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-target__t { flex: 1; min-width: 0; }
.ed-target__x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent;
    color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.ed-target__x:hover, .ed-target__x:focus-visible { background: rgba(37, 99, 235, 0.12); }
#ed-pool-drop { flex-direction: column; text-align: center; gap: 6px; padding: 18px 10px; color: var(--st-ink-3); border-width: 1.5px; }
.ed-dropzone__ic { width: 26px; height: 26px; fill: none; stroke: var(--st-ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ed-dropzone__fmt { font-size: 12px; }
.ed-steps { list-style: none; counter-reset: edstep; margin: auto 0 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 12px; flex: none; }
.ed-steps[hidden] { display: none; }
.ed-steps li { counter-increment: edstep; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; font-size: 13px; color: var(--st-ink-2); line-height: 1.35; }
.ed-steps li::before { content: counter(edstep); grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: #EEF1F5; color: var(--st-ink-2);
    display: grid; place-items: center; font-size: 12px; font-weight: 650; align-self: start; }
.ed-steps b { color: var(--st-ink); font-weight: 650; }
.ed-panel-tools[hidden] { display: none; }
/* THE STEPS AT THE BOTTOM, THE SCOPE ABOVE THE PHOTOS (owner, 18 Oct 2026). The pictures panel is a column whose list
   grows (flex 1), so the steps -- after the list -- sit on the panel's bottom edge, above Fill all / Clear all. An empty
   list takes no room of its own, so on a phone sheet (no fixed height) the steps follow the drop zone closely. */
.ed-fly .ed-fly__panel[data-panel="pictures"] > .ed-pool:empty { min-height: 0; }
.ed-pool-scopebar { position: relative; display: flex; align-items: center; gap: 4px; flex: none; }
.ed-pool-scopebar[hidden] { display: none; }
.ed-pool-scope { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: 1 1 auto; min-width: 0;
    border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; background: var(--st-surface); }
.ed-pool-scope .st-seg__opt { position: relative; display: flex; }
.ed-pool-scope .st-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ed-pool-scope .st-seg__opt span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 32px; padding: 0 8px;
    border-left: 1px solid var(--st-line); font-size: 12.5px; color: var(--st-ink-2); white-space: nowrap; }
.ed-pool-scope .st-seg__opt:first-child span { border-left: 0; }
.ed-pool-scope .st-seg__opt input:checked + span { background: #EFF4FF; color: #1E3A8A; font-weight: 650; }
.ed-pool-scope .st-seg__opt input:focus-visible + span { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.ed-pool-scope__i { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--st-ink-3); font-size: 14px; cursor: pointer; }
.ed-pool-scope__i:hover, .ed-pool-scope__i[aria-expanded="true"] { color: var(--st-primary); background: var(--st-surface-2); }
.ed-pool-scope__i:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.ed-pool-scope__tip { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; margin: 0; padding: 9px 11px;
    background: #141A22; color: #fff; border-radius: 8px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 6px 18px rgba(20, 26, 34, .22); }
.ed-pool-scope__tip[hidden] { display: none; }
.ed-pool-scope__tip b { font-weight: 650; }
.ed-pool-scope__tip::before { content: ""; position: absolute; top: -5px; right: 12px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.ed-pool-elsewhere { flex: none; display: block; width: 100%; margin: 0; padding: 6px 8px; border: 1px dashed var(--st-line); border-radius: 8px;
    background: var(--st-surface-2); color: var(--st-ink-2); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.ed-pool-elsewhere[hidden] { display: none; }
.ed-pool-elsewhere u { color: var(--st-primary); text-underline-offset: 2px; white-space: nowrap; }
.ed-pool-elsewhere:hover { border-color: var(--st-primary); color: var(--st-ink); }
.ed-pool-elsewhere:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
@media (max-width: 820px) {
    .ed-steps { padding-top: 8px; gap: 6px; }
    .ed-steps li { font-size: 12.5px; line-height: 1.3; }
    .ed-steps li::before { width: 22px; height: 22px; font-size: 11px; }
    .ed-pool-scope .st-seg__opt span, .ed-pool-scope__i { min-height: 36px; }
    .ed-pool-scope__i { height: 36px; width: 36px; }
    /* In the sheet the note opens in the flow, under the row, so the sheet scrolls to it rather than hiding it below the fold. */
    .ed-pool-scopebar { flex-wrap: wrap; }
    .ed-pool-scope__tip { position: relative; top: auto; flex: 1 0 100%; margin-top: 4px; }
}

/* B7: "Use my own picture" at the foot of the themes. */
.ed-bgown { margin-top: 10px; }
.ed-bgown .st-btn { width: 100%; justify-content: center; }

/* P7: Replace on the floating bar while a photo is being moved. */
.ed-fbar > button[data-fb="replace"] { border-left: 1px solid rgba(255, 255, 255, .12); border-radius: 0 9px 9px 0; margin-left: 2px; }

/* R4: a tablet (821-1150 px) -- the right column folds into the Book sheet, opened from the rail. */
@media (min-width: 821px) and (max-width: 1150px) {
    /* One screen, as on a desk (the ≤1100 px stacking rule is for the portal's other editors). */
    .ed-editor--rail { grid-template-columns: var(--ed-rail-w, 84px) var(--ed-fly, 0px) minmax(0, 1fr);
        height: calc(100vh - var(--st-bar-real, var(--st-bar-h)) - var(--st-above-1, 0px) - var(--st-above-2, 0px));
        height: calc(100dvh - var(--st-bar-real, var(--st-bar-h)) - var(--st-above-1, 0px) - var(--st-above-2, 0px)); }
    .ed-editor--rail > .st-editor__left { overflow-y: auto; }
    .ed-editor--rail > .st-editor__right { display: none; position: fixed; right: 0; top: var(--st-bar-real, 84px); bottom: 0; width: 320px; z-index: 39;
        overflow-y: auto; border-left: 1px solid var(--st-line); box-shadow: -8px 0 24px rgba(20, 26, 34, .14); }
    .ed-editor--rail.is-inspecting > .st-editor__right { display: block; }
    .ed-rail .ed-rail__mobile { display: flex; }
    .ed-editor--rail > .st-editor__right .ed-sheet-head { display: flex; align-items: center; gap: var(--st-s2); margin: calc(var(--st-s4) * -1) calc(var(--st-s4) * -1) var(--st-s3);
        padding: var(--st-s2) var(--st-s4); border-bottom: 1px solid var(--st-line); position: sticky; top: calc(var(--st-s4) * -1); z-index: 1; background: var(--st-surface); }
    .ed-editor--rail > .st-editor__right .ed-sheet-head h2 { margin: 0; font-size: 14px; }
    .ed-editor--rail > .st-editor__right .ed-sheet-head .ed-fly__close { margin-left: auto; }
}

/* S11/M1/M2/P10: the phone. Two chrome rows (brand + Saved + Save + Add to cart; undo · redo · ‹ page › · Fit), the board,
   the docked action row (icon over word), the strip, the rail. Every control 44 px. */
@media (max-width: 820px) {
    /* Folded, not removed: the bar holds the Save / Apply-to-all dialogs, and a dialog under display:none never shows. */
    .ed-prodbar--fold { height: 0; min-height: 0; flex-basis: 0; padding: 0; border: 0; overflow: visible; }
    .ed-prodbar--fold > :not(dialog):not(style) { display: none !important; }
    .ed-saved--m { display: inline-flex; color: var(--brand-bar-ink, #141A22); opacity: .85; margin-left: 4px; }
    .ed-saved--m .ed-saved__t { max-width: 20vw; }
    .ed-brandbar .ed-brand__logo { max-width: 30vw; }
    .ed-brandbar .st-btn--buy { padding: 0 10px; }
    .ed-mbtn { display: inline-flex; }
    .ed-brandbar { gap: 2px; }
    .ed-topbar { padding: 0 6px; gap: 2px; min-height: 48px; overflow-x: auto; }
    .ed-tb { flex: 0 0 auto; gap: 0; }
    .ed-tb--l { order: 1; }
    .ed-nav { order: 2; margin: 0 auto; }
    .ed-tb--r { order: 3; }
    .ed-topbar .ed-ctxbar { order: 4; }
    /* The selection's tools follow the row's own items on a phone, so undo · redo · page · Fit come first. */
    .ed-topbar .ed-tb--l { display: contents; }
    .ed-topbar #ed-undo { order: 1; } .ed-topbar #ed-redo { order: 1; }
    .ed-topbar .ed-ctxbar { order: 5; border-left: 1px solid var(--st-line); }
    .ed-topbar .ed-tool, .ed-topbar .ed-tool--w, .ed-nav__b { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
    .ed-topbar .ed-tool__w { display: none; }
    .ed-nav__t { min-width: 5.5em; font-size: 14px; }
    /* Zoom is a pinch on a phone; the row keeps Fit. */
    .ed-view { border: 0; box-shadow: none; background: transparent; padding: 0; }
    .ed-view #ed-view-out, .ed-view #ed-view-in { display: none; }
    .ed-view .ed-view__pct { height: 44px; min-width: 44px; padding: 0 10px; }
    .ed-ctx__chip, .ed-ctx__btn { height: 40px; }
    /* The action row, docked above the strip: icon over word, sideways if it must. */
    .ed-acts { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 2px 4px; gap: 0; }
    .ed-acts::-webkit-scrollbar { display: none; }
    .ed-acts__sep { height: 34px; margin: 0 2px; }
    .ed-act { flex-direction: column; justify-content: center; gap: 3px; height: 54px; min-width: 56px; padding: 0 3px; font-size: 11px; flex: 1 0 auto; }
    .ed-act__ic { width: 21px; height: 21px; }
    /* While something is selected the floating bar takes the action row's place (C10). */
    .ed-editor--rail.has-fdock .ed-acts { visibility: hidden; }
    .ed-pages { padding: 4px 0; }
    .ed-pages__acts { order: 3; margin-left: 0; }
    .ed-pages__strip { order: 2; flex: 1 1 0; }
    .ed-pages { flex-wrap: nowrap; }
    .ed-pmore__b { width: 44px; height: 44px; }
    .ed-board.is-cvlab { margin: 0 0 28px; }
    .ed-book select.st-select { height: 40px; }
    .ed-seg__b, .ed-seg .ed-endpaper__opt { min-height: 40px; }
    .ed-brow, .ed-book .ed-choice { min-height: 48px; }
}
/* As a sheet (phone, tablet) the sheet's own head says "Your book", so the card does not say it again, and it is never
   folded shut there (a fold chosen on a desk would otherwise leave the sheet empty). */
@media (max-width: 1150px) {
    .ed-editor--rail > .st-editor__right .ed-book > .st-section__title { display: none; }
    .ed-editor--rail > .st-editor__right .ed-book.is-closed > .st-section__body { display: block; }
    .ed-editor--rail > .st-editor__right .ed-book.is-closed { padding-bottom: var(--st-s3); }
}
/* The sheet's own title in sentence case, like every panel title (R3). */
.ed-sheet-head .ed-sheet-head__t h2 { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 650; color: var(--st-ink); }
/* The author's one bar gained Preview (G5): its two fields give up a little width so nothing is pushed off it. */
@media (max-width: 1600px) and (min-width: 821px) {
    .st-bar #ed-reference { width: 96px !important; }
    .st-bar input.ed-name { width: 130px !important; }
    .st-bar #ed-product { min-width: 90px; }
    .st-bar:not(.ed-prodbar) #ed-status { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .st-bar:not(.ed-prodbar) .ed-pvbtn { padding: 0 8px; }
}

/* THE SHOP'S MARKS (round 4b): "added by the shop", one calm line where the pointer is; never a selection. */
.ed-marktip { position: fixed; z-index: 60; max-width: 260px; padding: 7px 10px; border-radius: 8px;
    background: rgba(24, 29, 39, .92); color: #fff; font-size: 12.5px; line-height: 1.35; pointer-events: none;
    opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.ed-marktip.is-on { opacity: 1; transform: none; }

/* FLIP AND SWAP (designer round 4c, X3): three full-width rows in the Options detail; Swap's one calm line over the board. */
.ed-flips { display: grid; gap: 8px; margin-bottom: 10px; }
.ed-flip { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 10px;
    background: var(--st-surface, #fff); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--st-ink); cursor: pointer; text-align: left; }
.ed-flip[hidden] { display: none; }
.ed-flip svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ed-flip:hover { border-color: var(--st-ink-3); }
.ed-flip.is-on { border-color: var(--st-primary); box-shadow: 0 0 0 1px var(--st-primary); }
.ed-flip:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.ed-flip__note { margin: 4px 0 0; }
.ed-swaphint { position: fixed; left: 50%; top: 132px; transform: translateX(-50%); z-index: 61; display: flex; align-items: center; gap: 12px;
    max-width: calc(100vw - 32px); box-sizing: border-box; padding: 6px 6px 6px 14px; border-radius: 10px; background: var(--st-selected-2); color: #fff;
    font-size: 13.5px; font-weight: 500; box-shadow: 0 4px 16px rgba(20, 26, 34, .24); }
.ed-swaphint[hidden] { display: none; }
.ed-swaphint__x { min-height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; background: transparent; color: #fff;
    font: inherit; font-weight: 600; cursor: pointer; }
.is-swapping .upper-canvas { cursor: copy !important; }
@media (max-width: 640px) { .ed-swaphint { top: auto; bottom: 168px; } }

/* ── ALL PAGES (designer round 4c, X1): every spread at once under the top bars, cover first. Tap to go; drag (press
   and hold on a phone) to change the order; the cover and the bound ends show a lock and do not move. ───────────── */
.ed-ovbtn svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.ed-ovbtn[hidden] { display: none; }
.ed-ov { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; background: var(--st-bg); }
.ed-ov__head { display: flex; align-items: center; gap: 10px; padding: 12px 20px 4px; }
.ed-ov__tt { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.ed-ov__h { margin: 0; font-size: 17px; font-weight: 700; color: var(--st-ink); }
.ed-ov__sub { font-size: 13px; color: var(--st-ink-3); }
.ed-ov__b { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--st-line); border-radius: 10px;
    background: var(--st-surface, #fff); color: var(--st-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ed-ov__b[hidden] { display: none; }
.ed-ov__b:disabled { opacity: .5; cursor: default; }
.ed-ov__b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-ov__b--done { background: var(--st-selected-2); border-color: var(--st-selected-2); color: #fff; }
.ed-ov__hint { margin: 0; padding: 0 20px 10px; font-size: 13px; color: var(--st-ink-3); }
.ed-ov__grid { flex: 1 1 auto; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); grid-auto-flow: dense;
    gap: 18px 16px; align-content: start; padding: 6px 20px 28px; -webkit-overflow-scrolling: touch; }
.ed-ov__grid.is-sorting { cursor: grabbing; }
.ed-ov__tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; outline: none; cursor: pointer;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.ed-ov__tile.is-wide { grid-column: span 2; }
.ed-ov__pic { position: relative; display: block; width: 100%; background: #fff; border-radius: 2px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 26, 34, .12), 0 4px 14px rgba(20, 26, 34, .10); transition: box-shadow .12s, transform .12s, opacity .12s; }
.ed-ov__pic img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ed-ov__pic.is-sketch .ed-ov__sketch { position: absolute; inset: 0; }
.ed-ov__sketch canvas { width: 100%; height: 100%; display: block; opacity: .6; filter: blur(.4px); }
.ed-ov__fold { position: absolute; top: 0; bottom: 0; left: 50%; width: 9%; transform: translateX(-50%); pointer-events: none;
    background: linear-gradient(90deg, rgba(36, 16, 24, 0) 0%, rgba(36, 16, 24, .10) 40%, rgba(36, 16, 24, .26) 50%, rgba(36, 16, 24, .08) 60%, rgba(36, 16, 24, 0) 100%); }
.ed-ov__fold.is-flat { width: 5%; opacity: .5; }
.ed-ov__lab { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--st-ink-2); font-variant-numeric: tabular-nums; }
.ed-ov__lab svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ed-ov__tile:hover .ed-ov__pic, .ed-ov__tile:focus-visible .ed-ov__pic { box-shadow: 0 0 0 2px #2563EB, 0 4px 14px rgba(20, 26, 34, .14); }
.ed-ov__tile.is-active .ed-ov__pic { box-shadow: 0 0 0 3px #2563EB, 0 4px 14px rgba(20, 26, 34, .14); }
.ed-ov__tile.is-active .ed-ov__lab { color: var(--st-ink); }
.ed-ov__tile.is-dragging .ed-ov__pic { opacity: .35; }
.ed-ov__tile.is-drop .ed-ov__pic { box-shadow: 0 0 0 3px #2563EB, 0 0 0 7px rgba(37, 99, 235, .18); transform: scale(1.03); }
.ed-ov__tile.is-nodrop .ed-ov__pic { box-shadow: 0 0 0 3px var(--st-bleed); }
.ed-ov__ghost { position: fixed; left: 0; top: 0; z-index: 75; pointer-events: none; opacity: .92; }
.ed-ov__ghost .ed-ov__pic { box-shadow: 0 10px 30px rgba(20, 26, 34, .32); transform: rotate(-1.5deg); }
body.ed-ov-open, body.ed-bk-open { overflow: hidden; }
body.ed-ov-open #ed-fbar, body.ed-bk-open #ed-fbar { display: none !important; }
@media (max-width: 640px) {
    .ed-ov__head { padding: 10px 16px 2px; }
    .ed-ov__hint { padding: 0 16px 8px; font-size: 12.5px; }
    .ed-ov__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; padding: 4px 16px 24px; }
    .ed-ov__b { min-height: 44px; }
}

/* ── PREVIEW ON A BOOK (designer round 4c, X2): the read-only page turn. The book sits on a quiet table; each page is the
   editor's own capture with the shop's marks, its half of the fold drawn over it (the board's tones, lighter lay-flat). */
.ed-bk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; background: #e9ebee; }
.ed-bk__stage { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y;
    -webkit-user-select: none; user-select: none; }
.ed-bk__book { position: relative; display: flex; width: calc(var(--pw, 200px) * 2); height: var(--ph, 280px); perspective: 2400px;
    transition: transform .55s cubic-bezier(.3, .1, .2, 1); }
.ed-bk__pg { position: relative; display: block; width: var(--pw, 200px); height: var(--ph, 280px); background: #fff; overflow: hidden; }
.ed-bk__pg.is-none { background: transparent; }
.ed-bk__pg img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.ed-bk__pg--l:not(.is-none) { box-shadow: -6px 10px 24px rgba(20, 26, 34, .20); border-radius: 2px 0 0 2px; }
.ed-bk__pg--r:not(.is-none) { box-shadow: 6px 10px 24px rgba(20, 26, 34, .20); border-radius: 0 2px 2px 0; }
.ed-bk__gut { position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; }
.ed-bk__gut--l { right: 0; background: linear-gradient(90deg, rgba(36, 16, 24, 0) 0%, rgba(36, 16, 24, .07) 45%, rgba(36, 16, 24, .22) 80%, rgba(36, 16, 24, .5) 100%); }
.ed-bk__gut--r { left: 0; background: linear-gradient(270deg, rgba(36, 16, 24, 0) 0%, rgba(36, 16, 24, .06) 45%, rgba(36, 16, 24, .20) 80%, rgba(36, 16, 24, .46) 100%); }
.ed-bk__gut.is-flat { width: 4%; opacity: .5; }
/* a hardcover's endpaper is glued flat to the board: a faint shade at the hinge only */
.ed-bk__gut.is-glued { width: 2.2%; opacity: .32; }
.ed-bk__book.is-cover .ed-bk__gut { display: none; }
.ed-bk__book.is-cover .ed-bk__pg:not(.is-none) { border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 12px 30px rgba(20, 26, 34, .26); }
.ed-bk__leaf { position: absolute; top: 0; width: var(--pw, 200px); height: var(--ph, 280px); transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.3, .1, .2, 1); z-index: 2; }
.ed-bk__leaf--r { left: var(--pw, 200px); transform-origin: left center; }
.ed-bk__leaf--l { left: 0; transform-origin: right center; }
.ed-bk__leaf--r.is-turning { transform: rotateY(-180deg); }
.ed-bk__leaf--l.is-turning { transform: rotateY(180deg); }
.ed-bk__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ed-bk__face--back { transform: rotateY(180deg); }
.ed-bk__face .ed-bk__pg { box-shadow: none; }
.ed-bk__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; display: grid; place-items: center;
    border: 1px solid var(--st-line); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--st-ink); cursor: pointer;
    box-shadow: 0 2px 8px rgba(20, 26, 34, .14); }
.ed-bk__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-bk__nav:disabled { opacity: .35; cursor: default; }
.ed-bk__nav--prev { left: 16px; }
.ed-bk__nav--next { right: 16px; }
.ed-bk__foot { display: flex; align-items: baseline; justify-content: center; gap: 12px; padding: 8px 16px 16px; font-size: 14px; color: var(--st-ink-2); }
.ed-bk__lab { font-weight: 600; color: var(--st-ink); }
.ed-bk__n { font-variant-numeric: tabular-nums; color: var(--st-ink-3); font-size: 13px; }
.ed-bk__load { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 10px; font-size: 14px; color: var(--st-ink-2); }
.ed-bk.is-loading .ed-bk__load { display: grid; }
.ed-bk.is-loading .ed-bk__stage, .ed-bk.is-loading .ed-bk__foot { visibility: hidden; }
@media (max-width: 640px) {
    .ed-bk__nav { top: auto; bottom: 8px; transform: none; width: 44px; height: 44px; }
    .ed-bk__stage { padding-bottom: 56px; }
    .ed-bk__nav--prev { left: calc(50% - 64px); }
    .ed-bk__nav--next { right: calc(50% - 64px); }
}
@media (prefers-reduced-motion: reduce) { .ed-bk__book, .ed-bk__leaf { transition: none; } }

/* OPTIONS' TOP AND FOOT (designer round 4c, O1 / O6; prototype dz-options): the photo's card, then Clear picture · Delete. */
.ed-oobj { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px; border: 1px solid var(--st-line); border-radius: 10px; background: var(--st-surface, #fff); }
.ed-oobj[hidden] { display: none; }
.ed-oobj__t { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 6px; background: #dde2e8 center / cover no-repeat; }
.ed-oobj__w { display: flex; flex-direction: column; min-width: 0; gap: 2px; font-size: 13px; }
.ed-oobj__w b { font-weight: 600; color: var(--st-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-oobj__w span { color: #1f7a3d; font-size: 12.5px; }
.ed-oobj.is-warn .ed-oobj__w span { color: #9a5b00; }
.ed-oobj.is-bad .ed-oobj__w span { color: var(--st-bleed); }
.ed-ofoot { display: flex; gap: 8px; margin-top: 12px; }
.ed-ofoot[hidden], .ed-ofoot .st-btn[hidden] { display: none; }
.ed-ofoot .st-btn { flex: 1 1 0; min-height: 44px; justify-content: center; }
.ed-ofoot__del { color: var(--st-bleed); }
.ed-ofoot__del svg { width: 16px; height: 16px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-bglib__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ed-bglib__head[hidden], .ed-bglib__all[hidden] { display: none; }

/* ── THE TOP BAR FITS A PHONE (owner 15 Oct 2026: "at 390px the top bar is cut off") ─────────────────────────────
   Nothing slides sideways any more, in either skin. On a desk nothing changes: the icons below are hidden and the
   words show. On a phone the buttons go to their icons (title and aria-label carry the words), the product's name
   takes what room is left and ellipsises, and the author's long bar wraps onto a second line rather than scrolling
   -- measureBar() already sizes the board under a bar of any height. */
/* Border position (15 Oct 2026): Inside · Middle · Outside, one compact segmented row under the width. */
.ed-bpos { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: 1 1 auto; min-width: 0;
    border: 1px solid var(--st-line); border-radius: 6px; overflow: hidden; background: var(--st-surface); }
.ed-bpos__o { position: relative; display: flex; min-width: 0; }
.ed-bpos__o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ed-bpos__o span { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; height: 28px; padding: 0 6px;
    font-size: 12.5px; color: var(--st-ink-2); white-space: nowrap; border-left: 1px solid var(--st-line); }
.ed-bpos__o:first-child span { border-left: 0; }
.ed-bpos__o input:checked + span { background: var(--st-primary-soft); color: var(--st-primary-strong); font-weight: 600; }
.ed-bpos__o input:focus-visible + span { outline: 2px solid var(--st-primary); outline-offset: -2px; }
@media (pointer: coarse) { .ed-bpos__o span { height: 36px; } }
.ed-hb .ed-hb__i { display: none; }
@media (max-width: 820px) {
    .ed-hb .ed-hb__i { display: inline-block; width: 1em; text-align: center; }
    .ed-hb .ed-hb__t, .ed-pvbtn .ed-pvbtn__t { display: none; }
    .ed-hb.st-btn, .st-bar .ed-pvbtn { width: 32px; min-width: 32px; padding: 0; justify-content: center; flex: 0 0 auto; }
    /* Show the product, Guides: the icon is the switch -- tinted while it is on; the box itself is still the control. */
    .ed-hb.dz-toggle { position: relative; width: 32px; height: 32px; padding: 0; justify-content: center; flex: 0 0 auto; border-radius: 6px; color: var(--st-ink-3); }
    .ed-hb.dz-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
    .ed-hb.dz-toggle:has(input:checked) { background: var(--st-primary-soft); color: var(--st-primary-strong); }
    .ed-hb.dz-toggle:has(input:focus-visible) { outline: 2px solid var(--st-primary); outline-offset: 1px; }
    .ed-hb.st-bar__crumb { flex: 0 0 auto; font-size: 18px; line-height: 1; padding: 0 4px; }
    .ed-hb-info { display: none; }
    /* The author's own bar: two lines -- back, the name, the reference and Save on the first, the tools on the second. */
    .st-bar--clip:not(.ed-prodbar) { overflow: visible; flex-wrap: wrap; height: auto; flex-basis: auto; min-height: var(--st-bar-h);
        gap: 4px; padding-top: 4px; padding-bottom: 4px; }
    .st-bar--clip:not(.ed-prodbar) > * { flex-shrink: 0; }
    .st-bar--clip:not(.ed-prodbar) .ed-title { display: none; }
    .st-bar--clip:not(.ed-prodbar) .ed-hb--designs { order: -5; }
    .st-bar--clip:not(.ed-prodbar) input.ed-name { flex: 1 1 100px; width: auto !important; min-width: 0; order: -4; }
    .st-bar--clip:not(.ed-prodbar) #ed-reference { width: 80px !important; order: -3; }
    .st-bar--clip:not(.ed-prodbar) #ed-save { order: -2; }
    .st-bar--clip:not(.ed-prodbar)::before { content: ""; order: -1; flex: 0 0 100%; height: 0; }   /* the line ends after Save */
    .st-bar--clip:not(.ed-prodbar) .st-bar__spacer { display: none; }
    .st-bar #ed-product { max-width: 80px !important; min-width: 0; }
    /* The customer skin with no shop link (the author's Customer view): the name and Saved first, then the rest. */
    .ed-prodbar:not(.ed-prodbar--fold) { overflow: hidden; gap: 6px; }
    .ed-prodbar:not(.ed-prodbar--fold) .ed-titleblk { flex: 1 1 auto; min-width: 72px; }
    .ed-prodbar:not(.ed-prodbar--fold) > :not(.ed-titleblk) { flex: 0 0 auto; }
    .ed-prodbar:not(.ed-prodbar--fold) #ed-new, .ed-prodbar:not(.ed-prodbar--fold) #ed-product { display: none; }   /* a shopper has neither */
    .ed-prodbar .ed-pvtag { padding: 0 6px; }
    .ed-prodbar .ed-hb.st-btn, .ed-prodbar .ed-pvbtn { width: 36px; min-width: 36px; }
    /* The shop's link: the brand row keeps "Saved" readable beside Preview, Save and Add to cart. */
    .ed-brandbar .ed-saved--m { flex: 0 1 auto; min-width: 46px; }
    .ed-brandbar .ed-saved--m .ed-saved__t { max-width: 24vw; }
    .ed-brandbar .ed-brand { flex: 0 1 auto; min-width: 40px; }
}
@media (max-width: 480px) {
    /* The board's own row: a product choice shows its value ("Oak"); its name ("Frame colour") is the button's title. */
    .ed-topbar .ed-ctx__btn .ed-ctx__name { display: none; }
}
@media (max-width: 400px) {
    .ed-brandbar .ed-brand__logo { max-width: 24vw; }
    .ed-brandbar .ed-mbtn { width: 40px; }
    .ed-brandbar .st-btn--buy { padding: 0 9px; }
}

/* ── PHONE SHEETS YOU CAN TAKE HOLD OF, AND A PAGE THAT STAYS PUT (owner, 16 Oct 2026) ─────────────────────
   The head of a sheet is its handle (studio-panes.js): a grab bar on it, no page scroll under the finger. A
   sheet slides up when opened and down when shut. The page itself never scrolls (iOS Safari did, under the
   sticky header, and took the tool row with it). Desks unchanged. */
.ed-grab { display: none; }
@media (max-width: 820px) {
    html:has(body[data-editor="1"]), body[data-editor="1"] { overflow: hidden; overscroll-behavior: none; }
    .ed-grab { display: block; position: absolute; top: 5px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
        border-radius: 2px; background: #C7CDD4; pointer-events: none; }
    .ed-fly__head, .ed-editor--rail > .st-editor__right .ed-sheet-head {
        position: relative; touch-action: none; -webkit-user-select: none; user-select: none; padding-top: 16px; cursor: grab; }
    .ed-editor--rail > .st-editor__right .ed-sheet-head { position: sticky; }
    .ed-fly.is-dragging, .ed-editor--rail > .st-editor__right.is-dragging { will-change: transform; }
    .ed-fly.is-dragging .ed-fly__head, .ed-editor--rail > .st-editor__right.is-dragging .ed-sheet-head { cursor: grabbing; }
    .ed-fly__body, .ed-editor--rail > .st-editor__right { overscroll-behavior: contain; }
    .ed-fly.is-full, .ed-editor--rail > .st-editor__right.is-full { border-radius: 12px 12px 0 0; }
    .ed-fly.is-entering, .ed-editor--rail > .st-editor__right.is-entering { animation: ed-sheet-in .26s cubic-bezier(.2, .8, .2, 1); }
    /* Shut as far as the page knows, still in view on its way down. */
    .ed-fly.is-closed.is-leaving { display: flex; visibility: visible; pointer-events: none; animation: ed-sheet-out .2s ease-in forwards; }
    .ed-editor--rail:not(.is-inspecting) > .st-editor__right.is-leaving { display: block; pointer-events: none; animation: ed-sheet-out .2s ease-in forwards; }
}
@keyframes ed-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ed-sheet-out { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
    .ed-fly.is-entering, .ed-editor--rail > .st-editor__right.is-entering { animation: none; }
    .ed-fly.is-closed.is-leaving, .ed-editor--rail:not(.is-inspecting) > .st-editor__right.is-leaving { display: none; animation: none; }
}

/* ══ CALENDARS (133; owner-approved prototype mockups/printwisp/calendar-desk, 16 Oct 2026) ══════════════════════
   The Calendar panel (Events | Settings, the day editor), the "Your calendar" card on first load, the right column's
   calendar lines, and the Preview's wire. Phone first: one column, 40px targets, folded detail. */
.ed-cal__body { display: flex; flex-direction: column; gap: 10px; }
.ed-cal__tabs { margin: 0; }
.ed-cal__ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ed-cal__add { width: 100%; min-height: 42px; justify-content: center; gap: 8px; display: inline-flex; align-items: center; font-weight: 650; }
.ed-cal__tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--st-primary-soft, #ECEEF4); font-size: 13px; line-height: 1.35; color: var(--st-ink); }
.ed-cal__tip b { font-weight: 650; }
.ed-cal__sec { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-ink-3, #6B7480); }
.ed-cal__empty, .ed-cal__note { margin: 0; font-size: 13px; color: var(--st-ink-3, #6B7480); }
.ed-cal__note { padding: 8px 10px; border-radius: 8px; background: var(--st-warn-soft); color: #7A5210; }
.ed-cal__ev { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 6px 10px; border: 1px solid var(--st-line); border-radius: 10px; background: var(--st-surface, #fff);
    color: var(--ev, var(--st-ink)); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ed-cal__ev:hover { border-color: #C9D0D8; }
.ed-cal__evt { flex: 1 1 auto; min-width: 0; color: var(--st-ink-2, #3B4652); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-cal__evt b { color: var(--st-ink); font-weight: 650; }
.ed-cal__evt em { font-style: normal; color: var(--st-ink-3, #6B7480); }
.ed-cal__evw { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: #DC2626; color: #fff; font: 800 12px/18px Arial, sans-serif; text-align: center; font-style: normal; }
.ed-cal__pen { width: 16px; height: 16px; color: var(--st-ink-3, #6B7480); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ed-cal__list { display: flex; align-items: center; gap: 8px; min-height: 40px; }
/* The shop's marks on THIS design (portal only, owner 17 Oct 2026): one tick per mark, wrapping on a phone. */
.ed-marksoff { display: block; }
.ed-marksoff .ed-brow { min-height: 0; padding-top: 6px; }
.ed-marksoff__opts { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 2px 0 0; }
.ed-marksoff__chk { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; font-size: 13.5px; cursor: pointer; color: var(--st-ink); }
.ed-marksoff__chk input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--st-primary); }
.ed-marksoff__chk input:disabled + span { color: var(--st-ink-3, #6B7480); }
.ed-marksoff[data-frozen="1"] .ed-marksoff__chk { cursor: default; }
.ed-marksoff__note { margin: 2px 0 4px; font-size: 12px; line-height: 1.4; }
.ed-cal__chk { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; font-size: 13.5px; cursor: pointer; }
.ed-cal__chk input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--st-primary); }
.ed-cal__chk--row { align-items: flex-start; }
.ed-cal__chk--row small { display: block; font-size: 12px; color: var(--st-ink-3, #6B7480); margin-top: 2px; }
.ed-cal__qm { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #B9C1CA; background: none; color: var(--st-ink-2, #3B4652); font-weight: 650; font-size: 13px; line-height: 1; cursor: pointer; }
.ed-cal__qm.is-on { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.ed-cal__desc { margin: -4px 0 4px 30px; font-size: 12.5px; line-height: 1.45; color: var(--st-ink-2, #3B4652); }
.ed-cal__miss { margin: -4px 0 4px 30px; font-size: 12px; color: #7A5210; }
.ed-cal__pick { border: 1px solid var(--st-line); border-radius: 12px; padding: 8px; background: var(--st-surface, #fff); }
.ed-cal__pickh { display: flex; align-items: center; justify-content: space-between; font-weight: 650; font-size: 14px; margin-bottom: 6px; }
.ed-cal__pb { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--st-ink); display: grid; place-items: center; cursor: pointer; }
.ed-cal__pb:disabled { opacity: .3; cursor: default; }
.ed-cal__pickg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ed-cal__pickg > * { min-height: 34px; display: grid; place-items: center; font-size: 13px; border: 0; border-radius: 8px; background: none; color: var(--st-ink); font-family: inherit; }
.ed-cal__pickg button { cursor: pointer; }
.ed-cal__pickg button:hover { background: var(--st-primary-soft, #ECEEF4); }
.ed-cal__pickg .ed-cal__wk { font-size: 11px; font-weight: 700; color: var(--st-ink-3, #6B7480); min-height: 22px; }
.ed-cal__pickg .is-we { color: #4F6F66; }
.ed-cal__pickg .is-hol { color: #B42318; font-weight: 700; }
.ed-cal__pickg .has-ev { box-shadow: inset 0 -3px 0 #C2410C; }
.ed-cal__fl { display: flex; flex-direction: column; gap: 6px; }
.ed-cal__fl > b { display: flex; justify-content: space-between; font-size: 13px; font-weight: 650; color: var(--st-ink); }
.ed-cal__fl > b span { font-weight: 400; font-size: 12px; color: var(--st-ink-3, #6B7480); }
.ed-cal__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed-cal__line .st-select { flex: 1 1 120px; min-height: 40px; }
.ed-cal__ys { display: inline-flex; align-items: stretch; border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; background: #fff; }
.ed-cal__ysb { width: 38px; border: 0; background: #F2F4F7; font-size: 18px; cursor: pointer; color: var(--st-ink); }
.ed-cal__ysi { width: 64px; border: 0 !important; text-align: center; font-weight: 650; min-height: 38px; border-radius: 0 !important; }
.ed-cal__seg { width: 100%; margin: 0; justify-content: stretch; }
.ed-cal__seg .ed-seg__b { min-height: 36px; justify-content: center; }
.ed-cal__seg .ed-cal__ic { width: 15px; height: 15px; }
.ed-cal__hint { margin: 0; font-size: 12.5px; color: var(--st-ink-2, #3B4652); line-height: 1.45; }
.ed-cal__apply { width: 100%; min-height: 42px; justify-content: center; }
.ed-cal__back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; color: var(--st-ink-2, #3B4652); cursor: pointer; }
.ed-cal__ta { width: 100%; min-height: 54px; resize: vertical; font-size: 14px; }
.ed-cal__yr { width: 96px; min-height: 40px; }
.ed-cal__bh { font-size: 12.5px; color: var(--st-ink-2, #3B4652); }
.ed-cal__sw { display: flex; gap: 8px; flex-wrap: wrap; }
.ed-cal__sw button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(20, 26, 34, .25); cursor: pointer; padding: 0; }
.ed-cal__sw button.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--st-ink); }
.ed-cal__ph { aspect-ratio: 1; border: 1px solid var(--st-line); border-radius: 8px; background: #F2F4F7 center / cover no-repeat; cursor: pointer; padding: 0; font: inherit; }
.ed-cal__ph.is-on { box-shadow: 0 0 0 2px var(--st-selected-2, #2563EB); border-color: transparent; }
/* Background (18 Oct 2026): one line like the icon row -- No picture, the chosen photo with an x, "...", Add photos. */
.ed-cal__tray { display: grid; grid-template-columns: repeat(6, minmax(0, 42px)); gap: 6px; }
.ed-cal__tray .ed-cal__ico { height: auto; aspect-ratio: 1; min-width: 0; }
.ed-cal__phsel { position: relative; display: block; aspect-ratio: 1; }
.ed-cal__phsel .ed-cal__ph { width: 100%; height: 100%; display: block; }
/* The day's picture on its way: the Photos panel's tile (ring, reason, Retry, x), the size of the row's squares. */
.ed-cal__phup { width: 100%; height: 100%; border-radius: 8px; }
.ed-cal__phup .ed-up__ring { width: 26px; height: 26px; margin: -10px 0 0 -13px; }
.ed-cal__phup .ed-up__pct { font-size: 8.5px; }
.ed-cal__phup .ed-up__x { width: 16px; height: 16px; right: 1px; top: 1px; font-size: 12px; }
.ed-cal__phup .ed-up__retry { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.ed-cal__phup .ed-up__why { font-size: 8.5px; padding: 1px 2px; }
.ed-cal__phx { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--st-ink, #1A1F24); color: #fff;
    font: 700 14px/20px system-ui, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 0 0 2px #fff; }
.ed-cal__tray .ed-cal__addph { min-width: 0; white-space: nowrap; overflow: hidden; padding: 0 8px; }
.ed-cal__phg { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ed-fpop__fine .ed-cal__addph { width: 100%; min-height: 40px; justify-content: center; font-size: 14px; gap: 6px; border: 0; }
.ed-fpop__fine .ed-cal__addph svg { width: 17px; height: 17px; }
@media (min-width: 821px) { .ed-fpop--photos { max-height: min(520px, calc(100% - 20px)); } }
/* The Picture row's Add photos is the Photos panel's own button (.ed-addphotos), compact (owner 18 Oct 2026). */
.ed-cal__tray .ed-addphotos { min-height: 0; height: 100%; margin: 0; font-size: 14px; gap: 6px; border: 0; background: var(--st-primary); color: #fff; }
.ed-cal__tray .ed-addphotos svg { width: 17px; height: 17px; }
/* The day's icon (18 Oct 2026): ONE line of six equal squares -- No icon, cake, heart, star, present, "..." -- in the
   UI's own ink (the event colour is for the board, the day preview and the press only); "..." opens the shared Filter pop-out (.ed-fpop--icons) with the search over every icon, and an icon
   chosen there becomes the face of "..." with a small dots badge. */
.ed-cal__bi { width: 18px; height: 18px; fill: currentColor; stroke: none; flex: 0 0 auto; }
.ed-cal__icons, .ed-cal__ipg { display: grid; gap: 4px; color: var(--st-ink, #1A1F24); }   /* UI ink, never the event colour (white vanished) */
.ed-cal__icons { grid-template-columns: repeat(6, minmax(0, 42px)); gap: 6px; }
.ed-cal__icons .ed-cal__ico { height: auto; aspect-ratio: 1; min-width: 0; }
.ed-cal__icons .ed-cal__bi { width: 20px; height: 20px; }
.ed-cal__ipg { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
.ed-cal__ipg .ed-cal__ico { height: 38px; }
.ed-cal__ico { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0; border: 1px solid var(--st-line); border-radius: 8px;
    background: #fff; color: inherit; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; line-height: 1; }
.ed-cal__ico:hover { border-color: var(--st-ink-3, #6B7480); }
.ed-cal__ico.is-on { box-shadow: 0 0 0 2px var(--st-selected-2, #2563EB); border-color: transparent; }
.ed-cal__ico--none, .ed-cal__ico--more { color: var(--st-ink-2, #3B4652); }
.ed-cal__ico--none .ed-cal__ic { width: 18px; height: 18px; }
.ed-cal__ico--more.is-open { background: #F2F4F7; }
.ed-cal__dots { position: absolute; right: 2px; bottom: 1px; font-style: normal; font-size: 11px; line-height: 1; letter-spacing: -1px; color: var(--st-ink-2, #3B4652); }
.ed-cal__ipq { width: 100%; min-height: 38px; font-size: 14px; }
.ed-cal__ipg { align-content: start; }
.ed-cal__ipg .ed-cal__empty { grid-column: 1 / -1; margin: 4px 0; }
/* "..." in the Filter pop-out's frame: search on top, the grid scrolls, the credit at the foot. */
.ed-fpop__top { padding: 2px 16px 8px; flex: 0 0 auto; }
.ed-fpop__fine { padding: 8px 16px 12px; border-top: 1px solid var(--st-line); font-size: 11.5px; color: var(--st-ink-3, #6B7480); flex: 0 0 auto; }
.ed-fpop__fine a { color: inherit; }
.ed-fpop--icons .ed-fpop__body { padding-top: 2px; }
@media (min-width: 821px) { .ed-fpop--icons { height: min(520px, calc(100% - 20px)); } }
@media (max-width: 820px) {
    .ed-fpop--icons { height: 70dvh; }
    .ed-fpop--icons .ed-cal__ipq { min-height: 44px; font-size: 16px; }   /* 16px: no zoom-in on iOS */
    .ed-fpop--icons .ed-cal__ipg { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
    .ed-fpop--icons .ed-cal__ipg .ed-cal__ico { height: 44px; }
}
.ed-cal__ev .ed-cal__evi { width: 16px; height: 16px; color: var(--ev); }
.ed-cal__prev { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border-radius: 12px; background: #F2F4F7; }
.ed-cal__sq { position: relative; box-shadow: 0 0 0 1px rgba(50, 64, 72, .3), 0 6px 16px -8px rgba(16, 22, 30, .4); background: #fff; line-height: 0; }
.ed-cal__sq.is-moving canvas { cursor: grab; outline: 2px solid #2563EB; outline-offset: -2px; touch-action: none; }
.ed-cal__move { position: absolute; top: -10px; right: -10px; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 15px;
    background: #2563EB; color: #fff; font-weight: 650; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(16, 22, 30, .3); }
.ed-cal__move .ed-cal__ic { width: 14px; height: 14px; }
.ed-cal__zoom { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; }
.ed-cal__zoom[hidden] { display: none; }
.ed-cal__pm { margin: 0; font-size: 12px; color: var(--st-ink-2, #3B4652); text-align: center; line-height: 1.4; }
.ed-cal__pm.is-warn { color: #B42318; }
.ed-cal__also { margin: 0; font-size: 12.5px; color: var(--st-ink-2, #3B4652); }
.ed-cal__del { margin: 0; }
.ed-cal__dell { border: 0; background: none; padding: 6px 0; color: #B42318; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
/* The day editor, 19 Oct 2026: Remove on the top line, a text background with its opacity, the five positions. */
.ed-cal__topl { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.ed-cal__rm { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 4px 0 8px; border: 0; border-radius: 8px; background: none; color: #B42318; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.ed-cal__rm:hover { background: #FDECEA; }
.ed-cal__rm .ed-cal__ic { width: 17px; height: 17px; }
.ed-cal__sw--bg { display: grid; grid-template-columns: repeat(8, minmax(0, 30px)); gap: 4px; }   /* seven (an older event's own colour makes eight): one line in the panel's 275px */
.ed-cal__sw--bg button { width: 100%; height: auto; aspect-ratio: 1; }
.ed-cal__sw .ed-cal__swn { display: grid; place-items: center; background: #fff; color: var(--st-ink-2, #3B4652); }
.ed-cal__swn .ed-cal__ic { width: 16px; height: 16px; }
.ed-cal__op { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 12.5px; color: var(--st-ink-2, #3B4652); }
.ed-cal__op input { flex: 1 1 auto; min-width: 0; accent-color: var(--st-primary); }
.ed-cal__op output { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--st-ink); }
.ed-cal__pos { display: grid; grid-template-columns: repeat(5, minmax(0, 42px)); gap: 6px; }
.ed-cal__pos .ed-cal__ico { height: auto; aspect-ratio: 1; min-width: 0; color: var(--st-ink-2, #3B4652); }
.ed-cal__posg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ed-cal__posg .ed-cal__posd { fill: currentColor; stroke: none; }
.ed-cal__pos .ed-cal__ico.is-on { color: var(--st-selected-2, #2563EB); }
@media (max-width: 820px) { .ed-cal__ta { font-size: 16px; } }   /* 16px: no zoom-in on iOS */
.ed-cal__foot { display: flex; gap: 8px; }
.ed-cal__foot .st-btn { flex: 1 1 0; min-height: 42px; justify-content: center; }
.ed-cal__chg { border: 0; background: none; padding: 0 0 0 4px; color: inherit; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.ed-cal__ok { margin: 4px 0 0; font-size: 12px; color: #15803D; }
.ed-cal-sum { display: contents; }
.ed-cal-sum[hidden] { display: none; }
.ed-warn--info { background: #F2F4F7; border-left-color: #8A94A0; color: var(--st-ink-2, #3B4652); }
.ed-cal-start { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(16, 22, 30, .42); }
.ed-cal-start[hidden] { display: none; }
.ed-cal-start__box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; background: #fff;
    box-shadow: 0 24px 60px -12px rgba(16, 22, 30, .45); }
.ed-cal-start__box h2 { margin: 0; font-size: 18px; }
.ed-cal-start__box > p { margin: 0; font-size: 13.5px; color: var(--st-ink-2, #3B4652); }
.ed-cal-start__go { min-height: 46px; justify-content: center; font-size: 15px; font-weight: 650; }
/* The Preview of a desk calendar (owner 17 + 18 Oct): a tent on a desk -- the back board from the wire down to the desk,
   the BASE lying flat on the desk joining it to the foot of the page block, which leans toward you from the wire-o.
   Every length comes from the page and is set by calDeskBookDraw: --pw/--ph the page, --mm one millimetre, --lean /
   --leanb the page block and the back board, --base the desk under the wire, --zf/--zb/--zm the base's front, back and
   middle (z), --bd its depth, --lb the back board's length, --bx/--bt the board's overhang and thickness. The view
   (rotateX/rotateY on .ed-bk__tent, the orbit) and the light on each face (--l-*) are written by calOrbitApply. */
.ed-bk.is-desk { background: #EAE7E2; }
.ed-bk.is-desk .ed-bk__stage { background: radial-gradient(120% 90% at 50% 30%, #F6F7F8 0%, #ECEEF0 70%, #E4E6E9 100%); }
.ed-bk__book.is-desk { display: block; width: var(--pw, 300px); height: var(--ph, 210px); perspective: none; transition: none; }
.ed-bk__book.is-desk.is-lift { animation: ed-dlift .8s linear; }
@keyframes ed-dlift {
    0% { translate: 0 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    38% { translate: 0 var(--lift, 0px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    100% { translate: 0 0; }
}
.ed-bk__desk { position: absolute; left: 50%; top: var(--hz, 100px); width: 400vw; height: 200vh; margin-left: -200vw; pointer-events: none;
    background: linear-gradient(180deg, #E0DDD8 0, #E4E1DC 22%, #EAE7E2 60%);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .8), inset 0 10px 18px -12px rgba(70, 58, 44, .18); }
.ed-bk__scene { position: absolute; left: 0; top: 0; width: var(--pw, 300px); height: var(--ph, 210px); perspective: var(--persp, 1600px);
    perspective-origin: 50% var(--oy, 100px); }
.ed-bk__scene--sh { pointer-events: none; }
.ed-bk__tent { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% var(--oy, 100px) 0; transform: rotateX(-12deg) rotateY(-12deg); }
.ed-bk__dfront, .ed-bk__easel { position: absolute; left: 0; top: 0; width: var(--pw, 300px); height: var(--ph, 210px); transform-origin: 50% 0 0; transform-style: preserve-3d; }
.ed-bk__dfront { transform: rotateX(var(--lean, 15deg)); }
/* the back board: off-white greyboard (owner 18 Oct), its inside a shade darker (seen through the open sides), its outside lit */
.ed-bk__easel { left: calc(var(--bx, 2px) * -1); width: calc(var(--pw, 300px) + var(--bx, 2px) * 2); height: var(--lb, 210px);
    transform: rotateX(calc(var(--leanb, 18deg) * -1)); }
.ed-bk__eface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ed-bk__eface--in { background: linear-gradient(180deg, #DEDAD3 0%, #D6D2CA 70%, #CFCBC2 100%); }
.ed-bk__eface--out { transform: translateZ(calc(var(--bt, 2px) * -1)) rotateY(180deg); border-radius: 0 0 1px 1px;
    background: linear-gradient(180deg, #EAE7E1 0%, #E4E1DA 60%, #DDD9D2 100%); }
.ed-bk__eedge { position: absolute; top: 0; width: var(--bt, 2px); height: 100%; background: #C9C4BA; }
.ed-bk__eedge--l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.ed-bk__eedge--r { left: calc(100% - var(--bt, 2px)); transform-origin: 100% 50%; transform: rotateY(-90deg); }
/* the base on the desk, its front edge and its two side edges (cut board, a shade lighter); 1px under the page block's
   foot so the two never fight for the same pixels (a dashed seam on phones) */
.ed-bk__dbase { position: absolute; left: calc(var(--bx, 2px) * -1); width: calc(var(--pw, 300px) + var(--bx, 2px) * 2);
    top: calc(var(--base, 200px) + 1px - var(--bd, 100px) / 2); height: var(--bd, 100px); transform: translateZ(var(--zm, 0px)) rotateX(90deg);
    background: linear-gradient(180deg, #DCD8D1 0%, #E3E0D9 70%, #E7E4DE 100%); }
.ed-bk__dbedge { position: absolute; top: calc(var(--base, 200px) + 1px); height: var(--bt, 2px); background: linear-gradient(180deg, #CCC7BE, #BCB7AE); }
.ed-bk__dbedge--f { left: calc(var(--bx, 2px) * -1); width: calc(var(--pw, 300px) + var(--bx, 2px) * 2); transform: translateZ(var(--zf, 50px)); }
.ed-bk__dbedge--l, .ed-bk__dbedge--r { width: var(--bd, 100px); transform: translateZ(var(--zm, 0px)) rotateY(90deg); }
.ed-bk__dbedge--l { left: calc(var(--bx, 2px) * -1 - var(--bd, 100px) / 2); }
.ed-bk__dbedge--r { left: calc(var(--pw, 300px) + var(--bx, 2px) - var(--bd, 100px) / 2); }
/* the light on each face, from calDeskLight / calOrbitApply */
.ed-bk__eface--in::after, .ed-bk__eface--out::after, .ed-bk__eedge::after, .ed-bk__dbase::after, .ed-bk__dbedge::after,
.ed-bk__dedge::after, .ed-bk__hside::after, .ed-bk__hback::after, .ed-bk__wpb::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #11161C; opacity: 0; }
.ed-bk__eface--in::after { opacity: var(--l-in, 0); }
.ed-bk__eface--out::after, .ed-bk__hback::after, .ed-bk__wpb::after { opacity: var(--l-out, 0); }
.ed-bk__dbase::after { opacity: var(--l-base, 0); }
.ed-bk__dbedge--f::after { opacity: var(--l-fe, 0); }
.ed-bk__eedge--l::after, .ed-bk__dbedge--l::after, .ed-bk__dedge--l::after, .ed-bk__hside--l::after { opacity: var(--l-l, 0); }
.ed-bk__eedge--r::after, .ed-bk__dbedge--r::after, .ed-bk__dedge:not(.ed-bk__dedge--l)::after, .ed-bk__hside--r::after { opacity: var(--l-r, 0); }
/* OPAQUE FACES (owner 18 Oct, iPhone: "the calendar preview is semi transparent ... stripy"). Every face is its own
   stacking context, so its shade (::before / ::after), its holes and its turned backs are painted INTO the face. Without
   it WebKit hoists a positioned / z-indexed child into the nearest stacking context -- the 3D scene itself -- as a
   separate plane: the back board's shade was drawn over the page (the board seen "through" it) and a coplanar shade
   fought the page for the same pixels while it turned (the stripes). */
.ed-bk__eface, .ed-bk__eedge, .ed-bk__dbase, .ed-bk__dbedge, .ed-bk__dedge, .ed-bk__dback, .ed-bk__dpg, .ed-bk__eturned,
.ed-bk__hside, .ed-bk__hback, .ed-bk__hshadow, .ed-bk__wpb, .ed-bk__wfront, .ed-bk__wback, .ed-bk__face, .ed-bk__wp, .ed-bk__pg { isolation: isolate; }
.ed-bk__dfront > .ed-bk__dpg::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #11161C; opacity: var(--l-front, 0); }
/* the soft shadow on the desk, darker hard by the base */
.ed-bk__floor { position: absolute; left: -16%; width: 132%; top: calc(var(--base, 200px) + var(--bt, 2px) + 3px - var(--bd, 100px) * .9); height: calc(var(--bd, 100px) * 1.8);
    transform: translateZ(var(--zm, 0px)) rotateX(90deg); pointer-events: none;
    background: radial-gradient(closest-side, rgba(40, 32, 24, .30), rgba(40, 32, 24, .13) 55%, rgba(40, 32, 24, 0)); }
.ed-bk__fshadow { position: absolute; left: calc(var(--bx, 2px) * -1); width: calc(var(--pw, 300px) + var(--bx, 2px) * 2); pointer-events: none;
    top: calc(var(--base, 200px) + var(--bt, 2px) + 2px - var(--bd, 100px) / 2); height: var(--bd, 100px); transform: translateZ(var(--zm, 0px)) rotateX(90deg);
    box-shadow: 0 0 calc(var(--mm, 2px) * 5) calc(var(--mm, 2px) * 1.2) rgba(40, 32, 24, .36); }
/* the page block's edges (the paper stack) down both sides, and its back */
.ed-bk__dedge { position: absolute; top: 0; right: 0; width: var(--th, 6px); height: var(--ph, 210px); transform-origin: 100% 50%; transform: rotateY(-90deg);
    background: linear-gradient(90deg, #E8E6E1 0%, #F6F5F2 45%, #EDEBE6 100%); }
.ed-bk__dedge--l { right: auto; left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.ed-bk__dback { position: absolute; inset: 0; transform: translateZ(calc(var(--th, 6px) * -1)) rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: linear-gradient(180deg, #F3F2EE, #E5E3DD); }
.ed-bk__dpg { position: absolute; inset: 0; display: block; overflow: hidden; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    box-shadow: 0 0 0 .5px rgba(30, 36, 44, .14); }
.ed-bk__dpg.is-none { background: #F4F4F2; }
.ed-bk__dpg img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
/* light from above: the top of the leaning page a touch brighter, its foot a touch darker */
.ed-bk__dpg::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 30%, rgba(20, 26, 34, 0) 70%, rgba(20, 26, 34, .06) 100%); }
/* the back of a page: plain white paper (printed on one side), only a breath of shade */
.ed-bk__dpg.is-paper { background: linear-gradient(180deg, #FFFFFF, #F8F8F6); }
/* the months already turned hang over the back board: their white backs */
.ed-bk__eturned { position: absolute; left: var(--bx, 2px); top: 0; width: var(--pw, 300px); height: var(--ph, 210px);
    background: linear-gradient(180deg, #FFFFFF, #F7F7F5); box-shadow: 0 0 0 .5px rgba(30, 36, 44, .12), 0 1px 3px rgba(30, 36, 44, .10); }
.ed-bk__hback.is-turned { background: linear-gradient(180deg, #FFFFFF, #F7F7F5); }
.ed-bk__dholes, .ed-bk__dwire { position: absolute; left: 0; top: calc(var(--mm, 3px) * -9); width: 100%; height: calc(var(--mm, 3px) * 18); pointer-events: none; }
.ed-bk__dwire { transform: translateZ(2px); }
.ed-bk__eface--out .ed-bk__dholes, .ed-bk__eface--out .ed-bk__dwire { left: var(--bx, 2px); width: var(--pw, 300px); }
.ed-bk__eface--out .ed-bk__dwire { transform: translateZ(1px); }
.ed-bk__dholes svg, .ed-bk__dwire svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ed-bk__dleaf { position: absolute; left: 0; top: 0; width: var(--pw, 300px); height: var(--ph, 210px); transform-origin: 50% 0 0; transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.42, .06, .28, 1); }
.ed-bk__dface { position: absolute; inset: 0; isolation: isolate; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ed-bk__dface--back { transform: rotateY(180deg); }
.ed-bk__dface--back .ed-bk__dpg { box-shadow: none; }
.ed-bk__dshade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(0deg, rgba(20, 26, 34, .34), rgba(20, 26, 34, .06)); }
.ed-bk__dleaf.is-turning .ed-bk__dshade { animation: ed-dshade .8s ease forwards; }
.ed-bk__dleaf.is-turning.is-back .ed-bk__dshade { animation-direction: reverse; }
@keyframes ed-dshade { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ed-bk__dleaf { transition: none; } .ed-bk__dshade { animation: none !important; } .ed-bk__book.is-desk.is-lift { animation: none; } }
/* Turn it around (calOrbit*): a sideways drag spins a calendar Preview; Reset view (or a double click) puts it back. */
.ed-bk.is-orbit .ed-bk__stage { touch-action: none; cursor: grab; }
.ed-bk.is-orbit.is-spinning .ed-bk__stage { cursor: grabbing; }
.ed-bk__reset { position: absolute; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px;
    border: 1px solid var(--st-line); border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--st-ink); cursor: pointer;
    font: 600 13px/1 system-ui, -apple-system, sans-serif; box-shadow: 0 2px 8px rgba(20, 26, 34, .12); }
.ed-bk__reset[hidden] { display: none; }
.ed-bk__reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-bk__orbhint { position: absolute; bottom: 12px; left: 50%; z-index: 3; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; pointer-events: none;
    background: rgba(20, 28, 40, .72); color: #fff; font: 600 12.5px/1.2 system-ui, -apple-system, sans-serif; white-space: nowrap; transition: opacity .5s; }
.ed-bk__orbhint.is-gone { opacity: 0; }
/* The pages bar (calStrip*): one thumb per page (per opening on the double-sided wall calendar); the one on show outlined. */
.ed-bk__strip { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 8px 16px 2px; overscroll-behavior-x: contain;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ed-bk.is-loading .ed-bk__strip { visibility: hidden; }
.ed-bk__strip + .ed-bk__foot { padding-top: 4px; padding-bottom: 10px; }
.ed-bk__th { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 3px 3px 2px; border: 0; border-radius: 6px;
    background: transparent; color: var(--st-ink-3); cursor: pointer; font: 600 11px/1 system-ui, -apple-system, sans-serif; }
.ed-bk__th:first-child { margin-left: auto; }
.ed-bk__th:last-child { margin-right: auto; }
.ed-bk__thp { position: relative; display: block; height: 40px; width: calc(40px * var(--ar, 1.4)); overflow: hidden; border-radius: 2px; background: #fff;
    box-shadow: 0 0 0 1px rgba(20, 26, 34, .14), 0 1px 3px rgba(20, 26, 34, .12); }
.ed-bk__thp img, .ed-bk__thp i { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.ed-bk__thp.is-book { display: flex; }
.ed-bk__thp.is-book .ed-bk__thb { width: 50%; }
.ed-bk__thp.is-book .ed-bk__thb + .ed-bk__thb { box-shadow: inset 1px 0 0 rgba(20, 26, 34, .18); }
.ed-bk__thp.is-wall { background: transparent; box-shadow: none; overflow: visible; }
.ed-bk__thp.is-wall img, .ed-bk__thp.is-wall i { height: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(20, 26, 34, .14); }
.ed-bk__thp.is-wall i.is-none { background: transparent; box-shadow: none; }
.ed-bk__th:hover .ed-bk__thp:not(.is-wall), .ed-bk__th:hover .ed-bk__thp.is-wall img { box-shadow: 0 0 0 1px var(--st-ink-2); }
.ed-bk__th.is-on { color: var(--st-ink); }
.ed-bk__th.is-on .ed-bk__thp:not(.is-wall), .ed-bk__th.is-on .ed-bk__thp.is-wall img { box-shadow: 0 0 0 2px #2563EB; }
.ed-bk__th:focus-visible { outline: 2px solid #2563EB; outline-offset: 1px; }
@media (max-width: 640px) {
    .ed-bk__reset { top: 8px; right: 8px; height: 32px; padding: 0 10px 0 8px; font-size: 12.5px; }
    .ed-bk__orbhint { bottom: 62px; font-size: 12px; }
    .ed-bk__strip { gap: 6px; padding: 6px 10px 0; }
    .ed-bk__thp { height: 32px; width: calc(32px * var(--ar, 1.4)); }
}

/* ══ THE A4 WALL CALENDAR (135; prototype mockups/printwisp/calendar-wall) ══════════════════════════════════════════
   The opening view on the board: the face being edited (the canvas, outlined) with the face it opens against drawn
   above or below it (.ed-wallp, tap to edit) and the wire-o at the seam (.ed-wallc). */
.ed-board.is-wall .canvas-container { z-index: 1; }
.ed-board.is-wallop .canvas-container { box-shadow: 0 0 0 1.5px #2563EB, 0 22px 44px -22px rgba(16, 22, 30, .55); }
.ed-wallp { position: absolute; z-index: 0; overflow: hidden; background: #fff; cursor: pointer; outline: none;
    box-shadow: 0 1px 3px rgba(16, 22, 30, .16), 0 18px 36px -22px rgba(16, 22, 30, .45); }
.ed-wallp[hidden] { display: none; }
.ed-wallp img, .ed-wallp canvas { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.ed-wallp .ed-page__shot { position: absolute; inset: 0; opacity: .7; }
.ed-wallp__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 7px 12px; border-radius: 999px;
    background: rgba(20, 28, 40, .8); color: #fff; font: 600 12.5px/1.2 system-ui, -apple-system, sans-serif; white-space: nowrap;
    opacity: 0; transition: opacity .15s; pointer-events: none; }
.ed-wallp:hover .ed-wallp__hint, .ed-wallp:focus-visible .ed-wallp__hint { opacity: 1; }
.ed-wallp:focus-visible { box-shadow: 0 0 0 2px #2563EB; }
@media (pointer: coarse) {
    .ed-wallp__hint { opacity: .92; top: auto; bottom: 12px; transform: translateX(-50%); }
    .ed-wallp.is-below .ed-wallp__hint { bottom: auto; top: 22px; }
}
.ed-wallc { position: absolute; z-index: 2; pointer-events: none; }
.ed-wallc[hidden] { display: none; }
.ed-wallc svg { display: block; width: 100%; height: 100%; }
.ed-board.is-wallshoot { visibility: hidden; }
/* The caption under the board: UPPER January photo · back of sheet 1 | LOWER January grid · front of sheet 2. */
.ed-cvlab--wall { display: flex; justify-content: center; align-items: flex-start; gap: 8px; pointer-events: auto; }
.ed-wcap { margin-top: 5px; padding: 2px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer;
    font: 500 12px/18px system-ui, -apple-system, sans-serif; color: var(--st-ink-2); white-space: nowrap; }
.ed-wcap i { margin-right: 6px; font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--st-ink-3); }
.ed-wcap span { color: var(--st-ink-3); font-weight: 400; }
.ed-wcap.is-on { border-color: #2563EB; color: var(--st-ink); font-weight: 650; cursor: default; }
button.ed-wcap:hover, button.ed-wcap:focus-visible { background: rgba(37, 99, 235, .08); outline: none; }
@media (max-width: 640px) { .ed-wcap { padding: 2px 6px; font-size: 11.5px; } .ed-wcap span { display: none; } }
/* The strip and All pages, one tile per opening: the upper page over the lower, the wire between. */
.ed-page--wall .ed-page__sheet.ed-wth { width: 44px; height: 62px; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.ed-wth__pg { position: absolute; left: 0; width: 100%; height: 50%; box-sizing: border-box; overflow: hidden; background: #fff; border: 1px solid var(--st-line-2); }
.ed-wth__pg--up { top: 0; }
.ed-wth__pg--lo { bottom: 0; }
.ed-wth__pg.is-none { background: transparent; border: 0; }
.ed-wth__pg img, .ed-wth__pg canvas { display: block; width: 100%; height: 100%; object-fit: fill; }
.ed-wth__pg .ed-page__shot { position: absolute; inset: 0; }
.ed-wth__wire { position: absolute; left: 7%; right: 7%; top: 50%; height: 4px; margin-top: -2px; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(90deg, #4A535C 0 1.4px, transparent 1.4px 3.4px); }
.ed-page--wall.is-active .ed-page__sheet { box-shadow: none; }
.ed-page--wall.is-active .ed-wth__pg:not(.is-none) { border-color: var(--st-accent); box-shadow: 0 0 0 1px var(--st-accent); }
.ed-page--wall:hover .ed-wth__pg:not(.is-none) { border-color: var(--st-ink-2); }
.ed-ov__pic.ed-ov__pic--wall { aspect-ratio: 297 / 420; background: transparent; box-shadow: none; overflow: visible; }
.ed-ov__pic--wall .ed-wth__pg { border: 0; box-shadow: 0 1px 2px rgba(20, 26, 34, .12), 0 4px 14px rgba(20, 26, 34, .10); }
.ed-ov__pic--wall .ed-wth__pg.is-none { box-shadow: none; }
.ed-ov__tile--wall:hover .ed-ov__pic--wall, .ed-ov__tile--wall.is-active .ed-ov__pic--wall { box-shadow: none; }
.ed-ov__tile--wall:hover .ed-wth__pg:not(.is-none), .ed-ov__tile--wall:focus-visible .ed-wth__pg:not(.is-none) { box-shadow: 0 0 0 2px #2563EB; }
.ed-ov__tile--wall.is-active .ed-wth__pg:not(.is-none) { box-shadow: 0 0 0 3px #2563EB; }
/* Preview: hung open on a nail; Next lifts the lower page up over the wire (rotateX about the seam). */
.ed-bk__book.is-wall { display: block; width: var(--pw, 300px); height: calc(var(--ph, 210px) * 2); transition: transform .45s ease; perspective: 5200px; }
.ed-bk__book.is-wall.is-closed { transform: translateY(calc(var(--ph, 210px) * -.5)) !important; }
.ed-bk__book.is-wall.is-backonly { transform: translateY(calc(var(--ph, 210px) * .5)) !important; }
.ed-bk__wp { position: absolute; left: 0; display: block; width: var(--pw, 300px); height: var(--ph, 210px); overflow: hidden; background: #fff; }
.ed-bk__wp img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.ed-bk__wp--up { top: 0; box-shadow: 0 -2px 16px rgba(20, 26, 34, .14); }
.ed-bk__wp--lo { top: var(--ph, 210px); box-shadow: 0 12px 26px rgba(20, 26, 34, .22); }
.ed-bk__wp.is-none { background: transparent; box-shadow: none; }
.ed-bk__hole { position: absolute; aspect-ratio: 1; border-radius: 50%; background: #E1E4E8; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); }
.ed-bk__coil { position: absolute; left: 0; z-index: 4; width: var(--pw, 300px); height: calc(var(--mm, 1px) * 18);
    top: calc(var(--ph, 210px) - var(--mm, 1px) * 9); pointer-events: none; }
.ed-bk__coil svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ed-bk__nail { position: absolute; left: 50%; z-index: 5; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #F4F5F7, #8A9099 60%, #4A5058); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.ed-bk__wleaf { position: absolute; left: 0; z-index: 3; width: var(--pw, 300px); height: var(--ph, 210px); transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.3, .1, .25, 1); }
.ed-bk__wleaf--lo { top: var(--ph, 210px); transform-origin: center top; }
.ed-bk__wleaf--up { top: 0; transform-origin: center bottom; }
.ed-bk__wleaf--lo.is-turning { transform: rotateX(180deg); }
.ed-bk__wleaf--up.is-turning { transform: rotateX(-180deg); }
.ed-bk__wleaf .ed-bk__wp { top: 0; box-shadow: none; }
.ed-bk__face--wback { transform: rotateX(180deg); }
@media (prefers-reduced-motion: reduce) { .ed-bk__wleaf, .ed-bk__book.is-wall { transition: none; } }
.dz-key--wire { width: 16px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(135deg, rgba(60, 74, 90, .28) 0 2px, transparent 2px 5px), #fff; box-shadow: inset 0 0 0 1px rgba(46, 58, 110, .18); }
.dz-key--hole { width: 12px; height: 12px; border-radius: 50%; border: 1px dashed #DC2626; box-sizing: border-box; background: radial-gradient(circle, rgba(60, 74, 90, .6) 0 2px, transparent 2.5px); }
/* ══ THE A4 SINGLE-SIDED WALL CALENDAR (owner 18 Oct 2026) ══════════════════════════════════════════════════════════
   Preview: the page hangs flat on the wall from its wire hanger on a nail; the half-moon is cut out of every page (a mask
   set inline from the product's width and depth); Next flips the page up over the wire and behind (.ed-bk__dleaf, as on
   the desk). --pw/--ph the page, --mm one millimetre. On the board the half-moon is drawn by calMoonGuide. */
.ed-bk.is-hang { background: #E9E5DE; }
.ed-bk.is-hang .ed-bk__stage { background: radial-gradient(110% 80% at 50% 22%, #F6F3EE 0%, #ECE7DF 62%, #E1DBD1 100%); }
.ed-bk__book.is-hang { display: block; width: var(--pw, 300px); height: var(--ph, 420px); perspective: none; transition: none; }
.ed-bk__hscene { position: absolute; left: 0; top: 0; width: var(--pw, 300px); height: var(--ph, 420px); perspective: var(--persp, 1800px); perspective-origin: 50% 45%; }
.ed-bk__hstack { position: absolute; inset: 0; transform-style: preserve-3d; }
.ed-bk__hpg { box-shadow: none; }
.ed-bk__hshadow { position: absolute; inset: 0; transform: translateZ(-1px); pointer-events: none;
    filter: drop-shadow(0 calc(var(--mm, 1px) * 4) calc(var(--mm, 1px) * 4.5) rgba(46, 36, 24, .30)) drop-shadow(0 calc(var(--mm, 1px) * 1) calc(var(--mm, 1px) * 1) rgba(46, 36, 24, .16)); }
/* the shadow follows the page's shape, half-moon notch and all (so the wall in the notch is lit like the wall round it) */
.ed-bk__hshadow > i { position: absolute; inset: 0; background: #DDD8CF; }
.ed-bk__hedge { position: absolute; left: 0; right: 0; top: 100%; height: max(2px, calc(var(--mm, 1px) * 1.1)); pointer-events: none;
    background: linear-gradient(180deg, #E8E5DF, #CFCAC2); }
.ed-bk__hhook { position: absolute; left: 0; width: 100%; top: calc(var(--mm, 1px) * -22); height: calc(var(--mm, 1px) * 28); pointer-events: none; transform: translateZ(1.5px); }
.ed-bk__hhook svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* turned round (calOrbit*): the stack of pages shows its edges and, behind, the back card with the wire-o through it */
.ed-bk__hstack { transform-origin: 50% 45% 0; }
.ed-bk__hshadow { opacity: var(--hsh, 1); }
.ed-bk__hside { position: absolute; top: 0; width: var(--th, 3px); height: var(--ph, 420px); pointer-events: none;
    background: linear-gradient(90deg, #E6E3DD 0%, #F4F2EE 45%, #EAE7E1 100%); }
.ed-bk__hside--l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.ed-bk__hside--r { left: calc(100% - var(--th, 3px)); transform-origin: 100% 50%; transform: rotateY(-90deg); }
.ed-bk__hback { position: absolute; inset: 0; transform: translateZ(calc(var(--th, 3px) * -1)) rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: linear-gradient(180deg, #EEEBE5, #E1DDD5); box-shadow: 0 0 0 .5px rgba(30, 36, 44, .16); }
.ed-bk__dwire.ed-bk__dwire--back { transform: translateZ(calc(var(--th, 3px) * -1 - 1px)) rotateY(180deg); }
/* The double-sided wall calendar turned round: a card -- the opening on its front (flattened, drawn as before), the backs
   of the hung pages on its back. */
.ed-bk__worb { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50% 0; }
.ed-bk__wfront { position: absolute; inset: 0; perspective: 2400px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ed-bk__wback { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ed-bk__wpb { position: absolute; left: 0; width: var(--pw, 300px); height: var(--ph, 210px); background: linear-gradient(180deg, #F1EFEA, #E3E0D9);
    box-shadow: 0 0 0 .5px rgba(30, 36, 44, .14), 0 10px 24px rgba(20, 26, 34, .18); }
.ed-bk__wpb--up { top: 0; }
.ed-bk__wpb--lo { top: var(--ph, 210px); }
.dz-key--moon { width: 16px; height: 9px; box-sizing: border-box; border: 1px dashed #DC2626; border-top: 0; border-radius: 0 0 8px 8px; background: radial-gradient(60% 90% at 50% 0, rgba(60, 74, 90, .6) 0 70%, transparent 72%); }

/* The wire-o in 3D (calRings): one ring a strand, standing across the binding edge; the flat drawing fades (--wf). */
.ed-bk__rings { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform-style: preserve-3d; pointer-events: none; }
.ed-bk__rings > i { position: absolute; top: calc(var(--ry) - var(--rr)); width: calc(var(--rr) * 2); height: calc(var(--rr) * 2);
    margin-left: calc(var(--rr) * -1); border-radius: 50%; transform: translateZ(var(--rz, 0px)) rotateY(90deg);
    background: radial-gradient(closest-side, transparent calc(100% - var(--mm, 1px) * 1.05), var(--wa) calc(100% - var(--mm, 1px) * 1.05),
                var(--wb) calc(100% - var(--mm, 1px) * .55), var(--wc) calc(100% - var(--mm, 1px) * .2), var(--wa) 100%, transparent 100%); }
.ed-bk__orbit .ed-bk__dwire, .ed-bk__orbit .ed-bk__coil { opacity: var(--wf, 1); }
.ed-bk__wrings { position: absolute; left: 0; top: var(--ph, 210px); width: 100%; height: 0; transform-style: preserve-3d; pointer-events: none; }

/* OPTIONS SUB-PANELS USE THEIR ROOM (owner, 18 Oct 2026): each action opens in its own sub-panel, so its controls are
   big, labelled tiles -- icon over a short word, grouped under a small heading -- three to a row on a desk and on a
   phone. Selected = the primary ring, as the shape tiles. Behaviour is the buttons' own, unchanged. */
.ed-tgrp { margin: 0 0 12px; }
.ed-tgrp__l { display: block; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-3); }
.ed-tiles, .ed-align.ed-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-btn.ed-tile, .ed-align .st-btn.ed-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 60px; min-width: 0; padding: 8px 4px; border: 1px solid var(--st-line); border-radius: 10px; background: var(--st-surface);
    color: var(--st-ink); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ed-tile .ed-ico { width: 22px; height: 22px; }
.ed-tile .fas { font-size: 19px; }
.ed-tile > span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-btn.ed-tile:hover:not(:disabled) { border-color: var(--st-ink-3); background: var(--st-surface-2); }
.st-btn.ed-tile.is-on, .st-btn.ed-tile[aria-pressed="true"] { border-color: var(--st-primary); box-shadow: 0 0 0 1px var(--st-primary); background: var(--st-primary-soft); color: var(--st-primary-strong); }
.st-btn.ed-tile:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 1px; }
.st-btn.ed-tile:disabled { opacity: .45; }
/* Text: left / centre / right | bold / italic, the same tiles in one row (the rule between the two questions kept). */
.ed-typerow--tiles { gap: 6px; margin-bottom: 12px; }
.ed-typerow--tiles .st-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 56px; padding: 6px 2px;
    border-radius: 10px; font-size: 12px; font-weight: 600; }
.ed-typerow--tiles .st-btn svg { width: 20px; height: 15px; }
.ed-typerow--tiles .ed-typerow__g { font-size: 17px; line-height: 15px; }
.ed-typerow--tiles .st-btn.is-on { box-shadow: 0 0 0 1px var(--st-primary); }
/* Border position: a thumb-sized segmented row instead of a 28 px strip. */
.ed-bpos__o span { height: 40px; }
@media (max-width: 820px) {
    .st-btn.ed-tile, .ed-align .st-btn.ed-tile { min-height: 64px; font-size: 13px; }
    .ed-typerow--tiles .st-btn { min-height: 58px; }
    .ed-bpos__o span { height: 44px; }
}

/* ══ THE CANVAS AND THE FRAMED PRINT IN 3D (owner 18 Oct 2026; studio-editor.js w3*) ═════════════════════════════════
   A box in CSS 3D on a quiet wall: .ed-w3__obj is the orbit (calOrbit* writes its rotateX/rotateY), every face a canvas
   painted in mm, lit through its <i> by --w3-<face> (w3Light). --w3d the depth, --persp the perspective. */
.ed-w3 { background: #E8E6E2; }
.ed-w3 .ed-bk__stage { background: radial-gradient(120% 90% at 50% 34%, #F5F4F1 0%, #ECEAE6 60%, #E2DFDA 100%); }
.ed-bk__book.is-w3 { display: block; width: var(--pw, 300px); height: var(--ph, 300px); perspective: none; transition: none; }
.ed-w3__scene { position: absolute; inset: 0; perspective: var(--persp, 2000px); perspective-origin: 50% 50%; }
.ed-w3__obj { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50% calc(var(--w3d, 20px) * -.5); }
.ed-w3__f { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; isolation: isolate; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ed-w3__f canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.ed-w3__lt { position: absolute; inset: 0; pointer-events: none; }
.ed-w3__f--str { overflow: visible; }
/* the kraft tape is a little shiny: a soft highlight drifts over it as it turns */
.ed-w3__f.is-sheen::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 250, 238, .16) 46%, rgba(255, 255, 255, 0) 62%);
    background-size: 260% 100%; background-position: var(--w3-shx, 50%) 0; }
.ed-w3.is-frame .ed-w3__f.is-sheen::after { opacity: .5; }
/* the glass over a framed print: one broad reflection and a thin bright streak, sliding with the turn */
.ed-w3__glass { position: absolute; pointer-events: none; opacity: var(--w3-gl, 1);
    background: linear-gradient(112deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, .16) 38%, rgba(255, 255, 255, .05) 47%, rgba(255, 255, 255, 0) 52%,
                rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .22) 63%, rgba(255, 255, 255, 0) 66%),
                linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%);
    background-size: 280% 100%, 100% 100%; background-position: var(--w3-shx, 50%) 0, 0 0; }
/* the shadow it casts on the wall: as wide as it looks from here (w3Light scales it) */
/* a picture blurred once (w3ShadowPaint), not a CSS filter re-run every frame -- iOS left stale bands of it on the wall */
.ed-w3__shadow { position: absolute; display: block; pointer-events: none; transform-origin: 50% 50%; }
/* the foot: what it is, the frame colours, Show the back */
.ed-w3__foot { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.ed-w3__chips { display: inline-flex; gap: 6px; }
.ed-w3__chips:empty { display: none; }
.ed-w3__chip, .ed-w3__flip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--st-line, #D7DCE2);
    border-radius: 999px; background: #fff; color: var(--st-ink, #1B2430); cursor: pointer; font: 600 13px/1 system-ui, -apple-system, sans-serif; }
.ed-w3__chip.is-on { border-color: var(--st-ink, #1B2430); box-shadow: inset 0 0 0 1px var(--st-ink, #1B2430); }
.ed-w3__flip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ed-w3__chip:focus-visible, .ed-w3__flip:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
@media (max-width: 640px) {
    .ed-w3__foot { gap: 8px; padding: 6px 12px 12px; }
    .ed-w3__foot .ed-bk__lab { flex: 1 1 100%; text-align: center; font-size: 13px; }
    .ed-w3__chip, .ed-w3__flip { height: 36px; padding: 0 11px; }
    .ed-w3 .ed-bk__stage { padding-bottom: 0; }
    .ed-w3 .ed-bk__orbhint { bottom: 14px; }
}

/* NO ZOOM ON A TAP INTO A FIELD (owner, 18 Oct 2026, iPhone). iOS Safari zooms the page into any input, select or
   textarea whose text is smaller than 16px, and leaves it zoomed. So on a phone or any touch screen every field
   is 16px -- Fabric's hidden text-editing textarea (an inline font-size: 1px) included, hence !important. The
   viewport is NOT locked (no maximum-scale / user-scalable=no): that would also stop people who need to zoom from
   zooming, and iOS ignores it for pinch anyway. Checkboxes, radios, sliders, colour and file pickers never zoom. */
@media (pointer: coarse), (max-width: 820px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea { font-size: 16px !important; }
}

/* ── Owner, 19 Oct 2026: a quiet save state, Preview named on a phone, and a way out of Preview you cannot miss ── */
/* The save state at the foot of the Product column, small and grey; never on a phone (the column is a sheet there). */
.ed-savefoot { margin: var(--st-s4, 16px) 0 0; padding-top: var(--st-s2, 8px); border-top: 1px solid var(--st-line); }
.ed-savefoot .ed-saved { font-size: 11px; }
@media (max-width: 820px) { .ed-savefoot { display: none; } }
/* Preview, on: a filled dark button that reads "Exit preview" (the same control, so the same place). */
.ed-pvbtn.is-on { background: #141A22; border-color: #141A22; color: #fff; font-weight: 600; box-shadow: 0 0 0 3px color-mix(in srgb, #141A22 18%, transparent); }
@media (min-width: 821px) { .ed-pvbtn.is-on { height: 32px; min-height: 32px; padding: 0 14px; } }
.ed-pvbtn.is-on:hover { background: #000; border-color: #000; }
/* The phone's copy in the brand bar: the word under its cube, and when on, filled in the bar's own ink so it stands out on any brand. */
@media (max-width: 820px) {
    .ed-mbtn--pv { width: auto !important; gap: 5px; padding: 0 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
    .ed-mbtn--pv .ed-pvbtn__t { display: inline; }
    .ed-mbtn--pv.is-on { height: 40px; margin: 0 2px; padding: 0 12px; border-radius: 20px;
        background: var(--brand-bar-ink, #141A22); color: var(--brand-bar-bg, #fff); }
    .ed-mbtn--pv.is-on .ed-pv__ic { display: none; }   /* the words are the button now: room for the logo beside it */
}
@media (max-width: 360px) { .ed-mbtn--pv:not(.is-on) .ed-pvbtn__t { font-size: 11px; } }

/* ── MY DESIGNS (161): the ✕ sheet "Keep this design?" and the emailed-link strip (prototype mockups/printwisp/my-designs
   A3-A9, B2-B3, D5). In the store's own colour (--st-primary); a centred card on a desk, a bottom sheet on a phone. ── */
.ks { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 16px;
      background: rgba(20, 22, 28, .45); }
.ks.is-on { display: flex; }
.ks__box { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 32px); overflow: auto; background: #fff; color: #1B1B1B;
           border-radius: 12px; padding: 22px 22px 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); font-size: 14.5px; line-height: 1.5; }
.ks__box h2 { margin: 0 0 8px; padding-right: 28px; font-size: 20px; line-height: 1.25; font-weight: 650; }
.ks__box > p { margin: 0 0 12px; color: #444; }
.ks svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ks__x { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 18px; background: transparent; color: #555;
         display: grid; place-items: center; cursor: pointer; }
.ks__x:hover { background: #F0F0F0; }
.ks__what { display: flex; gap: 12px; align-items: center; background: #F5F4F1; border-radius: 8px; padding: 10px; margin: 0 0 14px; }
.ks__what b { display: block; font-size: 14px; }
.ks__what span { display: block; font-size: 12.5px; color: #666; }
.ks__th { flex: none; width: 64px; height: 44px; border-radius: 4px; overflow: hidden; background: #DDD; }
.ks__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks__f { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 10px; }
.ks__f input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; min-height: 46px; padding: 0 12px; border: 1px solid #CFCFCF;
               border-radius: 6px; font: inherit; font-size: 16px; font-weight: 400; color: #1B1B1B; background: #fff; }
.ks__f input:focus { outline: 2px solid var(--st-primary, #0F1733); outline-offset: 1px; border-color: transparent; }
.ks__f small { display: block; margin-top: 5px; font-weight: 400; font-size: 12px; color: #777; }
.ks__tick { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 13.5px; color: #333; cursor: pointer; }
.ks__tick input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.ks__btn { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; border: 0; border-radius: 6px;
           background: var(--st-primary, #0F1733); color: var(--st-primary-ink, #fff); font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; }
.ks__btn:hover { background: var(--st-primary-hover, var(--st-primary, #0F1733)); }
.ks__btn:disabled { opacity: .6; cursor: progress; }
.ks__btn--ghost { background: #fff; color: #1B1B1B; border: 1px solid #CFCFCF; }
.ks__btn--ghost:hover { background: #F6F6F6; }
/* "Close · Delete project" (owner, 25 Oct 2026): the secondary way out, in a quiet danger red, one line on a phone */
.ks__btn--del { color: #B42318; border-color: #F1C4BF; white-space: nowrap; }
.ks__btn--del:hover { background: #FEF3F2; }
.ks__btn--del svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ks__sub { text-align: center; font-size: 13px; color: #777; margin: 2px 0 10px !important; }
.ks__lnk { border: 0; padding: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.ks__sub .ks__lnk { color: #1B1B1B; }
.ks__note, .ks__warn { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0 !important; font-size: 12.5px; color: #777; }
.ks__note svg { width: 15px; height: 15px; margin-top: 1px; }
.ks__note--shared { border-top: 1px solid #EEE; padding-top: 10px; }
.ks__warn { background: #FFF6E5; color: #6A4A10; border-radius: 6px; padding: 10px; margin: 0 0 12px !important; font-size: 13px; }
.ks__err { margin: 0 0 10px !important; color: #B42318 !important; font-size: 13px; }
.ks__ok { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.ks__ok > svg { width: 26px; height: 26px; color: #1E7B4C; margin-top: 2px; }
.ks__ok h2 { padding-right: 0; word-break: break-all; }
.ks__ok p { margin: 0; color: #444; }
@media (max-width: 600px) {
  .ks { align-items: flex-end; padding: 0; }
  .ks__box { max-width: none; border-radius: 16px 16px 0 0; max-height: 92dvh; padding: 20px 16px calc(14px + env(safe-area-inset-bottom)); }
}
.ks-strip { position: fixed; left: 0; right: 0; top: 0; z-index: 300; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
            padding: 8px 44px 8px 16px; background: #FFF6E0; color: #5A4310; border-bottom: 1px solid #EBD9A8; font-size: 13px; line-height: 1.4; }
.ks-strip svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ks-strip__t { flex: 1 1 260px; min-width: 0; }
.ks-strip__q { color: #8A6A2A; }
.ks-strip__go { font-weight: 650; }
.ks-strip__btn { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--st-primary, #0F1733); color: var(--st-primary-ink, #fff);
                 font: inherit; font-weight: 650; cursor: pointer; }
.ks-strip__x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: inherit;
               display: grid; place-items: center; cursor: pointer; }
@media (max-width: 600px) { .ks-strip__q { display: none; } }
.ks__lab { display: block; }
.ks__btn--ghost + .ks__btn--ghost { margin-top: 0; }

/* ── BUILD MY BOOK (24 Oct 2026, Fable's review): the Photos row, the sheet, the slim bar, the nudge, the dots ───────── */
.ed-bmb [hidden], .ed-bmb-row[hidden], .ed-bmb-bar [hidden] { display: none !important; }
.ed-bmb-row { display: grid; gap: 4px; margin: 0; }
.ed-bmb-row__b { width: 100%; justify-content: center; gap: 8px; min-height: 42px; font-weight: 650; }
.ed-bmb-row__b svg { width: 17px; height: 17px; fill: currentColor; stroke: none; flex: none; }
/* THE FOOT OF PHOTOS (owner, 25 Oct 2026): Fill all | Clear all on one line, Quick Build under them, always in view --
   the panel's foot (.ed-fly__foot: pinned to the bottom of the scroller, so on a phone sheet too) */
.ed-pool-foot { flex: none; display: grid; gap: 8px; }
.ed-pool-foot[hidden] { display: none; }
.ed-pool-foot .ed-panel-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding-top: 0; border-top: 0; }
.ed-pool-foot .ed-panel-tools[hidden] { display: none; }
.ed-pool-foot .ed-panel-tools .st-btn { min-width: 0; min-height: 36px; padding: 0 8px; font-size: 13px; gap: 6px; justify-content: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A PHONE (owner, 25 Oct 2026: "at least 3 rows of photos"): the foot is ONE 44 px row -- Fill and Clear as icon buttons
   (their names are their labels and tooltips), Quick Build taking the rest -- and once there are photos the drop zone
   goes (nobody drags files on a phone; Add photos is the way in). */
@media (max-width: 820px) {
    .ed-pool-foot { display: flex; align-items: flex-start; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
    .ed-pool-foot .ed-panel-tools { display: flex; flex: none; gap: 6px; }
    .ed-pool-foot .ed-panel-tools .st-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
    .ed-pool-foot .ed-pool-tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ed-pool-foot .ed-bmb-row { flex: 1 1 auto; min-width: 0; }
    .ed-pool-foot .ed-bmb-row__b { min-height: 44px; height: 44px; }
    .ed-fly__panel[data-panel="pictures"]:has(.ed-pool > *) #ed-pool-drop { display: none; }
    /* six photos a row and a slimmer Add photos, so three rows show above the foot at 390 x 844 */
    .ed-fly .ed-fly__panel[data-panel="pictures"] > .ed-pool { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ed-fly__panel[data-panel="pictures"] > .ed-addphotos { min-height: 40px; height: 40px; margin-bottom: 2px; }
}
.ed-bmb-row__h { margin: 0; font-size: 12px; color: var(--st-ink-3); text-align: center; }
.ed-bmb__link { border: 0; background: none; padding: 0 2px; font: inherit; font-weight: 600; color: inherit; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; min-height: 28px; }
.ed-bmb { border: 0; padding: 0; border-radius: 12px; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
    background: var(--st-surface, #fff); color: var(--st-ink, #1d232b); box-shadow: 0 12px 40px rgba(20,26,34,.25); overflow: hidden; }
.ed-bmb[open] { display: flex; }
.ed-bmb::backdrop { background: rgba(20,26,34,.45); }
.ed-bmb__in { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.ed-bmb__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 4px; }
.ed-bmb__h { margin: 0; font-size: 18px; flex: 1; }
.ed-bmb__x { width: 36px; height: 36px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--st-ink-3); border-radius: 18px; }
.ed-bmb__body { padding: 4px 16px 12px; overflow: auto; display: grid; gap: 14px; align-content: start; }
.ed-bmb__lead { margin: 0; font-size: 13px; color: var(--st-ink-3, #6b7480); }
.ed-bmb__q { display: grid; gap: 8px; }
.ed-bmb__qh { margin: 0; font-size: 14px; }
.ed-bmb__styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ed-bmb__style { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 8px; border: 1px solid var(--st-line, #E3E7EC);
    border-radius: 8px; background: var(--st-surface, #fff); cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.ed-bmb__style svg { width: 100%; height: auto; margin-bottom: 4px; }
.ed-bmb__style svg rect { fill: #fff; stroke: #B8C0CA; stroke-width: 1; }
.ed-bmb__style svg rect.f { fill: #C9D2DC; stroke: none; }
.ed-bmb__style b { font-size: 14px; }
.ed-bmb__n { font-size: 12px; font-weight: 600; color: var(--st-ink-2, #3b4450); }
.ed-bmb__style small { font-size: 11px; color: var(--st-ink-3, #8B95A3); line-height: 1.3; }
.ed-bmb__style.is-on { border-color: var(--st-primary, #0F1733); box-shadow: 0 0 0 1px var(--st-primary, #0F1733) inset; }
.ed-bmb__style.is-on svg rect.f { fill: #7D8DA3; }
.ed-bmb__pv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 100%; margin-bottom: 4px; }
.ed-bmb__pv:not([hidden]) + svg { display: none; }
.ed-bmb__mini { position: relative; display: block; aspect-ratio: var(--a, 2); background: var(--bg, #fff); box-shadow: 0 0 0 1px #D5DBE2; overflow: hidden; border-radius: 1px; }
.ed-bmb__mini::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(0,0,0,.12); }
.ed-bmb__mini.is-page::after { display: none; }
.ed-bmb__mini i { position: absolute; background: #C9D2DC center / cover no-repeat; }
.ed-bmb__alt { margin: 0; font-size: 12px; color: var(--st-ink-3, #6b7480); }
.ed-bmb__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-bmb__seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--st-line, #E3E7EC); border-radius: 18px;
    background: var(--st-surface, #fff); font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.ed-bmb__seg button.is-on { border-color: var(--st-primary, #0F1733); box-shadow: 0 0 0 1px var(--st-primary, #0F1733) inset; font-weight: 600; }
.ed-bmb__seg i { width: 14px; height: 14px; border-radius: 7px; box-shadow: 0 0 0 1px #C3CAD3; flex: none; }
.ed-bmb__seg i.is-photos { background: conic-gradient(#E9DFD2 0 50%, #2C251F 0); }
.ed-bmb__tick { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 32px; cursor: pointer; }
.ed-bmb__tick input { width: 18px; height: 18px; margin: 0; flex: none; }
.ed-bmb__step { display: flex; align-items: center; gap: 10px; }
.ed-bmb__sb { width: 40px; height: 40px; flex: none; border: 1px solid var(--st-line, #E3E7EC); border-radius: 20px; background: var(--st-surface, #fff);
    font: 600 20px/1 inherit; cursor: pointer; color: inherit; }
.ed-bmb__sb:disabled { opacity: .4; cursor: default; }
.ed-bmb__st { flex: 1; font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.ed-bmb__work { display: grid; gap: 0; padding: 6px 10px; border-radius: 8px; background: var(--st-surface-2, #FAFBFC); }
.ed-bmb__warn { margin: 0; padding: 8px 10px; border-radius: 8px; background: #FFF6E5; color: #6B4A00; font-size: 13px; }
.ed-bmb__foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px 14px; border-top: 1px solid var(--st-line, #E3E7EC); }
.ed-bmb__foot .st-btn { min-height: 44px; }
/* the slim bar over the board, after a build */
.ed-bmb-bar { position: absolute; top: 8px; left: 0; right: 0; margin: 0 auto; width: max-content; z-index: 6; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 2px 8px; max-width: calc(100% - 24px); padding: 4px 6px 4px 12px; border-radius: 18px; white-space: nowrap;
    background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(20,26,34,.16); font-size: 13px; color: var(--st-ink, #1d232b); }
.ed-bmb-bar[hidden] { display: none; }
.ed-bmb-bar__t { font-weight: 600; }
.ed-bmb-sm { display: none; }
@media (min-width: 821px) { .ed-bmb-bar { flex-wrap: nowrap; } }
.ed-bmb-bar__sep { width: 1px; height: 16px; background: var(--st-line, #E3E7EC); display: inline-block; margin: 0 4px; vertical-align: middle; }
.ed-bmb-bar__g { display: inline-flex; align-items: center; gap: 4px; }
.ed-bmb-bar__x { width: 28px; height: 28px; border: 0; background: none; border-radius: 14px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--st-ink-3); }
/* the nudge, when photos land on an empty book */
.ed-bmb-nudge { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 7; width: min(420px, calc(100% - 24px));
    padding: 12px 14px; border-radius: 12px; background: var(--st-surface, #fff); box-shadow: 0 8px 28px rgba(20,26,34,.22); display: grid; gap: 10px; }
.ed-bmb-nudge[hidden] { display: none; }
.ed-bmb-nudge__t { margin: 0; font-size: 14px; font-weight: 600; }
.ed-bmb-nudge__a { display: flex; gap: 8px; flex-wrap: wrap; }
.ed-bmb-nudge__a .st-btn { min-height: 40px; flex: 1 1 auto; }
@media (max-width: 820px) {
    .ed-bmb { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
    .ed-bmb__in { height: 100%; }
    .ed-bmb__body { flex: 1; padding: 4px 16px 12px; }
    .ed-bmb__foot { position: sticky; bottom: 0; background: var(--st-surface, #fff); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
    .ed-bmb__foot .st-btn { flex: 1 1 0; }
    .ed-bmb__styles { gap: 6px; }
    .ed-bmb__style { padding: 6px; }
    .ed-bmb__style small { display: none; }
    .ed-bmb-bar { top: 6px; font-size: 12px; gap: 0 4px; padding: 2px 2px 2px 10px; flex-wrap: nowrap; }
    .ed-bmb-bar .ed-bmb-lg { display: none; }
    .ed-bmb-bar .ed-bmb-sm { display: inline; }
    .ed-bmb-bar__sep { margin: 0 2px; }
}

/* ══ DESIGNER CHECKS, YOUR BOOK, PRODUCT OPTIONS & ADD-ONS (owner-approved prototype mockups/printwisp/designer-checks, 29 Oct 2026) ══ */
/* NO RIGHT COLUMN FOR A SHOPPER: the board gets the width. The column stays in the page, out of sight -- its controls are what
   the new popover, modal and checks write through. The merchant's appears only while something is selected (decision 3). */
.ed-editor--rail[data-skin="customer"] { grid-template-columns: var(--ed-rail-w, 84px) var(--ed-fly, 0px) minmax(0, 1fr); }
.ed-editor--rail[data-skin="customer"] > .st-editor__right { display: none !important; }
@media (min-width: 1151px) {
    .ed-editor--rail[data-skin="author"]:not(.has-sel) { grid-template-columns: var(--ed-rail-w, 84px) var(--ed-fly, 0px) minmax(0, 1fr); }
    .ed-editor--rail[data-skin="author"]:not(.has-sel) > .st-editor__right { display: none; }
}
.ed-editor--rail[data-skin="author"] > .st-editor__right #ed-book,
.ed-editor--rail[data-skin="author"] > .st-editor__right #ed-fields-sec,
.ed-editor--rail[data-skin="author"] > .st-editor__right #ed-pcheck,
.ed-editor--rail[data-skin="author"] > .st-editor__right #ed-accept-slot { display: none !important; }

/* The details icon: a book or a box, with the count of things to check (amber), red when something must be fixed. */
.ed-det { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.st-bar .ed-det.st-btn { width: 36px; min-width: 36px; height: 28px; min-height: 28px; padding: 0; }
.ed-det__ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ed-det.is-on { background: color-mix(in srgb, currentColor 12%, transparent); }
.ed-det__dot { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; box-sizing: border-box;
               font: 700 10.5px/18px var(--st-font, system-ui, sans-serif); text-align: center; color: #fff; background: #D92D20;
               box-shadow: 0 0 0 2px var(--brand-bar-bg, var(--st-surface, #fff)); pointer-events: none; }
.ed-det__dot.is-w { background: #E59A1D; color: #1A140C; }
.ed-mbtn.ed-det .ed-det__dot { top: 3px; right: 0; }
.ed-brandbar .ed-mbtn.ed-det { display: none; }
@media (max-width: 820px) { .ed-brandbar .ed-mbtn.ed-det { display: inline-flex; } }
/* "● Saved" beside the name, quiet (prototype) */
.ed-prodbar .ed-titleblk { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; }
.ed-prodbar .ed-titleblk .ed-saved { margin-top: 0; flex: 0 0 auto; }
.ed-mbtn--save { position: relative; }
.ed-sdot.ed-saved { position: absolute; top: 9px; right: 8px; width: 8px; height: 8px; padding: 0; margin: 0; border-radius: 50%; background: #22A35A;
                    box-shadow: 0 0 0 2px var(--brand-bar-bg, #fff); overflow: visible; }
.ed-sdot.ed-saved.is-busy { background: #8B95A3; } .ed-sdot.ed-saved.is-dirty, .ed-sdot.ed-saved.is-ask { background: #E0A100; } .ed-sdot.ed-saved.is-bad { background: #D93B30; }
/* the prototype's eye on Preview */
.ed-pv__ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* YOUR BOOK, the popover */
.ed-pop { position: fixed; z-index: 120; width: 312px; box-sizing: border-box; background: var(--st-surface, #fff); color: var(--st-ink, #1d232b);
          border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06); padding: 14px 16px 12px; font-size: 13px; }
.ed-pop::before { content: ""; position: absolute; top: -6px; left: calc(var(--arrow, 260px) - 6px); width: 12px; height: 12px; background: inherit;
                  transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(0,0,0,.06); }
.ed-pop__nm { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.ed-pop__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-pop__ren { border: 0; background: none; color: var(--st-ink-3, #8C949C); padding: 4px; display: grid; cursor: pointer; border-radius: 6px; }
.ed-pop__ren svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ed-pop__p { color: var(--st-ink-2, #5D6670); margin-top: 2px; }
.ed-pop__price { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0 10px; padding-top: 10px; border-top: 1px solid var(--st-line, #E3E6E8); }
.ed-pop__price b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ed-pop__price span { font-size: 12px; color: var(--st-ink-3, #8C949C); }
.ed-pop__sep { height: 1px; background: var(--st-line, #E3E6E8); margin: 12px 0 10px; }
.ed-pop__opt { width: 100%; justify-content: center; gap: 8px; min-height: 40px; }
.ed-pop__opt svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ed-pop__chk { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--st-surface-2, #F5F6F7); }
.ed-pop__chk i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #2FB36E; }
.ed-pop__chk.is-w i { background: #E59A1D; } .ed-pop__chk.is-b i { background: #D92D20; }
.ed-pop__chk span { flex: 1; }
.ed-pop__lnk { border: 0; background: none; font: inherit; font-weight: 700; text-decoration: underline; padding: 4px 0; cursor: pointer; color: inherit; }
.ed-pop__marks:not(:empty) { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--st-line, #E3E6E8); }
.ed-pop__ft { margin-top: 9px; font-size: 11.5px; color: var(--st-ink-3, #8C949C); }
@media (max-width: 820px) { .ed-pop { width: auto; left: 8px; right: 8px; } }

/* PRODUCT OPTIONS & ADD-ONS */
.ed-ob { position: fixed; inset: 0; z-index: 130; background: rgba(16,18,20,.42); display: flex; align-items: center; justify-content: center; }
.ed-ob[hidden] { display: none; }
.ed-ob__box { background: var(--st-surface, #fff); color: var(--st-ink, #1d232b); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
              width: min(920px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 32px)); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; }
.ed-ob__head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--st-line, #E3E6E8); }
.ed-ob__head h2 { margin: 0; font-size: 18px; flex: 1; }
.ed-ob__x { border: 0; background: var(--st-surface-2, #F5F6F7); width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.ed-ob__main { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 0; }
.ed-ob__nav { border-right: 1px solid var(--st-line, #E3E6E8); padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.ed-ob__nav button { border: 0; background: none; text-align: left; padding: 8px 12px; border-radius: 8px; display: flex; flex-direction: column; cursor: pointer; color: inherit; font: inherit; }
.ed-ob__nav button b { font-weight: 600; font-size: 14px; }
.ed-ob__nav button span { font-size: 12px; color: var(--st-ink-3, #8C949C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-ob__nav button.is-on { background: #EEF1F4; }
.ed-ob__c { padding: 18px 22px; overflow: auto; }
.ed-ob__h { margin: 0; font-size: 17px; }
.ed-ob__why { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; color: var(--st-ink-2, #5D6670); margin: 5px 0 14px; }
.ed-ob__why svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--st-ink-3, #8C949C); stroke-width: 1.7; stroke-linecap: round; }
.ed-ob__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ed-ob__card { position: relative; border: 1.5px solid var(--st-line, #E3E6E8); border-radius: 10px; background: #fff; padding: 0; text-align: left; display: flex; flex-direction: column;
               overflow: hidden; cursor: pointer; color: inherit; font: inherit; min-height: 64px; }
.ed-ob__card:hover { border-color: #CDD2D6; }
.ed-ob__card.is-on { border-color: var(--st-ink, #1D2327); box-shadow: 0 0 0 1px var(--st-ink, #1D2327); }
.ed-ob__pic { aspect-ratio: 4 / 3; background: var(--st-surface-2, #F5F6F7); display: grid; place-items: center; overflow: hidden; }
.ed-ob__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-ob__sw { display: block; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.ed-ob__cb { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 1px; }
.ed-ob__cb b { font-size: 13.5px; }
.ed-ob__ln { font-size: 12px; color: var(--st-ink-2, #5D6670); }
.ed-ob__pr { font-size: 12.5px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ed-ob__pr.is-inc { color: #1E7F4F; font-weight: 600; } .ed-ob__pr.is-wait { color: var(--st-ink-3, #8C949C); font-weight: 400; } .ed-ob__pr.is-down { color: #1E7F4F; }
.ed-ob__tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--st-ink, #1D2327); display: grid; place-items: center; }
.ed-ob__tick svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-ob__card.is-nopic .ed-ob__tick { top: 50%; transform: translateY(-50%); }
.ed-ob__card.is-nopic .ed-ob__cb { padding-right: 38px; }
.ed-ob__step { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.ed-ob__step button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #CDD2D6; background: #fff; display: grid; place-items: center; cursor: pointer; color: inherit; }
.ed-ob__step button:disabled { opacity: .35; cursor: default; }
.ed-ob__step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ed-ob__step b { font-size: 24px; font-variant-numeric: tabular-nums; min-width: 120px; text-align: center; }
.ed-ob__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ed-ob__chips button { border: 1px solid #CDD2D6; background: #fff; border-radius: 16px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; min-height: 34px; }
.ed-ob__chips button.is-on { background: var(--st-ink, #1D2327); color: #fff; border-color: var(--st-ink, #1D2327); }
.ed-ob__chips small { opacity: .7; margin-left: 4px; }
.ed-ob__lnk { border: 0; background: none; padding: 0; text-decoration: underline; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.ed-ob__fields .ed-field { display: grid; gap: 4px; margin-bottom: 12px; }
.ed-ob__fields .st-input, .ed-ob__fields .st-select { min-height: 42px; font-size: 15px; }
.ed-ob__sum { display: grid; grid-template-columns: auto 1fr auto; border: 1px solid var(--st-line, #E3E6E8); border-radius: 10px; overflow: hidden; font-size: 14px; }
.ed-ob__sum > div { padding: 10px 14px; border-top: 1px solid var(--st-line, #E3E6E8); }
.ed-ob__sum > div:nth-child(-n+3) { border-top: 0; }
.ed-ob__k { color: var(--st-ink-2, #5D6670); } .ed-ob__v { font-weight: 600; } .ed-ob__p { text-align: right; font-variant-numeric: tabular-nums; color: var(--st-ink-2, #5D6670); }
.ed-ob__sum .is-tot { font-weight: 700; color: var(--st-ink, #1D2327); background: var(--st-surface-2, #F5F6F7); }
.ed-ob__foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--st-line, #E3E6E8); }
.ed-ob__tot { flex: 1; font-size: 13px; color: var(--st-ink-2, #5D6670); }
.ed-ob__tot b { font-size: 17px; color: var(--st-ink, #1D2327); margin-right: 6px; font-variant-numeric: tabular-nums; }
.ed-ob__tot em { font-style: normal; font-weight: 700; } .ed-ob__tot em.is-up { color: #9A5B00; } .ed-ob__tot em.is-down { color: #1E7F4F; }
.ed-ob__foot .st-btn { min-height: 40px; }
@media (max-width: 820px) {
    .ed-ob { align-items: stretch; }
    .ed-ob__box { width: 100%; height: 100dvh; border-radius: 0; grid-template-rows: auto auto minmax(0,1fr) auto; }
    .ed-ob__main { display: contents; }
    .ed-ob__nav { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--st-line, #E3E6E8); overflow-x: auto; padding: 8px 10px; gap: 6px; scrollbar-width: none; }
    .ed-ob__nav::-webkit-scrollbar { display: none; }
    .ed-ob__nav button { flex: none; flex-direction: row; padding: 6px 12px; border: 1px solid #CDD2D6; border-radius: 16px; min-height: 36px; align-items: center; }
    .ed-ob__nav button span { display: none; }
    .ed-ob__nav button b { font-size: 13px; }
    .ed-ob__nav button.is-on { background: var(--st-ink, #1D2327); border-color: var(--st-ink, #1D2327); color: #fff; }
    .ed-ob__c { padding: 14px; }
    .ed-ob__cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ed-ob__head { padding: 10px 14px; } .ed-ob__head h2 { font-size: 16px; }
    .ed-ob__foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ADD TO CART'S QUESTION */
.ed-rv { border: 0; border-radius: 12px; padding: 0; width: min(480px, calc(100vw - 24px)); background: var(--st-surface, #fff); color: var(--st-ink, #1d232b);
         box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ed-rv::backdrop { background: rgba(16,18,20,.42); }
.ed-rv__in { margin: 0; padding: 20px 22px 18px; }
.ed-rv__h { margin: 0 0 8px; font-size: 19px; }
.ed-rv__p { margin: 0 0 12px; color: var(--st-ink-2, #5D6670); font-size: 14px; }
.ed-rv__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.ed-rv__list li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.ed-rv__list i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ed-rv__list i.is-w { background: #E59A1D; } .ed-rv__list i.is-b { background: #D92D20; }
.ed-rv__list b { font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.ed-rv__list span { color: var(--st-ink-2, #5D6670); }
.ed-rv__acc { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 12px; border: 1px solid var(--st-line, #E3E6E8); border-radius: 8px; cursor: pointer; margin-bottom: 4px; }
.ed-rv__acc input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.ed-rv__acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ed-rv__acts .st-btn { min-height: 40px; }
/* Continue anyway turns GREEN once the shopper has ticked "I have reviewed..." (owner, 29 Oct 2026): the way on, at a glance */
.ed-rv__acts [data-rv="anyway"]:not(:disabled) { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.ed-rv__acts [data-rv="anyway"]:not(:disabled):hover, .ed-rv__acts [data-rv="anyway"]:not(:disabled):focus-visible { background: #18703D; border-color: #18703D; color: #fff; }
.ed-rv__sp { flex: 1; }
@media (max-width: 820px) {
    .ed-rv { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; }
    .ed-rv__acts { flex-direction: column-reverse; }
    .ed-rv__acts .st-btn { width: 100%; min-height: 44px; } .ed-rv__sp { display: none; }
}

/* FINAL CHECKS */
.ed-chk__body { display: flex; flex-direction: column; min-height: 100%; }
.ed-chk__sum { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 10px; border-bottom: 1px solid var(--st-line, #E3E6E8); }
.ed-chk__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border-radius: 12px; padding: 3px 10px; }
.ed-chk__pill i { width: 7px; height: 7px; border-radius: 50%; }
.ed-chk__pill.is-b { background: #FDECEA; color: #B42318; } .ed-chk__pill.is-b i { background: #D92D20; }
.ed-chk__pill.is-w { background: #FFF4E0; color: #9A5B00; } .ed-chk__pill.is-w i { background: #E59A1D; }
.ed-chk__pill.is-ok { background: #E4F3EA; color: #1E7F4F; } .ed-chk__pill.is-ok i { background: #2FB36E; }
.ed-chk__list { flex: 1; padding: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.ed-chk__grp { font-size: 12px; font-weight: 700; color: var(--st-ink-3, #8C949C); margin: 4px 2px 0; }
.ed-chk__info { font-size: 12.5px; color: var(--st-ink-2, #5D6670); margin: 0; }
.ed-chk__clear { text-align: center; padding: 26px 10px; color: var(--st-ink-2, #5D6670); }
.ed-chk__clear b { display: block; color: var(--st-ink, #1d232b); font-size: 15px; margin-bottom: 2px; }
.ed-chk__ok { width: 44px; height: 44px; border-radius: 50%; background: #E4F3EA; display: grid; place-items: center; margin: 0 auto 10px; }
.ed-chk__ok svg { width: 22px; height: 22px; fill: none; stroke: #1E7F4F; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ed-chk__foot { position: sticky; bottom: calc(var(--st-s3, 12px) * -1); background: var(--st-surface, #fff); padding: 10px 0 2px; border-top: 1px solid var(--st-line, #E3E6E8); }
.ed-chk__cart { width: 100%; justify-content: center; min-height: 42px; }
.ed-ic { border: 1px solid var(--st-line, #E3E6E8); border-radius: 9px; padding: 10px 10px 10px 12px; display: grid; grid-template-columns: auto minmax(0,1fr) auto;
         gap: 2px 10px; cursor: pointer; background: #fff; text-align: left; }
.ed-ic:hover { border-color: #CDD2D6; }
.ed-ic.is-on { border-color: #2F6FEB; box-shadow: 0 0 0 1px #2F6FEB; cursor: default; }
.ed-ic__lv { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 12px/1 system-ui, sans-serif; grid-column: 1; grid-row: 1 / span 2; margin-top: 1px; }
.ed-ic__lv.is-w { background: #E59A1D; color: #1A140C; } .ed-ic__lv.is-b { background: #D92D20; }
.ed-ic__t { grid-column: 2; grid-row: 1; font-size: 13.5px; font-weight: 600; }
.ed-ic__hq { grid-column: 3; grid-row: 1; border: 1px solid #CDD2D6; background: #fff; width: 22px; height: 22px; border-radius: 50%; font: 700 11px/1 system-ui, sans-serif;
             color: var(--st-ink-2, #5D6670); display: grid; place-items: center; padding: 0; cursor: pointer; }
.ed-ic__cnt { grid-column: 2 / 4; font-size: 12px; color: var(--st-ink-2, #5D6670); }
.ed-ic__cnt b { color: var(--st-ink, #1d232b); }
.ed-ic__pl { grid-column: 2; justify-self: start; font: inherit; font-size: 12.5px; text-decoration: underline; border: 0; background: none; padding: 2px 0; cursor: pointer; color: inherit; }
.ed-ic__hp { grid-column: 2 / 4; font-size: 12px; color: var(--st-ink-2, #5D6670); background: var(--st-surface-2, #F5F6F7); border-radius: 6px; padding: 6px 8px; margin-top: 6px; }
.ed-ic__full { display: block; margin-top: 4px; color: var(--st-ink-3, #8C949C); }
.ed-ic__step { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.ed-ic__step span { flex: 1; }
.ed-ic__step button, .ed-chkmini__nav button { border: 1px solid #CDD2D6; background: #fff; width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; padding: 0; cursor: pointer; color: inherit; }
.ed-ic__step svg, .ed-chkmini__nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-ic__pages { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px; max-height: 92px; overflow: auto; margin-top: 6px; padding: 2px; }
.ed-ic__pages button { border: 1px solid var(--st-line, #E3E6E8); background: #fff; border-radius: 5px; font: inherit; font-size: 11.5px; padding: 2px 7px; cursor: pointer; color: inherit; min-height: 24px; }
.ed-ic__pages button.is-on { border-color: #2F6FEB; color: #2F6FEB; font-weight: 700; }
.ed-ic__acts { grid-column: 2 / 4; display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ed-ic__acts .st-btn { min-height: 32px; font-size: 12.5px; }
/* a phone: the picked item as one bar over the rail */
.ed-chkmini { position: fixed; left: 8px; right: 8px; bottom: calc(56px + 10px + env(safe-area-inset-bottom, 0px)); z-index: 45; background: #fff; border-radius: 12px;
              box-shadow: 0 8px 26px rgba(0,0,0,.22); padding: 8px 8px 8px 10px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 4px 8px; align-items: center; }
.ed-chkmini[hidden] { display: none; }
.ed-chkmini .ed-ic__lv { grid-row: 1; width: 18px; height: 18px; font-size: 11px; }
.ed-chkmini > b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-chkmini__nav { display: flex; gap: 4px; }
.ed-chkmini__nav button { width: 40px; height: 40px; }
.ed-chkmini__row { grid-column: 1 / 4; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--st-ink-2, #5D6670); }
.ed-chkmini__row .st-btn { min-height: 40px; font-size: 12.5px; }
.ed-chkmini__sp { flex: 1; }
.ed-chkmini__x { border: 0; background: none; width: 40px; height: 40px; font-size: 22px; cursor: pointer; color: var(--st-ink-3, #8C949C); }

/* SHUFFLE LAYOUT in the toolbar: "3 of 12" beside it once pressed */
.ed-shuffle__n { font-size: 11.5px; color: var(--st-ink-3, #8C949C); font-variant-numeric: tabular-nums; }
.ed-shuffle__n:empty { display: none; }
@media (max-width: 820px) { .ed-shuffle__n { display: none; } .ed-topbar #ed-shuffle { order: 1; } .ed-brandbar .ed-mbtn--pv:not(.is-on) .ed-pvbtn__t { display: none; } }

/* PHOTOS: a ✕ on every photo, a tick to select several */
.ed-pool__item { position: relative; }
.ed-pool__x, .ed-pool__chk { position: absolute; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
                             box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.ed-pool__x { top: 3px; right: 3px; background: rgba(20,26,34,.72); color: #fff; font-size: 17px; line-height: 1; }
.ed-pool__x:hover { background: #B42318; }
.ed-pool__chk { top: 3px; left: 3px; background: rgba(255,255,255,.92); border: 1.5px solid rgba(20,26,34,.45); box-sizing: border-box; opacity: 0; transition: opacity .12s; }
.ed-pool__chk svg { width: 14px; height: 14px; fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-pool__item:hover .ed-pool__chk, .ed-pool__item:focus-within .ed-pool__chk, .ed-pool.is-selecting .ed-pool__chk { opacity: 1; }
.ed-pool__item.is-sel .ed-pool__chk { background: #2F6FEB; border-color: #2F6FEB; opacity: 1; }
.ed-pool__item.is-sel .ed-pool__chk svg { stroke: #fff; }
.ed-pool__item.is-sel { outline: 2px solid #2F6FEB; outline-offset: 1px; }
.ed-pool.is-selecting .ed-pool__x { display: none; }
.ed-pool__item .ed-pool__count { z-index: 1; }
.ed-pool-selbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0 8px; position: sticky; top: 0; z-index: 3; background: var(--st-surface, #fff); }
.ed-pool-selbar[hidden] { display: none; }
.ed-pool-selbar__n { flex: 1 1 100%; font-size: 12.5px; font-weight: 600; }
.ed-pool-selbar .st-btn { min-height: 34px; }
.st-btn--danger { background: #B42318; border-color: #B42318; color: #fff; }
.st-btn--danger:disabled { opacity: .45; }
@media (hover: none) { .ed-pool__chk { opacity: 0; } .ed-pool.is-selecting .ed-pool__chk { opacity: 1; } .ed-pool__x, .ed-pool__chk { width: 28px; height: 28px; } }

/* THE PAGE STRIP (owner, 29 Oct 2026): larger sheets on a wide screen (--pth / --ptw, set by renderPages), room under the labels so no
   scrollbar -- classic or overlay -- ever sits on them, and arrows at its ends instead of dragging it. */
.ed-pages { --pth: 42px; --ptw: 30px; }
.ed-page__sheet { height: var(--pth); width: var(--ptw); }
.ed-page--spread .ed-page__sheet { width: calc(var(--ptw) * 2); }
.ed-pages__strip { padding-top: 3px; padding-bottom: 12px; scroll-padding-inline: 8px; }
.ed-page__label { line-height: 15px; }
.ed-pages__arr { flex: 0 0 auto; align-self: center; width: 32px; height: calc(var(--pth) + 4px); margin-bottom: 18px; border: 1px solid var(--st-line, #E3E7EC);
                 border-radius: 8px; background: var(--st-surface, #fff); color: var(--st-ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ed-pages__arr svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-pages__arr:hover:not(:disabled) { color: var(--st-ink); border-color: var(--st-line-2, #D4DAE1); background: var(--st-surface-2, #F5F6F7); }
.ed-pages__arr:disabled { opacity: .35; cursor: default; }
.ed-pages__arr[hidden] { display: none; }
.ed-pages__arr--l { margin-left: 6px; margin-right: -6px; }
.ed-pages__arr--r { margin-left: -6px; }
@media (max-width: 820px) { .ed-pages__arr { display: none !important; } .ed-pages__strip { padding-bottom: 6px; } }
/* the picked check's bar takes the floating bar's place on a phone (it has the fix for the thing) */
@media (max-width: 820px) { body.has-chkmini .ed-fbar { display: none !important; } }
/* Final checks' one-time tip, beside the panel (prototype) */
.ed-chkcoach { position: fixed; z-index: 60; background: #1F2428; color: #fff; border-radius: 8px; padding: 10px 12px; font-size: 13px; display: flex; gap: 10px;
               align-items: center; width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.ed-chkcoach[hidden] { display: none; }
.ed-chkcoach::before { content: ""; position: absolute; left: -6px; top: 16px; width: 12px; height: 12px; background: #1F2428; transform: rotate(45deg); }
.ed-chkcoach button { border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; border-radius: 5px; padding: 3px 10px; font: inherit; font-weight: 700; cursor: pointer; }
/* GUIDES: the key, in a small popover from the toolbar (it was the foot of the shopper's right column) */
.ed-guides { position: relative; display: inline-flex; }
.ed-guides__pop { position: fixed; z-index: 110; display: grid; gap: 6px; width: 270px; background: var(--st-surface, #fff); border-radius: 8px;
                  box-shadow: 0 8px 26px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05); padding: 10px 12px; font-size: 12.5px; color: var(--st-ink-2); }
.ed-guides__pop[hidden] { display: none; }
.ed-guides__pop span { display: flex; gap: 8px; align-items: center; }
#ed-guides-key.is-on { background: var(--st-surface-2, #F5F6F7); color: var(--st-ink); }
@media (max-width: 820px) { .ed-topbar .ed-guides { order: 3; } }