/* Shared phone and tablet usability improvements */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{min-width:0;overflow-x:hidden;overflow-wrap:anywhere}
img,svg,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{touch-action:manipulation}
button,.btn,.choice,.outline button,.tabs button,.grade-picker button,.grades button,.module button,.primary,.secondary,.pill,.edit,.add,.cancel,.danger{min-height:44px}
.card a,.subject,.nearby a,.foot-links a{min-height:44px}
input,select,textarea{font-size:16px}
.wrap,.container,.main,.card,.module,.subject{min-width:0}
table{max-width:100%}

@media (max-width:1100px){
  .wrap,.container{width:auto!important;max-width:100%!important;margin-inline:auto!important;padding-inline:20px!important}
  .cards,.subjects,.guides,.grid,.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .layout{grid-template-columns:minmax(220px,280px) minmax(0,1fr)!important;gap:20px!important}
  .hero-grid,.coursegrid,.overview{gap:24px!important}
}

@media (max-width:760px){
  .wrap,.container{padding-inline:16px!important}
  header .nav,header nav,.nav{height:auto!important;min-height:64px;gap:10px!important;padding-block:10px;flex-wrap:wrap}
  .brand{min-width:0}
  .brand small{display:none!important}
  .mobile{min-height:44px;padding:8px 12px!important;border:1px solid #dbe8f2!important;border-radius:12px;background:#fff!important;color:#0a4da3;font-size:14px!important;font-weight:800}
  .home,.back,.exit{min-height:44px;display:inline-flex;align-items:center;padding:8px 4px}
  .card a,.foot-links a{display:flex;align-items:center}
  .hero{padding-block:28px!important}
  .hero h1,.mast h1,h1{font-size:clamp(32px,10vw,44px)!important;line-height:1.08!important;overflow-wrap:anywhere}
  .hero p,.lead{font-size:16px!important;line-height:1.6!important}
  .hero-grid,.coursegrid,.overview,.shell,.how-grid,.parent-box,.grid,.module-grid,.cards,.subjects,.guides{grid-template-columns:1fr!important}
  .layout{display:flex!important;flex-direction:column;gap:16px!important;padding-top:18px!important}
  .outline{position:static!important;width:100%!important;max-height:none!important;display:flex!important;gap:10px!important;overflow-x:auto!important;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:12px!important;margin:0 0 4px!important;border-radius:16px!important}
  .outline h2,.outline .group{display:none!important}
  .outline button{flex:0 0 min(76vw,260px);scroll-snap-align:start;margin:0!important;white-space:normal;text-align:left}
  .tabs,.grade-picker,.grades{display:flex;flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:10px;scroll-snap-type:x proximity}
  .tabs button,.grade-picker button,.grades button{flex:0 0 auto;scroll-snap-align:start}
  .intro,.section-head,.section-title,.welcome,.progress-head{display:block!important}
  .card,.module,.subject,.guide,.parent-box{padding:18px!important;border-radius:18px!important}
  .module p{min-height:0!important}
  .choices{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .choice{width:100%;padding:13px 14px!important;text-align:left;line-height:1.4}
  .controls{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .controls .btn{width:100%!important}
  .actions,.dialog-actions,.right-actions{flex-wrap:wrap}
  .actions>*{flex:1 1 100%}
  .dialog-actions>*{flex:1 1 auto}
  .nearby{grid-template-columns:1fr!important;gap:4px!important}
  .nearby a,.nearby span{text-align:left!important;min-height:44px;display:flex;align-items:center}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .float{max-width:calc(100% - 16px);right:8px!important}
  .toast{left:12px!important;right:12px!important;bottom:12px!important}
}

@media (max-width:380px){
  .wrap,.container{padding-inline:12px!important}
  .card,.module,.subject,.guide{padding:16px!important}
  .hero h1,.mast h1,h1{font-size:30px!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}