/* PeptideScope: #stage-host internals (body).
   Canvas background, callout labels in #callout-layer, the zoom buttons, the skip button, the colour key,
   the "drag to turn" hint, the anatomy credit, the one "Body" button and its panel (#body-editor, rendered
   by js/ui/bodyeditor.js: Shape and Layers tabs).
   The frame itself (size, border radius, loading, fallback) belongs to app.css.

   v4 (docs/ARCHITECTURE.md, "v4: simpler, faster, for teens"): light-first, spacious, friendly. Soft
   #F7F6FB stage with a faint vignette (dark variant #0F0E17), violet #6246EA for focus and the drug,
   arteries #E5484D, veins #3E63DD, amber and red only for warnings. White cards with soft shadows,
   16–24 px radii, pill buttons, sentence case. No HUD. Scoped copies of the tokens (--st-*) keep the
   overlay correct in the sandbox too. */

/* ---------------------------------------------------------------- scoped palette (light default) */
.stage-host,
#stage-host {
  --st-bg: #f7f6fb;
  --st-vignette: radial-gradient(75% 62% at 50% 42%, #ffffff 0%, #f7f6fb 58%, #eeecf6 100%);
  --st-surface: #ffffff;
  --st-surface-2: #f0eef8;
  --st-line: #e4e1f0;
  --st-line-strong: #cfcbe2;
  --st-text: #17142b;
  --st-text-2: #2e2a4a;
  --st-muted: #5b5873;
  --st-primary: #6246ea;
  --st-primary-soft: #ece8ff;
  --st-on-primary: #ffffff;
  --st-drug: #6246ea;
  --st-artery: #e5484d;
  --st-vein: #3e63dd;
  --st-warn: #b45309;
  --st-warn-bg: #fff4e5;
  --st-danger: #d92d20;
  --st-danger-bg: #fdecea;
  --st-focus: #6246ea;
  --st-shadow: 0 1px 2px rgba(23, 20, 43, 0.06), 0 8px 24px -8px rgba(23, 20, 43, 0.16);
  --st-shadow-lg: 0 2px 6px rgba(23, 20, 43, 0.06), 0 24px 48px -16px rgba(23, 20, 43, 0.24);
  --st-glass: rgba(255, 255, 255, 0.86);
  --st-sans: var(--font-sans, "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --st-display: var(--font-display, "Nunito", var(--st-sans));
  --st-ease: cubic-bezier(.2, .7, .1, 1);
}
html[data-theme="dark"] .stage-host,
html[data-theme="dark"] #stage-host {
  --st-bg: #0f0e17;
  --st-vignette: radial-gradient(75% 62% at 50% 42%, #1c1a33 0%, #0f0e17 62%, #0b0a12 100%);
  --st-surface: #17162a;
  --st-surface-2: #1f1d35;
  --st-line: #2c2a45;
  --st-line-strong: #3d3a5c;
  --st-text: #f3f2fa;
  --st-text-2: #d8d6ea;
  --st-muted: #a9a6c4;
  --st-primary: #9d8cff;
  --st-primary-soft: #2a2550;
  --st-on-primary: #17142b;
  --st-drug: #b3a4ff;
  --st-artery: #ff6369;
  --st-vein: #7b93ff;
  --st-warn: #f5b454;
  --st-warn-bg: #3a2a12;
  --st-danger: #ff7a70;
  --st-danger-bg: #3d1714;
  --st-focus: #b3a4ff;
  --st-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -10px rgba(0, 0, 0, 0.6);
  --st-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  --st-glass: rgba(23, 22, 42, 0.86);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage-host,
  :root:not([data-theme="light"]) #stage-host {
    --st-bg: #0f0e17;
    --st-vignette: radial-gradient(75% 62% at 50% 42%, #1c1a33 0%, #0f0e17 62%, #0b0a12 100%);
    --st-surface: #17162a;
    --st-surface-2: #1f1d35;
    --st-line: #2c2a45;
    --st-line-strong: #3d3a5c;
    --st-text: #f3f2fa;
    --st-text-2: #d8d6ea;
    --st-muted: #a9a6c4;
    --st-primary: #9d8cff;
    --st-primary-soft: #2a2550;
    --st-on-primary: #17142b;
    --st-drug: #b3a4ff;
    --st-artery: #ff6369;
    --st-vein: #7b93ff;
    --st-warn: #f5b454;
    --st-warn-bg: #3a2a12;
    --st-danger: #ff7a70;
    --st-danger-bg: #3d1714;
    --st-focus: #b3a4ff;
    --st-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -10px rgba(0, 0, 0, 0.6);
    --st-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
    --st-glass: rgba(23, 22, 42, 0.86);
  }
}

/* ---------------------------------------------------------------- canvas */
.has-body3d #stage-canvas-host { background: var(--st-bg); background-image: var(--st-vignette); }
#stage-canvas-host > canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* one-finger vertical swipes keep scrolling the page; horizontal drags rotate; pinch zooms */
  touch-action: pan-y;
  outline: none;
  cursor: grab;
}
#stage-canvas-host > canvas:active { cursor: grabbing; }
#stage-canvas-host > canvas:focus-visible {
  outline: 3px solid var(--st-focus);
  outline-offset: -3px;
  border-radius: inherit;
}
/* v4: no HUD (corners, rulers, model and phase labels); the narration beside the stage says what happens */
.has-body3d .stage-hud { display: none; }
.stage-host.is-swapping #stage-canvas-host > canvas { opacity: 0.6; transition: opacity 200ms var(--st-ease); }

