/* mobile.css — shared mobile responsiveness baseline.
   Loaded last in <head> on every page so it wins over inline styles.
   Page-specific grid stacking lives in each page's own <style>
   (search "MOBILE" in that file). Keep this file universal + safe —
   no page-specific selectors here. */

/* Kill iOS focus-zoom: any form field under 16px makes Safari zoom the
   whole page on tap. Applies through tablet-portrait width. */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 640px) {
  /* Tame the standard container side-padding (28-40px desktop eats ~1/5
     of a 390px screen). Keep top/bottom intact so sticky submit bars
     keep their bottom runway. */
  .page, .wrap, main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Never let media blow out the viewport width. */
  img, video, canvas {
    max-width: 100%;
    height: auto;
  }

  /* Tables get their own scroll lane instead of stretching the page
     (only affects tables not already wrapped/reflowed). */
  table {
    max-width: 100%;
  }
}
