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

/* iOS safe-area insets so floating controls clear the home indicator / notch */
.pf-controls {
  padding-bottom: env(safe-area-inset-bottom);
  padding-right: env(safe-area-inset-right);
}

.pf-top-controls {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
}

.pf-pwa-banner {
  margin-top: env(safe-area-inset-top);
}

#usage-ticker {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Leaflet's default z-index for panes sits below Tailwind's floating UI by default;
   keep popups above our controls but below the slide-up panel. */
.leaflet-popup {
  z-index: 650;
}

.pf-marker-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
}

.pf-marker-time {
  margin-top: 2px;
  background: white;
  color: #1e293b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.pf-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: pf-spin 0.6s linear infinite;
}

@keyframes pf-spin {
  to {
    transform: rotate(360deg);
  }
}

.pf-star {
  cursor: pointer;
  color: #f59e0b;
}

.pf-user-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid white;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  margin: 2px;
}