/* ---------------------------------------------------------------- callouts */
.ps-callouts { overflow: hidden; contain: layout paint; }
.ps-callout-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ps-callout-line {
  fill: none;
  stroke: var(--st-line-strong);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.ps-callout-line--warn { stroke: color-mix(in srgb, var(--st-warn) 60%, transparent); }
.ps-callout-line--danger { stroke: color-mix(in srgb, var(--st-danger) 60%, transparent); }
.ps-callout-line--drug,
.ps-callout-line--info,
.ps-callout-line--site { stroke: color-mix(in srgb, var(--st-primary) 55%, transparent); }

.ps-callout-dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-surface) 85%, transparent);
  pointer-events: none;
  will-change: transform;
}
.ps-callout-dot--warn { background: var(--st-warn); }
.ps-callout-dot--danger { background: var(--st-danger); }
.ps-callout-dot--drug { background: var(--st-drug); }
.ps-callout-dot--tissue { background: var(--st-muted); width: 6px; height: 6px; left: -3px; top: -3px; }

.ps-callout {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  max-width: 220px;
  padding: 7px 12px 8px;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  background: var(--st-surface);
  box-shadow: var(--st-shadow);
  color: var(--st-text);
  font: inherit;
  font-family: var(--st-sans);
  text-align: left;
  line-height: 1.3;
  pointer-events: none;
  will-change: transform;
  animation: ps-callout-in 220ms var(--st-ease) both;
}
.ps-callout[hidden] { display: none; }
.ps-callout--interactive { pointer-events: auto; cursor: pointer; transition: border-color 160ms var(--st-ease), box-shadow 160ms var(--st-ease); }
/* an invisible hit area so every tappable label is at least 44 px tall (a11y review); it looks the same */
.ps-callout--interactive::before { content: ""; position: absolute; inset: -7px -4px; }
@media (hover: hover) and (pointer: fine) {
  .ps-callout--interactive:hover { border-color: color-mix(in srgb, var(--st-primary) 45%, var(--st-line)); box-shadow: var(--st-shadow-lg); }
}
.ps-callout--interactive:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.ps-callout__title {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}
.ps-callout__text {
  font-size: 0.78rem;
  color: var(--st-muted);
}
.ps-callout__text[hidden] { display: none; }
.ps-callout--warn { background: var(--st-warn-bg); border-color: color-mix(in srgb, var(--st-warn) 30%, transparent); }
.ps-callout--warn .ps-callout__title { color: var(--st-warn); }
.ps-callout--danger { background: var(--st-danger-bg); border-color: color-mix(in srgb, var(--st-danger) 32%, transparent); }
.ps-callout--danger .ps-callout__title { color: color-mix(in srgb, var(--st-danger) 85%, var(--st-text)); } /* ≥ 4.5:1 on the pink card */
.ps-callout--drug .ps-callout__title { color: var(--st-primary); }
.ps-callout--tissue { padding: 5px 10px 6px; border-radius: 10px; }
.ps-callout--tissue .ps-callout__title { font-size: 0.8rem; }
.ps-callout--tissue .ps-callout__text { font-size: 0.72rem; }
/* injection-site labels: a friendly pill with the site name */
.ps-callout--site { flex-direction: row; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; }
.ps-callout--site .ps-callout__title { font-size: 0.82rem; }
.ps-callout--site .ps-callout__text { font-size: 0.72rem; }
.ps-callout--site.ps-callout--interactive:hover .ps-callout__title { color: var(--st-primary); }

