html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  /* A phone that rubber-bands the whole document on a map drag or a list
     overscroll feels broken. Every scrolling region inside the app opts into
     `overscroll-behavior: contain` of its own; this stops the page itself. */
  overscroll-behavior: none;
  /* iOS enlarges text in landscape unless told not to, which silently breaks
     every width the layout was built against. */
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Touch devices only — a mouse does not need any of this, and a desktop with a
   touchscreen gets it, which is correct: the question is what is pointing at
   the screen, not how wide it is. */
@media (pointer: coarse) {
  /* MapLibre's controls are 29px squares built for a cursor. The zoom, the
     geolocate and the geofence draw tools are all in here, and drawing a zone
     on a tablet is a thing this app expects somebody to do. */
  .maplibregl-ctrl-group button {
    width: 44px;
    height: 44px;
  }

  .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
    background-size: 22px 22px;
  }

  /* The grey flash Android draws over anything tappable lands on whole cards
     and list rows here, not just on links. The app draws its own pressed and
     selected states. */
  a, button, [role='button'] {
    -webkit-tap-highlight-color: transparent;
  }
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}