/* SiteForge design-editor (View/Design) CSS — extracted verbatim from build-library-dashboard.py
   generateShowroom() so per-client/tournament version pages share ONE source. Token-based
   (var(--color-*)); paired with /tools/showroom/runtime/design.js. Operator/preview-only. */
/* ---- The topbar (2026-09-03, Jeremy: "revamp the View/Edit & Versioning menus … as a
   single-line sticky toolbar at the top of each site with versioning pill right-justified").
   ONE bar owns the top lane and replaces two floating chromes (the top-center modebar pill +
   chrome.js's top-right version pill) — and with them, both collision-dodge scripts: nothing
   floats over the page any more, so nothing has to run away from the page's own headers.
   PUSH-DOWN, not overlay: the layout script in siteforge_version.py gives body a padding-top
   equal to the bar's EXPANDED height (constant — the padding must not change mid-scroll or the
   content jumps under the reader) and offsets the site's own top-anchored fixed/sticky bars by
   the same amount, so 100% of the design stays visible. Two states: expanded near the top of
   the page (labels beside the glyphs — the teaching state), .sf-condensed once scrolled
   (icons only, slimmer). Buttons: left = mode cluster + change-the-page verbs (design mode
   only); right = the keep-it cluster (★, Save, version pill) — version-verbs sit beside the
   versioning control on purpose. */
/* THE BAR IS NOT PART OF THE SITE, AND IT SAYS SO (Jeremy 2026-09-03: "visually independent
   … so as not to confuse the user into thinking its part of their site"). Two moves instead
   of marching ants: (1) the bar wears the DARK STUDIO material every other editing surface
   already wears (the inspector, the control panel, the ✦ sheet — fixed studio colors, never
   the site's own tokens, so it looks identical on every client site and matches nothing any
   of them would build); (2) a slow gold SHEEN travels its bottom edge — motion in the chrome
   is a tool's tell, no small-town site's nav shimmers. Reduced-motion gets a static gold rule. */
#sf-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9100;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(33, 37, 46, 0.96), rgba(23, 26, 33, 0.94));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  /* 2026-09-04 (Jeremy: "add a raised effect to the view/edit toolbar") — a lifted slab: a
     hairline highlight along the top edge, a soft near shadow and a long ambient one under it. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 4px rgba(0,0,0,0.35), 0 10px 26px rgba(0,0,0,0.42);
  color: #e8eaf1;
  opacity: 0.96; transition: opacity var(--t-fade, .15s) ease, padding var(--t-move, .24s) var(--ease, cubic-bezier(.4,0,.2,1)); }   /* the literals are FALLBACKS for a live site without design-tokens.css */
/* 2026-09-04 (Jeremy: "wrap the animated stroke currently at the bottom but wrapped all
   around") — the gold sheen no longer rides the bottom edge alone: a 2px ring hugs the whole
   bar, drawn as a conic gradient whose bright arc travels the perimeter (the angle is a
   registered custom property so it tweens; the ring is the padding-box minus the content-box
   via mask-composite). Browsers without @property keep a static gold ring. */
@property --sf-bar-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#sf-topbar::after { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit;
  pointer-events: none; box-sizing: border-box;
  background: conic-gradient(from var(--sf-bar-a, 0deg), rgba(232,195,74,0.16) 0deg, rgba(232,195,74,0.95) 40deg,
    rgba(232,195,74,0.16) 80deg, rgba(232,195,74,0.16) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: sf-bar-sheen 7s linear infinite; }
