/* Body Zen Lab: tall, narrow screens (width/height 0.6 or less, e.g. 557x1213, 430x932, 390x844, 360x740).
   The ring takes most of the width and sits in the middle of the free space; the spline is laid out above
   and below it (lab/app.js drawLiveWaveChart, portrait). Video layouts place the ring themselves
   (lab-video.js), so every rule here stays out of them. Landscape and desktop are untouched. */
@media (max-aspect-ratio: 3/5) {
  /* One diameter for the ring: 80% of the stage width, never above 460px, never taller than the stage, and on
     short stages (360x740) no larger than the app's own 260px, so Ease back / Faster keep their corners. */
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage {
    --lab-ring-d: min(460px, 80cqw, calc(100cqh - 18px), max(260px, calc(100cqh - 110px)));
  }
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage #pulse-center {
    width: var(--lab-ring-d) !important; height: var(--lab-ring-d) !important;
    transition: margin-top .6s cubic-bezier(.22, .61, .36, 1);
  }
  /* The BPM number grows with the ring instead of staying a phone-sized figure in a large circle. */
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage #disp-current-bpm {
    font-size: clamp(28px, calc(var(--lab-ring-d) * .15), 64px) !important;
  }

  /* Before the session: the stage still borrows the empty stats row, but the ring no longer sits on the
     floor. The drop (ring plus its tail, 2.2 radii tall above the centre) is centred in the stage: the ring
     moves down by 0.3 of its diameter, less when the stage is too short to hold the whole drop. */
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact):has(.primary-controls[data-session-controls="idle"]) .rhythm-ring-stage {
    align-items: center !important; padding-bottom: 0 !important;
  }
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact):has(.primary-controls[data-session-controls="idle"]) .rhythm-ring-stage :is(#pulse-center, #pulse-aura) {
    /* A flex item centred on the cross axis moves by half its top margin. */
    margin-top: max(0px, min(calc(var(--lab-ring-d) * .6), calc(100cqh - var(--lab-ring-d) - 24px))) !important;
  }

  /* The rival line (lab-rivals.js) wraps a little narrower than the ring's chord, so on the smallest rings its
     corners stay clear of the inner ring line. */
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) #pulse-center > #lab-rival {
    max-width: min(calc(100% - 34px), calc(var(--lab-ring-d) * .8));
  }

  /* First visit: the starting-level card sits above the "Listen to introduction · Skip" links, never on
     them. On tall stages it floats over the drop's tail above the ring; on shorter ones its lower edge stops
     just above the links. */
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) #pulse-center:has(> .intro-core:not([hidden])) > .assess-core {
    top: auto !important; bottom: calc(15% + 44px) !important; translate: -50% 0;
  }
}
@media (max-aspect-ratio: 3/5) {
  @container (min-height: 700px) {
    body.zen-mode:not(.lab-immersive):not(.lab-split-compact) #pulse-center:has(> .intro-core:not([hidden])) > .assess-core {
      bottom: calc(100% + 16px) !important;
    }
  }
}

/* Phones: "What is Body Zen?" stays on one line. Narrow phones pay for it with tighter footer spacing, an
   11px link and 32px icon buttons, so the journey caption beside it keeps two lines. */
@media (max-width: 600px) {
  body.zen-mode div.zen-drawer-toggle-row > .about-zen-link { max-width: none; white-space: nowrap; }
}
@media (max-width: 430px) {
  body.zen-mode div.zen-drawer-toggle-row { gap: 3px; }
  body.zen-mode div.zen-drawer-toggle-row > .about-zen-link { font-size: 11px !important; padding: 0 2px !important; }
}
@media (max-width: 400px) {
  body.zen-mode div.zen-drawer-toggle-row > :is(#btn-open-challenges, #btn-open-history, #btn-toggle-advanced, #lab-video-entry) {
    flex: 0 0 32px; width: 32px; min-width: 32px;
  }
}