/* Shared mobile safety layer for the course hub and all lesson pages. */
img, svg, canvas, video { max-width: 100%; height: auto; }
mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 800px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  h1 { font-size: clamp(32px, 9vw, 44px); overflow-wrap: anywhere; }
  h2, h3, p, li, .question, .lead, .method, .reveal {
    overflow-wrap: anywhere;
  }
  .shell { width: min(100% - 24px, 1180px); }
  .slide { overflow-wrap: anywhere; }
  .bottombar { gap: 4px; padding-inline: 6px; }
  .navgroup { min-width: 0; gap: 4px; }
  .navbtn { min-width: 44px !important; min-height: 44px; }
  .page { min-width: 0; }
  .data-table, table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  .slide { padding-inline: 14px; }
  .bottombar { height: 64px; }
  .navbtn { padding: 8px !important; font-size: 14px !important; }
  .page { display: none; }
  .tocbox { width: calc(100vw - 20px); padding: 20px 14px; }
}