/* =====================================================================
   The Fullness of Time — shared mobile rules
   Upload to: /public_html/mobile.css
   Loaded last, so it can correct the inline styles on the app pages.
   Desktop is untouched: every rule sits inside a max-width query.
   ===================================================================== */

/* ---------- Phones and small tablets (up to 700px) ---------- */
@media (max-width: 700px) {

  /* Nothing may push the page sideways */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, iframe, canvas { max-width: 100%; }

  /* Buttons and menu links are easy to hit with a thumb (44px is the
     size Apple and Google both ask for) */
  button,
  [role="button"],
  select {
    min-height: 40px !important;
  }
  nav a,
  footer a,
  .foot-grid a,
  .site-nav a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
  }

  /* A text box under 16px makes iPhone Safari zoom in on tap.
     16px stops that. */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Sliders keep their thin look but get a taller grab area */
  input[type="range"] {
    touch-action: manipulation;
    padding-block: 11px !important;
    background-clip: content-box;
  }
  input[type="range"]::-webkit-slider-thumb { width: 22px !important; height: 22px !important; }
  input[type="range"]::-moz-range-thumb { width: 22px !important; height: 22px !important; }

  /* Text never drops below a readable size */
  body { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

  /* Wide tables scroll inside their own box, not the page */
  table { max-width: 100%; }
  .table-scroll,
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Small phones (up to 430px) ---------- */
@media (max-width: 430px) {
  /* Side-by-side panels stack instead of squeezing */
  .stack-on-phone { display: block !important; }
  .stack-on-phone > * { width: 100% !important; max-width: 100% !important; }
}

/* ---------- Users who ask for less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}