/* Yoga Guru – phones, tablets, rotated screens, narrow windows. Loaded LAST; only overrides live here.
 *
 * The device is usually propped up 2–3 m from the mat, so inside a session everything is sized in
 * vmin (it must be readable from a distance on ANY small screen), nothing scrolls, and nothing
 * important sits under a notch / home indicator (the safe-area padding is on .screen in styles.css).
 *
 * Layout modes for the camera screens (setup + session) – decided by width AND orientation/height:
 *   STACK         (max-width: 1024px) and (orientation: portrait)   phone / tablet held upright
 *   LAND-COMPACT  (max-height: 500px) and (orientation: landscape)  phone on its side
 *   TABLET-LAND   (min-height: 501px) and (max-width: 1024px) and (orientation: landscape)
 *   anything else = the desktop layout from styles.css, untouched.
 * Page flows (home, library, progress, summary, modals) follow the plain width: <= 1024px, <= 600px.
 */

/* ================================================================ touch ergonomics (any size) */
@media (pointer: coarse) {
  /* 44 px+ targets for fingers. */
  .chip, .seg button, .btn--small { min-height: 44px; }
  .chip, .btn--small { display: inline-flex; align-items: center; justify-content: center; }
  .seg button { padding-left: 16px; padding-right: 16px; }
  .setting select { min-height: 44px; }
  .setup-tips > summary { min-height: 44px; display: flex; align-items: center; }
  .steps-card__close { min-width: 44px; min-height: 44px; }
  .sync-note .btn--small { min-height: 44px; }
  .paywall__fine a, .signin__fine a, .consent__fine a, .app-footer a { display: inline-block; padding: 10px 4px; }
}
@media (hover: none) {
  /* A tapped card must not stay "hovered" (lifted / tilted) until the next tap somewhere else. */
  .session-card:hover { transform: none; border-color: transparent; }
  .poster-grid .poster:hover { transform: none; }
  .btn:hover { filter: none; }
}

/* ================================================================ page flows: <= 1024 px */
@media (max-width: 1024px) {
  .session-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .pose-detail, .summary-cols { grid-template-columns: minmax(0, 1fr); }
  /* The stats stay (she is proud of them): a row under the greeting instead of beside it. */
  .home-hero { flex-wrap: wrap; }
  .home-stats { margin-left: 0; width: 100%; }
  .home-stats .stat-pill { flex: 1 1 0; min-width: 0; }
  .pose-detail__3d { min-height: 0; height: clamp(240px, 48vh, 420px); }
}

