/* ===========================================================================
   mobile.css — phone fixes, loaded after every other stylesheet
   ---------------------------------------------------------------------------
   Everything here is inside max-width media queries, so desktop is untouched.
   Found in a phone audit (375 px wide):
   - inputs and selects under 16 px made iOS zoom the page on every tap;
   - nested paddings left the Explore benches 278 px of a 375 px screen, so the
     Unit 3 lab scenes scrolled sideways while the controls were in use;
   - the Units 1–2 lab grid sized its column to the widest child (canvas,
     equations), pushing the lab header past the right edge;
   - the brand name was cut off; small tap targets on Watch, summary jumps and
     mission dots; practice figures shrank until their labels were ~6 px.
   mobile.js adds the matching behavior (bottom-bar highlight, header that
   hides on scroll-down, swipe hints on figures that scroll sideways).
   =========================================================================== */

@media (max-width: 760px) {
  /* ---------- no zoom-on-focus in iOS Safari ---------- */
  /* specificity matches house.css's `html body :is(.subtab-panel, .h-unit) :is(select, input[type=…])` rule; this file loads later, so it wins */
  html body :is(div, form, header, main, section, nav, .subtab-panel) :is(select, textarea, input:not([type]), input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"]) { font-size: 16px !important; }

  /* ---------- header: the brand fits, Tour becomes an icon ---------- */
  .main-header.main-header { padding: 8px 10px; }
  .main-header.main-header .brand-home-btn { gap: 8px; min-width: 0; }
  .main-header.main-header .brand-mark { width: 24px; height: 24px; flex: none; }
  .main-header.main-header .school-name { font-size: 1.02rem; white-space: nowrap; }
  .main-header.main-header .header-tour-btn { font-size: 0 !important; width: 44px; min-width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; }
  .main-header.main-header .header-tour-btn::before { content: "?"; font: 700 1.05rem/1 var(--h-sans, Inter, sans-serif); }
  /* the header slides away while reading down a page and returns on the way up (mobile.js) */
  .main-header { transition: transform .28s ease; will-change: transform; }
  body.m-head-hidden .main-header { transform: translateY(-100%); }
  html body #subtabBar.h-bar-ready { transition: top .28s ease; }
  html body.m-head-hidden #subtabBar.h-bar-ready { top: 0; }
  /* the topic switcher: drop the word "Topic" so the title has room */
  .h-switch-k { display: none; }

  /* ---------- page gutters: give content the width ---------- */
  html body .content-area { padding-left: 12px; padding-right: 12px; }
  html body .subtab-panel.ced-topic-page { padding-left: 4px; padding-right: 4px; }

  /* ---------- practice cards ---------- */
  html body .ced-question.h-q { padding: 18px 14px 16px; }
  html body .ced-question.h-q > p { font-size: 1.04rem; line-height: 1.5; }
  html body .ced-question .pq-fig { padding: 8px 6px; margin: 10px 0 14px; }
  html body .pq-svg { overflow: visible; }   /* larger labels at the plot edges spill into the figure padding instead of being clipped */
  .pq-t, .pq-l { font-size: 13px; }
  .pq-v { font-size: 13.5px; }

  /* ---------- Explore, Units 1–2 (explore-lab.js) ---------- */
  html body .xl { grid-template-columns: minmax(0, 1fr); }
  html body .xl-grid { grid-template-columns: minmax(0, 1fr); }
  html body .xl canvas { max-width: 100%; height: auto; }
  html body .xl-eq-inline { white-space: normal; }
  html body .xl-bench { padding: 10px; }

  /* ---------- Explore, Unit 3 (explore-u3.js): the scene fits the screen ---------- */
  html body .u3-scene { overflow-x: visible; }
  html body .u3-scene svg { min-width: 0; }
  /* a little larger than desktop (13/12 px) so labels stay readable at phone scale; 14/13 is the largest size with no label collisions in any lab */
  .u3-label, .u3-gold { font-size: 14px; }
  .u3-small { font-size: 13px; }
  /* mission dots and chips big enough to tap */
  html body .xl-seg { min-height: 40px; }

  /* ---------- Learn ---------- */
  .c42-eqs p, .c42-big { white-space: normal; }
  .c44-eq { white-space: normal; }
  html body .ced13-lesson-intro nav a { min-height: 40px; display: inline-flex; align-items: center; }

  /* ---------- Watch, summary, progress: tap targets ---------- */
  html body .hw-meta a { display: inline-block; padding: 10px 2px; }
  html body .us-jump a { min-height: 40px; display: inline-flex; align-items: center; }
  html body .weak-spots-reset { min-height: 40px; padding: 8px 12px; }

  /* ---------- home ---------- */
  html body .student-eyebrow { letter-spacing: .12em; text-wrap: balance; }
}

/* a figure that is wider than the screen keeps its full size and scrolls; say so */
.m-swipe-hint { display: none; }
@media (max-width: 760px) {
  .m-swipe .m-swipe-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--h-muted, #9a9183); font: 600 .74rem/1.2 var(--h-sans, Inter, sans-serif); letter-spacing: .04em; }
  .m-swipe .m-swipe-hint::before { content: "↔"; font-size: 1rem; color: var(--h-gold-1, #F2BF5E); }
}

@media (max-width: 380px) {
  .main-header.main-header .school-name { font-size: .95rem; }
}