/* This batch separates phone learning from existing iPad columns. */
.explanation-inline-slot{display:contents}
.usage-core{display:contents}
.explanation-state-compact{display:none}
.taster-guide-header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:2;background:#fff;padding:8px 0 12px;border-bottom:1px solid #dce6ef}
.taster-guide-header h3{margin:0}
.taster-guide-header>button{flex:none;min-width:76px;min-height:44px;padding:8px 12px;background:#174f86;color:#fff;border:1px solid #174f86;border-radius:10px;font-size:16px;font-weight:700}
.study-audio-buttons{display:flex;gap:6px;min-width:0}
.study-audio-buttons>button{flex:1;min-width:0}
.phone .study-audio-buttons [data-action=learning-pause]{background:#174f86;color:#fff;border:1px solid #174f86}
.phone .study-audio-buttons [data-action=learning-pause]:disabled{opacity:.45}
.taster-lesson-controls{display:flex;align-items:center;gap:8px;min-width:0}
.taster-lesson-controls>.guided-lessons{flex:0 0 auto;display:block;margin:0}
.taster-lesson-controls>.explanation-toggle{flex:1;min-width:0;margin:0}
.taster-lesson-controls .explanation-action{display:none}
.taster-lesson-controls .guided-lessons button{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;min-width:70px}
.taster-support{display:flex;align-items:center;justify-content:space-between;gap:8px}
.taster-support button{min-height:40px;line-height:1.35;font-size:14px;padding:4px}
.taster-support button:first-child{flex:1;text-align:left}
.phone.tasting .guided-card>.guided-stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;flex:none;margin:0 0 8px}
.phone.tasting .guided-card>.guided-stages button{min-width:0;min-height:44px;padding:5px 2px;line-height:1.3;font-size:14px}
.phone.tasting .guided-card>.guided-stages button>span{margin:0 3px 0 0}
.phone.tasting .taster-sidebar .pagehead{padding:3px 0 6px}
.phone.tasting .taster-sidebar .pagehead h2{font-size:20px}
.phone.tasting .guided-card-heading{font-size:14px;line-height:1.3}
.phone.tasting .guided-card-heading>b{font-size:inherit}
.phone.tasting .guided-status{min-height:0;margin:4px 0;padding:4px 0;font-size:14px;line-height:1.4}
.phone.tasting .taster-progress{height:5px;margin:8px 0 0}
.phone.tasting .guided-sentence{word-break:keep-all}
.phone.tasting .guided-controls [data-action=taster-playback]{background:#174f86;color:#fff;border-color:#174f86}
/* Six-tone examples are measured as one intact Han/Jyutping row. */
.phone.learning .tone-stage .tone-reading-target{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;min-width:0;width:100%}
.phone.learning .tone-stage .tone-reading-target .spoken-target,.phone.learning .tone-stage .tone-reading-target .target-jyut{width:auto;max-width:none;flex:0 0 auto;white-space:nowrap!important;overflow-wrap:normal!important}

@media (min-width:700px) and (min-height:500px){
 .phone.tasting .guided-taster{grid-template-columns:clamp(180px,22vw,230px) minmax(0,1fr);gap:10px 14px}
 .phone.tasting .taster-sidebar{overflow:visible;align-self:start;padding-right:8px}
 .phone.tasting .guided-scroll{padding:0}
 .phone.tasting .guided-card{padding:10px 12px}
 .phone.tasting .taster-lesson-controls{flex-wrap:wrap}
 .phone.tasting .taster-lesson-controls>.guided-lessons{flex:1 1 100%;width:100%}
 .phone.tasting .taster-lesson-controls .guided-lessons button{width:100%}
 .phone.tasting .taster-lesson-controls>.explanation-toggle{flex-basis:100%;font-size:14px;min-height:44px;padding:6px}
 .phone.tasting .taster-support{flex-direction:column;align-items:stretch;gap:4px;margin-top:8px}
 .phone.tasting .taster-support button{padding:6px 2px;text-align:left;min-height:40px}
 .phone.tasting .guided-controls{padding-right:8px}
 .phone.tasting .guided-study-viewport{padding:2px 0}
 .phone.tasting .guided-study-copy{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;margin:0}
 .phone.tasting .guided-study-copy[data-study-align=center]{margin-block:0}
 .phone.tasting .guided-study-target{display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;min-width:0;padding:4px 0 12px}
 .phone.tasting .guided-card-details{flex:0 0 auto;margin-top:auto;padding-top:6px;border-top:1px solid #e3ebf3;text-align:left}
 .phone.tasting .guided-card-details .guided-tip,html[data-language=en] .phone.tasting .guided-card-details .guided-tip{font-size:15px;line-height:1.4;margin:0;padding:0;border:0}
 .phone.tasting .guided-card-details .guided-word-meaning{font-size:15px;line-height:1.4;margin:0 0 4px;text-align:left}
 .phone.tasting .guided-card-details .guided-source{font-size:13px;line-height:1.35;margin:4px 0 0}
 .phone.tasting .taster-welcome .taster-sidebar{border-right:0}
 .phone.learning .lesson-context>.learning-explanation-switch{justify-content:stretch;margin-top:10px}
 .phone.learning .lesson-context>.learning-explanation-switch button{width:100%;min-height:44px;font-size:14px}
 .phone.learning .tone-stage .explanation-inline-slot:empty{display:none}
 .phone.learning:not(.after-learning) .practice-controls .study-audio-buttons .relisten{font-size:14px;padding:7px 5px;min-height:46px}
}
@media (min-width:700px) and (min-height:500px) and (orientation:portrait){
 .phone.tasting .guided-sentence>[data-taster-focus=start]{display:block}
}

/* Landscape opening: keep purchase visible, with the former card row 25% shorter. */
@media (min-width:900px) and (min-height:500px) and (orientation:landscape){
 .stage:has(.phone.landing){padding:10px}
 .phone.landing{height:calc(100dvh - 20px)}
 .phone.landing .topbar{height:60px;min-height:60px;flex-basis:60px;padding:8px 20px;gap:16px}
 .phone.landing #content{padding-inline:20px}
 .home-focus .hf-opening{display:grid;grid-template-rows:auto auto minmax(min-content,1fr) auto auto;height:auto;min-height:var(--home-first-screen-height,calc(100dvh - 144px - env(safe-area-inset-bottom)));padding-top:8px}
 .home-focus .hf-eyebrow{font-size:14px;line-height:1.4;margin:0 0 6px}
 .home-focus .hf-opening h1{font-size:26px;line-height:1.25;margin:0 0 8px}
 .home-focus .hf-opening h1>span,.home-focus .hf-opening h1>em{display:inline}
 .home-focus .hf-opening h1>em{font-size:21px;margin-left:16px;line-height:1.3}
 .home-focus .hf-hero-seven{font-size:42px}
 .home-focus .hf-modules{display:grid;grid-template-rows:auto minmax(min-content,1fr);min-height:0;margin:8px 0}
 .home-focus .hf-modules-heading{margin:0 0 5px;gap:12px}
 .home-focus .hf-modules-heading h2{font-size:18px;margin:0}
 .home-focus .hf-brand-mark{width:140px}
 .home-focus .hf-module-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;min-height:0}
 .home-focus .hf-module-life,.home-focus .hf-module-reading{grid-column:auto}
 .home-focus .hf-module{min-height:108px;padding:clamp(8px,1.5vh,14px) 16px;gap:clamp(3px,.75vh,6px);justify-content:center}
 .home-focus .hf-module strong{font-size:clamp(23px,3.7vh,28px);line-height:1.3}
 .home-focus .hf-module .hf-module-kicker{font-size:14px;line-height:1.35}
 .home-focus .hf-module>span:not(.hf-module-kicker):not(.hf-module-top){font-size:clamp(14px,2.2vh,17px);line-height:1.4}
 .home-focus .hf-learning-actions{margin-top:10px;gap:5px 10px}
 .home-focus .hf-learning-actions>.cta{min-height:44px;margin:0;padding:8px 12px}
 .home-focus .hf-taster-note{font-size:14px;line-height:1.3;margin:0}
 .home-focus .hf-purchase{margin-top:8px;padding-block:8px;gap:12px}
 .home-focus .hf-purchase>button,html[data-language=en] .home-focus .hf-purchase>button{min-height:44px;padding:8px 20px}
 .home-focus .hf-price{font-size:36px;line-height:1.15}
 .home-focus .hf-price-caption{font-size:14px;line-height:1.3}
 .home-focus .hf-course-details[open]{display:block}
 .home-focus .hf-course-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px;margin-top:22px;padding:15px 0;border-block:1px solid #dce6ef}
 .home-focus .hf-course-columns>.hf-course-details{min-width:0;margin:0;padding:0;border:0}
 .home-focus .hf-course-columns>.hf-course{min-width:0;padding:0 0 10px}
 .home-focus .hf-course-columns:has(>.hf-course-details:not([open]))>.hf-course{display:none}
 .home-focus .hf-course-columns .hf-method{padding-top:12px}
 .home-focus .hf-course-columns .hf-lesson-steps{margin-top:12px}
 .home-focus .hf-course-columns .hf-lesson-steps>li{padding:10px;min-height:72px;gap:7px}
 .home-focus .hf-course-columns .hf-day-list{margin-top:12px}
 .home-focus .hf-course-columns .hf-day-list>li{min-height:44px;padding:7px 0}
}

/* All phone orientations remain one column, including 844×390 / 932×430. */
@media (max-width:699px),(max-height:499px){
 .phone.learning #content,.phone.learning.after-learning #content{display:flex;flex-direction:column;grid-template-columns:none;gap:4px;padding:4px 12px max(6px,env(safe-area-inset-bottom));overflow:hidden;min-height:0}
 .phone.learning .lesson-context{width:100%;max-width:none;flex:none;padding:0;border-right:0;overflow:visible;min-height:0}
 .phone.learning #lesson-surface,.phone.learning.after-learning #lesson-surface{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;overflow:hidden}
 .phone.learning .lesson-context .pagehead{padding:3px 0}
 .phone.learning .lesson-context .pagehead h2{display:flex;align-items:center;flex-direction:row;gap:6px;font-size:17px;line-height:1.3}
 .phone.learning .lesson-context .pagehead p{font-size:12px;line-height:1.3;margin:2px 0}
 .phone.learning .lesson-day{font-size:21px}
 .phone.learning .lesson-category{font-size:13px;line-height:1.2}
 .phone.learning .lesson-navigation{margin:0 0 4px;padding:0}
 .phone.learning .lesson-navigation button{min-height:40px;padding:5px 9px;font-size:14px}
 .phone.learning .lesson-sound-nav{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;margin:3px 0;padding:0 0 3px;max-width:100%;scrollbar-width:thin}
 .phone.learning .lesson-sound-nav .lesson-sound{min-height:36px;min-width:38px;flex:0 0 auto;padding:5px 7px;font-size:14px}
 .phone.learning .lesson-day-jump{min-height:30px;font-size:12px;padding:3px 6px;margin:2px 0}
 .phone.learning .focus-reading,.phone.learning.after-learning .focus-reading{display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding:6px 8px;overflow:hidden}
 .phone.learning .focus-heading{flex:none;margin:0 0 3px;font-size:12px;line-height:1.3}
 .phone.learning:not(.after-learning) .reading-content,.phone.learning.after-learning .reading-content{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:3px 0}
 .phone.learning .reading-copy{display:flex!important;flex-direction:column;flex:0 0 auto;min-width:0;width:100%;height:auto;min-height:0;margin:0;gap:0}
 .phone.learning .reading-copy[data-mobile-align=center]{margin-block:auto}
 .phone.learning .reading-copy .learning-target-block{flex:none}
 .phone.learning .reading-copy .learning-detail-scroll{order:2;flex:none;overflow:visible;max-height:none;padding:0}
 .phone.learning .reading-copy .learning-explanation-switch{order:3;flex:none;justify-content:flex-end;padding:0;margin-top:5px}
 .phone.learning .reading-copy .explanation-toggle{min-height:36px;padding:5px 8px;font-size:13px;margin:2px 0}
 .phone.learning .reading-copy .sentence-meaning,.phone.learning .reading-copy .teaching-copy,.phone.learning .reading-copy .usage-meaning{margin:6px 0 0;padding:5px 7px;flex:none}
 .phone.learning .reading-copy .sentence-meaning>p,.phone.learning .reading-copy .usage-meaning>b,.phone.learning .reading-copy .teaching-copy p{font-size:14px!important;line-height:1.4!important;margin:3px 0 0}
 .phone.learning .reading-copy .sentence-meaning>span,.phone.learning .reading-copy .usage-meaning>small{font-size:12px;line-height:1.3}
 .phone.learning .reading-copy .usage-meaning .learning-explanation-switch{margin-top:7px}
 .phone.learning .reading-copy .tone-lesson-detail{font-size:14px;line-height:1.4}
 .phone.learning .reading-copy .tone-repeat-hint{font-size:12px;line-height:1.3;margin:4px 0}
 .phone.learning .reading-copy[data-mobile-study] .spoken-target{font-size:var(--mobile-target)!important;line-height:1.2!important;white-space:nowrap!important;word-break:normal;max-height:none;overflow:visible;margin:3px 0}
 .phone.learning .reading-copy[data-mobile-study][data-mobile-wrap=true] .spoken-target{white-space:normal!important;overflow-wrap:anywhere}
 .phone.learning .reading-copy[data-mobile-study] .target-jyut{font-size:var(--mobile-jyut)!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere;max-height:none;overflow:visible;margin:5px 0}
 .phone.learning .reading-copy[data-mobile-study] .phonetic-symbol{font-size:var(--mobile-symbol)!important;line-height:1.15;min-height:0;margin:4px 0}
 .phone.learning .reading-copy[data-mobile-study] .tone-preview-fixed .tone-plot{height:var(--mobile-plot)!important;max-height:none;width:100%}
 .phone.learning .reading-copy[data-mobile-study] .tone-preview-fixed{margin:4px 0;padding:4px}
 .phone.learning .reading-copy[data-mobile-study] .capstone-sound strong{font-size:var(--mobile-capstone)!important}
 .phone.learning .compact-steps{flex:none;padding:2px;margin:3px 0 0}
 .phone.learning .compact-steps button{min-height:32px;padding:4px;font-size:13px}
 .phone.learning #lesson-surface>.practice-picker{padding:3px 0;flex:none}
 .phone.learning .practice-picker-heading{margin:0 0 3px;font-size:12px}
 .phone.learning .practice-picker-grid{gap:4px}
 .phone.learning .practice-picker .practice-pick{min-height:44px;padding:4px 2px}
 .phone.learning .practice-picker .practice-pick>b{display:block;font-size:14px;line-height:1.25;white-space:normal;overflow-wrap:anywhere;max-width:100%}
 .phone.learning .learning-notes{flex:none}
 .phone.learning .learning-notes .inline-score{margin:0;padding:1px 0;font-size:12px}
 .phone.learning .self-study-done{font-size:12px;line-height:1.3}
 .phone.learning .practice-controls{flex:none;margin:3px 0 0;padding:3px 0;gap:5px}
 .phone.learning .listen-status-row{min-height:0;font-size:12px;line-height:1.3}
 .phone.learning .listen-status-row .text-action{font-size:12px;min-height:28px;padding:3px}
 .phone.learning .practice-controls .relisten,.phone.learning .practice-controls .course-autoplay,.phone.learning .practice-controls .cta{min-height:40px;margin:0;padding:6px;font-size:14px;line-height:1.3}
 .phone.learning .life-playback-row{flex:none;padding:4px 0;gap:8px}
 .phone.learning .life-playback-row button{min-height:40px;padding:6px 8px;font-size:14px}
 .phone.learning .usage-step{font-size:12px;margin-top:4px}
 .phone.learning .life-reader-heading .pagehead h2{font-size:16px}
 .phone.learning .life-reader-heading .study-navigation{margin:0 0 4px}
 .phone.learning .life-reader-heading .study-navigation button{min-height:40px;padding:5px 9px;font-size:14px}
 .phone.tasting #content{padding:3px 12px 0}
 .phone.tasting .guided-taster{display:flex;flex-direction:column;gap:4px;padding:0;min-height:0}
 .phone.tasting .guided-scroll{display:flex;flex-direction:column;flex:1 1 0;gap:3px;min-height:0;overflow:hidden;padding:0}
 .phone.tasting .taster-sidebar{display:contents}
 .phone.tasting .taster-sidebar>.pagehead,.phone.tasting .taster-lesson-controls,.phone.tasting .taster-progress{order:0;flex:none}
 .phone.tasting .guided-card{order:1}
 .phone.tasting .guided-status{order:2;flex:none}
 .phone.tasting .taster-support{order:3;flex:none}
 .phone.tasting .guided-audio-help{order:4;flex:none}
 .phone.tasting .taster-sidebar .pagehead{padding:2px 0 4px}
 .phone.tasting .taster-sidebar .pagehead h2{font-size:18px;line-height:1.3}
 .phone.tasting .taster-lesson-controls>.guided-lessons{flex:1 1 0;min-width:0}
 .phone.tasting .taster-lesson-controls .guided-lessons button{width:100%;min-height:44px;padding:3px 8px}
 .phone.tasting .taster-lesson-controls .guided-lessons b{font-size:28px;line-height:1.2}
 .phone.tasting .taster-lesson-controls>.explanation-toggle{flex:0 0 auto;width:auto;max-width:55%;min-height:44px;padding:4px 9px;font-size:13px;white-space:nowrap}
 .phone.tasting .taster-lesson-controls .explanation-state{display:none}
 .phone.tasting .taster-lesson-controls .explanation-state-compact{display:inline}
 .phone.tasting .taster-support button{min-height:30px;font-size:12px;padding:3px}
 .phone.tasting .guided-status{font-size:12px;padding:2px 0;margin:2px 0}
 .phone.tasting .guided-card{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;padding:6px 8px;margin:0;overflow:hidden}
 .phone.tasting .guided-card>.guided-stages{gap:3px;margin:0 0 3px}
 .phone.tasting .guided-card>.guided-stages button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;padding:3px 0;min-height:40px}
 .phone.tasting .guided-card>.guided-stages button>span{margin:0;font-size:12px;line-height:1}
 html[data-language=en] .phone.tasting .guided-card>.guided-stages{grid-template-columns:repeat(3,minmax(0,1fr))}
 html[data-language=en] .phone.tasting .guided-card>.guided-stages button{flex-direction:row;min-height:32px;font-size:12px}
 .phone.tasting .guided-card-heading{font-size:12px;margin:0 0 2px}
 .phone.tasting .guided-study-viewport{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:auto;padding:0}
 .phone.tasting .guided-study-copy{flex:none;width:100%;min-width:0}
 .phone.tasting .guided-study-copy[data-study-align=center]{margin-block:auto}
 .phone.tasting .guided-card-details{flex:none;max-height:none;overflow:visible}
 .phone.tasting .guided-sound,.phone.tasting .guided-blend>div:first-child,.phone.tasting .guided-blend .blend-result,.phone.tasting .guided-tone-word,.phone.tasting .guided-words,.phone.tasting .guided-sentence{font-size:var(--supplement-target,42px)!important;line-height:1.15;min-height:0;margin:4px 0;padding:0}
 .phone.tasting .guided-character,.phone.tasting .guided-blend>p{font-size:calc(var(--supplement-target,42px)*.65)!important;margin:4px 0;line-height:1.2}
 .phone.tasting .guided-jyut,.phone.tasting .sentence-jyut{font-size:var(--supplement-jyut,22px)!important;line-height:1.3;margin:5px 0;overflow-wrap:anywhere}
 .phone.tasting .guided-tone{margin:4px 0}
 .phone.tasting .guided-tone .tone-plot{height:var(--supplement-plot,90px)!important;min-height:0;max-height:none}
 .phone.tasting .guided-tone figcaption{font-size:12px;line-height:1.3}
 .phone.tasting .guided-tone figcaption small{display:none}
 .phone.tasting .guided-controls{display:grid;grid-template-columns:1fr 1fr;flex:none;gap:6px;padding:4px 0 6px;min-height:0}
 .phone.tasting .guided-controls button{min-height:44px;font-size:14px;padding:7px 5px;margin:0}
 .phone.tasting .taster-welcome-copy{overflow:auto;justify-content:flex-start}
 .phone.tasting .taster-welcome .guided-controls{grid-template-columns:1fr}
 .phone.tasting .taster-welcome-copy h2{font-size:22px}
}

/* A short phone viewport must never collapse the learning content to zero. */
@media (max-height:499px){
 .phone.learning #content,.phone.learning.after-learning #content,.phone.tasting #content{display:block;overflow-y:auto;overflow-x:hidden;min-height:0}
 .phone.learning #lesson-surface,.phone.learning.after-learning #lesson-surface{display:flex;flex-direction:column;flex:none;min-height:400px;overflow:visible}
 .phone.learning .focus-reading,.phone.learning.after-learning .focus-reading{flex:none;min-height:240px;overflow:visible}
 .phone.learning:not(.after-learning) .reading-content,.phone.learning.after-learning .reading-content{flex:none;height:220px;min-height:180px;overflow:auto}
 .phone.tasting .guided-taster{min-height:500px;height:auto}
 .phone.tasting .guided-scroll{flex:none;overflow:visible}
 .phone.tasting .guided-card{flex:none;height:300px;min-height:260px}
 .phone.tasting .taster-welcome-copy{height:auto;min-height:0}
}

/* Playback controls occupy one row on every learning viewport. */
.phone.learning:not(.after-learning) .practice-controls{grid-template-columns:minmax(0,1fr)}
.phone.learning .study-playback-row,.phone.learning .life-playback-row{display:flex;flex-flow:row nowrap;align-items:stretch;gap:6px;grid-column:1/-1;width:100%;min-width:0;padding:4px 0}
.phone.learning .study-playback-row>button,.phone.learning .life-playback-row>button,.phone.learning:not(.after-learning) .study-playback-row>.course-autoplay{flex:1 1 0;min-width:0;max-width:none;min-height:44px;margin:0;padding:7px 5px;font-size:14px;line-height:1.3;white-space:nowrap}
.phone.learning [data-action=learning-pause]{background:#174f86;border:1px solid #174f86;color:#fff}
.phone.learning [data-action=learning-pause]:disabled{opacity:.45}
.phone.learning .practice-controls .record-action-row{grid-column:1/-1}
.welcome-audio-controls{flex:none;width:100%;margin-top:12px}
.welcome-audio-controls>button{min-height:44px;padding:8px 16px;background:#174f86;border:1px solid #174f86;color:#fff;border-radius:10px}
.welcome-audio-controls>p{font-size:14px!important;line-height:1.4!important;margin:8px 0 0!important}

/* iPad course playback has one explicit row in both orientations. */
@media (min-width:700px) and (min-height:500px){
 .phone.learning:not(.after-learning) #lesson-surface>.practice-controls{display:grid;grid-template-columns:minmax(0,1fr)}
 .phone.learning:not(.after-learning) .practice-controls>.study-playback-row{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto;gap:8px;grid-column:1/-1;width:100%;min-width:0}
 .phone.learning:not(.after-learning) .practice-controls>.study-playback-row>button{grid-row:1;width:auto;min-width:0;max-width:none;min-height:44px;margin:0;padding:8px 6px;font-size:16px;line-height:1.3;white-space:nowrap}
}

/* Phone life lessons reserve the centre for Cantonese and Jyutping. */
@media (max-width:699px),(max-height:499px){
 .phone.learning.after-learning .reading-copy,.phone.learning.after-learning .reading-copy[data-mobile-align=center]{display:flex;flex-direction:column;flex:1 0 auto;min-height:100%;margin:0}
 .phone.learning.after-learning .usage-core{display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;min-width:0;width:100%;padding-bottom:8px}
 .phone.learning.after-learning .reading-copy .usage-meaning{flex:0 0 auto;margin:0;padding:5px 7px;margin-top:auto}
 .phone.learning.after-learning .life-usage-note{margin:4px 0 0;font-size:14px;line-height:1.4}
 .phone.learning.after-learning .life-usage-note>summary{min-height:30px;padding:4px 0;font-size:14px}
 .phone.learning.after-learning .life-usage-note>p{font-size:14px;line-height:1.4}
}

/* Phone six-tone overview: keep pitch SVGs in normal flow with real height. */
@media (max-width:699px),(max-height:499px){
 .phone.overview-learning .tone-overview-study{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(min-content,1fr) auto;gap:5px;overflow-y:auto;overflow-x:hidden}
 .phone.overview-learning .tone-overview-sidebar{display:block;min-width:0}
 .phone.overview-learning .overview-study-navigation .study-navigation{margin:3px 0 5px;gap:8px}
 .phone.overview-learning .overview-study-navigation .study-navigation button{padding:6px;min-height:40px}
 .phone.overview-learning .tone-overview-heading{padding:3px 0}
 .phone.overview-learning .tone-overview-toolbar{margin-top:4px}
 .phone.overview-learning .tone-chart-grid{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(min-content,1fr));gap:5px;min-height:280px;margin:0}
 .phone.overview-learning .tone-card{grid-template-rows:auto minmax(64px,1fr) auto;gap:3px;overflow:visible}
 .phone.overview-learning .tone-card header{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;column-gap:4px}
 .phone.overview-learning .tone-plot-frame{position:relative;display:flex;align-items:center;min-height:64px;overflow:visible}
 .phone.overview-learning .tone-plot-frame .tone-plot{position:static;display:block;inset:auto;width:100%;height:auto;aspect-ratio:188/124;min-height:64px;max-height:none;overflow:visible}
 .phone.overview-learning .tone-overview-status{grid-column:1;grid-row:3;height:auto;min-height:18px;max-height:2.6em;margin:0}
}

/* Phone course targets: keep each Jyutping syllable intact and prioritise the lesson. */
@media (max-width:699px),(max-height:499px){
 .phone.learning:not(.after-learning) .reading-copy .target-jyut{overflow-wrap:normal!important;word-break:normal!important;hyphens:none;font-weight:750}
 .phone.learning:not(.after-learning) .reading-copy .spoken-target{font-weight:800}
 .phone.learning:not(.after-learning) .tone-reading-target{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:12px;min-width:0;width:100%}
 .phone.learning:not(.after-learning) .tone-reading-target .spoken-target,.phone.learning:not(.after-learning) .tone-reading-target .target-jyut{width:auto;max-width:none;flex:0 0 auto;white-space:nowrap!important;overflow-wrap:normal!important}
 .phone.learning:not(.after-learning) .tone-stage .reading-copy,.phone.learning:not(.after-learning) .tone-stage .reading-copy[data-mobile-align=center]{flex:1 0 auto;min-height:100%;margin:0}
 .phone.learning:not(.after-learning) .tone-stage .learning-target-block{display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;min-width:0}
 .phone.learning:not(.after-learning) .tone-stage .learning-detail-scroll{flex:0 0 auto;margin-top:auto;padding-top:4px}
 .phone.learning:not(.after-learning) .tone-stage .tone-preview-detail{font-size:13px;line-height:1.3;margin:3px 0 0}
 .phone.learning:not(.after-learning) .tone-stage .tone-preview-detail p{font-size:13px;line-height:1.3;margin:3px 0}
 .phone.learning:not(.after-learning) .tone-stage .tone-preview-detail button{display:inline-block;width:auto;min-height:32px;margin:0;padding:4px 6px;font-size:13px;line-height:1.3}
 .phone.learning:not(.after-learning) .tone-stage .tone-repeat-hint{font-size:12px;line-height:1.3;margin:3px 0}
 .phone.learning:not(.after-learning) .tone-stage .learning-explanation-switch{margin-top:3px}
}

/* iPad trial targets keep the original pronunciation blue, including active words. */
@media (min-width:700px) and (min-height:500px){
 .phone.tasting .guided-study-target .guided-sound,.phone.tasting .guided-study-target .guided-blend,.phone.tasting .guided-study-target .guided-blend>p,.phone.tasting .guided-study-target .guided-tone-word,.phone.tasting .guided-study-target .guided-character,.phone.tasting .guided-study-target .guided-words,.phone.tasting .guided-study-target .guided-sentence,.phone.tasting .guided-study-target .guided-jyut,.phone.tasting .guided-study-target .speaking{color:#1766b6}
}

/* Phone trial: water and explanation switch above the core; secondary tools below it. */
@media (max-width:699px),(max-height:499px){
 .phone.tasting .guided-taster:not(.taster-welcome) .guided-scroll{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:3px}
 .phone.tasting .guided-taster:not(.taster-welcome) .taster-sidebar{display:contents}
 .phone.tasting .guided-taster:not(.taster-welcome) .taster-sidebar>.pagehead{grid-column:1;grid-row:1}
 .phone.tasting .taster-lesson-controls{grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:stretch;gap:6px;width:100%;min-width:0}
 .phone.tasting .taster-lesson-controls>.guided-lessons{width:100%;min-width:0;margin:0}
 .phone.tasting .taster-lesson-controls>.explanation-toggle{width:auto;max-width:none;margin:0;min-height:44px;padding:4px 8px;white-space:nowrap}
 .phone.tasting .taster-progress{grid-column:1;grid-row:3;margin:3px 0}
 .phone.tasting .guided-taster:not(.taster-welcome) .guided-card{grid-column:1;grid-row:4;min-height:0}
 .phone.tasting .taster-secondary{grid-column:1;grid-row:5;display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0;padding-top:2px}
 .phone.tasting .taster-secondary .guided-status{min-height:0;margin:0;padding:2px 0;font-size:12px;line-height:1.3}
 .phone.tasting .taster-secondary .taster-support{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;margin:0}
 .phone.tasting .taster-secondary .taster-support button{min-height:32px;margin:0;padding:3px 0;font-size:12px;line-height:1.3}
 .phone.tasting .taster-secondary .taster-support button:last-child{flex:0 0 auto;white-space:nowrap}
 .phone.tasting .taster-secondary .guided-audio-help{margin-top:3px;min-height:32px;padding:4px 8px;font-size:13px}
}

/* Seven-point revision: only the landscape course directory gains paired entrances. */
@media (min-width:900px) and (min-height:500px) and (orientation:landscape){
 .phone.course-browsing .course-directory .course-extra-entries{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-column:auto;grid-row:auto;gap:10px}
}
/* Grid children may shrink with their learning frame, never force it wider. */
.phone.learning .capstone-sounds,.phone.learning .capstone-sound{min-width:0;max-width:100%;box-sizing:border-box}
.phone.learning .capstone-sound strong{max-width:100%;letter-spacing:0}

/* Course entrances: touch-tablet landscape only; retain the existing two columns. */
@media (min-width:900px) and (min-height:500px) and (orientation:landscape) and (pointer:coarse){
 .phone.course-browsing .course-directory .course-extra-entries>button{min-height:72px;padding-block:10.5px}
 .phone.course-browsing .course-directory .course-extra-entries strong,.phone.course-browsing .course-directory .course-extra-entries b{font-size:20px;line-height:1.3}
}
@media (min-width:900px) and (min-height:500px) and (max-height:740px) and (orientation:landscape) and (pointer:coarse){
 .phone.course-browsing .course-directory .course-extra-entries>button{min-height:66px;padding-block:6px}
}