/* Driving-first mobile layout. Settings live in a native modal sheet. */
.mobile-driving-hint{display:none}
.drive-menu{width:min(560px,calc(100% - 28px));max-height:88dvh;overflow:auto;padding:24px;border:1px solid #d3ded5;border-radius:22px;background:#f9fcf7;color:#192d23;box-shadow:0 20px 90px #0006}
.drive-menu::backdrop{background:#061710b3;backdrop-filter:blur(5px)}
.drive-menu-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.drive-menu-head .eyebrow{margin:0}.drive-menu-head h2{font-size:26px}.drive-menu-head p{margin:6px 0 15px}.drive-menu-head>button{min-width:44px;padding:8px;flex-shrink:0}.drive-menu .session-controls,.mobile-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.drive-menu button{font-size:13px;min-height:46px;text-align:left}.drive-menu .session-controls button{margin:0}.mobile-menu-actions:empty{display:none}.drive-menu #drive-exit{color:#a31227}.drive-menu #drive-exit-stage{background:#18392c;color:#fff}.drive-menu #session-goal{font-size:12px}.drive-menu .fine{font-size:12px}.drive-menu #free-map-button{background:#edf4e8}
@media(max-width:700px), (max-width:1000px) and (max-height:500px){
 body:has(#drive-stage:not([hidden])){overflow:hidden;overscroll-behavior:none}
 body:has(#drive-stage:not([hidden])) .drive-header,body:has(#drive-stage:not([hidden])) #drive-session,body:has(#drive-stage:not([hidden])) .below,body:has(#drive-stage:not([hidden])) footer{display:none}
 #drive-stage.stage,#drive-stage.stage.is-expanded{position:fixed;inset:0;width:100%;height:100dvh;min-height:0;margin:0;border:0;border-radius:0;z-index:1000}
 #drive-stage .drive-expand,#drive-stage .scene-label,#drive-stage .inline-teacher,#drive-stage .hud-small,#drive-stage .lesson-limit{display:none}
 #drive-stage .compact-actions,#drive-stage.is-expanded .compact-actions{top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;left:auto;display:flex;gap:7px;width:auto;max-width:145px;flex-wrap:nowrap}
 #drive-stage .compact-actions>button{min-height:44px;font-size:12px;padding:8px 12px;background:#fffffff2;color:#1b3026;border:1px solid #d3ddd7}
 #drive-stage #drive-pause-compact{display:none}
 #drive-stage #drive-tools-toggle{display:block;min-width:66px;text-align:center}
 #drive-stage .hud,#drive-stage.is-expanded .hud{top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;right:auto;max-width:calc(100% - 100px);padding:7px 9px;gap:6px;border-radius:12px;background:#11242bd9}
 #drive-stage .speed strong{font-size:26px}#drive-stage .speed span{font-size:9px}#drive-stage .gear-display{padding:0 6px}#drive-stage .gear-display strong{font-size:23px}#drive-stage .gear-display span{display:none}
 #drive-stage .hud-signals{gap:4px}#drive-stage .hud-signals button{width:38px;height:40px;min-height:40px;font-size:21px}
 #drive-stage .quick-drive-actions,#drive-stage.is-expanded .quick-drive-actions{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 142px);left:12px;right:12px;justify-content:center;gap:8px}
 #drive-stage .quick-drive-actions button{min-height:42px;padding:7px 9px;font-size:11px}#drive-stage .gear-picker button{min-width:36px}#drive-stage #drive-parking{min-width:133px;border-radius:11px;background:#f8faf4eb;color:#173729}#drive-stage #drive-parking[aria-pressed=false]{background:#e8f2e7eb}#drive-stage #drive-parking-state{font-size:8px}
 #drive-stage .touch-controls,#drive-stage.is-expanded .touch-controls{bottom:calc(env(safe-area-inset-bottom,0px) + 15px);left:12px;right:12px}
 #drive-stage .steering-controls{flex-direction:column;align-items:center;gap:6px}#drive-stage #drive-steer{width:76px;height:76px;border-width:6px;background:#edf4f422}#drive-stage #drive-steer span{font-size:42px}#drive-stage .steer-arrows button{width:38px;min-height:40px;padding:4px}
 #drive-stage .gas-pedal{height:104px;width:62px}#drive-stage .brake-pedal{height:72px;width:82px}#drive-stage .pedal-controls{gap:9px}
 #drive-stage .motion-help,#drive-stage.is-expanded .motion-help,#drive-stage.stage:has(.compact-actions #free-map-button:not([hidden])) .motion-help{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 193px);left:12px;right:12px;width:auto;max-width:none;padding:0;box-shadow:none;border:0;background:none;align-items:center;pointer-events:none}
 #drive-stage .motion-help>span{display:none}#drive-stage .motion-help button{pointer-events:auto;min-height:40px;padding:8px 14px;font-size:12px;border-radius:20px;box-shadow:0 3px 14px #0003;background:#fff;color:#1d3a2c}
 #drive-stage .motion-help:not(:has(button:not([hidden]))){display:none}
 #drive-stage .mobile-driving-hint{display:block;position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 193px);z-index:3;border-radius:12px;background:#fffffff0;box-shadow:0 3px 16px #0002;color:#20372a;padding:0 12px;font-size:12px;max-height:150px;overflow:auto}
 #drive-stage.needs-action .mobile-driving-hint{display:none}
 .mobile-driving-hint summary{min-height:36px;display:flex;align-items:center;gap:8px;cursor:pointer}.mobile-driving-hint summary::after{content:'⌃';font-size:16px;flex-shrink:0}.mobile-driving-hint summary span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.mobile-driving-hint p{margin:0 0 12px;font-size:12px;line-height:1.6}
 #drive-stage .free-map{top:calc(env(safe-area-inset-top,0px) + 76px);bottom:auto;left:auto;right:12px;width:210px;max-height:calc(100dvh - 330px);z-index:8}
 .drive-menu{width:calc(100% - 20px);max-width:520px;max-height:85dvh;margin:auto auto max(10px,env(safe-area-inset-bottom));padding:20px;border-radius:22px}
 .drive-menu #drive-camera,.drive-menu #drive-retry,.drive-menu #drive-fullscreen{display:none}.drive-menu .session-controls{padding-top:12px;border-top:1px solid #dbe3d8}.drive-menu .session-controls button{font-size:12px}
 #drive-stage .result{z-index:20;max-height:calc(100dvh - 30px)}
}
@media(max-width:360px){#drive-stage .hud{padding:6px;gap:4px}#drive-stage .hud-signals button{width:33px;min-height:38px;height:38px}#drive-stage .gear-display{padding:0 4px}#drive-stage .speed strong{font-size:24px}#drive-stage .quick-drive-actions{gap:5px}#drive-stage .gear-picker button{min-width:32px;padding:7px}#drive-stage #drive-parking{min-width:128px}}
@media(max-width:1000px) and (max-height:500px){
 #drive-stage .quick-drive-actions{bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:190px;right:170px}
 #drive-stage .motion-help,#drive-stage.is-expanded .motion-help,#drive-stage .mobile-driving-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 65px);left:200px;right:180px}
 #drive-stage .steering-controls{flex-direction:row;align-items:flex-end}#drive-stage #drive-steer{width:68px;height:68px}#drive-stage .gas-pedal{height:92px}.drive-menu{max-height:94dvh}
}
.menu-training-plan{width:100%;margin:8px 0;color:#244c36;background:#edf4e8;border:1px solid #cdddcf}#training-plan-dialog-content{padding:0;margin:20px 0;background:transparent;border:0}#training-plan-dialog-content details{border-bottom:1px solid #dce4d8;padding:12px 0;font-size:13px}#training-plan-dialog-content summary{cursor:pointer;font-weight:700}#training-plan-dialog-content li{font-size:12px;line-height:1.6;margin:8px 0}#training-plan-dialog-content button{font-size:11px;padding:5px 9px;min-height:36px}
@media(max-width:700px), (max-width:1000px) and (max-height:500px){#drive-stage .hud{left:calc(env(safe-area-inset-left,0px) + 12px)}#drive-stage .compact-actions{right:calc(env(safe-area-inset-right,0px) + 12px)}#drive-stage .touch-controls{left:calc(env(safe-area-inset-left,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px)}}
@media(max-width:650px) and (max-height:500px){#drive-stage .steering-controls{flex-direction:column}#drive-stage .quick-drive-actions{left:110px;right:170px}#drive-stage .motion-help,#drive-stage.is-expanded .motion-help,#drive-stage .mobile-driving-hint{left:110px;right:170px}#drive-stage .gear-picker button{min-width:28px;padding:6px}}
/* One learning page, with one visible topic at a time. */
.topic-overview{scroll-margin-top:24px;outline:none}.topic-overview h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:8px}.topic-overview>p{color:#5c6870;margin-top:0}.topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.topic-grid button{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;border:1px solid #d6dde0;background:#fff;border-radius:16px;color:#17232b;min-height:150px}.topic-grid button:hover,.topic-grid button:focus-visible{border-color:#c80d24;box-shadow:0 4px 16px #17232b10}.topic-grid button[aria-current=true]{border-color:#bf0d24;background:#fff6f6;box-shadow:inset 0 0 0 1px #bf0d24}.topic-number{font-size:12px;color:#b80e22;font-weight:800}.topic-grid strong{font-size:17px}.topic-grid small{font-size:13px;line-height:1.5;font-weight:400;color:#56656e}.topic-return-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 16px}.topic-return-row span{font-size:14px;color:#56656e}.topic-panel{padding:26px;background:white;border:1px solid #dce1e4;border-radius:20px;scroll-margin-top:24px;outline:none}.topic-panel h2{margin-top:4px}.module-hub{padding:20px 0 0;overflow:hidden}.module-hub>h2,.module-hub>p{margin-left:24px;margin-right:24px}#learning-module-frame{width:100%;border:0;display:block;height:900px;background:#fff}#learning-module-frame[hidden]{display:none}.drive-header button{padding:8px 12px}.learning-lobby>.resume-card{margin-top:24px}
@media(max-width:800px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topic-grid button{min-height:138px;padding:16px}.topic-return-row{align-items:flex-start}.topic-return-row span{max-width:45%;text-align:right}.topic-panel{padding:18px}.module-hub{padding:16px 0 0}.topic-grid strong{font-size:15px}.topic-grid small{font-size:12px}.learning-welcome h1{font-size:clamp(2rem,8vw,3.5rem)}}
.stage:has(#drive-result:not([hidden])) .mobile-driving-hint{display:none}
.topic-return-row{position:sticky;top:0;z-index:30;background:#f6f5f1ed;padding:10px 0;backdrop-filter:blur(12px)}.learning-lobby .resume-card[hidden]{display:none}.training-hub .progress-card{margin:20px 0}.learning-welcome h1{font-size:clamp(2.2rem,5vw,4.3rem)}.learning-welcome{padding-bottom:8px}
/* Leave the selected heading below the persistent return control. */
.topic-panel,.training-hub{scroll-margin-top:90px}