/* Shared dialog controls stay reachable while browsing long catalogs. */
#modal {
  padding: 0;
  overscroll-behavior: contain;
  scroll-padding-top: 120px;
  max-height: 88vh;
  max-height: min(88vh, calc(100dvh - 24px));
}
#modal .modal-heading {
  position: sticky;
  top: 0;
  z-index: 5;
  align-items: center;
  margin: 0;
  padding: 20px 24px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
#modal .modal-heading > div { min-width: 0; }
#modal .modal-heading h2 { overflow-wrap: anywhere; }
#modal #close-modal { width: 44px; height: 44px; color: var(--ink); }
#modal-content { padding: 22px 24px 26px; }

@media (max-width: 600px) {
  #modal .modal-heading { gap: 12px; padding: 16px 18px; }
  #modal .modal-heading h2 { font-size: 24px; }
  #modal-content { padding: 18px; }

  /* Keep native iPhone inputs readable without zooming into the form. */
  :is(#gear-main, #ski-main, #kit-main, #advisor-main, #modal) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select, textarea
  ) { font-size: 16px; min-height: 44px; max-width: 100%; }

  :is(#gear-main, #ski-main, #kit-main, #advisor-main, #modal) :is(button, summary),
  .main-nav .nav-item { min-height: 44px; }
  :is(#gear-main, #ski-main, #kit-main, #modal) .gear-favorite {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  :is(.gear-owned, .ski-owned, .kit-owned, .stance-favorites-filter,
    .stance-swap-filters label, .ski-filter-checks label) { min-height: 44px; }
  :is(.stance-mobile-bar, .ski-mobile-bar) :is(.primary-button, .secondary-button) { min-height: 44px; }
  #modal textarea { width: 100%; }
  #modal .sheet-actions :is(button, a) { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  /* Give the exact size, checks, and purchase action a readable full-width card. */
  #modal :is(.gear-options, .ski-catalog-grid, .kit-options) { grid-template-columns: minmax(0, 1fr); }
  #modal :is(.gear-option, .ski-option, .kit-option) { min-width: 0; }
  #modal :is(.gear-option h3, .ski-option h3, .kit-option h3) { font-size: 20px; overflow-wrap: anywhere; }
  #modal .gear-option-photo { height: 175px; }
  #modal .gear-option :is(p, small, .gear-source) { font-size: 12px; }
  #modal .gear-option button { font-size: 12px; white-space: normal; }
}

@media (max-width: 480px) {
  .gear-saved { grid-template-columns: minmax(0, 1fr); }
  .gear-saved-photos { justify-content: center; }
  .gear-saved-photos img { width: 44px; height: 110px; }
  .gear-saved-actions { gap: 8px; }
  .gear-saved-actions button { flex: 1 1 100px; }
}