/* a label with no room folds into this dot at its anchor; a tap opens the label (js/scene/callouts.js) */
.ps-callout-mini {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2.5px solid var(--st-surface);
  border-radius: 50%;
  background: var(--st-primary);
  box-shadow: var(--st-shadow);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  animation: ps-callout-in 220ms var(--st-ease) both;
}
.ps-callout-mini::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; }
.ps-callout-mini[hidden] { display: none; }
.ps-callout-mini--warn { background: var(--st-warn); }
.ps-callout-mini--danger { background: var(--st-danger); }
.ps-callout-mini--drug { background: var(--st-drug); }
.ps-callout-mini:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }

@keyframes ps-callout-in {
  from { opacity: 0; transform-origin: center; }
  to { opacity: 1; }
}

@container stage (max-width: 559.98px) {
  .ps-callout { max-width: 172px; padding: 6px 10px 7px; border-radius: 10px; }
  .ps-callout__title { font-size: 0.8rem; }
  /* side-effect subtitles wrap; they are never cut off with an ellipsis (teen-ux review) */
  .ps-callout__text { font-size: 0.72rem; line-height: 1.3; }
  .ps-callout--site .ps-callout__text { display: none; }
}

/* ---------------------------------------------------------------- shared button look */
.stage-tool,
.stage-body-btn,
.stage-skip {
  font-family: var(--st-sans);
  color: var(--st-text);
  border: 1px solid var(--st-line);
  background: var(--st-surface);
  box-shadow: var(--st-shadow);
  cursor: pointer;
  transition: border-color 160ms var(--st-ease), background-color 160ms var(--st-ease), box-shadow 160ms var(--st-ease), color 160ms var(--st-ease);
}
@media (hover: hover) and (pointer: fine) {
  .stage-tool:hover,
  .stage-body-btn:hover,
  .stage-skip:hover { border-color: color-mix(in srgb, var(--st-primary) 40%, var(--st-line)); color: var(--st-primary); }
}
.stage-tool:focus-visible,
.stage-skip:focus-visible,
.stage-body-btn:focus-visible {
  outline: 3px solid var(--st-focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- zoom buttons (bottom right) */
.stage-tools {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: var(--z-callouts, 3);
  display: flex;
  gap: 8px;
}
.stage-tool {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

/* ---------------------------------------------------------------- skip (bottom centre while the injection plays) */
.stage-skip {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: var(--z-callouts, 3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  transform: translateX(-50%);
  animation: ps-callout-in 220ms var(--st-ease) both;
}
.stage-skip[hidden] { display: none; }
.stage-skip svg { color: var(--st-primary); width: 16px; height: 16px; }

/* ---------------------------------------------------------------- colour key (appears with the injection) */
.stage-legend {
  position: absolute;
  left: 14px;
  bottom: 40px;
  z-index: var(--z-stage-hud, 2);
  display: none;
  gap: 14px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--st-glass);
  list-style: none;
  color: var(--st-text-2);
  font-family: var(--st-sans);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}
.stage-host.has-drug-key .stage-legend { display: flex; }
.stage-legend li { display: inline-flex; align-items: center; gap: 6px; }
.stage-legend .sw { width: 10px; height: 10px; border-radius: 50%; }
.stage-legend .sw--artery { background: var(--st-artery); }
.stage-legend .sw--vein { background: var(--st-vein); }
.stage-legend .sw--drug { background: var(--st-drug); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-drug) 22%, transparent); }

/* ---------------------------------------------------------------- hint (bottom centre, fades after first touch) */
.stage-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: var(--z-stage-hud, 2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--st-glass);
  color: var(--st-muted);
  font-family: var(--st-sans);
  font-size: 0.86rem;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 400ms var(--st-ease);
}
.stage-hint svg { color: var(--st-primary); }
.stage-hint.is-hidden,
.stage-host.is-sequence-playing .stage-hint { opacity: 0; }

