/* ------------------------------------------------------------------
 * v4.26d — Core organism card framing (Operator + Demo)
 *
 * Goals:
 *   - Kill accidental clipping (overflow: hidden) on the shell.
 *   - Give the orbit a bit more breathing room at the bottom so
 *     "Explore" + labels never get chopped.
 *   - Let the canvas scale cleanly inside the card.
 * ------------------------------------------------------------------ */

/* The outer card that holds the visual shell */
.visual-organism-shell,
.visual-organism-card,
.organism-card {
  position: relative;
  overflow: visible !important;     /* never clip the orbit or labels */
}

/* Viewport that centers the organism inside the card */
.organism-viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0 72px;             /* extra bottom space for Explore */
  overflow: visible !important;
}

/* Inner container around the canvas / drawing surface */
.organism-shell-container,
.organism-viewport-inner {
  position: relative;
  width: min(480px, 80vw);
  aspect-ratio: 1 / 1;              /* keep the field perfectly round */
  overflow: visible !important;
}

/* The canvas (or SVG) that draws the organism */
.organism-canvas,
.organism-shell-container canvas,
.organism-viewport-inner canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform: none !important;
}

/* Any nested elements should be allowed to breathe */
.visual-organism-shell *,
.organism-viewport *,
.organism-shell-container * {
  overflow: visible !important;
}

/* ------------------------------------------------------------------
 * v4.26 — Breathing halo for Demo mode
 * ------------------------------------------------------------------
 * We add a subtle radial gradient "aura" behind the orbit in Demo
 * mode, animated very slowly to feel like a living field rather
 * than a UI widget.
 *
 * This is implemented as a ::before pseudo-element on the first
 * child card inside .organism-viewport (the orbit card).
 * ------------------------------------------------------------------ */

/* Make sure the orbit card can host an absolutely-positioned halo. */
body.demo-active .organism-viewport > :first-child {
  position: relative;
  overflow: visible;
}

body.demo-active .organism-viewport > :first-child::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(56, 189, 248, 0.32),
      rgba(15, 23, 42, 0.0) 70%
    );
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 420ms ease-out,
    transform 420ms ease-out;
  animation: organism-breathe 8s ease-in-out infinite;
}

/* Slightly visible even at rest in Demo mode, to feel "on". */
body.demo-active .organism-viewport > :first-child::before {
  opacity: 0.22;
}

@keyframes organism-breathe {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.18;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.32;
  }
}

/* ----------------------------------------------------------
 * v4.26a – Operator / visual shell sizing polish
 * ---------------------------------------------------------- */

/* Ensure the shell container behaves like a centered block
   both in the operator panel and on the dedicated visual page. */
.organism-shell-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Core viewport sizing:
   - Take a good chunk of the card width
   - Stay perfectly square
   - Centered with breathing room around it */
.organism-shell-container .organism-viewport {
  width: min(420px, 40vw);
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 20px auto 12px;
}

/* When space is tighter (e.g. very small laptops),
   avoid the organism shrinking into a postage stamp. */
@media (max-width: 1024px) {
  .organism-shell-container .organism-viewport {
    width: min(360px, 55vw);
  }
}

/* When plenty of vertical room (e.g. tall monitor),
   allow a slightly larger organism without clipping. */
@media (min-height: 900px) {
  .organism-shell-container .organism-viewport {
    width: min(460px, 42vw);
    max-width: 520px;
  }
}