/* Reference examples use the available intro area, rather than tiny cards over empty space. */
html[data-design] #modal.lessonMode .foundationArea:has(>.sceneExamples){display:flex!important;flex-direction:column;justify-content:flex-start;gap:16px!important;padding:8px 0 12px!important;min-height:0}
html[data-design] #modal.lessonMode .foundationArea>.sceneFocus{flex:none;box-sizing:border-box;min-height:68px;margin:0;padding:12px 16px;gap:12px}
html[data-design] #modal.lessonMode .sceneFocus>.thai{font-size:30px;line-height:1.4}
html[data-design] #modal.lessonMode .sceneFocus>strong{font-size:16px;line-height:1.5}
html[data-design] #modal.lessonMode .foundationArea>.sceneExamples{display:grid;flex:1 0 auto;grid-auto-rows:minmax(min-content,1fr);align-content:stretch;min-height:0;margin:0!important;gap:12px!important}
html[data-design] #modal.lessonMode .sceneExamples>div{box-sizing:border-box;min-height:108px;padding:12px 14px!important;gap:12px;align-items:center}
html[data-design] #modal.lessonMode .sceneExamples>div>span{gap:7px}
html[data-design] #modal.lessonMode .sceneExamples strong.thai{font-size:24px!important;line-height:1.55;overflow-wrap:anywhere}
html[data-design] #modal.lessonMode .sceneExamples small{font-size:15px;line-height:1.45}
html[data-design] #modal.lessonMode .sceneExamples>div>span>span{font-size:16px;line-height:1.5}
html[data-design] #modal.lessonMode .sceneExamples button{box-sizing:border-box;flex:0 0 48px;display:grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:10px}
html[data-design] #modal.lessonMode .sceneExamples button>.uiIcon{width:24px;height:24px;flex:none}
/* Question blocks keep a compact reading rhythm; answer dimensions stay intrinsic. */
html[data-design] #modal.lessonMode .lessonInner .exerciseArea:has(>.options,>.tapCards,>.pairGrid,>.workshopActivity){justify-content:flex-start;gap:12px}
html[data-design] #modal.lessonMode .workshopActivity{justify-content:flex-start;gap:12px}
@media(max-width:360px),(max-height:740px){html[data-design] #modal.lessonMode .sceneExamples>div{min-height:100px;padding:10px 12px!important;gap:10px}html[data-design] #modal.lessonMode .sceneExamples strong.thai{font-size:23px!important}html[data-design] #modal.lessonMode .sceneExamples small{font-size:14px}html[data-design] #modal.lessonMode .sceneExamples>div>span>span{font-size:15px}html[data-design] #modal.lessonMode .foundationArea>.sceneFocus{min-height:60px;padding:8px 12px}}
/* Beginner reference cards get the same readable use of the intro area. */
html[data-design] #modal.lessonMode .foundationArea:has(>.knownExpressions){display:flex;flex-direction:column;justify-content:flex-start;gap:16px!important;padding:8px 0 12px!important}
html[data-design] #modal.lessonMode .foundationArea>.knownExpressions{display:grid;flex:1 0 auto;grid-auto-rows:minmax(min-content,1fr);gap:10px;margin:0!important}
html[data-design] #modal.lessonMode .knownExpressions>div{display:flex;flex-direction:column;justify-content:center;gap:6px;box-sizing:border-box;min-height:150px;padding:20px!important}
html[data-design] #modal.lessonMode .knownExpressions strong{font-size:28px!important;line-height:1.4;overflow-wrap:anywhere}
html[data-design] #modal.lessonMode .knownExpressions small.thai{font-size:26px!important;line-height:1.6}
html[data-design] #modal.lessonMode .knownExpressions>div>span{font-size:20px!important;line-height:1.45;margin:0}
html[data-design] #modal.lessonMode .foundationWordIntro .foundationArea{justify-content:center!important;padding:16px 8px!important}
html[data-design] #modal.lessonMode .lessonInner.foundationWordIntro .foundationArea>.foundationWord{display:flex;flex-direction:column;align-items:center;gap:10px!important;width:100%;max-width:440px;margin:0!important;padding:28px 20px!important}
html[data-design] #modal.lessonMode .lessonInner.foundationWordIntro .foundationArea>.foundationWord>.friendlyReading{font-size:clamp(32px,9vw,42px)!important;line-height:1.4}
html[data-design] #modal.lessonMode .foundationWordIntro .foundationMeaning{font-size:26px!important;line-height:1.4;margin:0!important}
html[data-design] #modal.lessonMode .lessonInner.foundationWordIntro .foundationArea>.foundationWord>.foundationScript{font-size:28px!important;line-height:1.6;margin:0!important}
html[data-design] #modal.lessonMode .lessonInner.foundationWordIntro .foundationArea>.foundationWord>.foundationListen{min-height:52px!important;font-size:15px;padding:12px 20px!important;margin-top:8px}
@media(max-width:360px),(max-height:740px){html[data-design] #modal.lessonMode .knownExpressions>div{min-height:142px;padding:14px!important}html[data-design] #modal.lessonMode .knownExpressions strong{font-size:26px!important}html[data-design] #modal.lessonMode .knownExpressions small.thai{font-size:24px!important}html[data-design] #modal.lessonMode .knownExpressions>div>span{font-size:18px!important}}