.stage-zoom-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-stage-overlay, 4);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--st-surface);
  box-shadow: var(--st-shadow-lg);
  color: var(--st-text);
  font-family: var(--st-sans);
  font-size: 0.9rem;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 300ms var(--st-ease);
}
.stage-zoom-hint.is-visible { opacity: 1; }

/* Anatomy attribution (CC BY 4.0): small, quiet, but a real link with a visible focus ring. */
.stage-credit {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: var(--z-callouts, 3);
  margin: 0;
  color: var(--st-muted);
  font-family: var(--st-sans);
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.stage-credit a {
  display: inline-block;
  padding: 15px 4px;  /* a 44 px tall tap target without moving the text (a11y review) */
  margin: -15px -4px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 2px;
  pointer-events: auto;
  border-radius: 2px;
}
.stage-credit a:hover { color: var(--st-text); text-decoration-color: currentColor; }
.stage-credit__short { display: none; }
.stage-credit a:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; color: var(--st-text); }

/* WebGL context lost: a calm status note over the frozen frame. */
.stage-context-note {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-stage-overlay, 4);
  max-width: min(360px, calc(100% - 48px));
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--st-surface);
  box-shadow: var(--st-shadow-lg);
  color: var(--st-text);
  font-family: var(--st-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
  transform: translate(-50%, -50%);
}
.stage-context-note[hidden] { display: none; }
.stage-host.is-context-lost #stage-canvas-host,
.stage-host.is-context-lost #callout-layer { visibility: hidden; }

/* ---------------------------------------------------------------- the "Body" button (top right) */
.stage-panel-btns {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: var(--z-stage-overlay, 4);
  display: flex;
  gap: 8px;
}
.stage-body-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
}
.stage-body-btn svg { color: var(--st-primary); flex: none; }
.stage-body-btn[aria-expanded="true"] { background: var(--st-primary-soft); border-color: color-mix(in srgb, var(--st-primary) 40%, var(--st-line)); color: var(--st-text); }
.stage-body-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------- the Body panel */
.body-editor {
  position: absolute;
  top: 68px;
  right: 14px;
  z-index: var(--z-stage-overlay, 4);
  display: flex;
  flex-direction: column;
  width: 320px;
  max-height: calc(100% - 82px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 16px;
  border: 1px solid var(--st-line);
  border-radius: 20px;
  background: var(--st-surface);
  box-shadow: var(--st-shadow-lg);
  color: var(--st-text);
  font-family: var(--st-sans);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--st-ease), transform 200ms var(--st-ease);
}
.body-editor[hidden] { display: none; }
.body-editor.is-open { opacity: 1; transform: none; }

.be-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.be-title {
  margin: 0;
  color: var(--st-text);
  font-family: var(--st-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}
.be-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -10px -8px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--st-muted);
  cursor: pointer;
}
.be-close:hover { background: var(--st-surface-2); color: var(--st-text); }
.be-close:focus-visible,
.be-reset:focus-visible,
.be-tab:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }

