/* 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. */
/* Top-center so the bottom-sheet inspector never covers it. Small + semi-transparent at rest
   (less obtrusive); full opacity on hover/focus. `top` is JS-managed (collision auto-lower) so it
   transitions smoothly when it drops below a sticky header. */
.sf-modebar { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 9100; display: flex; gap: 3px; background: var(--color-bg); border: 1px solid var(--color-link); border-radius: 18px; padding: 2px; box-shadow: 0 2px 9px rgba(0,0,0,0.2); opacity: 0.6; transition: opacity 160ms ease, top 180ms ease; }
.sf-modebar:hover, .sf-modebar:focus-within { opacity: 1; }
.sf-modebar 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: var(--color-fg); cursor: pointer; }
.sf-modebar button.active { background: var(--color-link); color: #fff; }
.sf-modebar button:disabled { opacity: 0.5; cursor: default; }
/* Undo/Redo are Design-mode actions — hide them in View mode so the bar shows only the mode toggle. */
body:not(.sf-design) #sf-undo, body:not(.sf-design) #sf-redo { 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 .28s ease, visibility 0s linear .28s; max-height: 62vh; display: flex; flex-direction: column; visibility: hidden; pointer-events: none; }
.sf-inspector.open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .28s ease, visibility 0s linear 0s; }
.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; }
/* 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 180ms ease; outline: 1px dashed rgba(127,127,127,0.42); outline-offset: 2px; }
/* 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; }
.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; } }