/* Shared entrance colours; keep the reading player's own pale-green palette. */
:root{--entry-blue:#174f86;--entry-gold:#c18a12;--entry-gold-light:#fff1cc}
.home-focus .hf-hero-seven{color:var(--entry-gold)}
.home-focus .hf-learning-actions>.cta,
.home-focus .hf-purchase>button,
.leisure-directory .leisure-invitation .leisure-start{
  background:#fff;color:var(--entry-blue);border:3px solid var(--entry-gold);
  font-weight:750;box-shadow:none;border-radius:13px;
}
.home-focus .hf-learning-actions>.cta:hover,
.home-focus .hf-learning-actions>.cta:active,
.home-focus .hf-purchase>button:hover,
.leisure-directory .leisure-invitation .leisure-start:hover{background:#fff9e9}
.home-focus .hf-learning-actions>.cta:focus-visible,
.home-focus .hf-purchase>button:focus-visible,
.leisure-directory .leisure-invitation .leisure-start:focus-visible{outline:3px solid var(--entry-blue);outline-offset:3px}
.home-focus .hf-price{color:var(--entry-blue);font-weight:800}
.bottom{background:#fff;border-top:0;gap:6px;padding-inline:8px;height:calc(72px + env(safe-area-inset-bottom))}
.bottom .navbtn{min-width:0;min-height:48px;margin:5px 0 3px;padding:4px 2px;gap:3px;color:var(--entry-blue);font-size:14px;font-weight:750;border-radius:12px;line-height:1.3}
.phone:not(.learning):not(.overview-learning):not(.tasting) .screen{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.bottom .navbtn svg{width:25px;height:25px;flex:none}
.bottom .navbtn.active,.bottom .navbtn[aria-current=page]{color:var(--entry-blue);background:var(--entry-gold-light)}
.bottom .navbtn:focus-visible{outline:3px solid var(--entry-blue);outline-offset:-3px}
.life-track-card{background:var(--entry-blue);border-color:var(--entry-blue);color:#fff}
.life-track-card .life-track-number,
.life-track-card .life-track-body>strong,
.life-track-card .life-track-body>small{color:#fff}
.life-track-card .life-track-body>strong{font-size:1.25rem;font-weight:750}
.life-track-card .life-track-body>small{font-size:.9375rem}
.life-track-card .life-track-progress{background:#47769f}
.life-track-card .life-track-progress>span{background:#fff}
.life-track-card:hover,.life-track-card:focus-visible{background:#123f6c;border-color:#123f6c;color:#fff}
.life-track-card:focus-visible{outline:3px solid var(--entry-gold);outline-offset:3px}
.leisure-directory .leisure-invitation{background:var(--entry-blue);border-color:var(--entry-blue);color:#fff}
.leisure-directory .leisure-invitation h3{color:#fff;font-size:30px;font-weight:750}
.leisure-directory .leisure-invitation p,
.leisure-directory .leisure-invitation .leisure-eyebrow,
.leisure-directory .leisure-invitation>small{color:#fff}
.leisure-directory .leisure-invitation p{font-size:16px}
.leisure-directory .leisure-invitation .leisure-eyebrow{font-size:14px}
.leisure-directory .leisure-invitation>small{font-size:14px}
.leisure-directory .leisure-invitation .leisure-start{font-size:20px;min-height:54px}

/* Added return destinations remain reachable in portrait without changing its reading layout. */
.life-reader-nav{flex-wrap:wrap;gap:8px}
.life-reader-nav button{flex:1 1 120px;min-width:0;min-height:44px;padding:8px;border:1px solid #c8d9e9;border-radius:10px;background:#edf4fc;text-align:center;line-height:1.4}
.life-reader-nav button:last-child{text-align:center}
.life-reader-nav button:focus-visible{outline:3px solid var(--entry-blue);outline-offset:2px}
.tone-overview-sidebar{display:contents}
.tone-overview-sidebar>.overview-landscape-navigation{display:none}

/* Only landscape learning gets the new size/position rules. Portrait keeps its layout. */
@media (min-width:900px) and (min-height:500px) and (orientation:landscape){
  .phone.learning .lesson-navigation,
  html[data-language=en] .phone.learning .lesson-navigation,
  .phone.overview-learning .lesson-navigation{grid-template-columns:minmax(0,1fr);gap:12px}
  .phone.learning .lesson-navigation button,
  .phone.overview-learning .lesson-navigation button{grid-column:1;min-height:48px;padding:10px 8px;font-size:15px}
  .phone.learning .life-reader-nav{display:flex;flex-direction:column;align-items:stretch;gap:12px;flex-wrap:nowrap}
  .phone.learning .life-reader-nav button{flex:none;width:100%;min-height:48px;text-align:left;padding:10px 9px;font-size:15px}


  .phone.overview-learning .topbar{height:52px;flex-basis:52px}
  .phone.overview-learning #content{padding:8px 18px}
  .phone.overview-learning .tone-overview-page{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;gap:8px 18px}
  .phone.overview-learning .tone-overview-study{display:contents}
  .tone-overview-sidebar{display:flex;flex-direction:column;grid-column:1;grid-row:1/-1;min-width:0;min-height:0;overflow-y:auto;padding-right:12px;border-right:1px solid var(--line)}
  .tone-overview-sidebar>.overview-landscape-navigation{display:block}
  .tone-overview-sidebar .tone-overview-heading{flex-wrap:wrap;margin:10px 0}
  .tone-overview-sidebar .tone-overview-heading>.back{display:none}
  .tone-overview-sidebar .lesson-sound-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
  .tone-overview-sidebar .lesson-sound{min-height:44px}
  .tone-overview-sidebar .tone-overview-toolbar{flex-wrap:wrap;margin-top:12px}
  .phone.overview-learning .tone-chart-grid{grid-column:2;grid-row:1;gap:12px;min-height:0}
  .phone.overview-learning .tone-card{padding:12px 8px;grid-template-rows:auto minmax(0,1fr) auto}
  .phone.overview-learning .tone-card header{display:flex;flex-direction:row;justify-content:center;gap:7px;flex-wrap:wrap}
  .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:clamp(30px,4vh,46px)}
  .phone.overview-learning .tone-card-example>span{font-size:clamp(24px,3vh,34px)}
  .phone.overview-learning .tone-overview-status{grid-column:2;grid-row:2;height:auto;min-height:24px;max-height:2.6em;text-align:center}
  .phone.overview-learning .tone-overview-controls{grid-column:2;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px 0;gap:8px}
  .phone.overview-learning .tone-overview-controls>div{display:contents}
  .phone.overview-learning .tone-overview-controls button{min-height:48px}
}

/* Fit the core study area in both iPad orientations. */
@media (min-width:700px) and (min-height:500px){
  .phone.learning .reading-content,.phone.learning.after-learning .reading-content{display:flex;flex-direction:column;align-items:stretch;padding:10px 8px;overflow-y:auto}
  .phone.learning .reading-copy,
  .phone.learning .tone-stage .reading-copy{
    display:flex;flex-direction:column;flex:none;align-items:center;gap:0;
    width:100%;max-width:none;height:auto;min-height:0;margin:0 auto;text-align:center;
  }
  .phone.learning .reading-copy[data-study-align=center]{margin-block:auto}
  .phone.learning .learning-target-block{width:100%;order:0;text-align:center}
  .phone.learning .learning-detail-scroll{width:100%;order:1;text-align:center;padding:0;overflow:visible}
  .phone.learning .learning-explanation-switch{width:100%;order:2;justify-content:center;padding-top:4px}
  .phone.learning .tone-stage .learning-target-block,
  .phone.learning .tone-stage .learning-explanation-switch,
  .phone.learning .tone-stage .learning-detail-scroll{grid-column:auto;grid-row:auto}
  /* Deliberately override the older language-specific font clamps only here. */
  .phone.learning .reading-copy .spoken-target{font-size:var(--study-target-size,64px)!important;line-height:1.18!important;font-weight:800;width:100%;max-width:100%;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;margin:0 0 8px!important}
  .phone.learning .reading-copy[data-study-wrap=true] .spoken-target{white-space:normal;overflow-wrap:anywhere;word-break:normal}
  .phone.learning .reading-copy .target-jyut{font-size:var(--study-jyut-size,40px)!important;line-height:1.25!important;font-weight:700;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;margin:0 0 12px!important}
  .phone.learning .reading-copy .phonetic-symbol{font-size:var(--study-symbol-size,120px);line-height:1.1;margin:0 0 10px}
  .phone.learning .reading-copy .isolated-caption{font-size:18px;line-height:1.5}
  .phone.learning .reading-copy .sentence-meaning,
  .phone.learning .reading-copy .usage-meaning{width:100%;max-width:100%;margin:7px auto 0;padding:8px 12px;text-align:center}
  .phone.learning .reading-copy .sentence-meaning>p,
  .phone.learning .reading-copy .usage-meaning>b{font-size:22px!important;line-height:1.45!important;font-weight:600;white-space:normal;overflow-wrap:anywhere;margin:4px 0!important}
  .phone.learning .reading-copy .sentence-meaning>span,
  .phone.learning .reading-copy .usage-meaning>small{font-size:14px;line-height:1.4}
  .phone.learning .reading-copy .teaching-copy{max-width:780px;margin:8px auto 0;text-align:center}
  .phone.learning .reading-copy .teaching-copy-heading{justify-content:center}
  .phone.learning .reading-copy .teaching-copy p{font-size:20px;line-height:1.5}
  .phone.learning .reading-copy .explanation-toggle{min-height:44px;margin:6px auto 0}
  .phone.learning .tone-stage .tone-reading-target{justify-content:center;gap:20px;padding:0}
  .phone.learning .tone-stage .tone-reading-target .spoken-target,
  .phone.learning .tone-stage .tone-reading-target .target-jyut{width:auto;min-width:0;flex:0 1 auto}
  .phone.learning .tone-stage .tone-preview-fixed{width:100%;max-width:720px;margin:8px auto;padding:8px 14px}
  .phone.learning .tone-stage .tone-preview-fixed .tone-preview-title strong,
  .phone.learning .tone-stage .tone-preview-fixed .tone-preview-title>b{font-size:22px;line-height:1.4}
  .phone.learning .tone-stage .tone-preview-fixed .tone-plot{display:block;width:min(100%,calc(var(--study-plot-height,240px)*1.51613));height:var(--study-plot-height,240px);max-height:none;margin:0 auto}
  .phone.learning .tone-preview-detail{font-size:20px;line-height:1.5;text-align:center}
  .phone.learning .tone-preview-detail p{margin:6px 0}
  .phone.learning .tone-preview-detail button{min-height:44px;font-size:16px}
  .phone.learning .tone-repeat-hint{font-size:16px;margin:5px 0;line-height:1.4}
  .phone.learning .capstone-sounds{gap:12px;margin:8px 0}
  .phone.learning .capstone-sound{padding:12px 5px;min-width:0}
  .phone.learning .capstone-sound strong{font-size:var(--study-capstone-size,54px);line-height:1.15;white-space:nowrap}
  .phone.learning .capstone-sound span{font-size:14px;line-height:1.4}
  .phone.learning .compact-steps button,
  .phone.learning:not(.after-learning) .compact-steps button{min-height:44px}
}