/* ==========================================================================
   MedSys — mobile
   Loaded last, after theme-fixes.css.

   Separate file because this is layout, not colour, and theme-fixes.css has a
   standing rule that it gets rewritten whole rather than appended to.

   The audit that produced this found four causes of horizontal overflow on a
   380px viewport:
     1. Eleven of nineteen content tables had no scroll container.
     2. Three legacy elements set min-width between 480px and 1000px.
     3. One grid of mine used minmax(400px, 1fr), which cannot shrink below 400px.
     4. Nested horizontal padding took 52px a side out of a 380px screen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tables
   Setting display:block on a table turns it into its own scroll container while
   the rows and cells keep their table display values, so the layout survives.
   This catches every table without needing a wrapper div in the markup — which
   matters, because the markup came from three different migrations.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .topic-body table,
  .ess table,
  .gl-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* A visible hint that there is more to the right. */
  .gl-table-wrap, .topic-body table { scrollbar-width: thin; }

  /* The legacy min-widths. Keep them — a squashed comparison table is worse
     than a scrolling one — but make sure something can actually scroll.

     Only revert to display:table where a real scrolling parent exists in the
     markup. .tx-table has none, so it keeps the universal block-scroll above;
     overriding it here would have silently reintroduced the overflow. */
  .cgm-scenarios, .fs-wrap, .ftable-wrap, .sugar-wrap, .milk-wrap, .bars-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fs-wrap .fs-table,
  .ftable-wrap .ftable,
  .bars-wrap .bars,
  .cgm-scenarios table { display: table; }
}

/* --------------------------------------------------------------------------
   2. Grids that cannot shrink
   auto-fit with a fixed minimum overflows once the container is narrower than
   that minimum. min() fixes it everywhere without needing a breakpoint per grid.
   -------------------------------------------------------------------------- */
.ess-steps      { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.a-grid,
.ess-ask,
.gh-grid,
.guide-chips,
.ess-next-grid,
.crit-grid,
.sup-grid,
.pl-grid,
.foundation-pillars,
.context-grid,
.env-grid,
.envload-grid,
.supp-grid,
.tech-grid      { min-width: 0; }
.ess-steps > li,
.gh-ch, .gc, .bt-row, .pl-item, .ess-ask-item { min-width: 0; }

/* --------------------------------------------------------------------------
   3. Horizontal padding
   24px (.wrap) plus 28px (.container) is 104px of a 380px screen — 27% of the
   viewport spent on margins.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap        { padding: 0 16px; }
  .container   { padding: 0 16px !important; }
  .wrap .container,
  .topic-body .wrap .container { padding: 0 !important; }
}
@media (max-width: 400px) {
  .wrap        { padding: 0 13px; }
  .container   { padding: 0 13px !important; }
}

/* --------------------------------------------------------------------------
   4. Masthead
   Four nav links, one long, plus the theme toggle will not fit beside the
   wordmark. Below 760px the nav drops to its own row rather than being
   truncated or hidden, because hiding navigation on mobile hides the site.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .mast-in { flex-wrap: wrap; gap: 0 16px; padding-top: 14px; padding-bottom: 0; }
  .mnav {
    margin: 12px 0 0; width: 100%; gap: 0 18px;
    flex-wrap: wrap; row-gap: 8px;
    padding: 11px 0 12px; border-top: 1px solid var(--line);
  }
  .mnav a { font-size: 14px; }
  .theme  { margin-left: auto; }
  .mark-txt { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   5. Long unbreakable strings
   Monospace values, doses and URLs are the usual culprits.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .topic-body, .ess, .home-intro, .bt-body, .gl-sources {
    overflow-wrap: break-word;
    word-break: normal;
  }
  .gl-sources a, .bt-origin, .crumb { overflow-wrap: anywhere; }
  .crumb { line-height: 1.7; }
}

/* --------------------------------------------------------------------------
   6. Form controls
   iOS zooms the whole page when a focused control has a font-size below 16px,
   which then leaves the layout scrolled sideways. 16px everywhere prevents it.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  input, select, textarea, button { font-size: 16px; }
  input[type="range"] { height: 28px; }
  .lv-input select { min-width: 0; width: 100%; }
  .bt-chip, .vc-seg button, .seg-cards .seg-btn { font-size: 15px; }
  .lvl, .tool, .rel { font-size: 14px; padding: 8px 12px; }
}

/* --------------------------------------------------------------------------
   7. Type and spacing at small widths
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  body            { font-size: 16.5px; }
  .lede           { font-size: 17px; }
  .topic-head     { padding: 26px 0 20px; }
  .topic-head h1  { font-size: clamp(25px, 7vw, 32px); }
  .ess-h          { font-size: 22px; margin-top: 34px; }
  .sec-h          { flex-wrap: wrap; gap: 6px 12px; }
  .sec-h .meta    { margin-left: 0; }
  .levels         { gap: 6px; }
  .guide-nav      { padding: 18px 0 20px; }
  .rail, .notice, .ess-tldr, .diet-first, .esc, .jumpto, .gh-start,
  .lv-input, .vc-inputs, .bt-controls { padding-left: 17px; padding-right: 17px; }
  .prevnext       { margin-top: 34px; }
  footer          { margin-top: 46px; padding: 28px 0 40px; }
}

/* --------------------------------------------------------------------------
   8. Components that need specific handling
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Brand database rows: rank block sits above the body rather than beside it. */
  .bt-row  { grid-template-columns: 1fr; gap: 9px; }
  .bt-rank { flex-direction: row; align-items: center; gap: 10px; }
  .bt-crit { gap: 4px; }

  /* Guideline comparison is four columns of real content — it scrolls. */
  .gl-units tbody th { min-width: 118px; }

  /* Calculator: stack, and let the segmented controls breathe. */
  .vc         { grid-template-columns: 1fr; }
  .vc-seg     { gap: 6px; }
  .seg-cards  { grid-template-columns: 1fr !important; }

  /* Reference bands and depth chips stay legible. */
  .band-ticks { font-size:14px; }
  .c-main     { gap: 30px; }
}

/* --------------------------------------------------------------------------
   9. Safety net
   If something still exceeds the viewport, contain it here rather than letting
   the whole page scroll sideways. This is a backstop, not a fix — anything that
   trips it is a bug worth finding with tools/audit-mobile.php.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  main, footer, .topic-head, .guide-nav { max-width: 100vw; overflow-x: clip; }
  img, svg, iframe, video { max-width: 100%; height: auto; }
}