/* Adaptive layouts and accessible touch controls. Desktop composition is preserved. */
@media(max-width:1024px){
 *,*::before,*::after{box-sizing:border-box}
 img,video,canvas,iframe{max-width:100%}
 input,select,textarea{min-width:0;font-size:16px!important}
 button,a,input,select,textarea{touch-action:manipulation}
 h1,h2,h3,p{overflow-wrap:break-word}
}
@media(pointer:coarse){button,[role=button],input,select{min-height:44px}}

@media(max-width:1024px){.demo-header-inner{flex-wrap:wrap}.demo-nav{flex-wrap:wrap}.detail-main,.lesson-content,.homework-card{min-width:0}}
@media(max-width:760px){
 .demo-body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
 .demo-nav{bottom:max(10px,env(safe-area-inset-bottom));border-radius:22px}
 .nav-link{min-height:44px}
 .demo-shell{padding-bottom:110px!important}
 .demo-header-inner{gap:8px!important}
 .header-actions{margin-left:auto}
 .lang-switch button{min-width:36px;min-height:44px}
 .modal{padding:12px!important}
 .modal-panel{width:100%;max-height:calc(100dvh - 24px);padding:40px 20px 24px;border-radius:20px}
 .modal h2{font-size:clamp(28px,8vw,40px)}
 .lesson-tabs{display:flex;overflow-x:auto;max-width:100%}
 .lesson-tab{flex-shrink:0;min-height:44px}
 .lesson-items{max-width:100%;overscroll-behavior-inline:contain}
 .materials-grid article{grid-template-columns:42px minmax(0,1fr) 42px;padding:12px;gap:10px}
 .materials-grid article>span{width:42px;height:42px}
 .checkout-card{align-items:flex-start;gap:12px}.checkout-thumb{width:64px;height:64px}
 .toast{left:16px;right:16px;bottom:100px;max-width:calc(100% - 32px)}
}
@media(max-width:380px){.hero-title{font-size:clamp(40px,13vw,52px)}.brand{font-size:20px}.hero-panel,.continue-panel{padding:20px}.header-actions{gap:2px}}
@media(max-width:760px){
 /* A filtered header traps fixed descendants and moves the bottom nav over the language controls. */
 .demo-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#f4f4f0}
 .demo-nav{top:auto}
 .hero-panel h1{font-size:clamp(34px,10vw,52px);overflow-wrap:normal}
}
@media(max-width:1024px){
 .section-grid>*{min-width:0}
 .palette{grid-template-columns:repeat(2,minmax(0,1fr))}
 .role-grid,.role-card,.role-ui,.lesson-shell,.lesson-sidebar,.lesson-content{min-width:0;max-width:100%}
 .lesson-shell{grid-template-columns:minmax(0,1fr)}
 .video-wrap video{height:auto;aspect-ratio:16/9}
 .demo-body{scroll-padding-top:90px}
}
@media(max-width:760px){.section-title{font-size:clamp(32px,10vw,52px)}.swatch{min-width:0}.swatch strong{overflow-wrap:anywhere}}
html{overflow-x:clip}
@media(max-width:1024px){.homework-card>*{min-width:0}.homework-card textarea{width:100%;max-width:100%}.homework-card .button{max-width:100%;white-space:normal}.upload-field{min-width:0}.upload-field b{overflow-wrap:anywhere}}
@media(max-width:760px){.toast:not(.show){visibility:hidden;opacity:0}}
@media(max-width:1024px){.upload-field{position:relative;overflow:hidden}.upload-field input{width:100%;max-width:100%;inset:0}}

.mobile-back-top{display:none}
@media(max-width:600px){.mobile-back-top:not([hidden]){position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;border:0;border-radius:50%;background:#ff8a1f;color:#fff;box-shadow:0 4px 18px #0002;font:800 10px/1.2 Arial,sans-serif;gap:2px;cursor:pointer}}