/* One scroll surface, bounded by Safari's visible viewport and the server bar. */
#modal-overlay {
  inset: var(--prep-modal-top, 0px) 0 auto 0;
  height: calc(var(--prep-modal-viewport-height, 100dvh) - var(--prep-server-footer-height, 0px));
  width: 100%;
  box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2147483001;
}
#modal-overlay .modal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100% !important;
  overflow: hidden !important;
}
#modal-overlay .modal-head { flex: 0 0 auto; }
#modal-overlay .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y pinch-zoom;
  scroll-padding-top: 12px;
  scroll-padding-bottom: 80px;
}
#modal-overlay .modal-body form > footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: #fff;
  border-top: 1px solid #e0e8de;
  padding: 12px 0 4px;
}
html.prep-modal-open, html.prep-modal-open body { overflow: hidden; }
@media (max-width: 640px) {
  #modal-overlay .modal { padding: 14px 12px 8px; border-radius: 14px; }
  #modal-overlay .modal-head { margin-bottom: 12px; }
  #modal-overlay input, #modal-overlay select, #modal-overlay textarea { font-size: 16px; }
}