/*
  Global mobile responsive layer for the whole site.
  Injected as the LAST element in <head>, so it loads after each page's
  inline <style>. Equal-specificity rules therefore win by source order —
  no !important needed. Only kicks in at phone widths (<=640px / <=380px),
  leaving the desktop layouts untouched.

  Targets the shared design system:
    - lessons: .wrap container, .thesis/.card/.note/.warn/.good/.quiz, tables
    - index pages: .main / .hero / .site-header
  Everything else (grids using auto-fill/auto-fit, the tutor.js chat panel)
  is already fluid.
*/

@media (max-width: 640px) {
  /* tighter side gutters → more reading width on narrow screens */
  .wrap, .main { padding-left: 18px; padding-right: 18px; }
  .hero, .site-header { padding-left: 18px; padding-right: 18px; }

  /* scale down oversized headlines so they don't wrap to 3 lines */
  .hero h1 { font-size: 26px; }
  .hero p  { font-size: 15px; }
  h1 { font-size: 24px; line-height: 1.3; }

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

  /* trim inner-card horizontal padding so text isn't squeezed */
  .quiz, .card, .note, .warn, .good, .analogy, .thesis,
  .rock, .air { padding-left: 15px; padding-right: 15px; }

  /* embedded media can never overflow the viewport */
  img, pre, video, iframe { max-width: 100%; }
}

@media (max-width: 380px) {
  .wrap, .main, .hero, .site-header { padding-left: 13px; padding-right: 13px; }
  .hero h1 { font-size: 23px; }
  h1 { font-size: 21px; }
}
