/* ============================================================
   COMPAT.CSS — cross-platform foundation
   Loaded BEFORE all app CSS. Gives:
   - iOS Safari: safe-area, no tap-highlight, no 100vh jank, no double-tap zoom
   - Android: kills 300ms tap delay, smooth momentum scroll
   - Old Safari/Firefox: aspect-ratio fallback, :has() degrade
   - All: better text rendering, no FOUC, no autofill yellow
   ============================================================ */

/* ---- Mobile basics ---- */
html {
  -webkit-text-size-adjust: 100%;       /* iOS Safari: don't resize text on rotation */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;  /* kill blue tap flash on iOS/Android */
  touch-action: manipulation;            /* Android Chrome: no 300ms double-tap delay */
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;          /* iOS: no rubber-band on body, scroll inside containers */
}

/* iOS Safari: full-height that respects URL bar dynamics */
.fullscreen, .app-shell {
  min-height: 100vh;                    /* fallback for Safari < 15.4 */
  min-height: 100dvh;                   /* dynamic viewport — modern browsers */
}

/* ---- Touch targets — 44px floor (Apple HIG) ---- */
button, a.btn, .btn, [role="button"], input[type="button"], input[type="submit"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  min-height: 44px;
  min-width: 44px;
}

/* ---- iOS notch / Android nav bar — safe areas ---- */
.bottom-nav,
nav.tabs,
[data-bottom-nav] {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
  padding-bottom: max(constant(safe-area-inset-bottom, 0px), 8px);  /* iOS 11.0-11.2 legacy */
}

.has-notch, [data-top-safe] {
  padding-top: max(env(safe-area-inset-top, 0px), 0px);
}

/* ---- aspect-ratio fallback for Safari < 15 ---- */
@supports not (aspect-ratio: 1) {
  [style*="aspect-ratio"] { position: relative; }
  [style*="aspect-ratio"]::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}

/* ---- Form input fixes ---- */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea {
  -webkit-appearance: none;             /* iOS: remove inner shadow / rounded */
  appearance: none;
  font-size: 16px;                      /* iOS: prevent zoom on focus when font < 16px */
}

/* iOS / Chrome autofill yellow background — kill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ---- Disable user-select on UI chrome (not on text content) ---- */
.no-select,
.btn, button, .nav-item, .tab,
.modal-handle, .header-timer {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;          /* iOS: no long-press menu */
}

/* ---- Smooth momentum scroll on iOS ---- */
.scroll-container, [data-scrollable] {
  -webkit-overflow-scrolling: touch;    /* legacy iOS — kept for older Safari */
  overscroll-behavior: contain;
}

/* ---- Image defaults — no broken icon, no drag ghost ---- */
img {
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-drag: none;
}

/* ---- Reduce motion — respect OS setting ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Print: clean, no app chrome ---- */
@media print {
  .bottom-nav, .header, nav, .floating-timer { display: none !important; }
  body { background: white !important; color: black !important; }
}