/* v0.3: a spacious frame and a compact mathematical drawing are different
   things. Never scale the frame, text or hit targets to shrink a diagram. */
:root {
  --melo-frame-height: clamp(30rem, calc(100dvh - var(--melo-player-height) - var(--melo-footer-space) - 4.5rem), 37rem);
  /* Compatibility for scene-local caption/readout rows, not object sizing. */
  --melo-stage-height: var(--melo-frame-height);
  /* 70% of original pre-v0.2 maximum coordinate planes, not another 70%
     of the already compact v0.2 objects. Font/button sizes stay intact. */
  --melo-axis-size: 15.4rem;       /* 22rem × .7 */
  --melo-angle-size: 23.1rem;     /* 33rem × .7 */
  --melo-solution-size: 15.75rem; /* 22.5rem × .7 */
  --melo-memory-size: 21rem;      /* 30rem × .7 */
  --melo-transfer-size: 21rem;
  --melo-intersection-plane: 21.75rem; /* 592px × .84 × .7 ≈ 348px */
  --melo-control-strip: 6rem;
  /* Shared host/annotation offset keeps the whole circle plus control in a
     short desktop viewport, with breathing room below the lower label. */
  --melo-intersection-top: calc(var(--melo-control-strip) + (var(--melo-frame-height) - var(--melo-control-strip) - var(--melo-intersection-plane)) / 2 - 1.5rem);
}

html.lesson-flow-active #lesson-main > .lesson-section { padding-top: 0.75rem; }

/* The inline archive is not part of a one-page player. Its data stays in the
   DOM; replay is available through the lesson's step navigation. */
html.lesson-flow-active .lesson-beat-history { display: none; }

.lesson-section > .section-toolbar { min-height: 44px; margin-bottom: 0.5rem; }
.lesson-section > :is(.step-grid, .transfer-inner) { gap: 1.5rem; }

.lesson-section > :is(.step-grid, .transfer-inner) > .visual-stage {
  width: 100%;
  margin-inline: auto;
}
.lesson-section.is-narrating-step > :is(.step-grid, .transfer-inner) > .visual-stage {
  width: min(100%, 54rem);
}

/* Give the explanatory column a readable measure, then stack when the two
   columns no longer fit. A viewport breakpoint must not squeeze text to fit. */
@media (min-width: 960px) {
  .lesson-section > .step-grid { grid-template-columns: minmax(24rem, .85fr) minmax(0, 1.15fr); }
  .lesson-section > .step-grid.visual-first,
  .lesson-section > .transfer-inner { grid-template-columns: minmax(0, 1.15fr) minmax(24rem, .85fr); }
  .lesson-section.is-narrating-step > :is(.step-grid, .transfer-inner),
  #step-5.is-circle-bridge > .transfer-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 959px) {
  .lesson-section > .step-grid,
  .lesson-section > .step-grid.visual-first,
  .lesson-section > .transfer-inner { grid-template-columns: minmax(0, 1fr); }
  .lesson-section > :is(.step-grid, .transfer-inner) > .visual-stage { order: 1; }
  .lesson-section > :is(.step-grid, .transfer-inner) > .step-copy { order: 2; width: 100%; max-width: 38rem; margin-inline: auto; }
}

#step-1 .coordinate-stage,
#step-2 .circle-stage,
#step-3 .angle-stage,
#step-4 .solution-stage,
#step-5 .transfer-stage {
  min-height: var(--melo-frame-height);
  height: var(--melo-frame-height);
}

/* Keep host/canvas selectors separate: :is(... canvas) previously raised
   host specificity and restored a full-frame height during narration. */
#step-2 .manim-lab { min-height: 0; height: var(--melo-frame-height); }
#step-2 .manim-canvas,
#step-2 .circle-stage:has(.melo-coordinate-surface.is-interactive) .manim-canvas,
#step-2 .circle-stage:has(.variation-control:not(.is-cue-hidden)) .manim-canvas {
  min-height: 0;
  height: var(--melo-intersection-plane);
  transform: translateY(var(--melo-intersection-top));
}
#step-2 .manim-canvas canvas { min-height: 0; height: 100%; }

/* Manim keeps frameHeight when its wide canvas resizes. HTML percentage
   anchors use a centered square with exactly the canvas's CSS height. */
#step-2 .intersection-annotation-layer--manim,
#step-2 .circle-stage:has(.melo-coordinate-surface.is-interactive) .intersection-annotation-layer--manim,
#step-2 .circle-stage:has(.variation-control:not(.is-cue-hidden)) .intersection-annotation-layer--manim {
  top: 0;
  left: 50%;
  right: auto;
  width: var(--melo-intersection-plane);
  height: var(--melo-intersection-plane);
  transform: translate(-50%, var(--melo-intersection-top));
}
#step-2 #variation-circle,
#step-2 .circle-stage:has(.melo-coordinate-surface.is-interactive) #variation-circle,
#step-2 .circle-stage:has(.variation-control:not(.is-cue-hidden)) #variation-circle,
#step-2 .intersection-annotation-layer--svg,
#step-2 .circle-stage:has(.melo-coordinate-surface.is-interactive) > .intersection-annotation-layer--svg,
#step-2 .circle-stage:has(.variation-control:not(.is-cue-hidden)) > .intersection-annotation-layer--svg {
  position: absolute;
  top: var(--melo-intersection-top);
  left: 50%;
  width: min(calc(100% - 1rem), var(--melo-intersection-plane));
  height: auto;
  min-height: 0;
  transform: translateX(-50%);
}

#step-1 .axis-card { width: min(calc(100% - 2rem), var(--melo-axis-size)); }

#step-3 .manim-lab,
#step-3 .manim-canvas,
#step-3 .manim-canvas canvas { min-height: 0; height: var(--melo-frame-height); }
#step-3 .angle-stage[data-renderer="svg"] #angle-svg-fallback,
#step-3 .angle-reading-layer {
  width: min(calc(100% - 2rem), var(--melo-angle-size));
  height: auto;
}

#step-4 .solution-circle { width: min(calc(100% - 2rem), var(--melo-solution-size)); }

#step-5 .memory-quadrant {
  top: max(0.75rem, calc((var(--melo-frame-height) - var(--melo-memory-size)) / 2));
  width: min(calc(100% - 2rem), var(--melo-memory-size));
}

/* Long captions remain a separate row; a tall frame may grow with content.
   Only the active lesson section scrolls, never a second viewport in a stage. */
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0.65rem;
  height: auto;
  min-height: var(--melo-frame-height);
  padding: 0.75rem 0.5rem;
}
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] > #transfer-circle-map,
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] > .transfer-mobile-annotations {
  grid-area: 1 / 1;
  width: min(calc(100% - 1rem), var(--melo-transfer-size));
  transform: none;
}
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] > .transfer-mobile-equations {
  grid-area: 2 / 1;
  width: min(calc(100% - 1rem), var(--melo-transfer-size));
}
#step-5 .transfer-stage:not(.is-memory-mode):not([data-melo-clip="full-circle-bridge"]) > #transfer-circle-map,
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"]:not(.is-circle-bridge):not(.is-memory-mode) > #transfer-circle-map {
  width: min(calc(100% - 2rem), var(--melo-transfer-size));
  transform: translateY(1.7rem);
}

@media (max-width: 720px), (max-height: 500px) {
  :root {
    --melo-frame-height: 26rem;
    --melo-control-strip: 7.5rem;
    --melo-intersection-plane: 16.125rem; /* 472px × .78 × .7 ≈ 258px */
  }
}