/* Shared contrast, with a distinct colour world for each activity. */
#modal[data-activity]{--activity-bg:#19332d;--activity-card:#fff1d8;--activity-ink:#263e35;--activity-sub:#647063;--lesson-accent:#64e0b7;background:var(--activity-bg)!important;color:#fff9ee}
#modal[data-activity=listening],#modal[data-activity=market]{--activity-bg:#382b24;--activity-card:#fff0d4;--lesson-accent:#ffc56a}
#modal[data-activity=speaking],#modal[data-activity=memory]{--activity-bg:#30263e;--activity-card:#f0e6ff;--lesson-accent:#cdb0ff}
#modal[data-activity=typing]{--activity-bg:#282f3c;--activity-card:#e7f0ff;--lesson-accent:#a5c9ff}
#modal[data-activity=tuktuk]{--activity-bg:#263628;--activity-card:#edf3cd;--lesson-accent:#c7e785}
#modal[data-activity=delivery],#modal[data-activity=bar]{--activity-bg:#252d30;--lesson-accent:#ffc879}
#modal[data-activity] .lessonInner,#modal[data-activity] .modalfoot,#modal[data-activity] .miniGameSheet,#modal[data-activity] .miniGameFoot,#modal[data-activity] .walkingSheet{background:var(--activity-bg)!important}
html[data-design] #modal.lessonMode .focusHead{grid-template-columns:minmax(0,1fr) auto 36px!important;gap:10px!important;align-items:center;padding:0 0 10px!important;margin:0!important}
html[data-design] #modal.lessonMode .focusProgressLabel{display:none!important}
html[data-design] #modal.lessonMode .focusHead #closeSession{grid-column:3!important;grid-row:1;width:36px!important;min-width:36px!important;min-height:44px!important;border:0!important;background:none!important;opacity:.7;padding:9px!important}
#modal #closeSession svg,#modal .miniGameHead .close svg{width:20px;height:20px;fill:currentColor;stroke:none}
#modal[data-activity] .bar>div,#modal[data-activity] .miniGameTrack>span{background:var(--lesson-accent)!important;transition:width .6s cubic-bezier(.12,.8,.25,1)!important}
#modal[data-activity] .bar,#modal[data-activity] .miniGameTrack{background:#ffffff26!important}
#modal[data-activity] .option,#modal[data-activity] .miniModels>div,#modal[data-activity] .pairCard,#modal[data-activity] .workshopPairs button,#modal[data-activity] .workshopAnswers button,#modal[data-activity] .walkingChoices button{background:var(--activity-card)!important;color:var(--activity-ink)!important;border:1px solid #ffffff7a!important;border-bottom:4px solid #00000030!important;box-shadow:0 3px 0 #00000012}
#modal[data-activity] .option small,#modal[data-activity] .option .reading,#modal[data-activity] .miniModels strong,#modal[data-activity] .miniModels .thai,#modal[data-activity] .pairCard .thai,#modal[data-activity] .workshopPairs small,#modal[data-activity] .walkingChoices .thai{color:var(--activity-ink)!important}
#modal[data-activity] .miniModels small,#modal[data-activity] .walkingChoices small{color:var(--activity-sub)!important}
#modal[data-activity] .option:disabled:not(.wrong):not(.correct){opacity:.82;color:var(--activity-ink)!important}
#modal[data-activity] .primary,#modal[data-activity] .adaptiveMic{background:var(--lesson-accent)!important;color:#25392f!important;border:0!important;border-bottom:4px solid #00000028!important;box-shadow:none}
#modal[data-activity] .primary:disabled{opacity:.42!important}
#modal[data-activity] .option.correct,#modal[data-activity] .walkingChoices .correct{background:#d3f7dd!important;border-color:#60d7a3!important;color:#184d36!important}
#modal[data-activity] .option.wrong,#modal[data-activity] .walkingChoices .wrong{background:#ffdfd3!important;border-color:#e49d80!important;color:#6e312b!important}
#modal[data-activity] .foundationWord,#modal[data-activity] .speakingModel,#modal[data-activity] .scriptModel,#modal[data-activity] .learnFirstModel{background:#ffffff0c!important;border:1px solid #ffffff38!important;box-shadow:0 4px 0 #00000016}
#modal[data-activity] .audioBtn,#modal[data-activity] .foundationListen,#modal[data-activity] .miniModels button{background:var(--lesson-accent)!important;color:#24392f!important;border-color:transparent!important;min-height:44px!important;opacity:1!important}
#modal[data-activity] h2,#modal[data-activity] .adaptivePrompt{color:#fff9ee!important}
#modal[data-activity] .foundationWord .friendlyReading{color:var(--lesson-accent)!important}
#modal .nodeLessonIntro,#modal .lessonScene,#modal .adaptiveMode,#modal .foundationSceneBuddy,#modal .phraseOverline,#modal .foundationStep{display:none!important}
html[data-design] #modal:has(.miniGameSheet){inset:0!important;margin:0!important;width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important}
#modal:has(.miniGameSheet) #modalBody{height:100%;padding:0}
html[data-design] #modal .miniGameSheet{height:100dvh!important;min-height:0!important;max-height:none!important;padding:calc(8px + var(--app-safe-top)) 0 var(--app-safe-bottom)!important;box-sizing:border-box;max-width:560px;margin:auto}
#modal .miniGameHead{padding:0 18px 8px;gap:8px;min-height:44px;flex:none}
#modal .miniGameHead .close{order:3;border:0;background:none;min-width:36px;min-height:44px}
#modal .miniGameHead>strong{font-size:17px}
#modal .miniGameTrack{margin:0 18px;flex:none}
#modal .miniGameBody{overflow:hidden!important;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:12px 18px;min-height:0}
#modal .miniGameBody>.miniIntroArt{height:66px!important;min-height:0;flex:none;margin:0 auto!important}
#modal .miniGameBody>p{font-size:13px;line-height:1.4;margin:0!important}
#modal .miniGameBody .miniModels{gap:8px;margin:4px 0!important}
#modal .miniGameBody .miniModels>div{padding:8px 10px;gap:10px;min-height:65px}
#modal .miniModels>div>span{gap:1px;min-width:0}
#modal .miniModels strong{font-size:16px;line-height:1.25}
#modal .miniModels .thai{font-size:20px;line-height:1.35}
#modal .miniModels small{font-size:12px;line-height:1.3}
#modal .miniGameFoot{padding:8px 18px 12px!important;flex:none}
#modal .miniGameFoot>.primary{min-height:46px;margin:0;font-size:15px}
#modal .miniGameBody h2{font-size:21px!important;line-height:1.25!important;margin:0!important}
#modal .miniGameBody .miniHint{margin:0;font-size:11px;line-height:1.3}
#modal .miniGameBody .miniHint summary{min-height:32px;padding:5px 0}
#modal .miniGameBody .miniScene{height:112px;flex:none;margin:0!important}
#modal .miniChoice>svg{height:58px}
#modal .miniChoice{min-height:82px;padding:7px;gap:3px;background:var(--activity-card)!important;color:var(--activity-ink)!important}
#modal .miniChoice small{font-size:15px;line-height:1.3;color:var(--activity-sub)!important}
#modal .miniChoice strong{font-size:13px;line-height:1.3}
#modal .miniOrder{padding:8px 10px;gap:2px 10px;background:#ffffff10;border-color:#ffffff30}
#modal .miniOrder strong,#modal .miniOrder>.thai{font-size:20px;line-height:1.3}
#modal .miniMemoryCard{background:#70548b;border-color:#a08bb8;box-shadow:0 4px #1b1625}
#modal .miniMemoryTop{display:none!important}
#modal .miniMemoryGrid{flex:1;min-height:0;margin:0;gap:10px}
#modal #miniFeedback{font-size:12px;line-height:1.35}
#modal #miniFeedback small{display:none}
#modal .modelIntro .foundationArea{gap:12px!important}
#modal .knownExpressions{margin:0;gap:8px}
#modal .knownExpressions>div{padding:10px 12px;background:var(--activity-card);color:var(--activity-ink)}
#modal .knownExpressions strong,#modal .knownExpressions .thai{font-size:21px;color:var(--activity-ink)}
#modal .knownExpressions span{font-size:14px;color:var(--activity-sub);margin:3px 0 0}
@media(max-height:700px){#modal .miniGameBody{gap:6px;padding:10px 14px}#modal .miniGameBody>.miniIntroArt{height:46px!important}#modal .miniGameBody .miniModels>div{min-height:58px;padding:6px 8px}#modal .miniModels strong{font-size:14px}#modal .miniModels .thai{font-size:18px}#modal .miniModels small{font-size:11px}#modal .miniGameBody .miniScene{height:90px}#modal .miniChoice>svg{height:45px}#modal .miniChoice{min-height:70px}#modal .miniGameHead>strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){#modal[data-activity] .bar>div,#modal[data-activity] .miniGameTrack>span{transition:none!important}}
.exerciseClock{font:500 12px/1.2 Outfit,sans-serif;font-variant-numeric:tabular-nums;color:#e1dbc9;min-width:33px;grid-column:2;grid-row:1;align-self:center;text-align:center;opacity:.85}.miniGameHead .exerciseClock{order:2;margin-left:auto}.walkingHead .exerciseClock{margin-left:auto;order:2}.walkingHead #leaveWalking{order:3}
/* The expression is the model: do not spend a small phone's height on a second introduction. */
#modal .learnBeforeAsk{width:100%;min-width:0;margin:0 auto;align-self:center}
#modal .learnBeforeAsk>.learnFirstIcon,#modal .learnBeforeAsk>h2,#modal .learnBeforeAsk>p{display:none}
#modal .learnFirstModel{padding:18px 14px;gap:10px;max-width:400px;margin:auto}
#modal .learnFirstModel>strong{font-size:clamp(23px,6.5vw,29px);line-height:1.3}
#modal .learnFirstModel>span{font-size:20px;line-height:1.35}
#modal .learnFirstModel>.thai{font-size:21px;line-height:1.5}
#modal .learnFirstModel>.secondary{margin:2px 0 0;min-height:46px;background:var(--lesson-accent,var(--green));color:#25392f;border:0}
html[data-design] #modal.lessonMode .lessonInner .exerciseArea:has(#adaptiveThaiInput){display:flex;flex-direction:column;justify-content:flex-start;gap:8px!important;padding:4px 0 8px!important}
html[data-design] #modal.lessonMode .exerciseArea:has(#adaptiveThaiInput)>h2{font-size:21px!important;line-height:1.25;margin:0!important}
html[data-design] #modal.lessonMode .exerciseArea:has(#adaptiveThaiInput)>p{margin:0!important;font-size:21px;line-height:1.4}
#modal .exerciseArea:has(#adaptiveThaiInput)>label{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
html[data-design] #modal.lessonMode .exerciseArea:has(#adaptiveThaiInput) .thaiKeys{gap:5px;margin:0!important}
#modal #typingModel{min-height:44px;margin:0;padding:8px}
#modal #typingModelText{font-size:21px;line-height:1.4;padding:8px;margin:0}
/* Four reference expressions fit above the action; answers are never hidden to force a fit. */
#modal .foundationArea:has(.sceneExamples)>h2,#modal .foundationArea:has(.sceneExamples)>p,#modal .vocabIntro>.hubOverline,#modal .vocabIntro>h3{display:none}
#modal .sceneFocus{margin:0!important;padding:8px 10px!important;gap:10px!important;min-height:0}
#modal .sceneFocus>.thai{font-size:26px;line-height:1.3}
#modal .sceneFocus>strong{font-size:12px;line-height:1.3}
#modal .sceneExamples{margin:0!important;gap:6px!important}
#modal .sceneExamples>div{padding:7px 10px!important;gap:10px;min-height:0}
#modal .sceneExamples>div>span{gap:1px}
#modal .sceneExamples strong.thai{font-size:19px!important;line-height:1.4}
#modal .sceneExamples small{font-size:12px;line-height:1.25}
#modal .sceneExamples>div>span>span{font-size:13px;line-height:1.3}
#modal .sceneExamples button{width:44px;min-width:44px;min-height:44px}

/* Pair selection must remain visible over each activity's card palette. */
#modal[data-activity] .pairCard.selected:not(.paired),#modal[data-activity] .workshopPairs button.selected:not(.paired){background:color-mix(in srgb,var(--lesson-accent) 70%,white)!important;color:var(--activity-ink)!important;border-color:var(--lesson-accent)!important;box-shadow:inset 0 0 0 2px var(--lesson-accent),0 0 0 2px var(--lesson-accent)!important}
#modal .recapStats{grid-template-columns:repeat(2,minmax(0,1fr))}