/* ============================================================================
   section-tool.css — HUB-VENDORED /sections tool CHROME. Framework-neutral, ZERO deps.
   ----------------------------------------------------------------------------
   The tenant-NEUTRAL, always-dark, token-driven chrome for BOTH section-tool
   surfaces — extracted + reconciled from the three stacks' bespoke copies
   (pc volt / la blade / go html-template), exactly as editor-chrome.css was for
   /edit. Consumed alongside its three JS modules:
     · section-library.js  → the gallery (/sections)
     · section-editor.js   → the single-section cue editor (/sections/<slug>)
     · section-sync.js      → the shared library-save adapter

   TWO SURFACES, ONE CHROME:
     GALLERY  — lights-off scrim · masthead · sticky full-bleed filter row
                (count · category <select> · tag-chip rail) · per-block header
                bar (checkbox · name · category · slug | Edit · Copy) · the
                checkerboard preview canvas + CANVAS chip on each .page-builder ·
                fixed Save-All commit bar (Select-all · count · [theme] · Save All).
     EDITOR   — lights-off scrim · sticky self-contained toolbar (title · legend ·
                [theme] · Back · Copy HTML · Save) · #section-edit-surface canvas
                with checkerboard + CANVAS·LIGHT/·DARK label + outline-only frame.
     CUES     — dashed blue text cue / green image cue + ratio badge, applied to
                both surface selectors (#section-edit-surface, .page-builder).

   CHROME-INVARIANT (spec TOOL-6b): every chrome rule consumes ONLY the fixed
   --editor-* tokens — the SAME palette /edit uses (single-sourced → guaranteed
   identical to the page editor). It must NEVER use the page's semantic --sem-* /
   --color-* / bg-surface / dark: (those FLIP with the theme, so chrome wired to
   them would change colour under the tool's own canvas light/dark toggle). The
   filter row, per-block bars, category/slug tags, Edit/Copy, CANVAS label,
   Save-All bar, chips, and the editor toolbar look IDENTICAL when the canvas
   toggles light↔dark — ONLY the section PREVIEW inside the canvas flips.

   THREE FIXED-VOCABULARY LITERALS are deliberately NOT --editor-* tokens (they
   are the tool's universal cross-tenant vocabulary, per spec "Visual language",
   and match editor-chrome.css's own precedents):
     · --se-scrim  = rgba(15,23,42,.55)  the lights-off slate (editor-chrome.css
                     hardcodes the same value for its modal backdrop).
     · --se-cue-image = #059669          the editable-IMAGE green — spec-pinned
                     (CUE-3 / visual-language table); NOT --editor-success (#10b981),
                     a different green for status content.
     · the checkerboard pattern via var(--editor-canvas-checker[-dark], <fallback>)
                     — token-first (promote to tokens.json to single-source; the
                     fallback conic-gradient renders until then).
   The editable-TEXT cue is the real --editor-accent (#2563eb) at alpha, so it is
   fully tokenised.

   PER-STACK — appended after this canonical CSS by each stack (mirrors
   editor-chrome.css's two per-stack blocks); intentionally NOT here because each
   stack's token architecture differs:
     1. The CANVAS CONTENT re-theme. theme-toggle.js sets .dark (+ data-canvas-theme)
        on the surface; the stack's OWN semantic flip block (pc --sem-*, la --sem-*,
        go --color-* literals) rethemes the section content, and a
        `[data-canvas-theme="light"]` reset makes light win under a dark site.
        This file owns only the chrome-invariant canvas decoration (checkerboard,
        outline, CANVAS label) that flips the same on every stack.
     2. Any layout-offset the stack's page needs around the fixed bars.
   Spec: designs/shared/webfront-section-library-and-editor.md.
   ============================================================================ */

