/* ==========================================================================
   State overlay — the empty / loading / error card over the map area,
   the spinner, and the map chrome hiding that goes with it.
   ========================================================================== */

.overlay-state {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--background) 72%, transparent);
  backdrop-filter: blur(3px);
  /* The dim is visual only: map-area controls under it (basemap picker,
     zoom, pan) must stay clickable in the empty/error states. */
  pointer-events: none;
}

.overlay-state .state-card { pointer-events: auto; }

/* No track, no map chrome: while the state overlay is up the map area shows
   only the state card. The fit column and the top-left view-tools stack
   would otherwise show through the frost; the zoom buttons hide through
   their MapLibre counterpart in css/map.css. Attribution stays — tiles
   render beneath it and the providers require the credit. */
#map-pane:has(#overlay-state:not([hidden])) #map-fit,
#map-pane:has(#overlay-state:not([hidden])) #map-view-tools {
  display: none;
}

.state-card {
  max-width: 420px;
  padding: 28px 26px;
  text-align: center;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.state-brand {
  display: inline-flex;
}
.state-brand img { width: 56px; height: 56px; display: block; }

.state-error-icon {
  display: inline-flex;
  color: var(--danger);
}
.state-error-icon .icon { width: 28px; height: 28px; }

.state-title { font-size: 17px; }

.state-text {
  font-size: 13.5px;
  color: var(--foreground-muted);
}

.state-privacy {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-block-start: 6px;
  font-size: 12px;
  color: var(--foreground-faint);
  text-align: start;
}

.state-privacy .icon { width: 14px; height: 14px; margin-block-start: 2px; color: var(--success); }

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-block-start-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

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