/* Adapt to the available viewport, including iPad rotation and Split View. */
@media (min-width:700px){
  .stage{padding:16px;min-height:100vh;min-height:100dvh}
  .phone,.phone.learning{
    width:min(100%,1180px);
    height:calc(100vh - 32px);
    height:calc(100dvh - 32px);
    min-height:0;
    border-radius:22px;
  }
  .app,.screen{min-height:0;min-width:0}
  .screen{padding:0 24px calc(92px + env(safe-area-inset-bottom));scrollbar-width:thin}
  .topbar,.phone.learning .topbar{height:68px;flex-basis:68px;padding-inline:24px;gap:20px}
  .brand{flex-shrink:0}
  .brand-title,.phone.landing .brand-title{font-size:18px}
  .header-tools{gap:8px}
  .header-tools button,.phone.learning .header-tools button{min-height:44px;min-width:44px}
  .phone.landing .topbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    min-height:72px;
    height:auto;
    flex-basis:auto;
    gap:24px;
    padding:12px 24px;
  }
  .phone.landing .header-tools{
    width:min(100%,340px);
    justify-self:end;
    grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px;
    gap:8px;
  }
  .phone.landing .header-tools button,
  .phone.landing .header-tools .sound-search-prominent,
  .phone.landing .header-tools .translation-open-prominent,
  .phone.landing .header-tools [data-action=voice-settings]{min-height:44px}
  .bottom{height:calc(72px + env(safe-area-inset-bottom));padding-inline:32px}
  .navbtn{font-size:14px}
  .pagehead{padding:20px 0 14px}
  .pagehead h2{font-size:24px}
  .back{width:44px;height:44px;min-width:44px}

  .home-focus{max-width:1080px;margin-inline:auto}
  .home-focus .hf-opening{padding-top:20px}
  .home-focus .hf-opening h1{font-size:30px;line-height:1.35}
  .home-focus .hf-hero-seven{font-size:52px}
  .home-focus .hf-eyebrow{font-size:14px}
  .home-focus .hf-module-grid{gap:12px}
  .home-focus .hf-module{padding:16px 20px;gap:5px;min-height:112px}
  .home-focus .hf-module strong{font-size:23px}
  .home-focus .hf-module>span:not(.hf-module-kicker):not(.hf-module-top){font-size:16px}
  .home-focus .hf-learning-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;margin-top:16px}
  .home-focus .hf-learning-actions>.hf-primary:only-of-type,
  .home-focus .hf-taster-note{grid-column:1/-1}
  .home-focus .hf-learning-actions>.cta{min-height:50px}
  .home-focus .hf-purchase{padding-block:16px}
  .home-focus .hf-purchase>button,
  html[data-language=en] .home-focus .hf-purchase>button{max-width:none;min-height:46px;padding:12px 24px}
  .home-focus .hf-course-details>summary{font-size:20px;min-height:44px}

  .course-directory .daylist,
  .life-directory .usage-category-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .course-directory .daylist .course-day-card{min-height:86px;padding:14px 12px}
  .course-directory .daylist .course-day-card h3{font-size:16px;line-height:1.5}
  .life-directory .usage-directory-item:last-child{border-bottom:1px solid #d7e3ef}
  .life-track-card{min-height:128px}
  .life-switch-top,.life-reader-nav button{min-height:44px}

  /* One scroll region contains the target and its explanation; actions stay below. */
  .phone.learning #content,.phone.learning.after-learning #content{
    display:flex;flex-direction:column;gap:0;
    overflow:hidden;padding:0 24px max(10px,env(safe-area-inset-bottom));
  }
  .phone.learning .lesson-context{flex:0 0 auto;min-height:0}
  .phone.learning .lesson-context .pagehead{display:flex;padding:10px 0 6px}
  .phone.learning .lesson-context .back{display:grid;place-items:center;width:44px;height:44px;min-width:44px}
  .phone.learning .lesson-navigation,
  html[data-language=en] .phone.learning .lesson-navigation{grid-template-columns:1.1fr 1fr .8fr;gap:8px}
  .phone.learning .lesson-navigation button{min-height:44px;font-size:14px;white-space:normal}
  .phone.learning .lesson-navigation button:first-child{grid-column:auto}
  .phone.learning .lesson-sound-nav{grid-template-columns:repeat(var(--sound-columns),minmax(0,1fr));gap:7px}
  .phone.learning .lesson-sound-nav .lesson-sound{min-height:40px;padding:6px 3px}
  .phone.learning #lesson-surface,.phone.learning.after-learning #lesson-surface{
    display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;
  }
  .phone.learning .focus-reading,.phone.learning.after-learning .focus-reading{
    display:flex;flex-direction:column;flex:1 1 0;min-height:120px;max-height:none;overflow:hidden;
  }
  .phone.learning .reading-content,.phone.learning.after-learning .reading-content{
    display:block;flex:1 1 0;min-height:0;max-height:none;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;touch-action:pan-y;
    padding:14px 8px;scrollbar-width:thin;
  }
  .phone.learning .reading-copy{
    --reading-size:32px;
    display:block;width:100%;max-width:960px;height:auto;min-height:0;margin-inline:auto;
  }
  .phone.learning .learning-target-block,
  .phone.learning .learning-explanation-switch,
  .phone.learning .learning-detail-scroll{flex:none;min-height:0}
  .phone.learning .learning-detail-scroll{overflow:visible;max-height:none;touch-action:auto}
  .phone.learning:not(.after-learning) .reading-copy .spoken-target{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
  .phone.learning .reading-copy .target-jyut{word-break:normal;overflow-wrap:anywhere}
  .phone.learning .focus-heading{margin:6px 0;font-size:14px}
  .phone.learning .compact-steps{flex:0 0 auto;margin:6px 0}
  .phone.learning .compact-steps button,
  .phone.learning:not(.after-learning) .compact-steps button{min-height:40px;padding:7px;font-size:14px}
  .phone.learning #lesson-surface>.practice-picker{flex:0 0 auto;padding:6px 0}
  .phone.learning .practice-picker-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .phone.learning .practice-picker .practice-pick,
  .phone.learning:not(.after-learning) .practice-pick{min-height:46px;padding:5px}
  .phone.learning .practice-picker .practice-pick>b{font-size:14px;line-height:1.35}
  .phone.learning .practice-controls{flex:0 0 auto;position:static;margin-top:6px}
  .phone.learning .practice-controls .relisten,
  .phone.learning:not(.after-learning) .practice-controls .course-autoplay,
  .phone.learning .practice-controls .record-action-row>.cta{min-height:48px;padding:10px 14px;font-size:18px}
  .phone.learning .learning-notes{flex:0 0 auto}

  .phone.tasting #content{padding-inline:24px}
  .phone.tasting .guided-scroll{padding:16px max(0px,calc((100% - 820px)/2)) 20px}
  .phone.overview-learning #content{padding-inline:24px}
  .leisure-reader{max-width:880px;margin-inline:auto}
  .leisure-player{padding:24px 32px 20px}
  .leisure-reader-nav button,.leisure-filters button,.leisure-voices button{min-height:44px}
  .leisure-prose{max-width:760px;margin-inline:auto}
  .pay-modal{align-items:center;justify-content:center;padding:24px}
  .pay-sheet{max-width:640px;max-height:100%;overflow-y:auto;border-radius:22px;padding:28px}
}