@keyframes sf-bar-sheen { from { --sf-bar-a: 0deg; } to { --sf-bar-a: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  #sf-topbar::after { animation: none; background: rgba(232,195,74,0.55); } }
#sf-topbar:hover, #sf-topbar:focus-within { opacity: 1; }
#sf-topbar.sf-condensed { padding: 3px 10px; }
.sf-modebar { display: flex; align-items: center; gap: 3px; min-width: 0; flex-wrap: nowrap; }
.sf-topbar-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.sf-modebar button, .sf-topbar-right > button { font: inherit; font-size: 13px; line-height: 1; min-width: 28px; min-height: 28px; padding: 4px 7px; border: 0; border-radius: 14px; background: transparent; color: #e8eaf1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
/* Active mode wears the STUDIO accent, not the site's link color — same independence rule. */
.sf-modebar button.active { background: #5b78e8; color: #fff; }
.sf-modebar button:hover:not(.active), .sf-topbar-right > button:hover { background: rgba(255,255,255,0.10); }
/* The prose bits (mode chip) read muted-on-dark whatever the site's palette says. */
#sf-topbar #sf-mode-chip { color: #b9c0d0; }
#sf-topbar #sf-ask-spark { color: #e8eaf1; }
/* Labels ride the EXPANDED state only, as ::after so no script that sets a button's
   textContent (glyph retrofits, armed-state swaps) can ever wipe them. Condensed = icons. */
/* 2026-09-12 (Jeremy: "toolbar smoothen the animation transitioning between scroll expand/collapse")
   — a `content` that appears and disappears cannot tween, so the condense snapped. The label is
   ALWAYS there now and FOLDS: max-width + opacity + margin tween shut when condensed, open when
   not, on the same clock as the bar's padding. The mode chip folds the same way. */
#sf-mode-view::after { content: "View"; }
#sf-mode-design::after { content: "Edit"; }
#sf-mode-panel::after { content: "List"; }
#sf-undo::after { content: "Undo"; }
#sf-redo::after { content: "Redo"; }
#sf-edit-save::after, #sf-op-save-item::after { content: "Save"; }
#sf-ing-btn::after { content: "Add"; }
#sf-ask-spark::after { content: "Ask"; }
#sf-topbar button::after { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 4.5em; opacity: 1; margin-left: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  transition: max-width var(--t-move, .24s) var(--ease, cubic-bezier(.4,0,.2,1)), opacity var(--t-fade, .15s) ease, margin-left var(--t-move, .24s) var(--ease, cubic-bezier(.4,0,.2,1)); }
#sf-topbar.sf-condensed button::after { max-width: 0; opacity: 0; margin-left: 0; }
/* The mode chip is prose, not a control — it folds away once condensed; the glyphs carry the state. */
#sf-topbar #sf-mode-chip { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 14em; opacity: 1;
  transition: max-width var(--t-move, .24s) var(--ease, cubic-bezier(.4,0,.2,1)), opacity var(--t-fade, .15s) ease; }
#sf-topbar.sf-condensed #sf-mode-chip { max-width: 0; opacity: 0; }
/* Phones: the full set does not fit a 390px line with labels — icons-only always, and
   (Jeremy 2026-09-03: "edit, undo, redo, custom-instructions are kinda small on mobile;
   consider doubling size") the touch targets grow to ~44px squares with bigger glyphs —
   thumb-sized, per the platform HIG minimum, not mouse-sized. */
@media (max-width: 560px) {
  #sf-topbar button::after { content: none !important; max-width: 0; margin-left: 0; }
  #sf-topbar { gap: 4px; padding: 4px 6px; }
  .sf-modebar button, .sf-topbar-right > button {
    min-width: 44px; min-height: 44px; font-size: 19px; border-radius: 12px; }
  #sf-topbar.sf-condensed .sf-modebar button, #sf-topbar.sf-condensed .sf-topbar-right > button {
    min-width: 40px; min-height: 40px; }
  #sf-mode-panel svg { width: 20px; height: 18px; }
  #sf-mode-star svg { width: 19px; height: 19px; }
  #sf-topbar #sf-mode-chip { display: none !important; } }
@media (prefers-reduced-motion: reduce) { #sf-topbar, #sf-topbar button::after, #sf-topbar #sf-mode-chip { transition: none; } }
/* 2026-08-15 — the ★ joined the bar (baked HIDDEN; versions/chrome.js reveals it — that
   script owns the pick). 2026-08-29: GOLD and DRAWN — marching ants = not your pick yet (an
   invitation), filled glow = the pick; both this star and the panel's row ★ wear the same
   gold: one fact, one colour. 2026-09-03: it moved to the RIGHT CLUSTER, beside Save and the
   version pill — the ★ is a version-verb and belongs with the versioning control (the old
   centered-own-row grid rules died with the grid). chrome.js swaps the glyph for an svg path.
   The text-★ rules stay as fallback where chrome.js never ran. */
#sf-mode-star { color: #e8c34a; font-size: 14px; opacity: 0.85;
  transition: opacity var(--t-fade, .15s) ease, background var(--t-fade, .15s) ease, text-shadow var(--t-fade, .15s) ease; }   /* the literals are FALLBACKS for a live site without design-tokens.css */
#sf-mode-star:hover, #sf-mode-star:focus-visible { opacity: 1; background: rgba(232,195,74,0.14); }
#sf-mode-star.sf-picked { opacity: 1; background: rgba(232,195,74,0.16);
  text-shadow: 0 0 7px rgba(232,195,74,0.75); }
#sf-mode-star svg { display: block; margin: 0 auto; width: 15px; height: 15px; overflow: visible; }
#sf-mode-star .sf-star-path { fill: none; stroke: #e8c34a; stroke-width: 1.7;
  stroke-linejoin: round; stroke-dasharray: 2.3 1.3; animation: sf-star-ants 1.1s linear infinite; }
#sf-mode-star.sf-picked .sf-star-path { fill: #e8c34a; stroke: #e8c34a;
  stroke-dasharray: none; animation: none; }
