/* Embedded lesson layout: sized to the WebView, below the app's 56px modal header. */
html.lesson-modal-host,body.lesson-modal-host{height:100%;width:100%;margin:0!important;padding:0!important;overflow:hidden!important;}
body.lesson-modal-host #lessonWrap.lesson-modal,body.lesson-modal-host #lesson-7947.lesson-modal{box-sizing:border-box;max-width:none;width:100%;height:100vh;height:100dvh;margin:0;padding:8px 14px 12px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;overflow:hidden;}
.lesson-modal>header{min-height:48px;margin:0!important;padding:0 76px 0 2px!important;flex-wrap:nowrap!important;gap:14px!important;}
.lesson-modal>header h1{font-size:22px!important;line-height:1.15!important;margin:0!important;}
.lesson-modal>header .lesson-title{flex:1 1 auto;}
.lesson-modal>header #headerControls,.lesson-modal>header #soundSlot{flex:0 0 44px;}
#modalWorkspace{display:grid;grid-template-columns:minmax(350px,.95fr) minmax(0,1.1fr);gap:14px;min-width:0;min-height:0;}
#modalWorkspace>.modal-visual{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-width:0;min-height:0;margin:0!important;padding:10px!important;overflow:visible;}
.lesson-modal #modalWorkspace #scene{display:block;width:100%!important;height:100%!important;max-width:none!important;min-height:0!important;flex:1 1 0%;margin:0!important;}
#modalReading{box-sizing:border-box;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:7px 8px 9px;scroll-padding:10px;}
.lesson-modal #modalReading .card,.lesson-modal #modalReading .lesson-card,.lesson-modal #modalReading .instruction,.lesson-modal #modalReading #startScreen,.lesson-modal #modalReading #practiceArea{margin:0 0 10px!important;padding:12px!important;}
.lesson-modal #modalReading h2{font-size:21px!important;line-height:1.2!important;margin:0 0 10px!important;}
.lesson-modal #modalReading h3{font-size:19px!important;}
.lesson-modal #modalReading p,.lesson-modal #modalReading li{font-size:17px;line-height:1.45;}
.lesson-modal #modalReading .math-line,.lesson-modal #modalReading .mathrow{font-size:19px;line-height:1.4;}
#modalFooter{display:flex;align-items:center;justify-content:flex-end;min-height:50px;border-top:1px solid #d0d9cd;padding-top:8px;}
.lesson-modal #modalFooter>nav,.lesson-modal #modalFooter>.navRow{width:100%;display:flex;align-items:center;gap:12px;margin:0!important;flex-wrap:nowrap!important;}
.lesson-modal #modalFooter button{width:auto!important;min-width:48px!important;min-height:48px!important;margin:0!important;padding:10px 18px!important;font-size:16px!important;line-height:1.2!important;flex:0 0 auto;}
.lesson-modal #modalFooter .nav-left{display:flex;gap:12px;}
.lesson-modal #modalFooter #nextBtn,.lesson-modal #modalFooter #doneBtn{margin-left:auto!important;}
.lesson-modal[data-lesson-stage="0"] #modalFooter>:not(#startBtn){display:none!important;}
.lesson-modal:not([data-lesson-stage="0"]) #modalFooter>#startBtn{display:none!important;}
.lesson-modal[data-lesson-stage="0"] #stageArea{display:none;}
.lesson-modal .instruction[data-stage="10"]>.lesson-nav{display:none!important;}
body.lesson-modal-host #pb-rating-widget,body.lesson-modal-host #pb-app-promo,body.lesson-modal-host .pb-promo-card,body.lesson-modal-host .pb-brand-foot,body.lesson-modal-host .pb-brand-top{display:none!important;}
@media(max-width:899px){
 #modalWorkspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(360px,44vh) minmax(0,1fr);gap:10px;}
 #modalWorkspace>.modal-visual{padding:6px!important;}
}
@media(max-width:699px){
 body.lesson-modal-host #lessonWrap.lesson-modal,body.lesson-modal-host #lesson-7947.lesson-modal{padding-left:8px;padding-right:8px;}
 .lesson-modal>header h1{font-size:19px!important;}
 .lesson-modal>header{padding-right:68px!important;}
 #modalWorkspace{display:flex;flex-direction:column;overflow-y:auto;}
 #modalWorkspace>.modal-visual{flex:0 0 370px;}
 #modalReading{flex:0 0 auto;overflow:visible;}
 .lesson-modal #modalFooter button{padding:10px!important;}
 .lesson-modal #modalFooter .nav-left,.lesson-modal #modalFooter>nav,.lesson-modal #modalFooter>.navRow{gap:6px;}
}

.lesson-modal #visualCard #opBadge{align-self:flex-start;flex:0 0 auto;}