/* ================================================================ page flows: phones (<= 600 px) */
@media (max-width: 600px) {
  .btn { padding: 12px 20px; font-size: 1.05rem; }

  /* ---- home */
  .home { padding: 16px 16px 28px; }
  .home-hero { gap: 12px; margin-bottom: 18px; }
  .guru-avatar { width: 68px; height: 68px; }
  .guru-avatar svg { width: 62px; height: 62px; }
  .home-hero h1 { font-size: 1.9rem; }
  .home-hero .tagline { font-size: 1rem; }
  .home-hero > div:not(.guru-avatar):not(.home-stats) { flex: 1 1 0; min-width: 0; }
  .home-stats { gap: 8px; }
  .stat-pill { padding: 8px 6px; border-radius: 14px; }
  .stat-pill b { font-size: 1.2rem; }
  .stat-pill span { font-size: .78rem; }
  .section-title { font-size: 1.2rem; margin-bottom: 10px; }
  .session-cards { gap: 16px; }
  .session-card { padding: 16px; border-radius: 22px; gap: 8px; }
  .session-card__emoji { width: 56px; height: 56px; font-size: 2rem; border-radius: 18px; }
  .session-card h3 { font-size: 1.35rem; }
  .session-card p { font-size: .98rem; }
  .session-card__meta { flex-wrap: wrap; gap: 4px 10px; }
  .badge-reco { right: 12px; }
  .focus-tip { flex-wrap: wrap; padding: 14px; gap: 12px; }
  .focus-tip .fig, .focus-tip .fig svg { width: 64px; height: 64px; }
  .focus-tip > div:not(.fig) { flex: 1 1 60%; min-width: 0; }
  .focus-tip .btn { flex: 1 1 100%; }
  .home-nav { gap: 10px; margin-top: 20px; }
  .home-nav .btn { flex: 1 1 calc(50% - 10px); min-width: 0; padding: 12px 10px; font-size: 1rem; }

  /* ---- library / progress */
  .page { padding: 14px 16px 28px; }
  .page-head { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .page-head h2 { font-size: 1.5rem; }
  .page-head .spacer { display: none; }
  .chip-row { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; }
  /* Two-up thumbnails (figure + name); the full poster with its steps opens on tap. */
  .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .poster-grid .poster { padding: 10px 10px 14px; border-radius: 20px; border-top-width: 8px; gap: 6px; }
  .poster-grid .poster__head { gap: 8px; }
  .poster-grid .poster__emoji { width: 36px; height: 36px; font-size: 1.3rem; border-radius: 12px; }
  .poster-grid .poster__name { font-size: .98rem; }
  .poster-grid .poster__sub, .poster-grid .poster__steps { display: none; }
  .poster-grid .poster__view { font-size: .74rem; }
  .poster-grid .mastery-tag { position: relative; top: auto; right: auto; display: block; width: -moz-fit-content; width: fit-content; margin: -10px auto 0; font-size: .74rem; }
  .progress-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .progress-top .stat-pill b { font-size: 1.5rem; }
  .mastery-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .week { gap: 5px; }
  .week .day { border-radius: 12px; font-size: .8rem; }
  .badge { font-size: .92rem; padding: 7px 10px; }
  .badge span { font-size: 1.35rem; }

  /* ---- modals become bottom sheets that scroll inside themselves */
  .modal { padding: env(safe-area-inset-top, 0px) 0 0; place-items: end center; }
  .modal__card {
    border-radius: 24px 24px 0 0; padding: 16px 16px 0;
    max-height: 92vh; max-height: min(92dvh, calc(100dvh - 12px - env(safe-area-inset-top, 0px)));
  }
  .modal__card h2 { font-size: 1.4rem; }
  .pose-detail { gap: 14px; }
  .pose-detail__3d { height: min(68vw, 320px); border-radius: 20px; }
  .pose-stats .stat-pill { flex: 1 1 40%; }
  .settings-list { min-width: 0; gap: 14px; }
  .setting { flex-wrap: wrap; gap: 8px 12px; }
  .setting > span:empty { display: none; }
  .setting select { width: 100%; max-width: 100%; }
  .seg { flex-wrap: wrap; border-radius: 22px; }
  .tip-card { padding: 14px; }
  .tip-card ul { padding-left: 18px; }

  /* ---- summary */
  .summary { padding: 18px 16px 0; }
  .summary h1 { font-size: 2rem; }
  .summary .big-stars { font-size: 2.4rem; }
  .summary__sub { font-size: 1.08rem; }
  .summary-grid { gap: 10px; margin: 16px 0; }
  .summary-cols { gap: 12px; }

  .toast { left: 16px; right: 16px; transform: none; width: -moz-fit-content; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; border-radius: 18px; text-align: center; }
}

/* ---- sticky primary actions on small OR short screens (the content scrolls underneath them).
   The scrolling card has NO bottom padding here – the action bar (or, in a modal without one, the
   last element's margin) provides it – so the bar sits flush with the bottom edge in every browser. */
@media (max-width: 600px), (max-height: 500px) {
  .modal__card { padding-bottom: 0; }
  .modal__card > :last-child:not(.pose-detail__actions) { margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .pose-detail__actions {
    position: sticky; bottom: 0; z-index: 2; justify-content: stretch;
    margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--sand); box-shadow: 0 -10px 18px -14px rgba(31, 42, 68, .35);
  }
  .pose-detail__actions .btn { flex: 1 1 0; min-width: 0; padding: 12px 12px; font-size: 1rem; }
  /* The summary scrolls inside .screen, whose bottom padding is the home-indicator area: the bar
     reaches down into it (negative margin) and pads its own buttons clear of it. */
  .summary { padding-bottom: 0; }
  .summary__actions {
    position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; gap: 10px;
    margin: 20px -16px calc(-1 * env(safe-area-inset-bottom, 0px)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94); box-shadow: 0 -10px 18px -14px rgba(31, 42, 68, .35);
  }
  .summary__actions .btn { flex: 1 1 auto; min-width: 0; padding: 12px 16px; font-size: 1rem; }
}
@media (max-height: 500px) and (min-width: 601px) {
  /* Phone on its side: modals use the width; the action bar matches the wider 22 / 28 px paddings. */
  .modal { padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .modal__card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .modal__card > :last-child:not(.pose-detail__actions) { margin-bottom: 22px; }
  .pose-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pose-detail__3d { height: clamp(180px, 56vh, 320px); }
  .pose-detail__actions { margin: 14px -22px 0; padding: 10px 22px 12px; }
  .summary__actions { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
}

/* ================================================================ camera screens – shared by the small layouts */
@media (max-width: 1024px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .topbar { gap: 8px; }
  .topbar--setup { padding: 8px 12px 0; }
  .topbar__actions { gap: 6px; }
  .topbar .icon-btn { width: 44px; height: 44px; font-size: 1.15rem; flex: none; }
  .topbar__info { display: inline-flex; }
  .dot { width: 11px; height: 11px; }
  .dot.now { width: 26px; border-radius: 7px; }
  .cam-panel, .setup__cam { border-radius: 22px; }
  .cam-panel { border-width: 4px; }
  .cam-label { top: 8px; left: 8px; font-size: .7rem; padding: 4px 9px; gap: 6px; }
  .cam-label i { width: 8px; height: 8px; }
  .fps { top: 36px; bottom: auto; left: 8px; transform: none; font-size: .62rem; padding: 2px 7px; }
  .joint-tag { width: clamp(40px, 12vmin, 64px); height: clamp(40px, 12vmin, 64px); border-width: 4px; }
  /* A long sentence ("Wobbling is okay! Put your foot down, …") would otherwise wrap to five lines and
     grow the caption strip – shoving the mirror while she balances. sessionView.js marks it `long`. */
  .coach-bubble.long { font-size: clamp(.95rem, 4.2vmin, 1.7rem); line-height: 1.1; }

  /* meters: vmin-sized so they read from the mat on any small screen */
  .hold-ring { width: clamp(92px, 28vmin, 210px); height: clamp(92px, 28vmin, 210px); }
  .hold-ring__text b { font-size: clamp(2.2rem, 12vmin, 5.4rem); }
  .hold-ring__text span { font-size: clamp(.68rem, 3vmin, 1.4rem); }
  .match { padding: 8px 12px; border-radius: 16px; }
  .match__row { align-items: center; gap: 8px; line-height: 1.1; font-size: clamp(.95rem, 4.2vmin, 1.7rem); }
  .match__row span { min-width: 0; }
  .match__row b { font-size: clamp(1.4rem, 6.5vmin, 2.6rem); }
  .match__bar { height: clamp(12px, 3.2vmin, 24px); margin-top: 6px; }
  .match__bar .goal { font-size: clamp(1rem, 4vmin, 1.4rem); top: -.45em; }

  /* overlays inside the mirror: compact cards, never taller than the panel */
  .overlay { padding: 10px; }
  .card-pop { padding: 14px 18px; border-radius: 22px; max-width: 100%; max-height: 100%; overflow: auto; }
  .session[data-phase="intro"] .hold-ring { display: none; } /* the poster sheet needs that corner during the intro */
  .result { gap: 8px; }
  .result__stars { font-size: clamp(2.6rem, 16vmin, 5rem); letter-spacing: 4px; }
  .result h2 { font-size: clamp(1.4rem, 7vmin, 2.4rem); }
  .result p { font-size: clamp(1rem, 4vmin, 1.25rem); }
  .paused { gap: 12px; }
  .paused h2 { font-size: clamp(1.5rem, 7.5vmin, 2.6rem); }
  .paused__text { font-size: clamp(1rem, 4.2vmin, 1.3rem); }
  .paused .btn { padding: 11px 16px; font-size: 1rem; }
  .breath { gap: 10px; }
  .breath h2 { font-size: clamp(1.3rem, 6.5vmin, 2.2rem); }
  .breath p { font-size: clamp(.98rem, 4vmin, 1.2rem); }
  .breath__circle { width: clamp(96px, 34vmin, 240px); height: clamp(96px, 34vmin, 240px); font-size: clamp(.9rem, 3.8vmin, 1.5rem); box-shadow: 0 0 0 10px rgba(127, 209, 193, .25); }
  .breath--relax { gap: 8px; }
  .breath--relax .breath__circle { box-shadow: 0 0 0 10px rgba(127, 209, 193, .18), 0 0 40px rgba(127, 209, 193, .35); }
  .breath__live { font-size: clamp(.86rem, 3.6vmin, 1.05rem); min-height: 3em; padding: 4px 12px; gap: 8px; line-height: 1.25; }
  .breath__dot { width: 10px; height: 10px; }

  /* the intro poster: figure beside the steps, so it needs half the height */
  .intro-dock { gap: 6px; }
  .intro-dock .poster { display: grid; grid-template-columns: 32% minmax(0, 1fr); column-gap: 10px; row-gap: 4px; padding: 10px 12px; border-radius: 20px; border-top-width: 8px; }
  .intro-dock .poster__head { grid-area: 1 / 2; gap: 8px; }
  .intro-dock .poster__figure { grid-area: 1 / 1 / 4 / 2; align-self: center; border-radius: 14px; }
  .intro-dock .poster__view { grid-area: 2 / 2; text-align: left; font-size: .78rem; }
  .intro-dock .poster__steps { grid-area: 3 / 2; gap: 5px; }
  .intro-dock .poster__benefit { display: none; }
  .intro-dock .poster__emoji { width: 38px; height: 38px; font-size: 1.4rem; border-radius: 12px; }
  .intro-dock .poster__name { font-size: clamp(1.05rem, 4.6vmin, 1.6rem); }
  .intro-dock .poster__sub { font-size: .74rem; }
  .intro-dock .poster__steps li { font-size: clamp(.86rem, 3.5vmin, 1.25rem); gap: 7px; line-height: 1.2; }
  .intro-dock .step-num { width: 22px; height: 22px; font-size: .78rem; }
  .intro-dock__foot { padding: 5px 10px; border-radius: 12px; }
  .intro-dock .intro__kicker { font-size: .82rem; letter-spacing: 1px; }
  .intro-dock .intro__count { font-size: .9rem; }
  .intro-dock .intro__tip { font-size: .9rem; padding: 8px 12px; border-radius: 14px; }

  /* reference figure card: compact header, the 3D view gets the room */
  .ref-card { border-radius: 18px; border-top-width: 6px; }
  .ref-card__head { padding: 6px 8px 0; gap: 6px; }
  .ref-card__head > div { min-width: 0; }
  .ref-card__head .poster__emoji { width: 28px; height: 28px; font-size: 1.05rem; border-radius: 9px; }
  .ref-card__head h2 { font-size: clamp(.86rem, 3.6vmin, 1.4rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ref-card__head p { display: none; }
  .ref-card__side { position: absolute; left: 6px; bottom: 6px; z-index: 1; margin: 0; font-size: .68rem; padding: 3px 8px; }
  .ref-card__hint { display: none; }

  /* steps + check chips */
  .steps-card { padding: 8px 10px; border-radius: 16px; gap: 8px; position: relative; }
  .steps-card:empty { display: none; }
  .steps-card .poster__steps { gap: 6px; }
  .steps-card .poster__steps li { font-size: clamp(.95rem, 3.8vmin, 1.3rem); }
  .steps-card .step-num { width: 24px; height: 24px; font-size: .85rem; }
  .check-chip { font-size: clamp(.8rem, 3.4vmin, 1.2rem); padding: 4px 10px; white-space: nowrap; }
  .session.steps-open .steps-card__close {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 4px; right: 4px; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%; background: #eef1f7; font-weight: 800;
  }
  .session.steps-open .steps-card .poster__steps { padding-right: 40px; }

  /* setup: compact three-up checklist */
  .setup-card { padding: 10px 12px; border-radius: 18px; }
  .setup-card h2 { display: none; }
  .setup-list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .setup-list li { flex-direction: column; text-align: center; gap: 4px; font-size: .74rem; line-height: 1.15; }
  .setup-list .tick { width: 30px; height: 30px; font-size: 1rem; }
  .load-bar { height: 8px; margin-top: 8px; }
  .setup-status { font-size: clamp(1rem, 4.2vmin, 1.5rem); padding: 10px 12px; border-radius: 16px; line-height: 1.2; }
  .setup-tips > summary { cursor: pointer; }
  .setup-tips > summary::after { content: ' ▸'; color: var(--ink-soft); }
  .setup-tips[open] > summary::after { content: ' ▾'; }
  .setup-tips__list { margin-top: 4px; font-size: .88rem; line-height: 1.35; }
  .setup-actions { margin-top: 0; gap: 8px; }
  .setup-actions .btn { padding: 11px 18px; font-size: 1rem; }
  .body-guide { border-width: 4px; }
}

/* ================================================================ STACK – upright phone / tablet */
@media (max-width: 1024px) and (orientation: portrait) {
  /* ---- session: mirror on top (as tall as possible), the figure as an inset card over its top-right
     corner, caption strip, then a one-line row of check chips (ℹ️ unfolds the steps above them). */
  .session { padding: 8px 10px 10px; gap: 8px; }
  .dots { flex-wrap: wrap; gap: 5px; row-gap: 4px; min-width: 0; max-height: 44px; overflow: hidden; }
  .session__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px; }
  .cam-col, .side-panel { display: contents; }
  .cam-panel { grid-area: 1 / 1; }
  .ref-card {
    grid-area: 1 / 1; z-index: 25; align-self: start; justify-self: end; flex: none; margin: 10px;
    width: clamp(124px, 40vw, 320px); height: clamp(150px, 30vh, 400px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .38); border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 3px solid #fff;
  }
  .coach-bubble {
    grid-area: 2 / 1; min-height: clamp(56px, 9vh, 104px); gap: 10px; padding: 6px 14px 6px 8px; border-radius: 18px;
    font-size: clamp(1.15rem, 5.6vmin, 2.3rem); line-height: 1.12;
  }
  .coach-bubble .ava { width: 42px; height: 42px; }
  .coach-bubble .ava svg { width: 38px; height: 38px; }
  .steps-card { grid-area: 3 / 1; flex: none; max-height: 42vh; overflow: auto; }
  .steps-card .poster__steps { display: none; }
  .session.steps-open .steps-card .poster__steps { display: flex; }
  .check-chips { flex-wrap: nowrap; overflow-x: auto; margin-top: 0; scrollbar-width: none; }
  .check-chips::-webkit-scrollbar { display: none; }
  .check-chip { flex: none; }
  .session.steps-open .check-chips { flex-wrap: wrap; }

  /* meters along the bottom edge of the mirror: match bar on the left, the big ring in the corner */
  .hold-ring { right: 10px; bottom: 10px; }
  .match { left: 10px; bottom: 10px; width: auto; right: calc(clamp(92px, 28vmin, 210px) + 20px); }

  /* Overlays are bottom sheets: the top of the mirror (her head, and the figure card) stays visible. */
  .overlay--dock { align-items: flex-end; justify-content: stretch; background: linear-gradient(0deg, rgba(16, 24, 39, .66) 0%, rgba(16, 24, 39, .22) 52%, rgba(16, 24, 39, 0) 72%); }
  .intro-dock { width: 100%; max-height: 56%; animation-name: sheet-in; }
  .overlay--center { align-items: flex-end; background: linear-gradient(0deg, rgba(16, 24, 39, .6) 0%, rgba(16, 24, 39, .3) 60%, rgba(16, 24, 39, .12) 100%); }
  .overlay--center > .card-pop { width: 100%; }
  .paused__actions { width: 100%; gap: 8px; }
  .paused .btn { flex: 1 1 40%; }
  .paused .btn[data-resume] { flex-basis: 100%; }

  /* ---- setup: the mirror gets every spare pixel (head AND toes must stay visible, so nothing
     overlaps it); status, checklist, then tips + start buttons in one row underneath. */
  .setup { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 8px; padding: 8px 10px 10px; }
  .setup__side { display: contents; }
  .setup__cam { grid-area: 1 / 1 / 2 / 3; }
  .setup-status { grid-area: 2 / 1 / 3 / 3; }
  .setup__side > .setup-card:first-child { grid-area: 3 / 1 / 4 / 3; }
  .setup-tips { grid-area: 4 / 1; align-self: end; min-width: 0; max-height: 34vh; overflow: auto; }
  .setup-actions { grid-area: 4 / 2; align-self: end; }
  .body-guide { inset: 5% 14%; }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* STACK on a tablet: same arrangement, room for the full card header and bigger type. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
  .session { padding: 12px 16px 16px; gap: 10px; }
  .dot { width: 14px; height: 14px; }
  .dot.now { width: 32px; }
  .ref-card__head { padding: 8px 12px 0; gap: 8px; }
  .ref-card__head .poster__emoji { width: 36px; height: 36px; font-size: 1.3rem; }
  .intro-dock { width: min(100%, 640px); margin: 0 auto; }
  .overlay--center > .card-pop { width: min(100%, 560px); margin: 0 auto; }
  .paused .btn, .paused .btn[data-resume] { flex: 0 1 auto; }
  .ref-card { height: clamp(260px, 38vh, 460px); }
  .setup { padding: 12px 16px 16px; gap: 10px; }
  .setup-list li { font-size: .9rem; }
  .setup-list .tick { width: 36px; height: 36px; }
}
/* STACK on a phone: every pixel counts. */
@media (max-width: 600px) and (orientation: portrait) {
  .topbar__title { display: none; } /* the dots say where she is; the name was on the card she tapped */
  .topbar--setup .topbar__title { display: block; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Between the five 44 px buttons a 320 px screen leaves ~50 px for the dots – not enough for the 17
     poses of the Advanced session. So the dots get their own full-width row under the buttons: one
     line, centred while it fits, scrollable when it does not (the auto margins on the first and last
     dot do both – `justify-content: safe center` is not understood by older phones). */
  .topbar { flex-wrap: wrap; row-gap: 2px; }
  .topbar__actions { margin-left: auto; }
  .dots {
    order: 10; flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; max-height: none;
    overflow-x: auto; overflow-y: hidden; padding: 2px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .dots::-webkit-scrollbar { display: none; }
  .dot { flex: none; }
  .dot:first-child { margin-left: auto; }
  .dot:last-child { margin-right: auto; }
}

/* ================================================================ LAND-COMPACT – phone on its side */
@media (max-height: 500px) and (orientation: landscape) {
  /* ---- session: mirror left, figure right (like the laptop), a slim top bar; the caption lies over
     the bottom of the mirror instead of taking a row; steps live behind ℹ️. Nothing scrolls. */
  .session { padding: 6px 10px 8px; gap: 6px; }
  .topbar__title { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26vw; }
  .dots { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; min-width: 0; padding: 0 4px; scrollbar-width: none; }
  .dots::-webkit-scrollbar { display: none; }
  .dot { flex: none; }
  .dot:first-child { margin-left: auto; } /* centred while they fit, scrollable when they do not */
  .dot:last-child { margin-right: auto; }
  .session__main { position: relative; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 8px; }
  .cam-col { position: relative; gap: 0; }
  .coach-bubble {
    position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 22; min-height: 0; pointer-events: none;
    gap: 8px; padding: 5px 12px 5px 5px; border-radius: 16px; font-size: clamp(1rem, 5vmin, 1.7rem); line-height: 1.1;
    background: rgba(255, 255, 255, .95);
  }
  .coach-bubble.fix { background: rgba(255, 244, 220, .96); }
  .coach-bubble.praise { background: rgba(220, 247, 232, .96); }
  .coach-bubble .ava { width: 34px; height: 34px; }
  .coach-bubble .ava svg { width: 30px; height: 30px; }

  /* Meters keep their bottom corners (her head stays free) and hop above the caption while the Guru
     talks; sessionView.js sets .talking and --caption-h (the caption's real height). */
  .fps { display: none; }
  .hold-ring { right: 8px; bottom: 8px; transition: bottom .25s ease; }
  .match { left: 8px; bottom: 8px; width: min(50%, 340px); transition: bottom .25s ease; }
  .session.talking .hold-ring, .session.talking .match { bottom: calc(var(--caption-h, 52px) + 14px); }

  /* overlays keep clear of the caption too */
  .overlay { padding: 8px; transition: padding-bottom .25s ease; }
  .session.talking .overlay { padding-bottom: calc(var(--caption-h, 52px) + 14px); }
  .overlay--dock { align-items: flex-start; }
  /* A short, wide panel: the poster spans it – figure, "face the camera", steps. Its name is already on
     the figure card to the right, the pose count is in the dots, and the Guru SAYS the reminder. */
  .intro-dock { width: 100%; max-height: 100%; }
  .intro-dock .poster { grid-template-columns: 24% minmax(0, 1fr); padding: 8px 12px; }
  .intro-dock .poster__head, .intro-dock__foot, .intro-dock .intro__tip { display: none; }
  .intro-dock .poster__view { grid-area: 1 / 2; }
  .intro-dock .poster__steps { grid-area: 2 / 2; }
  .intro-dock .poster__figure { grid-area: 1 / 1 / 3 / 2; }
  .card-pop { padding: 10px 16px; }
  .paused__actions { gap: 8px; }
  /* The breathing circle must stay a circle: .breath is a flex column, and at 375 px of height the
     column squeezes the circle vertically into an ellipse. So it never flexes, keeps a 1:1 aspect
     ratio, and the text around it gives way instead (tighter gap, shrinkable lines). */
  .breath { gap: 6px; }
  .breath__circle { flex: none; aspect-ratio: 1; width: clamp(80px, 30vmin, 200px); height: auto; }
  .breath h2, .breath p, .breath__live { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  .breath p { font-size: clamp(.85rem, 3.4vmin, 1.1rem); line-height: 1.2; }
  .breath__live { min-height: 0; }

  .side-panel { gap: 0; min-width: 0; }
  .ref-card__head p { display: block; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .steps-card { display: none; }
  .session.steps-open .steps-card {
    display: flex; position: absolute; left: 8px; top: 8px; bottom: 8px; z-index: 30; width: min(58%, 440px);
    overflow: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); padding: 12px 14px;
  }

  /* ---- setup: mirror left, a slim scrollable column right */
  .setup { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; padding: 6px 10px 8px; }
  .setup__side { gap: 8px; }
  .setup-status { order: -1; }
  .setup-actions { position: sticky; bottom: 0; justify-content: stretch; padding: 6px 0 2px; background: linear-gradient(180deg, rgba(240, 240, 250, 0), rgba(240, 240, 250, .96) 35%); }
  .setup-actions .btn { flex: 1 1 0; }
  .body-guide { inset: 5% 26%; }
}
/* The shortest landscape screens (an Android phone inside the browser leaves ~300 px): drop decoration. */
@media (max-height: 360px) and (orientation: landscape) {
  .breath h2 { display: none; } /* the figure card on the right already carries the title */
  .session { padding-top: 4px; padding-bottom: 6px; gap: 4px; }
}

/* ================================================================ TABLET-LAND – tablet on its side, small laptop window */
@media (min-height: 501px) and (max-width: 1024px) and (orientation: landscape) {
  .session__main { grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 12px; }
  .setup { grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 14px; padding: 14px 18px 18px; }
  .topbar--setup { padding: 12px 18px 0; }
  .steps-card .poster__steps li { font-size: 1.1rem; }
  .ref-card__head h2 { font-size: 1.25rem; }
  .coach-bubble { font-size: clamp(1.3rem, 2.6vw, 2rem); }
}

/* ================================================================ very narrow phones (320 px) */
@media (max-width: 350px) {
  .home, .page { padding-left: 12px; padding-right: 12px; }
  .home-hero h1 { font-size: 1.6rem; }
  .home-nav .btn { flex-basis: 100%; }
  .topbar { gap: 5px; }
  .topbar__actions { gap: 4px; }
  .session { padding-left: 6px; padding-right: 6px; }
  .poster-grid { gap: 12px 8px; }
  .poster-grid .poster__emoji { display: none; }
  .week .day { font-size: .72rem; }
}