/* ── fixed cross-tenant vocabulary (see header) ───────────────────────────── */
.se-editor,
.section-tool-gallery {
    --se-scrim: rgba(15, 23, 42, .55);
    --se-cue-text: var(--editor-accent);
    --se-cue-image: #059669;
    --se-checker: var(--editor-canvas-checker, repeating-conic-gradient(#eef0f3 0% 25%, #ffffff 0% 50%) 50% / 22px 22px);
    --se-checker-dark: var(--editor-canvas-checker-dark, repeating-conic-gradient(#232327 0% 25%, #161618 0% 50%) 50% / 22px 22px);
}

/* ── lights-off scrim (TOOL-2): dims AND click-blocks all site chrome; the tool
   surface is raised above it. Both surfaces inject one .se-dim. ────────────── */
.se-dim {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(15, 23, 42, .55);
}

/* TOOL-4: the site header is NOT sticky on tool pages — it scrolls away instead
   of hovering, dimmed, over the tool. Scoped to the layout's own header only
   (body > header / .site-header), never in-content <header>s. The JS also
   belt-and-braces unsticks it inline. */
body > header,
.site-header {
    position: static !important;
}

/* ============================================================================
   GALLERY (/sections)
   ============================================================================ */

/* One raised gallery ROOT above the scrim (TOOL-3) — wraps the masthead, filter
   row and every block, so the whole tool surface (incl. the gaps between blocks)
   sits above the dim. */
.section-tool-gallery {
    position: relative;
    z-index: 9991;
}

/* ── masthead (LIB-1) — wrapper-rendered; centred gutter ──────────────────── */
.pb-head {
    position: relative;
    z-index: 9991;
    max-width: 80rem;
    margin: 0 auto;
    padding: 2.5rem 1rem 1.25rem;
    font-family: ui-sans-serif, system-ui, sans-serif;
    color: var(--editor-ink);
}

.pb-eyebrow {
    margin: 0 0 .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* TOOL-6: tenant-neutral — muted ink, never the brand colour. */
    color: var(--editor-ink-muted);
}

/* TOOL-7: active-template identity pill on the eyebrow line — slug-pill styling;
   text-transform:none keeps the directory name exact inside the uppercased eyebrow. */
.pb-tpl {
    text-transform: none;
    letter-spacing: 0;
    font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--editor-ink-muted);
    background: var(--editor-btn-bg);
    border-radius: .35rem;
    padding: 2px 6px;
    white-space: nowrap;
}

.pb-head h1 {
    margin: 0 0 .6rem;
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--editor-ink);
}

.pb-lead {
    max-width: 44rem;
    margin: 0;
    line-height: 1.55;
    color: var(--editor-ink-muted);
}

/* ── sticky full-bleed filter row (LIB-2/3) — JS-injected before the first block.
   CHROME-INVARIANT --editor-* dark chrome; never flips with the canvas. ────── */
.pb-filter {
    position: sticky;
    top: var(--se-filter-top, 0px);
    z-index: 9995;
    background: var(--editor-surface);
    border-top: 1px solid var(--editor-border);
    border-bottom: 1px solid var(--editor-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    font: 500 13px/1.2 ui-sans-serif, system-ui, sans-serif;
    color: var(--editor-ink);
}

/* Full-bleed row: count/select pinned left, chips running to the right edge. */
.pb-filter-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
}

.pb-filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 500;
    flex-shrink: 0;
}

.pb-filter select {
    padding: 5px 8px;
    border: 1px solid var(--editor-border);
    border-radius: 8px;
    background: var(--editor-surface);
    color: var(--editor-ink);
    font: inherit;
    flex-shrink: 0;
}

/* Native <select> dropdown popup: the OPEN option list renders on the UA popup
   surface (white), NOT the dark filter bar — so the inherited light --editor-ink
   options were white-on-white = INVISIBLE (the popup looked like an empty panel).
   Pin the options to the dark chrome surface so the list is legible when open. */
.pb-filter select option {
    background: var(--editor-surface);
    color: var(--editor-ink);
}

/* LIB-4: live "N sections" count — the row's anchor, replaces the old label. */
.pb-count {
    font-size: 12px;
    color: var(--editor-ink-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tag-chip rail (LIB-6): ONE line, never wraps. Fills the remaining width; the
   FIRST chip carries margin-left:auto so the rail pulls flush to the band's right
   edge when it fits (slack sits between the <select> and the first chip). On
   overflow the auto margin resolves to 0 and the rail scrolls from the first chip. */
.pb-filter .st-filter {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.pb-filter .st-filter > .st-chip:first-child {
    margin-left: auto;
}

.pb-filter .st-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--editor-border);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 3px 10px;
    font: 500 11px/1 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
}

/* LIB-7: active chip = tool-blue accent, never brand. */
.pb-filter .st-chip--on {
    background: var(--editor-accent);
    border-color: var(--editor-accent);
    color: #fff;
}

/* ── block preview canvas (LIB-10) — checkerboard backdrop + CANVAS chip on each
   library block. Outline-less on the wrapper; the chip sits below the header bar
   (height measured into --pb-bar-h at inject time). Raised above the scrim. ── */
.section-tool-gallery .page-builder {
    position: relative;
    z-index: 9991;
    outline: 2px dashed var(--editor-canvas-edge);
    outline-offset: -2px;
    /* checkerboard reads as "this is a preview surface, not the site". */
    background: var(--se-checker);
}

/* GALLERY canvas flip is SITE-bound (the Save-All toggle flips the site theme): a
   dark-aware section on a fixed-LIGHT checker would be unreadable, so the checker
   follows the site theme — exactly like the editor canvas follows its own toggle.
   Chrome (outline, chip) stays fixed. Keys off BOTH .dark and [data-theme="dark"]
   (the tokens-block convention) so it works whether a stack drives dark via the
   class (pc/la) or the attribute (go = html[data-theme="dark"]) — no per-stack
   theme-init bridge needed. */
html.dark .section-tool-gallery .page-builder,
html[data-theme="dark"] .section-tool-gallery .page-builder {
    background: var(--se-checker-dark);
}

/* CANVAS chip — SOLID OPAQUE chrome (fixed --editor-surface bg + --editor-ink):
   carries its own contrast, legible on BOTH a light and a dark canvas WITHOUT
   flipping. */
.section-tool-gallery .page-builder::before {
    content: "CANVAS";
    position: absolute;
    top: calc(var(--pb-bar-h, 42px) + .5rem);
    left: .5rem;
    z-index: 5;
    padding: 1px .5rem;
    border-radius: 4px;
    font: 700 .65rem/1.4 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .08em;
    color: var(--editor-ink);
    background: var(--editor-surface);
    border: 1px solid var(--editor-border);
    pointer-events: none;
}

/* ── per-block header bar (BAR-1/2) — full-width, sticky within its own block at
   --se-bar-top (measured so it clears any sticky site header + the filter row).
   Squared + flush to the block's top edge: it reads as the block's titlebar. ─ */
.page-builder-bar {
    position: sticky;
    top: var(--se-bar-top, 0px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid var(--editor-border);
    background: var(--editor-surface);
    color: var(--editor-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Left identity cluster: [checkbox] name · CATEGORY · slug. min-width:0 so a long
   name ellipsises instead of pushing the actions off the bar. */
.pb-bar-id {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pb-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.page-builder-name {
    font: 600 13px/1.2 ui-sans-serif, system-ui, sans-serif;
    color: var(--editor-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-bar-cat {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--editor-btn-bg);
    font: 600 10px/1.4 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--editor-ink-muted);
    white-space: nowrap;
}

.pb-bar-slug {
    font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--editor-ink-muted);
    background: var(--editor-btn-bg);
    border-radius: .35rem;
    padding: 2px 6px;
    white-space: nowrap;
}

/* BAR-3 fallback identity for blocks without a data-name (real page content). */
.page-builder-tag {
    font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .02em;
    color: var(--editor-ink-muted);
    white-space: nowrap;
}

/* Edit / Copy actions — CONTROL-HEIGHT uniform tool-button height. */
.page-builder-action {
    height: var(--editor-control-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--editor-border);
    border-radius: 6px;
    background: transparent;
    color: var(--editor-ink);
    font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.page-builder-action:hover {
    background: var(--editor-btn-bg);
}

.page-builder-action:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* TOOL-6: the Edit <a> lives inside .page-builder, which the tenant page-builder
   CSS tints with its BRAND link colour at higher specificity/!important — verified
   live: the Edit link rendered #022a86 (tenant brand navy) on the #111827 bar =
   a real low-contrast leak. Chrome-invariant ink MUST win, so !important here (the
   only reliable way to beat a tenant brand rule; justified for fixed editor chrome). */
.page-builder .page-builder-bar .page-builder-action,
.page-builder .page-builder-bar .page-builder-action:hover {
    color: var(--editor-ink) !important;
}

/* per-block "select for Save All" checkbox (editor galleries only). */
.pb-select {
    width: 15px;
    height: 15px;
    margin: 0 2px 0 4px;
    cursor: pointer;
    accent-color: var(--editor-accent);
}

/* ── bottom Save-All commit bar (LIB-11) — fixed, full-bleed, actions ONLY
   (filters live at the top). Three zones (LIB-14): Select-all cluster LEFT, the
   site theme toggle DEAD CENTRE, Save All RIGHT. Grid keeps the middle column
   truly centred while the outer columns absorb the width difference. ───────── */
.sections-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2147483000;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--editor-surface);
    color: var(--editor-ink);
    border-top: 1px solid var(--editor-border);
    font: 500 13px/1.2 ui-sans-serif, system-ui, sans-serif;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .28);
}

.sections-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
}

.sections-toolbar .pb-select {
    margin: 0;
}

.sections-toolbar .st-zone-left {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    justify-self: start;
    min-width: 0;
}

/* Centre zone holds the vendored .editor-theme-toggle (site-bound) — injected by
   the wrapper via config.themeToggleHtml; styled by theme-toggle.css, wired by
   theme-toggle.js. No toggle CSS or binding lives here. */
.sections-toolbar .st-zone-mid {
    justify-self: center;
}

.sections-toolbar .st-zone-right {
    justify-self: end;
}

.sections-toolbar .st-count {
    color: var(--editor-ink-muted);
}

.sections-toolbar .st-save {
    height: var(--editor-control-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    padding: 0 18px;
    font-weight: 600;
    color: #fff;
    background: var(--editor-accent);
    cursor: pointer;
}

.sections-toolbar .st-save:hover {
    background: var(--editor-accent-strong);
}

.sections-toolbar .st-save:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ~480px: tighten the bar so all three zones stay on one line. */
@media (max-width: 480px) {
    .sections-toolbar {
        gap: 8px;
        padding: 10px 8px;
        font-size: 12px;
    }
}

/* ============================================================================
   SINGLE-SECTION EDITOR (/sections/<slug>)
   ============================================================================ */

/* Self-contained component: toolbar (titlebar) sticks to the TOP of the component
   (bounded by .se-editor, not the page), then the canvas. */
.se-editor {
    position: relative;
}

/* Three zones (ED-2): meta LEFT, the canvas theme toggle DEAD CENTRE (1fr side
   tracks), actions RIGHT. */
.se-toolbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--editor-border);
    background: var(--editor-surface);
    color: var(--editor-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@media (min-width: 640px) {
    .se-toolbar {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Narrow: drop the rigid 3-column grid so nothing is crushed. */
@media (max-width: 639.98px) {
    .se-toolbar {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.se-meta {
    font-size: .875rem;
    color: var(--editor-ink-muted);
    justify-self: start;
    min-width: 0;
}

.se-meta strong {
    font-weight: 600;
    color: var(--editor-ink);
}

/* TOOL-7: active-template identity pill after the slug — opaque --editor chip. */
.se-tpl {
    margin-left: .1rem;
    font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--editor-ink-muted);
    background: var(--editor-btn-bg);
    border-radius: .35rem;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Legend swatches (ED-2): editable text = accent (blue), image = fixed green. */
.se-legend {
    margin-left: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.se-swatch {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 3px;
}

.se-swatch--text {
    outline: 1px dashed var(--se-cue-text);
    outline-offset: 1px;
}

.se-swatch--image {
    outline: 1px dashed var(--se-cue-image);
    outline-offset: 1px;
}

/* Canvas theme toggle wrapper — the vendored .editor-theme-toggle (canvas-bound),
   centred as the middle grid item. */
.se-canvas-theme {
    display: inline-flex;
    align-items: center;
    justify-self: center;
}

.se-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-self: end;
}

.se-btn {
    height: var(--editor-control-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    padding: 0 1rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--editor-border);
    background: transparent;
    color: var(--editor-ink);
    transition: background-color .15s, opacity .15s;
}

.se-btn:hover {
    background: var(--editor-btn-bg);
}

.se-btn:disabled,
.se-btn:disabled:hover {
    opacity: .45;
    cursor: not-allowed;
}

/* ED-3: Copy HTML = tool-blue FILLED (primary action). */
.se-btn--primary {
    border: none;
    padding: 0 1.25rem;
    font-weight: 600;
    color: #fff;
    background: var(--editor-accent);
}

.se-btn--primary:hover {
    background: var(--editor-accent-strong);
}

/* ED-3: Save = tool-blue OUTLINE (blue border/text on transparent), visually
   subordinate to the filled Copy. */
.se-btn--save {
    padding: 0 1.25rem;
    font-weight: 600;
    color: var(--editor-accent);
    background: transparent;
    border: 1px solid var(--editor-accent);
}

.se-btn--save:hover {
    background: rgba(var(--editor-accent-rgb), .12);
}

/* Canvas (ED-4) — outline (never border/padding/margin) so the section keeps its
   EXACT live layout; editor chrome never reflows the content. Raised above the
   scrim so it stays lit. */
#section-edit-surface {
    position: relative;
    z-index: 9991;
    outline: 2px dashed var(--editor-canvas-edge);
    outline-offset: -2px;
    background: var(--se-checker);
}

#section-edit-surface:focus {
    outline: 2px dashed var(--editor-canvas-edge);
}

/* CANVAS label (ED-4) — SOLID OPAQUE chrome chip: legible on BOTH a light and a
   dark canvas WITHOUT flipping. Only its TEXT reports the preview mode. */
#section-edit-surface::before {
    content: "CANVAS";
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 5;
    padding: 1px .5rem;
    border-radius: 4px;
    font: 700 .65rem/1.4 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .08em;
    color: var(--editor-ink);
    background: var(--editor-surface);
    border: 1px solid var(--editor-border);
}

/* ── canvas theme preview (ED-5), CANVAS-bound. theme-toggle.js sets
   data-canvas-theme (+ .dark) on the surface. This file owns ONLY the
   chrome-invariant canvas decoration (checkerboard + label text); the SECTION
   CONTENT re-theme is a PER-STACK appended block (see file header §1).
   html+id+attribute specificity (1,1,1) so it wins over the base rule and any
   dark SITE. ─────────────────────────────────────────────────────────────── */
html #section-edit-surface[data-canvas-theme="light"] {
    background: var(--se-checker);
}

html #section-edit-surface[data-canvas-theme="dark"] {
    background: var(--se-checker-dark);
}

html #section-edit-surface[data-canvas-theme="light"]::before {
    content: "CANVAS · LIGHT";
}

html #section-edit-surface[data-canvas-theme="dark"]::before {
    content: "CANVAS · DARK";
}

