/* =============================================================
   SalatiPal — iOS-native styling for the Quran offline-downloads view.
   Every rule is gated behind html.sp-ios, a class set by offline-ios.js
   ONLY inside the Capacitor iOS app — so the web build and Android are
   completely unaffected. .sp-offline-root is tagged by the same script
   onto the offline view's top column.
   Safe to remove: drop the <link>/<script> tags from index.html.
   ============================================================= */

/* ---- #3: clear the iOS status bar -------------------------------------
   The view's top column had only pt-4 (16px); on notched iPhones the
   header sat under the time/battery. Push it down by the safe-area inset
   (env() is 0 on devices/browsers without an inset, so this is harmless). */
html.sp-ios .sp-offline-root {
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
}

/* ---- #4: native-iOS polish (conservative, layout-safe) ---------------- */
html.sp-ios .sp-offline-root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Momentum scrolling + contained overscroll on the inner scroll regions
   so the list bounces like a native iOS list and doesn't drag the page. */
html.sp-ios .sp-offline-root .overflow-y-auto,
html.sp-ios .sp-offline-root .overflow-auto,
html.sp-ios .sp-offline-root [class*="overflow-y"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Keep the last download row clear of the bottom tab bar + home indicator. */
html.sp-ios .sp-offline-root .overflow-y-auto {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Snappy taps: no 300ms delay / double-tap zoom on the controls. */
html.sp-ios .sp-offline-root button {
  touch-action: manipulation;
}