/* The embed (/embed; README "Embed and JS SDK"): the server marks its <html> `data-embed`, so this
   applies before any script runs. Only the 3D view, notices and the status card stay; the rest is
   hidden, not removed: modules still find their nodes. No hover tooltip
   (raw part names) and no orbit pivot dot: a product, not an editor. */
html[data-embed] :is(.sv-bar, .sv-stats, .sv-model-help, .sv-dock, .sv-drop, .sv-drawer, .sv-card,
  .sv-visibility, .sv-live-dot, .sv-menu, .sv-tip, .sv-pivot-marker) {
  display: none !important;
}

/* Dark like the default `showroom` stage (the server's backdrop shows once the video plays);
   embed.js sets `data-theme="studio"` for the light one. */
html[data-embed]:not([data-theme="studio"]) {
  --sv-viewport-bg: #07080a;
  --sv-stage-bg: linear-gradient(#15171c, #07080a); /* stage.wgsl's showroom, raw sRGB top → bottom */
  --sv-surface: #1b1d23;
  --sv-border: #2c2f37;
  --sv-ink: #f2f2f4;
  --sv-muted: #a3a6ae;
  --sv-faint: #8e919a;
  --sv-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

html[data-embed]:not([data-theme="studio"]) #viewer {
  color-scheme: dark; /* base.css sets light here */
}

/* No top bar: notices sit near the top edge. */
html[data-embed] .sv-toast {
  top: 16px;
}

/* The pointer only over a configurator group's part (embed.js `is-config`): a click there picks
   what the page offers; over the rest the view just turns. */
html[data-embed] .sv-viewport video.is-hot:not(.is-config, :active) {
  cursor: grab;
}

/* kova-site docs/standard.md § 11.10, over a page that scrolls (input.js `pageScrolls`): a vertical
   one-finger swipe scrolls the host page, a horizontal one turns the model, two fingers pinch and pan
   (`scroll=viewer` and the page's own viewer: none, every finger turns). */
html[data-scroll="page"] .sv-viewport video {
  touch-action: pan-y;
}

/* ...and the scroll chains on to the host page (base.css stops it for the page's own viewer). */
html[data-scroll="page"],
html[data-scroll="page"] body {
  overscroll-behavior: auto;
}

/* input.js: an unengaged wheel scrolls the page; this says how to zoom (§ 11.9), 1.5 s past the last. */
.sv-wheel-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.65);
  color: #fff;
  font: 14px/1.3 var(--sv-font);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}

.sv-wheel-hint.is-on {
  opacity: 1;
}

html[data-motion="reduced"] .sv-wheel-hint {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .sv-wheel-hint {
    transition: none;
  }
}