/* ============================================================================
   EDITING CUES (CUE-1..5) — applied to BOTH surface selectors
   ============================================================================ */

#section-edit-surface,
.page-builder {
    position: relative;
}

/* CUE-2 editable text — faint dashed accent always, solid accent + text cursor on
   hover. Frame-toolbar chrome (.page-builder-action) excluded. NO border-radius
   override — the outline follows each element's own radius so previews match live. */
#section-edit-surface :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, a, button):not(.page-builder-action),
.page-builder :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, a, button):not(.page-builder-action) {
    outline: 1px dashed rgba(var(--editor-accent-rgb), .3);
    outline-offset: 3px;
}

#section-edit-surface :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, a, button):not(.page-builder-action):hover,
.page-builder :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, a, button):not(.page-builder-action):hover {
    outline: 2px solid var(--se-cue-text);
    cursor: text;
}

/* CUE-3 editable images — green cue; click to change the URL. INSET (negative offset)
   so the dashed ring draws INSIDE the image: section images are commonly wrapped in an
   `overflow:hidden`/rounded container, which CLIPS an outside outline (outline-offset:3px)
   entirely — verified live: the cue was invisible on every image while the text cue showed.
   Inset survives the clip; 2px so it reads over a photo (the text cue is on plain surface). */
#section-edit-surface img,
.page-builder img {
    outline: 2px dashed rgba(5, 150, 105, .85);
    outline-offset: -3px;
    cursor: pointer;
}

#section-edit-surface img:hover,
.page-builder img:hover {
    outline: 2px solid var(--se-cue-image);
    outline-offset: -3px;
}

/* CUE-3 best-ratio badge overlaid on each image's top-left corner (JS-positioned).
   Slot = rendered box ratio · Img = uploaded asset's natural ratio. HYG: stripped
   from every copy/save. */
.se-img-ratio {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    padding: 2px 6px;
    border-radius: 0 0 6px 0;
    font: 700 .7rem/1.3 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(5, 150, 105, .92);
    white-space: nowrap;
}