/* ================================================================================================
 * USSL — Mobile Modal Polish v1.0
 * Safe, non-intrusive global rules. Targets .modal > .modal-content pattern.
 * - max-height: 90dvh (iOS Safari dynamic viewport aware)
 * - safe-area-inset-bottom padding (iPhone home indicator)
 * - internal scroll only (overscroll-behavior: contain)
 * - body scroll lock when modal open
 * Rollback: remove this stylesheet link from index.html.
 * ================================================================================================ */

/* Modal content — primary container styles */
.modal:not(.hidden) > .modal-content,
.modal:not([hidden]) > .modal-content {
  max-height: 90dvh !important;
  max-height: 90vh; /* fallback for browsers without dvh */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  box-sizing: border-box;
}

/* Mobile-specific: tighter scroll behavior + slightly more breathing room */
@media (max-width: 768px) {
  .modal:not(.hidden) > .modal-content,
  .modal:not([hidden]) > .modal-content {
    max-height: 92dvh !important;
    max-height: 92vh;
    /* Account for browser chrome (address bar) animation */
    margin: max(env(safe-area-inset-top, 8px), 8px) auto;
    /* Bottom padding ensures sticky footer / submit not hidden by home indicator */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px);
  }
}

/* Body scroll lock — applied via JS when modal opens */
body.has-modal-open {
  overflow: hidden;
  /* Preserve scroll position via fixed positioning safely */
  position: fixed;
  width: 100%;
}

/* Modal outer container — ensure full viewport coverage */
.modal:not(.hidden),
.modal:not([hidden]) {
  /* iOS Safari fix: 100vh includes address bar, 100dvh is dynamic */
  height: 100dvh;
  height: 100vh; /* fallback */
}

/* Touch target minimum (44x44 per Apple HIG / 48x48 Material) */
@media (max-width: 768px) {
  .modal-content button,
  .modal-content input[type="submit"],
  .modal-content input[type="button"] {
    min-height: 44px;
  }
}

/* Body scroll lock via :has() (modern browsers — iOS Safari 15.4+, Chrome 105+, Firefox 121+) */
@supports selector(:has(*)) {
  body:has(.modal:not(.hidden)) {
    overflow: hidden;
    /* Prevent visible jump by using padding (no fixed position which would scroll-reset) */
  }
}

/* Modal overlay click area (improve hit target) */
@media (max-width: 768px) {
  .modal:not(.hidden) {
    padding: max(env(safe-area-inset-top, 4px), 4px) 8px;
    box-sizing: border-box;
  }
}