/* Shared mobile polish — safe-area, touch targets, iOS-specific fixes.
   Include AFTER the page's main stylesheet on every page. */

/* Safe-area padding for notched devices (iPhone X+) */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  nav, .nav, #nav {
    padding-top: env(safe-area-inset-top);
  }
}

/* Prevent iOS from auto-zooming on input focus by enforcing 16px+ */
@media (max-width: 768px) {
  input, textarea, select, button {
    font-size: 16px !important;
  }
}

/* Minimum 44x44 touch targets per Apple HIG */
@media (pointer: coarse) {
  button, a.btn, .btn, .chip, .tab, .sc-fav, .sc-rm, .sc-sa-btn {
    min-height: 44px;
  }
}

/* Remove tap highlight flash on iOS */
a, button {
  -webkit-tap-highlight-color: rgba(214, 255, 62, 0.18);
  touch-action: manipulation;
}

/* Kill 300ms click delay */
html {
  touch-action: manipulation;
}

/* Smooth momentum scroll for containers */
.scroll, .table-wrap, .stats, .tools {
  -webkit-overflow-scrolling: touch;
}

/* Safari 100vh bug workaround: use dvh where supported */
@supports (height: 100dvh) {
  .hero, .preview-hero {
    min-height: 100dvh;
  }
}

/* Prevent horizontal page overflow */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Make tables horizontally scrollable on phones instead of exploding layout */
@media (max-width: 640px) {
  .table-wrap {
    overflow-x: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  table {
    min-width: 560px;
  }
}

/* Bigger gaps between cards on small screens — easier to tap */
@media (max-width: 480px) {
  .grid, #grid {
    gap: 14px;
  }
}

/* Admin inline-editor panel should sit above keyboard on mobile */
@media (max-width: 768px) {
  #admin-inline-editor {
    bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-height: 60vh !important;
  }
}

/* Exclusive banner wraps nicely on phones */
@media (max-width: 560px) {
  #exclusive-banner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #exclusive-banner > div {
    min-width: 0 !important;
  }
}

/* Sticky CTAs don't eat content under them */
@supports (padding: max(0px)) {
  .btn-primary.fixed, .fab {
    bottom: calc(env(safe-area-inset-bottom) + 16px) !important;
  }
}