/* Product studio theme: the model is the hero, chrome recedes. The 3D view (a <video> fed over
   WebRTC) fills the window; the parts list, the details card and the toolbar float over it. */
:root {
  --sv-viewport-bg: #ecebe8;
  --sv-surface: #fff;
  --sv-hover: #efeeeb;
  --sv-border: #e2e0dc;
  --sv-border-strong: #8c8983; /* control borders: 3.5:1 on white (containers use --sv-border) */
  --sv-ink: #17171a;
  --sv-muted: #605e5a;
  --sv-faint: #6d6a65; /* 4.5:1 on --sv-viewport-bg, 5.4:1 on white: the small grey text stays readable */
  --sv-accent: #2747d6;
  --sv-accent-soft: #eaeefd;
  --sv-danger: #b42318;
  --sv-shadow: 0 1px 2px rgb(23 23 26 / 0.06), 0 8px 24px rgb(23 23 26 / 0.1);
  --sv-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

#viewer {
  position: fixed;
  inset: 0 0 auto;
  /* dvh so iOS Safari's collapsing toolbars never crop the view (vh fallback). */
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--sv-ink);
  background: var(--sv-viewport-bg);
  font: 13px/1.5 var(--sv-font);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  /* No double-tap zoom on the chrome; the video opts out of browser gestures entirely. */
  touch-action: manipulation;
}

#viewer *,
#viewer *::before,
#viewer *::after {
  box-sizing: inherit;
}

/* The display rules below would beat the hidden attribute's. */
#viewer [hidden] {
  display: none !important;
}

#viewer :where(button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
}

#viewer :where(button, input) {
  font: inherit;
  color: inherit;
}

#viewer button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--sv-border-strong);
  border-radius: 8px;
  color: var(--sv-ink);
  background: var(--sv-surface);
  font-weight: 550;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}

#viewer button:hover:not(:disabled) {
  background: var(--sv-hover);
}

#viewer button:disabled {
  color: var(--sv-faint);
  cursor: default;
  opacity: 0.6;
}

.sv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  #viewer *,
  #viewer *::before,
  #viewer *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Touch: finger-sized buttons. */
@media (pointer: coarse) {
  #viewer button {
    min-height: 40px;
  }
}