@media (min-width:1000px){
  .home-focus .hf-module-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .home-focus .hf-module-life,.home-focus .hf-module-reading{grid-column:auto}
  .home-focus .hf-module{min-height:160px;padding:20px;gap:9px}
  .home-focus .hf-module strong{font-size:22px}
  .home-focus .hf-module-top{align-items:flex-start;gap:5px}
  .home-focus .hf-module-topics{line-height:1.7}
  .home-focus .hf-course-details[open]{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
  .home-focus .hf-course-details>summary{grid-column:1/-1}
  .home-focus .hf-course-details>.hf-course{padding-top:21px}
  .life-track-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .life-track-card{align-items:flex-start;padding:20px 16px;gap:10px}
  .phone.learning .practice-picker-grid{grid-template-columns:repeat(10,minmax(0,1fr))}
}

/* A short window (or an onscreen keyboard) can scroll the complete lesson. */
@media (min-width:700px) and (max-height:620px){
  .phone.learning #content,.phone.learning.after-learning #content{overflow-y:auto}
  .phone.learning #lesson-surface,.phone.learning.after-learning #lesson-surface{flex:none;overflow:visible}
  .phone.learning .focus-reading,.phone.learning.after-learning .focus-reading{flex:none;min-height:220px;overflow:visible}
  .phone.learning .reading-content,.phone.learning.after-learning .reading-content{flex:none;overflow:visible}
}

/* Landscape learning uses the width for navigation, preserving the main lesson height.
   Portrait retains its established layout. Extremely short keyboard windows keep
   the scroll fallback above instead of clipping content. */
@media (min-width:900px) and (min-height:500px) and (orientation:landscape){
  .phone.learning .topbar{height:52px;flex-basis:52px;padding-inline:18px}
  .phone.learning #content,.phone.learning.after-learning #content{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:18px;
    min-height:0;
    overflow:hidden;
    padding:8px 18px max(8px,env(safe-area-inset-bottom));
  }
  .phone.learning .lesson-context{
    min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding-right:12px;border-right:1px solid var(--line);scrollbar-width:thin;
  }
  .phone.learning .lesson-navigation,
  html[data-language=en] .phone.learning .lesson-navigation{grid-template-columns:1fr 1fr;gap:6px;padding-top:0}
  .phone.learning .lesson-navigation button{min-height:42px;font-size:14px;padding:6px 4px}
  .phone.learning .lesson-navigation button:first-child{grid-column:1/-1}
  .phone.learning .lesson-context .pagehead{padding:12px 0 8px}
  .phone.learning .lesson-context .pagehead h2{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
  .phone.learning .lesson-context .pagehead p{font-size:14px;line-height:1.5}
  .phone.learning .lesson-day{font-size:28px}
  .phone.learning .lesson-category{gap:5px;line-height:1.4}
  .phone.learning .lesson-sound-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0}
  .phone.learning .lesson-sound-nav .lesson-sound{min-height:42px;font-size:18px;padding:6px 2px}
  .phone.learning .tone-lesson-nav .lesson-sound,
  .phone.learning .capstone-lesson-nav .lesson-sound{font-size:14px;white-space:normal}
  .phone.learning .lesson-day-jump{white-space:normal;min-height:44px;line-height:1.4;text-align:left}
  .phone.learning .life-reader-nav{flex-direction:column;align-items:stretch;gap:4px}
  .phone.learning .life-reader-nav button:last-child{text-align:left}
  .phone.learning .life-reader-heading h2{font-size:20px;line-height:1.5;overflow-wrap:anywhere}

  .phone.learning #lesson-surface,.phone.learning.after-learning #lesson-surface{
    display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;
  }
  .phone.learning .focus-reading,.phone.learning.after-learning .focus-reading{
    flex:1 1 0;min-height:0;overflow:hidden;
  }
  .phone.learning .focus-heading{margin:2px 0 4px;font-size:14px;line-height:1.4}
  .phone.learning .reading-content,.phone.learning.after-learning .reading-content{
    flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 6px;
  }
  .phone.learning .reading-copy{--reading-size:30px}
  .phone.learning .learning-explanation-switch .explanation-toggle{margin:2px 0;min-height:40px;padding:5px 9px}
  .phone.learning .reading-copy .sentence-meaning{padding:6px 10px;margin:4px 0}
  .phone.learning .reading-copy .teaching-copy{padding:7px 10px;margin:5px 0}
  .phone.learning .reading-copy .teaching-copy p{font-size:18px;line-height:1.5;margin:5px 0 0}
  .phone.learning .compact-steps,
  .phone.learning:not(.after-learning) .compact-steps{margin:3px 0;padding:2px}
  .phone.learning .compact-steps button,
  .phone.learning:not(.after-learning) .compact-steps button{min-height:36px;padding:5px;font-size:14px}
  .phone.learning #lesson-surface>.practice-picker{padding:4px 0}
  .phone.learning .practice-picker-heading{margin:0 0 3px;line-height:1.3}
  .phone.learning .practice-picker-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
  .phone.learning .practice-picker .practice-pick,
  .phone.learning:not(.after-learning) .practice-pick{min-height:44px;padding:4px 2px;gap:2px}
  .phone.learning .practice-picker .practice-pick>b{display:block;max-width:100%;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .phone.learning .practice-pick-number{font-size:12px;line-height:1.2}
  .phone.learning .learning-notes .inline-score{margin:2px 0;padding:3px 7px}
  .phone.learning .self-study-done{padding:1px 0;font-size:14px;line-height:1.3}
  .phone.learning:not(.after-learning) .practice-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 8px;margin-top:3px;padding:3px 0 0}
  .phone.learning:not(.after-learning) .practice-controls .record-action-row{grid-column:auto;display:flex;min-width:0}
  .phone.learning .practice-controls .relisten,
  .phone.learning:not(.after-learning) .practice-controls .course-autoplay,
  .phone.learning .practice-controls .record-action-row>.cta{min-height:46px;margin:0;padding:8px;font-size:16px;line-height:1.3;white-space:normal}
  .phone.learning:not(.after-learning) .practice-controls .record-action-row>.cta{width:100%}
  .phone.learning.after-learning .usage-focus{padding:8px 12px}
  .phone.learning.after-learning .usage-meaning{padding:4px 0 0;margin:4px 0}
  .phone.learning.after-learning .life-playback-row{padding:5px 0;gap:10px}
  .phone.learning.after-learning .life-playback-row button{min-height:44px;padding:8px 14px}
  .phone.learning.after-learning .practice-controls{margin-top:3px;padding-top:3px}
  .phone.learning .tone-stage .reading-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-items:start}
  .phone.learning .tone-stage .learning-target-block{grid-column:1;grid-row:1/3}
  .phone.learning .tone-stage .learning-explanation-switch{grid-column:2;grid-row:2;justify-content:flex-start}
  .phone.learning .tone-stage .learning-detail-scroll{grid-column:2;grid-row:1}
  .phone.learning .tone-stage .tone-preview-fixed .tone-plot{width:100%;height:140px}
  .phone.learning .tone-stage .tone-preview-fixed{padding:7px;margin:8px 0 0}
}