/* embed fit 2026-10-08 · framed layout shared by every cream beat (html.is-framed = inside a lesson iframe).
   The beat keeps its natural height and embed-height.js reports it, so nothing here may size from the
   iframe height (no vh, no 100% heights). #controls is the one control set in the frame. */
html.is-framed,
html.is-framed body { min-height: 0; }
html.is-framed #stage-transport { display: none; }
/* the scrubber row wraps under the buttons before the time readout can push past the frame edge */
html.is-framed .scrub-wrap { min-width: 260px; }
html.is-framed .scrub-wrap input[type="range"] { min-width: 0; }

/* phones (the beat is under 480px wide, width only): stage, readout strip, then the full controls */
@media (max-width: 479.98px) {
  html.is-framed body { padding: 6px 6px 10px; gap: 0; }
  /* the readout keeps the room the 4:5 frame gave it, from the width only, so the frame height
     stays put while chapters change rows: 125% frame width less body padding, stage and margin */
  html.is-framed .auth-readout {
    margin-top: 6px;
    min-height: calc(100vw * 1.25 - 18px - (100vw - 12px) * 9 / 16 - max(0px, 45px - (100vw - 12px) * 260 / 1920));
  }
  html.is-framed #controls { gap: 8px; padding: 0; margin-top: 8px; }
  html.is-framed .chips { gap: 6px; }
  html.is-framed .chip {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 4px 6px;
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  html.is-framed .transport { gap: 6px; }
  html.is-framed .transport .btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 13px;
  }
  html.is-framed .scrub-wrap { flex: 1 1 100%; min-width: 0; min-height: 44px; }
  html.is-framed .scrub-wrap input[type="range"] { height: 28px; }
  html.is-framed .time-readout { min-width: 0; font-size: 12px; }
  html.is-framed .hint { font-size: 12px; }
}