/* One shared navigation palette and a clear home destination. */
:root{--home-button-gold:#f3c663;--navigation-ink:#174f86}
.phone .header-tools .sound-search-prominent{color:var(--navigation-ink);font-family:inherit;font-weight:750}
.phone .lesson-navigation button,.phone .life-reader-nav button,.phone .leisure-reader-nav button{font-weight:750}
.phone .lesson-navigation button:not(:disabled),.phone .life-reader-nav button,.phone .leisure-reader-nav button{background:#edf4fc;border-color:#c8d9e9;color:var(--navigation-ink)}
.phone .lesson-navigation button[data-action=home],
.phone .life-reader-nav [data-action=home],
.phone .leisure-reader-nav [data-action=home],
.phone .bottom [data-action=home]{background:var(--home-button-gold);border-color:var(--home-button-gold);color:var(--navigation-ink);font-family:inherit;font-weight:750;border-radius:10px}
.phone .lesson-navigation [data-action=home]:hover,
.phone .life-reader-nav [data-action=home]:hover,
.phone .leisure-reader-nav [data-action=home]:hover{background:#ffda83;color:var(--navigation-ink)}
.phone.landing .header-tools .sound-search-prominent,
.phone.landing .header-tools .translation-open-prominent,
.phone.landing .header-tools [data-action=voice-settings]{background:#edf4fc;border:1px solid #c8d9e9;color:var(--navigation-ink);font-weight:750}
.phone.landing .header-tools .translation-open-prominent>span{color:inherit}
.course-directory .life-entry,.course-directory .literature-entry.leisure-entry{background:#174f86;border-color:#174f86;color:#fff}
.course-directory .life-entry strong,.course-directory .life-entry small,.course-directory .life-entry>b,
.course-directory .literature-entry.leisure-entry b,.course-directory .literature-entry.leisure-entry small,.course-directory .literature-entry.leisure-entry span,.course-directory .literature-entry.leisure-entry strong{color:#fff}
.course-extra-entries{display:grid;gap:12px;margin-top:16px}
.course-extra-entries>.life-entry,.course-extra-entries>.literature-entry{margin:0}
.course-support>.small-note{margin:12px 0}
.hf-brand-signature{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px}
.hf-brand-signature img{display:block;width:210px;max-width:50%;height:auto;aspect-ratio:3/1;object-fit:contain}
.hf-brand-signature .hf-eyebrow{margin:0;text-align:right;max-width:270px}
.leisure-reader .leisure-player h2{line-height:1.8}
.leisure-reader .leisure-player-english{color:#245a87;font-size:18px;font-weight:600;line-height:1.5;margin:0 0 8px}
.leisure-reader .leisure-paragraph{margin:22px 0 30px}
.leisure-reader .leisure-sentence{margin:0 0 20px}
.leisure-reader .leisure-prose .leisure-original,
html[data-language=en] .leisure-reader .leisure-prose .leisure-original{font-size:25px;line-height:2.15;letter-spacing:0;margin:0 0 8px;color:#24433c}
.leisure-reader .leisure-prose .leisure-translation,
html[data-language=en] .leisure-reader .leisure-prose .leisure-translation{font-size:17px;line-height:1.65;letter-spacing:0;color:#245a87;font-weight:500;margin:0;overflow-wrap:break-word}
.leisure-reader .leisure-ruby{line-height:2.1}
.leisure-reader .leisure-ruby ruby{display:inline-flex;flex-direction:column-reverse;align-items:center;gap:2px;margin:0 2px 6px;line-height:1.3}
.leisure-reader .leisure-ruby rt{font-size:.55em;line-height:1.25;color:#4a6479;font-weight:550}
.leisure-reader .leisure-text-tools>span{font-size:14px;line-height:1.5}
.leisure-reader .leisure-text-tools button{font-size:14px;min-height:44px}
@media(min-width:700px){.leisure-reader .leisure-prose .leisure-original,html[data-language=en] .leisure-reader .leisure-prose .leisure-original{font-size:30px}.leisure-reader .leisure-prose .leisure-translation,html[data-language=en] .leisure-reader .leisure-prose .leisure-translation{font-size:20px}}
@media(max-width:520px){.hf-brand-signature{gap:10px;margin-bottom:8px}.hf-brand-signature img{width:150px;max-width:45%}.hf-brand-signature .hf-eyebrow{font-size:12px;max-width:200px}}

/* iPad: retain the top/bottom controls and give the lesson the remaining space. */
@media (min-width:700px) and (min-height:500px){
 .phone.learning .lesson-context .pagehead p{margin:3px 0;font-size:16px}
 .phone.learning .life-reader-heading .pagehead{padding:8px 0}
 .phone.learning .life-reader-nav button{font-size:16px}
 .phone.tasting .guided-scroll{display:flex;flex-direction:column;gap:0;padding:6px 0 8px}
 .phone.tasting .guided-scroll>*{flex:none}
 .phone.tasting .guided-scroll>.pagehead{padding:8px 0 6px}
 .phone.tasting .guided-lessons{grid-template-columns:1fr;margin:0 0 5px}
 .phone.tasting .guided-lessons button{min-height:44px}
 .phone.tasting .guided-lessons b{font-size:28px}
 .phone.tasting .guided-stages{margin-bottom:8px}
 .phone.tasting .guided-stages button{min-height:44px}
 .phone.tasting .guided-card{display:flex;flex-direction:column;flex:1 0 300px;min-height:300px;padding:12px 18px}
 .phone.tasting .guided-card-heading{flex:none;margin:0 0 5px}
 .supplemental-study-viewport{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:auto;padding:4px 2px;overscroll-behavior:contain}
 .supplemental-study-copy{flex:none;width:100%;min-width:0;margin:0;text-align:center}
 .supplemental-study-copy[data-study-align=center]{margin-block:auto}
 .phone.tasting .guided-sound{font-size:var(--supplement-target,100px);line-height:1.2;min-height:0;padding:8px 0}
 .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,60px);line-height:1.2;margin:5px 0;overflow-wrap:anywhere}
 .phone.tasting .guided-character,.phone.tasting .guided-blend>p{font-size:calc(var(--supplement-target,60px)*.7);line-height:1.2;margin:5px 0}
 .phone.tasting .guided-jyut,.phone.tasting .sentence-jyut{font-size:var(--supplement-jyut,32px);line-height:1.35;margin:8px 0;overflow-wrap:anywhere}
 .phone.tasting .guided-tone{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:12px;margin:8px 0}
 .phone.tasting .guided-tone .tone-plot{width:100%;height:var(--supplement-plot,180px);max-height:none}
 .phone.tasting .guided-tone figcaption{font-size:18px}
 .phone.tasting .guided-tone figcaption small{font-size:14px}
 .phone.tasting .guided-tip{font-size:18px;line-height:1.5;margin:8px 0 0;padding-top:8px}
 .phone.tasting .guided-word-meaning{font-size:20px}
 .phone.tasting .guided-source{font-size:14px;line-height:1.4;margin:5px 0}
 .phone.tasting .guided-status{min-height:30px;font-size:16px;padding:5px 0}
 .phone.tasting .guided-footer{margin:0}
 .phone.tasting .home-transparency{margin:2px 0;padding:4px 0;font-size:14px}
 .phone.reviewing #content{display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(82px + env(safe-area-inset-bottom))}
 .phone.reviewing .capstone-review{display:flex;flex-direction:column;flex:1;min-height:0}
 .phone.reviewing .capstone-review>.lesson-navigation,.phone.reviewing .capstone-review>.pagehead,.phone.reviewing .capstone-review>.progressbar{flex:none}
 .phone.reviewing .recall-context,.phone.reviewing .recall-prompt{font-size:18px;line-height:1.5}
 .phone.reviewing .recall-meaning{font-size:24px;line-height:1.45}
 .phone.reviewing .recall-copy[data-revealed=false] .recall-meaning{font-size:clamp(24px,calc(var(--supplement-target,100px)*.6),90px)}
 .phone.reviewing .recall-target{font-size:var(--supplement-target,60px);line-height:1.25;overflow-wrap:anywhere}
 .phone.reviewing .recall-jyut{font-size:var(--supplement-jyut,32px);line-height:1.35;overflow-wrap:anywhere}
 .phone.reviewing .recall-model>p{font-size:20px;line-height:1.4}
 .phone.reviewing .capstone-review>.cta,.phone.reviewing .capstone-review>.text-action{flex:none;min-height:44px}
}
@media (min-width:700px) and (orientation:portrait){
 .phone.overview-learning .tone-card header>b{font-size:20px}
 .phone.overview-learning .tone-card header>span{font-size:16px}
 .phone.overview-learning .tone-card-example>b{font-size:36px}
 .phone.overview-learning .tone-card-example>span{font-size:24px}
 .phone.overview-learning .tone-chart-grid{gap:12px}
 .phone.overview-learning .tone-card{padding:10px 7px}
}

/* Landscape course directory: all nine entrances precede the supporting notes. */
@media (min-width:900px) and (min-height:500px) and (orientation:landscape){
 .phone.course-browsing .topbar{height:52px;flex-basis:52px}
 .phone.course-browsing #content{padding:8px 18px calc(82px + env(safe-area-inset-bottom))}
 .course-directory{display:grid;grid-template-columns:minmax(0,3fr) minmax(250px,1fr);gap:10px 18px;min-height:0}
 .course-directory .course-overview{grid-column:1/-1;display:flex;align-items:center;gap:18px}
 .course-directory .course-resume{width:auto;max-width:42%;flex:0 1 340px;min-height:44px;padding:7px 12px;margin:0}
 .course-directory .course-top{flex:1;margin:0;padding:6px 10px;min-width:0}
 .course-directory .course-top h2{font-size:21px}
 .course-directory .course-top p{font-size:14px}
 .course-directory .daylist{grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
 .course-directory .daylist .course-day-card{min-height:62px;grid-template-columns:64px minmax(0,1fr) auto;padding:8px;gap:6px}
 .course-directory .daylist .course-day-card h3{font-size:15px;line-height:1.3}
 .course-directory .day-large-label{font-size:20px}
 .course-directory .daylist .course-day-card:last-child{grid-column:1/-1}
 .course-directory .course-extra-entries{grid-column:2;grid-row:2;grid-template-rows:1fr 1fr;gap:12px;margin:0}
 .course-directory .course-extra-entries>button{display:flex;align-items:center;min-height:0;padding:16px;gap:10px}
 .course-directory .course-extra-entries strong,.course-directory .course-extra-entries b{font-size:22px;line-height:1.4}
 .course-directory .course-extra-entries small,.course-directory .course-extra-entries span{font-size:15px;line-height:1.5}
 .course-directory .course-support{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,1fr);gap:4px 18px;align-items:start}
 .course-directory .course-support>.small-note{grid-column:1;font-size:14px;line-height:1.4;text-align:left;margin:4px 0}
 .course-directory .course-explainer{grid-column:2;grid-row:1/3;margin:0;padding:7px 10px}
 .course-directory .course-explainer summary{font-size:14px;line-height:1.4}
 .course-directory .course-support>.sourcefoot{grid-column:1;font-size:12px;line-height:1.4;margin:0}
}