/* One flowing panel owns lesson text and tools; driving controls retain their dock. */
.school-action-cue{position:absolute;pointer-events:none!important;width:38px;height:50px;right:-7px;top:-25px;z-index:3;filter:drop-shadow(0 2px 2px #43215f33)}
.school-action-cue svg{display:block;width:100%;height:100%;animation:school-press 1.5s ease-in-out infinite;transform-origin:50% 70%}
.school-action-cue b{display:none}
.school-action-cue[data-state=release] svg{animation:school-lift .6s ease-out both}
.school-action-cue[data-state=release] b{display:grid;place-items:center;position:absolute;bottom:-7px;right:-2px;width:23px;height:23px;border:2px solid #fffdf8;border-radius:50%;background:#c3e867;color:#43215f;font-size:17px;line-height:1}
#touch button.lesson-focus.lesson-release,#touch button.pressed.lesson-focus.lesson-release{animation:none!important;border-color:#c3e867;box-shadow:0 0 0 3px #c3e867,0 9px 0 #43215f!important;filter:none}
@keyframes school-press{0%,100%{transform:translateY(-6px) rotate(-5deg)}35%,75%{transform:translateY(6px) rotate(0)}}
@keyframes school-lift{from{transform:translateY(6px)}to{transform:translateY(-18px) rotate(-12deg)}}
body:has(#pause-dialog[open]) .school-action-cue svg{animation-play-state:paused}
html[data-kd-reduced-motion=true] .school-action-cue svg{animation:none;transform:none}
html[data-kd-reduced-motion=true] .school-action-cue[data-state=release] svg{transform:translateY(-18px) rotate(-12deg)}
@media(prefers-reduced-motion:reduce){.school-action-cue svg{animation:none;transform:none}.school-action-cue[data-state=release] svg{transform:translateY(-18px) rotate(-12deg)}}
#driving-school .school-panel{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(600px,calc(100% - 24px));box-sizing:border-box;display:grid;grid-template-columns:58px minmax(0,1fr) 44px;gap:8px;padding:10px;border-radius:22px;background:#fffdf8f5;box-shadow:0 6px 24px #31234822;pointer-events:auto;max-height:calc(100dvh - 260px);overflow:auto;scrollbar-width:thin}
#driving-school .school-top{display:contents!important}
#driving-school .school-duo{grid-column:1;grid-row:1;width:58px;height:52px;align-self:center}
#driving-school .school-duo .portrait{width:44px;height:44px}
#driving-school .school-duo .portrait-dumka{width:54px;height:54px;margin-left:-37px}
#driving-school .school-instruction{grid-column:2;grid-row:1;align-self:center}
#driving-school #school-title{font-size:16px;line-height:1.2;margin:3px 0 7px}
#driving-school #school-phase{display:block;line-height:1.2;font-size:9px;letter-spacing:1px}
#driving-school .school-exit{grid-column:3;grid-row:1;width:44px;height:44px;align-self:start;font-size:24px}
#driving-school .school-tools{position:static!important;inset:auto!important;transform:none;grid-column:1/-1;grid-row:2;display:flex;justify-content:center;align-items:center;gap:6px}
#driving-school .school-tools button{box-sizing:border-box;min-width:44px;min-height:44px!important;height:44px;padding:5px 9px;font-size:11px;line-height:1.2;border-radius:13px}
#driving-school .school-tools .school-retry{font-size:23px;padding:5px 10px}
#driving-school .school-tools #pause{margin:0!important;width:44px;min-width:44px;min-height:44px;height:44px;padding:0!important;border:1px solid #eee1f6;background:#f0e7f7;color:var(--ink);border-radius:13px}
#driving-school .school-skills{position:static!important;inset:auto!important;transform:none;grid-column:1/-1;grid-row:3;display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin:0 0 3px;padding:0}
#driving-school .school-skills li{min-width:22px;height:22px;font-size:12px;border-radius:8px}
#driving-school .school-skills small{width:12px;height:12px;font-size:9px;bottom:-3px;right:-2px}
#driving-school .school-hint,#driving-school .school-save-state{position:static!important;inset:auto!important;transform:none;grid-column:1/-1;grid-row:4;width:100%;max-width:100%!important;box-sizing:border-box;margin:0;padding:6px 8px;font-size:12px;line-height:1.3;box-shadow:none}
#driving-school .school-hint:empty{display:none}
#driving-school .school-save-state{gap:8px}
#driving-school .school-save-state button{font-size:12px;padding:4px 8px;max-width:100px}
#driving-school[data-phase=success] .school-panel{background:#f5ffdf}
#driving-school button:focus-visible{outline:3px solid #43215f;outline-offset:2px}
#driving-school .school-complete{box-sizing:border-box;width:min(380px,calc(100% - 24px));min-width:0;max-height:calc(100dvh - 24px);overflow:auto;padding:20px;gap:12px;z-index:2}
#driving-school .school-complete button{min-height:44px}
#driving-school:has(.school-complete:not([hidden])) .school-panel{visibility:hidden}
body.practising:has(.school-complete:not([hidden])) #touch,body.practising:has(.school-complete:not([hidden])) #hud{visibility:hidden}
@media(orientation:landscape) and (max-height:550px){
 #driving-school .school-panel{width:min(820px,calc(100% - 24px));grid-template-columns:54px minmax(0,1fr) auto 44px;gap:6px;padding:6px 10px;max-height:calc(100dvh - 168px);border-radius:18px}
 #driving-school .school-exit{grid-column:4}
 #driving-school .school-tools{grid-column:3;grid-row:1;gap:4px}
 #driving-school .school-skills{grid-row:2;margin-bottom:0}
 #driving-school .school-hint,#driving-school .school-save-state{grid-row:3}
 #driving-school .school-duo{height:46px}
 #driving-school .school-duo .portrait{width:40px;height:40px}
 #driving-school .school-duo .portrait-dumka{width:48px;height:48px;margin-left:-31px}
 #driving-school #school-title{font-size:15px;margin-bottom:5px}
 #driving-school #school-phase{font-size:8px}
 #driving-school .school-skills li{height:18px;min-width:22px}
 #driving-school .school-hint,#driving-school .school-save-state{font-size:11px}
}
@media(orientation:landscape) and (max-height:550px) and (max-width:700px){
 #driving-school .school-tools .school-skip,#driving-school .school-tools #motion-quick{font-size:0;width:44px;padding:0}
 #driving-school .school-tools .school-skip::before{content:'▶';font-size:20px}
 #driving-school .school-tools #motion-quick::before{content:'⚙';font-size:25px}
}

@media(orientation:landscape) and (max-height:550px){
 #driving-school .school-save-state{padding:0 6px;gap:6px}
 #driving-school .school-save-state button{font-size:11px;white-space:nowrap;max-width:none}
}

#touch button.lesson-error{border-color:#ffb44c;box-shadow:0 0 0 4px #ffb44c!important}
#driving-school[data-phase=feedback] .school-panel{background:#fff2df}
body:has(#driving-school[data-phase=demo]:not([hidden])) #hud{visibility:hidden}