/* tabs: a two-option segmented control */
.be-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--st-surface-2);
}
.be-tab {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--st-muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.be-tab[aria-selected="true"] { background: var(--st-surface); color: var(--st-text); box-shadow: var(--st-shadow); }
.be-pane[hidden] { display: none; }

.be-field {
  margin: 0;
  padding: 12px 0 10px;
  border: 0;
  min-inline-size: 0;
}
.be-label {
  display: block;
  padding: 0;
  color: var(--st-text);
  font-size: 0.9rem;
  font-weight: 600;
}
.be-sex .be-label,
.be-tones .be-label,
.lp-show .be-label { margin-bottom: 8px; }

/* Male / Female (native radios, visually replaced) */
.be-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.be-seg__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  color: var(--st-text-2);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms var(--st-ease), background-color 160ms var(--st-ease);
}
.be-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.be-seg__opt:has(input:checked) { border-color: var(--st-primary); background: var(--st-primary-soft); color: var(--st-text); font-weight: 600; }
.be-seg__opt:has(input:focus-visible) { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.be-seg__opt.is-unavailable { opacity: 0.55; cursor: progress; }

/* skin tone swatches (appearance only) */
.be-tone-row { display: flex; gap: 6px; flex-wrap: wrap; }
.be-tone { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.be-tone input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.be-tone__sw {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  transition: box-shadow 160ms var(--st-ease);
}
.be-tone:has(input:checked) .be-tone__sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 2px var(--st-surface), 0 0 0 4px var(--st-primary); }
.be-tone:has(input:focus-visible) { outline: 3px solid var(--st-focus); outline-offset: 1px; }
.be-tone:has(input:disabled) { cursor: not-allowed; opacity: 0.5; }
.be-hint { margin: 6px 0 0; color: var(--st-muted); font-size: 0.8rem; line-height: 1.45; }

/* sliders */
.be-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.be-read { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.be-num { color: var(--st-text); font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.be-alt { color: var(--st-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.be-alt[hidden] { display: none; }
.be-slider {
  --p: 50%;
  display: block;
  width: 100%;
  height: 44px;
  margin: -4px 0 -4px;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.be-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--st-primary) 0 var(--p), var(--st-surface-2) var(--p) 100%);
}
.be-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--st-surface-2); }
.be-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--st-primary); }
.be-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 3px solid var(--st-primary);
  border-radius: 50%;
  background: var(--st-surface);
  box-shadow: 0 1px 4px rgba(23, 20, 43, 0.25);
}
.be-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--st-primary);
  border-radius: 50%;
  background: var(--st-surface);
  box-shadow: 0 1px 4px rgba(23, 20, 43, 0.25);
}
.be-slider:focus { outline: none; }
.be-slider:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; border-radius: 8px; }
.be-slider:disabled { opacity: 0.5; cursor: not-allowed; }

