/* ============================================================================
   HeyDonto portfolio - shared mobile safety net
   ----------------------------------------------------------------------------
   Deployed IDENTICALLY on axiomera.com, quantarahealth.ai and heydonto.com so
   all three behave the same way on a phone. Loaded last so it corrects a page
   without the page having to be rebuilt.

   SCOPE NOTE, 2026-08-06. An earlier version of this file also forced
   `table { display:block; overflow-x:auto }`. That was removed after an A/B
   measurement in a real browser showed the research tables were ALREADY inside
   a `.tbl-wrap` container with `overflow:auto`, and were already swipeable with
   this stylesheet disabled. Nothing was being clipped. Rules are kept here only
   where a measurement showed a genuine defect:

     - 54 of 57 pages render real text below 12px, smallest measured 8.5px on
       axiomera.com/data-transformation. That is genuinely hard to read on a
       phone and is the one typography problem the audit actually found.
     - media elements are constrained defensively so a future oversized image
       or embed cannot start a sideways scroll. No page does today.

   Everything else measured clean: no page scrolls horizontally, every page
   carries a viewport tag, and the consent banner renders on 57 of 57.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- media never exceeds the screen ------------------------------------
     Defensive. No page currently violates this; the rule exists so a future
     oversized asset cannot silently introduce a horizontal scroll. */
  img, svg, video, iframe, canvas { max-width: 100%; }
  img, video { height: auto; }

  /* --- long unbroken strings wrap instead of pushing the layout ----------
     DOIs, raw URLs and identifiers in the research posts. */
  a[href^="http"], code { overflow-wrap: anywhere; }

  /* --- readability floor -------------------------------------------------
     Raises only the elements measured below the readable threshold, and can
     only ever increase a size: max() never shrinks the page's own value. */
  caption, figcaption, small, th, td { font-size: max(1em, 12.5px); }

  /* --- anything that already scrolls keeps a visible affordance ---------- */
  pre, .tbl-wrap { -webkit-overflow-scrolling: touch; }
}