/* =============================================================
   SalatiPal — Sheet polish (Phase 3 companion to sp-sheets.js).

   The JS tags open Radix dialogs with .sp-sheet + .sp-sheet-bottom
   or .sp-sheet-centered, and injects a .sp-sheet-handle inside
   bottom sheets. This file paints them and re-keys the entrance
   timing function to the shared --sp-spring curve.

   All rules scoped to .sp-ios.
   ============================================================= */

/* ---------- Bottom-sheet drag handle ---------- */
html.sp-ios .sp-sheet-bottom > .sp-sheet-handle {
  display: block;
  width: 38px;
  height: 5px;
  margin: 8px auto 6px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.45);
  pointer-events: none;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
  html.sp-ios .sp-sheet-bottom > .sp-sheet-handle {
    background: rgba(255, 255, 255, 0.28);
  }
}

/* ---------- Spring-ease the existing Radix entrance ----------
   The bundle uses Tailwind's animate-in + slide-in-from-bottom
   utilities. They set animation-timing-function on the element;
   override to our spring so every sheet enters with the same feel
   as the per-day prayer modal. */
html.sp-ios .sp-sheet[data-state="open"],
html.sp-ios [data-radix-select-content][data-state="open"],
html.sp-ios [data-radix-popper-content-wrapper] > *[data-state="open"] {
  animation-timing-function: var(--sp-spring, cubic-bezier(0.2, 0.7, 0.2, 1)) !important;
}

/* While the JS is actively dragging the sheet, kill the existing
   Radix open-state animation so it doesn't compete with our
   transform. .sp-sheet-bottom has its inline transform set by the
   handler; if Radix is mid-animation the two stack and the sheet
   judders. */
html.sp-ios .sp-sheet-bottom[style*="translate3d"] {
  animation: none !important;
}

/* ---------- Bottom-sheet shape ----------
   Subtle top corner radius + a soft top shadow so the sheet reads
   as a card lifting off the page. Only applied if the bundle
   hasn't already set a larger radius. */
html.sp-ios .sp-sheet-bottom {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.sp-ios .sp-sheet[data-state="open"] {
    animation-duration: 1ms !important;
  }
}