/* Touch sizing, shared by every page.
 *
 * Scoped to pointer:coarse so a mouse still gets the tighter desktop density.
 * Two things matter on a phone:
 *   1. Controls need ~44px of height to hit reliably (Apple HIG, Material 48dp).
 *   2. A form field under 16px makes iOS Safari zoom the whole page on focus,
 *      which then leaves the layout scrolled sideways. 16px stops that.
 *
 * Inline links inside running prose are deliberately left alone: padding them
 * out to 44px would wreck the line spacing of the paragraph they sit in.
 */

/* !important throughout this block on purpose. These are floors, not styling
   preferences, and the pages set their own min-height and font shorthand on
   classes, which outrank a plain element selector no matter the file order. */
@media (pointer: coarse) {
  button,
  summary,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  select {
    min-height: 44px !important;
  }

  /* buttons that sit in a row of their own, so they get width too */
  .i18n-switch button,
  .lang button {
    min-height: 44px !important;
    min-width: 44px;
  }

  /* iOS zooms the page when a focused field is under 16px */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }

  /* Leaflet ships 30px controls */
  .leaflet-bar a {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}

/* Wide data tables scroll inside their own box rather than pushing the page
   sideways. Harmless on desktop, where they fit anyway. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep content clear of the notch and the home indicator in landscape. */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}