/* mobile.css — conservative responsive baseline, injected site-wide via match_server
   after_request (Jeremy 2026-06-25, Week-2 mobile pass). Goal: make every page USABLE
   on a phone without overriding each page's own design. Everything is scoped to narrow
   screens, and targets the four things that actually break on mobile:
     1. horizontal overflow (page wider than the screen),
     2. wide data tables blowing out the viewport,
     3. iOS auto-zoom when focusing an input under 16px,
     4. tap targets too small to hit.
   Per-page deep fixes (Studio, Checker, classroom) layer on top of this. */

@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* media never wider than the screen */
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

  /* wide tables scroll horizontally instead of stretching the page */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* >=16px inputs stop iOS Safari from zooming the whole page on focus */
  input, select, textarea { font-size: 16px; }

  /* comfortable tap targets (Apple/Google both recommend ~44px) */
  button, .btn, input[type="button"], input[type="submit"], input[type="reset"] { min-height: 44px; }

  /* only break genuinely long unbreakable strings (URLs) — NOT short words, which the
     old `word-break: break-word` shattered character-by-character inside narrow flex cells. */
  body { overflow-wrap: break-word; }
}