/* ============================================================================
   android-native.css  —  Native-Android INTERACTION layer (v2: match-iOS)
   ----------------------------------------------------------------------------
   Direction change 2026-06-03: the user wants Android to look the SAME as the
   built-in iOS design (the app's own bundle look), NOT a separate Material skin.
   So this file no longer restyles surfaces/colours — that's left to the bundle.
   It ONLY adds native-Android INTERACTION affordances (ripple, press feedback,
   safe-area), paired with android-native.js (haptics, edge-back, drag-to-close).
   Everything gated to body[data-sp-platform="android"]; iOS/web untouched.
   ========================================================================== */

/* status-bar safe area: keep the sticky header/hero clear of the status bar
   (Android edge-to-edge); this only ADDS top padding, never changes colours. */
body[data-sp-platform="android"] .sp-topbar {
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
}

/* ---- Material touch ripple (added by android-native.js to buttons/nav) ---- */
body[data-sp-platform="android"] .sp-rippleable { position: relative; overflow: hidden; }
body[data-sp-platform="android"] .sp-ripple {
  position: absolute; border-radius: 50%; background: currentColor;
  opacity: .14; transform: scale(0); pointer-events: none;
  animation: sp-ripple .5s cubic-bezier(.2,.6,.2,1);
}
@keyframes sp-ripple { to { transform: scale(1); opacity: 0; } }

/* ---- subtle press-down on tappable rows/cards (no layout/colour change) ---- */
body[data-sp-platform="android"] .sp-pressable { transition: transform .09s ease, opacity .09s ease; }
body[data-sp-platform="android"] .sp-pressable:active { transform: scale(.985); opacity: .92; }

/* ---- bottom-sheet drag affordance: android-native.js sets translateY live ---- */
body[data-sp-platform="android"] .sp-dragging { transition: none !important; }