/* ============================================================================
   Platform-wide smoothness layer — loaded on every page, progressive and
   non-destructive (low specificity, so a page's own CSS always wins).
   ========================================================================== */

/* Cross-document View Transitions: navigating between pages cross-fades instead
   of the hard white flash of a normal reload (Chromium today; a plain nav
   everywhere else). Both pages carry this rule, so every in-suite hop is smooth. */
@view-transition { navigation: auto; }

/* Smooth in-page scrolling and anchor jumps — only when the user hasn't asked
   the OS to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Accessibility + perf: if the user prefers reduced motion, collapse long
   animations/transitions everywhere so nothing lurches. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Media never overflows its column (kills sideways scroll on phones). */
img, video, svg, canvas { max-width: 100%; }

/* Mobile touch feel: no grey tap-flash, and momentum scrolling in overflow areas. */
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-overflow-scrolling: touch; }

/* ── Platform-wide mobile hardening (safe, low-specificity) ─────────────────
   These use element/root selectors only, so any page's own CSS still wins. */

/* Never let a stray wide element scroll the whole page sideways on phones.
   `clip` (not `hidden`) doesn't create a scroll container, so sticky headers,
   drawers and fixed overlays keep working; html is already the root scroller
   so the y-axis is unaffected. Progressive: ignored where clip isn't supported. */
html { overflow-x: clip; }

/* Stop iOS/Android from auto-inflating text after an orientation change, and
   keep our own font sizes authoritative. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* On phones, browsers zoom the page when a control with < 16px text is focused.
   Guarantee at least 16px on real inputs (checkboxes/radios excluded) so tapping
   a field never triggers that jarring zoom. max() keeps any larger design size. */
@media (max-width: 480px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: max(16px, 1em); }
}