/* Mobile layout: a single reading area, thumb-sized controls and safe-area spacing. */
.lesson-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain}
.lesson-scroll .lesson-question{flex:none;max-height:45%;overflow:auto}
.lesson-scroll .lesson-choices{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.lesson-header,.lesson-footer,.progress-line{flex-shrink:0}
.story-visual{display:contents}
.expression-switch{display:flex;gap:8px;margin:0 0 20px}
.expression-switch button{flex:1}
.expression-switch [aria-pressed="true"]{background:#2e4b40;color:#fffbee}
@media(max-width:900px){
 .shell{display:block}.sidebar{display:none}
 .main{padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));min-height:100dvh}
 .topbar{gap:12px;align-items:flex-start;flex-wrap:wrap}.topbar h1{font-size:26px;line-height:1.35}.topbar .eyebrow{font-size:11px;letter-spacing:1px}.top-actions{margin-left:auto;font-size:12px}
 .langselect{min-height:44px;min-width:82px;font-size:16px;padding:8px 12px}
 .primary,.secondary{min-height:48px;font-size:15px;gap:12px;padding:12px 16px;line-height:1.5}
 .iconbutton,.audio-button{min-width:44px;min-height:44px;flex-shrink:0}
 .textbutton{min-height:44px;min-width:44px;font-size:14px;padding:10px 6px}
 .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:8;justify-content:space-around;background:#f8f6eff5;border-top:1px solid #dcdccb;padding:6px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));backdrop-filter:blur(12px)}
 .mobile-nav button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:1;min-width:0;min-height:52px;background:none;border:0;font-size:12px;color:#64705e}.mobile-nav button.on{color:#243c30;font-weight:600}
 .hero{min-height:340px}.hero-content{position:relative;padding:100px 22px 24px}.hero h2{font-size:clamp(26px,7vw,34px);line-height:1.4}.hero p{font-size:14px;max-width:34em}.hero .eyebrow{font-size:11px}.hero .primary{margin-top:20px}.hero-label{font-size:11px}
 .hero p,.chapter-copy h3,.person-copy p,.settings-block p{word-break:keep-all;overflow-wrap:break-word}
 .daily-row{grid-template-columns:1fr;gap:12px}.lesson-card{min-height:158px;padding:22px}.lesson-card h3{font-size:24px}.lesson-card p{font-size:14px}.lesson-card img{right:4px;opacity:1;bottom:-72px;height:250px}.lesson-card .copy{max-width:68%}.news-card{padding:18px}.news-card p{font-size:16px}.news-card small{font-size:12px}
 .eyebrow{font-size:11px;letter-spacing:1px}.section-header span,.chapter-copy p{font-size:12px}.chapter-copy h3{font-size:15px}.chapters{grid-template-columns:1fr}.chapter-row{min-height:88px}
 .people-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.person-copy{padding:14px}.person-copy h3{font-size:15px}.person-copy p{font-size:13px}.person-photo{height:170px}.person-photo img{height:290px;margin-top:105px}
 .smallprint,.quiet{font-size:12px}.smallprint,.settings-block p,.note p{color:#64705e}.settings-block p,.note p{font-size:15px}.stats{gap:24px;flex-wrap:wrap}.stat span{font-size:12px}.notebook-tabs button{min-height:48px;min-width:60px;font-size:15px}
 dialog{padding:20px;width:calc(100% - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto}.dialog-top{position:sticky;top:-20px;background:#f9f6eb;z-index:3;padding:8px 0}.profile-art{height:240px}.profile-art img{height:420px}
 .lesson-view{height:100dvh}.lesson-header{padding:calc(10px + env(safe-area-inset-top)) 16px 10px;font-size:14px}.lesson-stage{flex:0 0 clamp(108px,19dvh,165px)}.lesson-stage>img{height:250px;bottom:-85px}.lesson-stage .teacher-caption{left:18px;top:16px;max-width:55%}.teacher-caption p{font-size:17px;margin-top:8px}.teacher-caption small{display:none}
 .lesson-stage>img{top:0;bottom:auto;height:245px}.lesson-card img{top:8px;bottom:auto;height:230px}
 .lesson-question{padding:18px}.lesson-question h2{font-size:19px}.lesson-question .instruction{font-size:15px}.lesson-question .reading{font-size:13px}.lesson-choices{padding:12px 18px 24px}.answer-option{min-width:0;min-height:64px;padding:14px 10px;gap:8px}.answer-option .jp{font-size:17px;overflow-wrap:anywhere}.answer-option small{font-size:13px}.answer-option .number{font-size:12px}.explanation{font-size:15px}
 .lesson-footer{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}.lesson-footer>.quiet{flex:1;min-width:0}.lesson-footer .primary{flex:0 0 auto;min-width:150px;white-space:nowrap}
 .story-head{padding:calc(12px + env(safe-area-inset-top)) 16px 16px;flex-shrink:0}.story-location{font-size:12px}.story-progress{bottom:2px}.story-visual{display:flex;position:relative;flex:1;min-height:100px;justify-content:center;overflow:hidden}.story-character{position:relative;inset:auto;transform:none;height:100%;max-height:100%;width:100%;max-width:100%;object-position:center top;object-fit:contain;align-self:flex-end}
 .story-panel{margin:0 12px calc(12px + env(safe-area-inset-bottom));padding:20px;flex:0 1 auto;max-height:63dvh}.story-text{font-size:18px}.story-jp{font-size:18px}.story-panel .translated{font-size:15px}.story-panel .reading{font-size:13px}.speaker{font-size:13px}.story-option{font-size:15px;min-height:48px;padding:12px}.story-option small{font-size:13px}.story-controls .primary{min-height:48px;font-size:15px}.story-controls{gap:8px}
}
@media(max-width:360px){.topbar h1{font-size:24px}.top-actions>span{display:none}.main{padding-left:14px;padding-right:14px}.person-copy{padding:12px}.lesson-footer>.quiet{font-size:11px}.hero-content{padding-left:18px;padding-right:18px}}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
 .lesson-stage{display:none}.lesson-header{padding-top:6px;padding-bottom:6px}.lesson-footer{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
 .story-view{display:grid;grid-template-columns:40% 60%;grid-template-rows:64px minmax(0,1fr)}.story-head{grid-column:1/-1}.story-visual{grid-column:1;grid-row:2;min-height:0}.story-panel{grid-column:2;grid-row:2;max-height:none;min-height:0;margin-top:4px}.story-character{height:100%}
}

/* Phone scenes remain visible while the reading area scrolls as one surface. */
@media(max-width:900px){
 .lesson-view .lesson-stage{display:block;flex:0 0 30dvh;height:30dvh;min-height:0;padding:0!important}
 .lesson-view .lesson-stage>img{top:0;bottom:auto;right:5%;height:155%;max-width:70%;object-fit:contain;object-position:center top}
 .lesson-view .lesson-stage .teacher-caption{left:12px;top:12px;max-width:38%;padding:6px 9px;border-radius:6px}
 .lesson-view .teacher-caption p,.lesson-view .teacher-caption small{display:none}
 .lesson-view .lesson-stage .scene-caption{left:12px;right:12px;bottom:8px;max-width:none;padding:6px 9px;font-size:11px;background:#fff9ebdf}
 .lesson-view .scene-caption small{display:none}
 .lesson-view .scene-caption>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .lesson-view .lesson-scroll{display:block;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:16px}
 .lesson-view .lesson-scroll .lesson-question,.lesson-view .lesson-scroll .lesson-choices{max-height:none;overflow:visible;min-height:0}
 .lesson-view .lesson-question{padding:16px 18px 8px}
 .lesson-view .lesson-choices{padding:8px 18px 20px}
 .lesson-view .lesson-question h2{font-size:20px;line-height:1.65}
 .lesson-view .answer-option{padding:14px 12px;min-height:64px}
 .lesson-view .lesson-header{padding:8px 14px;font-size:13px;gap:8px}
 .lesson-view .lesson-header small{font-size:10px;line-height:1.4}
 .lesson-view .lesson-footer{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
 .story-view{display:flex;flex-direction:column;height:100dvh}
 .story-view .story-visual{flex:0 0 30dvh;height:30dvh;min-height:0}
 .story-view .story-panel{flex:1;min-height:0;max-height:none;overflow-y:auto;margin-top:0}
}

/* App-wide native selection/callout suppression; does not disable typing or scrolling. */
html,body,body *{
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.lesson-view .lesson-scroll,.lesson-view .lesson-choices{overflow-anchor:none}
.lesson-view .explanation{scroll-margin-block:16px}