#sf-mode-star.sf-picked svg { animation: sf-star-glow 1.8s ease-in-out infinite; }
@keyframes sf-star-ants { to { stroke-dashoffset: -3.6; } }
@keyframes sf-star-glow {
  0%, 100% { filter: drop-shadow(0 0 1.5px rgba(232,195,74,0.55)); }
  50%      { filter: drop-shadow(0 0 5.5px rgba(232,195,74,0.95)); } }
@media (prefers-reduced-motion: reduce) {
  #sf-mode-star .sf-star-path, #sf-mode-star.sf-picked svg { animation: none; } }
.sf-modebar button:disabled { opacity: 0.5; cursor: default; }
/* Undo / Save / Redo are Design-mode actions — hide the whole action row in View mode so the
   bar shows only the mode toggle. All three live on ONE line on purpose (Jeremy 2026-08-02:
   "save should not be visible in view-mode=true, only in edit mode"): the save was added to
   the row in v3.16.0 and kept showing here, centred and alone, because only its two
   neighbours were listed. A control that joins a row must join the row's rules. Covers both
   save paths — the local operator 💾 and the owner's remote 💾 both wear .sf-toolsave. */
body:not(.sf-design) #sf-undo,
body:not(.sf-design) #sf-redo,
body:not(.sf-design) #sf-topbar .sf-toolsave { display: none; }
body.sf-design { cursor: crosshair; touch-action: manipulation; }
/* Design mode keeps the Elements panel (for fast navigation) but hides the show-button
   + viewport toggle. The panel itself collapses when an element is being edited. */
body.sf-design .sf-vp-row { display: none !important; }
/* In Design mode only the visible carousel stage is tappable, so a tap on the hero
   selects the stage the operator can actually see (not the topmost stacked one). */
body.sf-design .hero-carousel .stage:not(.active) { pointer-events: none; }
.sf-hot { outline: 2px dashed var(--color-link) !important; outline-offset: 2px; }
.sf-selected { outline: 3px solid var(--color-accent) !important; outline-offset: 2px; }
.sf-hidden { display: none !important; }
/* v2.4.12 — Flip button mounted directly on each .flip-card face (front + back).
   Hidden outside Design mode; operator-chrome so saveAsVersion strips it from
   saved sites and isControl() skips it for selection.
   v2.4.13 — The face's backface-visibility doesn't reliably hide absolutely-positioned
   children with their own stacking context (the front button kept hit-testing through
   to the back). Gate visibility on the parent .flip-card's .flipped state instead —
   only the currently-facing button is shown. backface-visibility kept as belt-and-
   suspenders for any 3D context where it does work. */
.sf-flip-btn { display: none; position: absolute; top: 8px; right: 8px; z-index: 5; width: 30px; height: 30px; padding: 0; font: inherit; font-size: 17px; line-height: 1; min-height: 0; cursor: pointer; background: rgba(0,0,0,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.35); align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
body.sf-design .flip-card:not(.flipped) .face.front .sf-flip-btn { display: inline-flex; }
body.sf-design .flip-card.flipped .face.back .sf-flip-btn { display: inline-flex; }
.sf-flip-btn:hover { background: rgba(0,0,0,0.88); }
.sf-flip-btn:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.sf-inspector { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9200; cursor: auto; background: var(--color-bg); border-top: 2px solid var(--color-link); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.25); transform: translateY(110%); transition: transform var(--t-move, .24s) var(--ease, cubic-bezier(.4,0,.2,1)), visibility 0s linear var(--t-move, .24s); max-height: 62vh; display: flex; flex-direction: column; visibility: hidden; pointer-events: none; }   /* the literals are FALLBACKS for a live site without design-tokens.css */
.sf-inspector.open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform var(--t-move, .24s) var(--ease, cubic-bezier(.4,0,.2,1)), visibility 0s linear 0s; }   /* the literals are FALLBACKS for a live site without design-tokens.css */
.sf-insp-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-rule); flex-shrink: 0; }
.sf-insp-label { font-size: 14px; font-weight: 700; color: var(--color-heading); flex: 1; min-width: 0; }
.sf-insp-done { font: inherit; font-size: 16px; line-height: 1; min-width: 40px; min-height: 38px; padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(128,128,128,0.14); color: var(--color-fg); cursor: pointer; }
.sf-insp-done:hover { background: rgba(128,128,128,0.26); }
/* Title-bar qty pair — symbols only, appears between the friendly name and the close X. */
.sf-insp-qty { display: inline-flex; gap: 4px; }
.sf-insp-qty.sf-hidden { display: none; }
.sf-insp-qty button { font: inherit; font-size: 18px; line-height: 1; min-width: 34px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-bg); cursor: pointer; }
.sf-insp-qty .sf-qty-minus { color: #b94545; border-color: rgba(185,69,69,0.55); }
.sf-insp-qty .sf-qty-plus { color: var(--color-link); border-color: var(--color-link); }
.sf-insp-qty button:hover { background: rgba(128,128,128,0.10); }
.sf-insp-body { padding: 14px 16px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.sf-insp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-insp-key { font-size: 13px; font-weight: 600; color: var(--color-muted); min-width: 58px; }
.sf-insp-hint { font-size: 12px; color: var(--color-muted); line-height: 1.45; }
.sf-btn { font: inherit; font-size: 13px; font-weight: 600; min-height: 42px; padding: 10px 14px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-bg); color: var(--color-fg); cursor: pointer; }
.sf-btn.danger { color: #c0392b; border-color: #c0392b; }
.sf-btn.on { background: var(--color-link); color: #fff; border-color: var(--color-link); }
.sf-insp-body select { font: inherit; font-size: 14px; min-height: 42px; flex: 1; min-width: 150px; padding: 8px 10px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-bg); color: var(--color-fg); cursor: pointer; }
.sf-insp-textarea { width: 100%; box-sizing: border-box; min-height: 88px; max-height: 220px; resize: vertical; font: inherit; font-size: 15px; line-height: 1.4; padding: 10px 12px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-bg); color: var(--color-fg); }
.sf-insp-textarea:focus { outline: 2px solid var(--color-link); outline-offset: 1px; border-color: var(--color-link); }
.sf-insp-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--color-rule); margin-top: 6px; }
.sf-insp-actions .sf-btn { flex: 0 0 auto; min-width: 96px; }
.sf-btn.primary { background: var(--color-link); color: #fff; border-color: var(--color-link); }
.sf-btn.primary:hover { filter: brightness(1.08); }
/* Pause every autoplaying CSS animation while an element is selected, AND for the whole time Design
   mode is active (so scrolling text / marquees / glows hold still while editing — not just on select). */
body.sf-freeze-content *, body.sf-freeze-content *::before, body.sf-freeze-content *::after,
body.sf-design *, body.sf-design *::before, body.sf-design *::after { animation-play-state: paused !important; }
/* ...but NEVER the editor's own UI (2026-08-08, Jeremy: "drafting your change should have an
   animation visually communicating when it's actively progressing"). The `*` above is the whole
   document, so design mode was freezing the chrome along with the page — and design mode is
   exactly when the chrome is on screen. The ✦ sheet's progress stripe was rendered, correct, and
   motionless the entire time it meant "still working". The rule wants THE PAGE to hold still while
   you edit it; .operator-chrome is what marks the parts that are not the page. Higher specificity
   than the pauses above, so it wins on equal !important. */
body.sf-freeze-content .operator-chrome, body.sf-freeze-content .operator-chrome *,
body.sf-freeze-content .operator-chrome *::before, body.sf-freeze-content .operator-chrome *::after,
body.sf-design .operator-chrome, body.sf-design .operator-chrome *,
body.sf-design .operator-chrome *::before, body.sf-design .operator-chrome *::after { animation-play-state: running !important; }
/* Custom typeface picker — items render in their own font so the operator can preview. */
.sf-font-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-bg); flex: 1 1 100%; min-width: 0; }
.sf-font-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--color-rule); font-size: 17px; color: var(--color-fg); line-height: 1.2; }
.sf-font-item:last-child { border-bottom: 0; }
.sf-font-item:hover { background: rgba(128,128,128,0.08); }
.sf-font-item.on { background: color-mix(in srgb, var(--color-link) 14%, var(--color-bg)); color: var(--color-link); }
.sf-font-item .sf-font-tag { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; color: var(--color-muted); flex-shrink: 0; }
/* Format toggles (Bold / Italic / Underline) — compact square buttons. */
.sf-fmt-btn { font: inherit; font-size: 15px; min-width: 42px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--color-rule); background: var(--color-bg); color: var(--color-fg); border-radius: 6px; cursor: pointer; }
.sf-fmt-btn.on { background: var(--color-link); color: #fff; border-color: var(--color-link); }
.sf-fmt-btn.b { font-weight: 800; }
.sf-fmt-btn.i { font-style: italic; }
.sf-fmt-btn.u { text-decoration: underline; }
/* Inspector section heading — subtle group label for visual variety + density. */
.sf-insp-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin: 6px 0 -2px; padding-bottom: 3px; border-bottom: 1px solid var(--color-rule); }
/* Validation prompt (X or click-away with pending changes). */
.sf-prompt-back { position: fixed; inset: 0; z-index: 9300; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; padding: 16px; }
.sf-prompt-back.open { display: flex; }
.sf-prompt { background: var(--color-bg); border: 2px solid var(--color-link); border-radius: 12px; padding: 18px 18px 16px; max-width: 360px; width: 100%; box-shadow: 0 12px 44px rgba(0,0,0,0.32); }
.sf-prompt-msg { font-size: 14.5px; line-height: 1.45; color: var(--color-fg); margin-bottom: 14px; }
.sf-prompt-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sf-prompt-actions .sf-btn { min-width: 96px; min-height: 40px; padding: 8px 12px; }
/* Current-value badge next to size / spacing bump controls. */
.sf-bump-val { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
/* qty +/- pair row: side-by-side buttons with a tabular count. */
.sf-insp-pair { display: flex; gap: 8px; align-items: center; flex: 1; }
.sf-insp-pair .sf-btn { flex: 1; min-height: 40px; }
.sf-bump-minus { color: #b94545; border-color: rgba(185,69,69,0.55) !important; }
.sf-bump-plus { color: var(--color-link); border-color: var(--color-link) !important; }
/* ---- Visual Indicators overlay layer (Design mode, admin-only feature) ---- */
/* Dashed-outline markers are a permanent Design-mode aid (overlay siblings of the
   real elements — no DOM pollution). The selectable A-E indicator set was removed
   2026-06-15; dashed is all that's used. design.js owns the layer + repositioning. */
#sf-vi-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9000; display: none; }
body.sf-design #sf-vi-layer { display: block; }
.sf-vi-marker { position: absolute; pointer-events: none; box-sizing: border-box; transition: opacity var(--t-fade, .15s) ease; outline: 1px dashed rgba(127,127,127,0.42); outline-offset: 2px; }   /* the literals are FALLBACKS for a live site without design-tokens.css */
/* Admin-feature gate: items with [data-admin-feature] are hidden when admin off */
body.sf-admin-off [data-admin-feature] { display: none !important; }
/* Checkbox-list panel reuse */
.sf-checklist { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; max-height: 320px; overflow-y: auto; }
.sf-checklist-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-bg); cursor: pointer; }
.sf-checklist-item input { margin-top: 2px; flex-shrink: 0; }
.sf-checklist-item .ci-body { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.35; }
.sf-checklist-item .ci-title { font-weight: 600; color: var(--color-fg); }
.sf-checklist-item .ci-desc { color: var(--color-muted); font-size: 11.5px; }
.sf-checklist-item:hover { border-color: var(--color-link); }
.sf-checklist-hint { font-size: 11px; color: var(--color-muted); padding: 0 12px 6px; }
/* Inline text input (e.g. hyperlink href editor). */
.sf-insp-input { flex: 1 1 100%; min-width: 0; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-bg); color: var(--color-fg); box-sizing: border-box; }
.sf-insp-input:focus { outline: 2px solid var(--color-link); outline-offset: 1px; border-color: var(--color-link); }
.sf-insp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-insp-photos img { width: 100%; height: 60px; object-fit: cover; border-radius: 6px; border: 2px solid var(--color-rule); cursor: pointer; }
/* v3.6.0: album label strips in the image picker (grouped like the dashboard hero-pick). */
.sf-insp-alb { font: 700 11px/1.3 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin: 12px 0 5px; }
.sf-insp-alb:first-child { margin-top: 0; }
.sf-insp-body input[type=color] { width: 46px; height: 40px; border: 1px solid var(--color-rule); border-radius: 6px; background: var(--color-bg); cursor: pointer; }
.sf-insp-body input[type=range] { flex: 1; min-width: 130px; }
@media (prefers-reduced-motion: reduce) { .sf-inspector { transition: none; } }