/* Allow one-finger panning, but no page pinch or double-tap zoom. */
html, body, .modal {
  touch-action: pan-x pan-y;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 1000px), (any-pointer: coarse) {
  html, body {
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  /* iOS otherwise zooms the visual viewport when a small text field gets focus. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  textarea, select {
    font-size: 16px !important;
  }

  .modal-overlay {
    top: var(--app-visible-top, 0px);
    bottom: auto;
    height: var(--app-visible-height, 100dvh);
    align-items: flex-start;
    padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .modal-overlay > .modal {
    max-height: 100%;
    min-height: 0;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-block: 16px;
  }
}