/* ------------------------------------------------------------------
 * v4.26b — Simplified demo layout (Apple pass)
 * ------------------------------------------------------------------
 * We remove any hard clipping / masking and treat the orbit card as
 * a centered hero in Demo mode. This is deliberately conservative:
 * no fancy transforms, just clean framing.
 * ------------------------------------------------------------------ */

.demo-zoom-mask {
  /* No clipping or masking: let the orbit render fully. */
  overflow: visible;
  -webkit-mask: none;
  mask: none;

  /* Center the content and keep it at a safe max size. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0 3rem;
}

/* The orbit card inside the mask behaves like a single hero object. */
.demo-zoom-mask > * {
  max-width: min(72vh, 900px);
  width: 100%;
}

/* ------------------------------------------------------------------
 * v4.26 — Demo presentation layout (Apple exec pass)
 * ------------------------------------------------------------------
 * When the body has .demo-active (toggled by the Demo button),
 * we treat the organism visual as a single centered hero card.
 * The right-hand inspector card is hidden, and the viewport is
 * constrained so the circular field never feels cropped.
 * ------------------------------------------------------------------ */

body.demo-active .organism-viewport {
  max-width: 960px;
  margin: 3.5rem auto 4.5rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* First child = orbit card, second child = inspector card.
 * We keep the orbit, hide the inspector for a clean demo view.
 */
body.demo-active .organism-viewport > :first-child {
  flex: 0 0 auto;
  max-width: min(72vh, 900px);
}

body.demo-active .organism-viewport > :nth-child(2) {
  display: none;
}

/* Ensure the big circular mask fits comfortably on screen
 * and never feels hard-clipped at the edges.
 */
body.demo-active .demo-zoom-mask,
body.demo-active .organism-viewport > :first-child {
  width: 100%;
  max-width: min(72vh, 900px);
  margin-inline: auto;
}

/* ------------------------------------------------------------------
 * v4.26c – Demo hard reset for Apple exec
 *
 * Objective:
 *   - Kill the over-zoomed circular crop.
 *   - Force demo layout back into a clean, centered card.
 *   - Do NOT touch Operator mode.
 *
 * This block uses !important extensively to override any older
 * demo rules (clip-path, transforms, etc.).
 * ------------------------------------------------------------------ */

/* Demo body: same overall feeling as operator, just a bit more stage */
body.demo-active {
  overflow-y: auto;
}

/* Stage: center the organism card on the page */
body.demo-active .organism-viewport {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 0 40px !important;
}

/* Outer demo wrapper – no circular crop, no hidden overflow */
body.demo-active .demo-zoom-mask,
body.demo-active .visual-organism-shell,
body.demo-active .organism-shell-container {
  position: relative !important;
  width: 100% !important;
  max-width: 860px !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 24px !important;   /* soft rectangle */
  clip-path: none !important;       /* kill circular mask */
  overflow: visible !important;
  transform: none !important;       /* kill zoom/translate */
}

/* Canvas should always fit inside the card, never overflow */
body.demo-active canvas,
body.demo-active .organism-canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
}

/* ----------------------------------------------------------
 * v4.26a – Demo mode zoom refinement
 * ---------------------------------------------------------- */

/* Demo zoom mask: keep it cinematic but not overwhelming. */
.demo-zoom-mask {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  margin: 0 auto;
  /* Let the mask breathe inside the viewport */
  padding: 32px;
}

/* In demo mode, let the organism grow,
   but keep it within a sensible bound so labels aren't chopped. */
body.demo-active .organism-shell-container .organism-viewport {
  width: min(520px, 70vh);
  max-width: 560px;
  aspect-ratio: 1 / 1;
}

/* On really wide / tall displays, allow a touch more size,
   but never full-bleed to the edges. */
@media (min-width: 1440px) and (min-height: 900px) {
  body.demo-active .organism-shell-container .organism-viewport {
    width: min(600px, 72vh);
    max-width: 620px;
  }
}

/* v4.26b – Executive presentation override
   The circular "spotlight" mask can crop the organism shell and
   look misaligned on large displays. For executive / demo use we
   prefer a clean, uncropped visual, so we hide the mask entirely. */
.demo-zoom-mask {
  display: none !important;
}