/* =====================================================================
   mobile.css — phone usability layer. Loaded LAST on every page.
   Fixes found by the 390px audit: sideways scroll, text squeezed into
   85-160px columns, iOS focus-zoom on inputs, sub-44px tap targets,
   tables with no scroll affordance, no-wrap sticky CTAs.
   Nothing here changes desktop rendering.
   ===================================================================== */

/* ---- 1. No sideways scroll on phones/tablets --------------------------
   Decorative halos/glows and a few 5-10px offenders push the document
   past the viewport. clip (not hidden) keeps position:sticky working. */
@media (max-width: 980px) {
  html, body { overflow-x: clip; max-width: 100%; }
}

@media (max-width: 700px) {
  /* ---- 2. Long tokens (URLs, molecule names) never widen a box ---- */
  p, li, dd, dt, td, th, figcaption, blockquote,
  h1, h2, h3, h4 { overflow-wrap: break-word; }

  /* ---- 3. Tables get a scroll affordance instead of overflowing ----
     display:block + overflow-x makes the table its own scroll region;
     the rows keep table layout via an anonymous table box. */
  .kb-table, .sc-table, .stkm-cmp,
  #prerender table, article > table, .mono table {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .pcac-matrix-wrap, .pcac-cmp-wrap, .nadc-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ---- 4. Text columns that stayed multi-up on phones ------------------
   inner.css stopped at 920px, so /about, /the-science, /our-story and
   /resources kept 2-up grids: 205-character bios in 86px columns. */
@media (max-width: 640px) {
  .nam-grades, .nam-board, .nam-about-grid, .nam-tgrid,
  .nam-outcomes, .nam-cite { grid-template-columns: 1fr; }
  .nam-founder { flex-direction: column; align-items: flex-start; gap: 20px; }
  .nam-founder__photo { width: 132px; height: 132px; }
  .nam-founders { gap: 24px; }
  .kh-path { max-width: 100%; }

  /* legal / state pages: fn + who stacked instead of 92px vs 164px */
  .legal-seam__row { grid-template-columns: 1fr; gap: 6px; }
  .legal-seam__who { text-align: left; }

  /* monograph spec rows: key above value, full width */
  .hub-spec { flex-direction: column; gap: 4px; }
  .mono__spec .hub-spec__v, .hub-spec__v { max-width: 100%; }

  /* tracker row description had 84px to work with */
  .fda-srow__desc, .fda-srow__mol { min-width: 0; }
}

/* ---- 5. Inputs: 16px minimum stops iOS zooming on focus ------------- */
@media (max-width: 820px) {
  input, select, textarea,
  .nam-router__input, .kb-facet__sel, .kb-search__input,
  .hub-search input, .stkm-alert__input, .nam-tsearch input,
  .gl-search__input {
    font-size: 16px;
  }
  .hub-search { min-width: 0; }
}

/* ---- 6. Tap targets: 44px minimum ---------------------------------- */
@media (max-width: 820px) {
  .nam-footer__link, .nam-footer__legal-links a, .nam-footer__brand,
  .nam-crumb__link, .nam-crumb__cur, .mono__back, .nam-arrow-link,
  .nam-prov__cta, .nam-rail__all, .hero2-shop, .fai-channel__offramp,
  .lp-final__hatch {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .hub-chip, .nam-axis__opt, .kb-facet__sel, .pep-trow__notify,
  .fda-chip, .fda-notify, .cal-detail__ics, select, .fai-relay__copy {
    min-height: 44px;
  }
  .nam-footer__cols a[aria-label], .nam-footer a[aria-label] {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ---- 7. Sticky CTA bars: let the label wrap instead of clipping ---- */
@media (max-width: 700px) {
  .pdp-sticky__btn, .hub-sticky__primary, .hub-sticky__or,
  .nam-sticky__cta {
    white-space: normal; text-align: center; line-height: 1.25;
  }
}