/* Phase 180: keep the original/pre-175 learning-page design.
   Mobile-only safety fixes: no redesign, no hidden features, no changed actions. */
@media (max-width:760px){
  body.page-spoken-materials,
  body.page-free-ai-english-practice,
  body.page-learning-roadmap{overflow-x:hidden}

  body.page-spoken-materials *,
  body.page-free-ai-english-practice *,
  body.page-learning-roadmap *{box-sizing:border-box;min-width:0}

  body.page-spoken-materials img,
  body.page-free-ai-english-practice img,
  body.page-learning-roadmap img{max-width:100%;height:auto}

  body.page-spoken-materials button,
  body.page-spoken-materials .btn,
  body.page-spoken-materials a,
  body.page-free-ai-english-practice button,
  body.page-free-ai-english-practice .btn,
  body.page-free-ai-english-practice a,
  body.page-learning-roadmap button,
  body.page-learning-roadmap .btn,
  body.page-learning-roadmap a{touch-action:manipulation;-webkit-tap-highlight-color:rgba(7,31,67,.12)}

  /* Keep original forms but prevent iOS zoom and clipped controls. */
  body.page-spoken-materials input,
  body.page-spoken-materials select,
  body.page-spoken-materials textarea,
  body.page-free-ai-english-practice input,
  body.page-free-ai-english-practice select,
  body.page-free-ai-english-practice textarea{max-width:100%;font-size:max(16px,1em)}

  /* Spoken Materials: original layout, only action/touch safety. */
  body.page-spoken-materials .wf143-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.page-spoken-materials .wf143-mode-card{min-height:72px!important}
  body.page-spoken-materials .wf143-audio-actions,
  body.page-spoken-materials .wf143-answer-actions,
  body.page-spoken-materials .wf143-navigation{gap:8px!important}
  body.page-spoken-materials .wf143-audio-actions button,
  body.page-spoken-materials .wf143-answer-actions button,
  body.page-spoken-materials .wf143-navigation button{min-height:44px!important}
  body.page-spoken-materials .wf143-answer-panel textarea{min-height:96px!important;resize:vertical}

  /* Practice Materials: keep every category/lesson/action visible and tappable. */
  body.page-free-ai-english-practice .ai-tool-grid,
  body.page-free-ai-english-practice .practice-app-shell,
  body.page-free-ai-english-practice .practice-workspace{grid-template-columns:1fr!important}
  body.page-free-ai-english-practice .mode-pill-row{grid-template-columns:1fr!important}
  body.page-free-ai-english-practice .mode-pill-row label,
  body.page-free-ai-english-practice .lesson-pick-btn{min-height:48px!important}
  body.page-free-ai-english-practice .practice-lesson-panel{position:static!important;max-height:none!important;overflow:visible!important}
  body.page-free-ai-english-practice .lesson-group{min-width:0}
  body.page-free-ai-english-practice .lesson-pick-btn{width:100%!important;white-space:normal!important;overflow-wrap:anywhere}
  body.page-free-ai-english-practice .practice-controls{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;z-index:40}
  body.page-free-ai-english-practice .practice-controls .btn{width:100%!important;min-height:44px!important;padding-inline:8px!important;white-space:normal!important}
  body.page-free-ai-english-practice .quick-action-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  body.page-free-ai-english-practice .quick-action-row .btn{width:100%!important;min-height:44px!important}

  /* Roadmap: keep original cards/actions; only prevent clipping/overflow. */
  body.page-learning-roadmap .rm126-shell{width:min(100% - 16px,100%)!important}
  body.page-learning-roadmap .rm126-hero,
  body.page-learning-roadmap .rm126-summary,
  body.page-learning-roadmap .rm126-stage,
  body.page-learning-roadmap .rm126-path,
  body.page-learning-roadmap .rm126-level-card{max-width:100%!important}
  body.page-learning-roadmap .rm126-level-card{overflow:hidden}
  body.page-learning-roadmap .rm126-level-card h3,
  body.page-learning-roadmap .rm126-level-card p,
  body.page-learning-roadmap .rm126-meta span{overflow-wrap:anywhere}
  body.page-learning-roadmap .rm126-open,
  body.page-learning-roadmap .rm126-locked,
  body.page-learning-roadmap .rm126-tools .btn{min-height:44px!important}

  /* Common project shell remains unchanged. Move the contact widget only enough
     to prevent it from covering learning controls. */
  body.page-spoken-materials .wf127-contact-dock,
  body.page-free-ai-english-practice .wf127-contact-dock,
  body.page-learning-roadmap .wf127-contact-dock{bottom:calc(86px + env(safe-area-inset-bottom))!important}

  /* Leave room for the real common bottom navigation. */
  body.page-spoken-materials #mainContent,
  body.page-free-ai-english-practice #mainContent,
  body.page-learning-roadmap #mainContent{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
}

@media (max-width:430px){
  body.page-free-ai-english-practice .practice-controls{grid-template-columns:1fr 1fr!important}
  body.page-free-ai-english-practice .practice-controls #checkAnswerBtn{grid-column:1/-1!important}
  body.page-free-ai-english-practice .quick-action-row{grid-template-columns:1fr!important}
}

/* Very short phone/DevTools heights: never let fixed navigation cover actions. */
@media (max-width:760px) and (max-height:600px){
  body.page-spoken-materials .wf127-mobile-bottom,
  body.page-free-ai-english-practice .wf127-mobile-bottom,
  body.page-learning-roadmap .wf127-mobile-bottom{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin:8px!important}

  body.page-spoken-materials .wf127-contact-dock,
  body.page-free-ai-english-practice .wf127-contact-dock,
  body.page-learning-roadmap .wf127-contact-dock{position:relative!important;right:auto!important;bottom:auto!important;width:max-content;margin:12px 12px 8px auto!important}

  body.page-spoken-materials #mainContent,
  body.page-free-ai-english-practice #mainContent,
  body.page-learning-roadmap #mainContent{padding-bottom:16px!important}

  body.page-spoken-materials .wf143-navigation,
  body.page-free-ai-english-practice .practice-controls{position:relative!important;bottom:auto!important}
}