html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#map {
  position: fixed;
  inset: 0;
}

.leaflet-top { top: env(safe-area-inset-top, 0px); }
.leaflet-bottom { bottom: env(safe-area-inset-bottom, 0px); }
.leaflet-left { left: env(safe-area-inset-left, 0px); }
.leaflet-right { right: env(safe-area-inset-right, 0px); }

#offline-notice {
  position: fixed;
  z-index: 1000;
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: fit-content;
  margin: 0 auto;
  padding: 10px 14px;
  border-radius: 8px;
  color: #f8f2e4;
  background: #101b1e;
  font: 13px/1.5 system-ui, sans-serif;
}

.leaflet-popup-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#error {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 60px;
  right: 12px;
  width: fit-content;
  margin: 0;
  padding: 12px;
  border-radius: 4px;
  background: white;
  color: #a31515;
  font: 14px/1.5 system-ui, sans-serif;
  box-shadow: 0 1px 5px #0004;
}