.be-foot { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.be-reset {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  background: var(--st-surface);
  color: var(--st-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.be-reset:hover { border-color: color-mix(in srgb, var(--st-primary) 40%, var(--st-line)); color: var(--st-primary); }
.be-reset:disabled { opacity: 0.5; cursor: not-allowed; }
.be-status { margin: 0; color: var(--st-muted); font-size: 0.82rem; }
.be-status:empty { display: none; }
.be-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--st-primary-soft);
  color: var(--st-text-2);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- Layers tab */
.lp-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.lp-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--st-text-2);
  font-size: 0.9rem;
  cursor: pointer;
}
.lp-switch[hidden] { display: none; }
.lp-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.lp-switch__box {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--st-muted); /* the off state is visible too (≥ 3:1, a11y review) */
  transition: background-color 160ms var(--st-ease);
}
.lp-switch__box::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(23, 20, 43, 0.3);
  transition: transform 160ms var(--st-ease);
}
.lp-switch:has(input:checked) { color: var(--st-text); }
.lp-switch:has(input:checked) .lp-switch__box { background: var(--st-primary); }
.lp-switch:has(input:checked) .lp-switch__box::after { transform: translateX(16px); }
.lp-switch:has(input:focus-visible) .lp-switch__box { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.lp-switch:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.lp-ends { display: flex; justify-content: space-between; margin-top: 2px; }
.lp-end {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--st-muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.lp-end:hover { color: var(--st-primary); }
.lp-end:focus-visible, .lp-item:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; border-radius: 8px; }
.lp-structures summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.lp-structures summary::-webkit-details-marker { display: none; }
.lp-structures summary::after { content: "+"; color: var(--st-primary); font-size: 1.2rem; font-weight: 600; }
.lp-structures[open] summary::after { content: "−"; }
.lp-structures summary:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; border-radius: 8px; }
.lp-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.lp-item {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  background: var(--st-surface);
  color: var(--st-text-2);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.lp-item:hover { border-color: color-mix(in srgb, var(--st-primary) 40%, var(--st-line)); color: var(--st-primary); }

/* ---------------------------------------------------------------- narrow stages */
/* The stage frame is a size container (app.css). */
@container stage (max-width: 559.98px) {
  /* the panel becomes a sheet along the bottom of the stage */
  .body-editor {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: calc(100% - 70px);
    padding: 12px 14px 12px;
    border-radius: 20px;
  }
  .be-field { padding: 8px 0 6px; }
  .stage-tool { width: 44px; height: 44px; }
  .stage-tools { right: 10px; bottom: 10px; gap: 6px; }
  .stage-panel-btns { top: 10px; right: 10px; }
  .stage-body-btn { min-height: 44px; padding: 0 14px 0 12px; font-size: 0.9rem; }
  .stage-credit { left: 12px; bottom: 12px; font-size: 0.66rem; }
  .stage-credit__long { display: none; }
  .stage-credit__short { display: inline; }
  .stage-legend { left: 10px; bottom: 34px; gap: 10px; font-size: 0.72rem; }
  .stage-hint { bottom: 58px; font-size: 0.8rem; }
  .stage-skip { bottom: 70px; }
}
/* Single-column layouts (phones, tablets): the Body panel is a sheet UNDER the body, in extra room the
   stage grows by while it is open (app.css), so moving a slider shows its result right above (teen-ux
   review). The canvas, the labels and the bottom controls keep the original stage height. */
@media (max-width: 959.98px) {
  .stage-host.has-body-editor-open .body-editor {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: var(--be-sheet-h, 340px);
    max-height: none;
    padding: 12px 16px 14px;
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: none;
  }
}
/* Two-column layout (desktop) with a narrow stage (e.g. 1024 px wide): the panel stays a narrower
   side panel instead of a sheet over the body; the scene frames the body in the space it leaves free
   (stage.setFrameInset), so the whole body stays in view while the sliders move. */
@media (min-width: 960px) {
  @container stage (max-width: 699.98px) {
    .body-editor {
      top: 64px;
      left: auto;
      right: 10px;
      bottom: auto;
      width: min(290px, 56cqw);
      max-height: calc(100% - 76px);
      padding: 14px 14px;
      border-radius: 18px;
    }
  }
}
/* mid-width stages: the colour key and the credit (bottom left) would run under the centred Skip button */
@container stage (min-width: 560px) and (max-width: 799.98px) {
  .stage-skip { bottom: 78px; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ps-callout,
  :root:not([data-motion="full"]) .stage-skip { animation: none; }
  :root:not([data-motion="full"]) :is(.stage-tool, .stage-zoom-hint, .stage-hint, .ps-callout--interactive, .stage-body-btn, .body-editor, .be-seg__opt, .be-reset, .be-close, .be-tone__sw, .lp-switch__box, .lp-switch__box::after, .lp-item) { transition: none; }
  :root:not([data-motion="full"]) .body-editor { transform: none; }
}
html[data-motion="reduce"] .ps-callout,
html[data-motion="reduce"] .stage-skip { animation: none; }
html[data-motion="reduce"] :is(.stage-tool, .stage-zoom-hint, .stage-hint, .ps-callout--interactive, .stage-body-btn, .body-editor, .be-seg__opt, .be-reset, .be-close, .be-tone__sw, .lp-switch__box, .lp-switch__box::after, .lp-item) { transition: none; }
html[data-motion="reduce"] .body-editor { transform: none; }

/* ---------------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .ps-callout, .stage-tool, .stage-skip, .stage-body-btn, .body-editor, .be-seg__opt, .be-reset, .lp-item, .be-tab {
    border: 1px solid CanvasText; background: Canvas; color: CanvasText;
  }
  .ps-callout-dot { background: Highlight; box-shadow: none; }
  .ps-callout-line { stroke: CanvasText; }
  .be-seg__opt:has(input:checked), .be-tab[aria-selected="true"], .lp-switch:has(input:checked) .lp-switch__box { background: Highlight; color: HighlightText; }
}