/* MapLibreBox component styles. Shipped alongside the JS the way
   maplibre-gl ships maplibre-gl.css: the host page links this once and the
   component builds its own DOM inside whatever container it is given.

   Everything is scoped under .maplibre-box so embedding it in another app
   (e.g. a tab in the rtod Next.js UI) can't leak styles into that app. */

.maplibre-box {
  position: relative;
  /* Theme tokens: the center reticle, the target toggle and the saved-memory
     map icons all read these, so the three renderings of the same "target"
     stay identical. Declared on the component, not :root, so a host page's
     own palette is untouched. */
  --accent: #1f6feb;
  --accent-fill: rgba(31, 111, 235, 0.3);
  --accent-saved: #b5179e;
  --accent-saved-fill: rgba(181, 23, 158, 0.3);
  /* Label halo, so the slot number beside a memory pin stays readable
     whatever the tiles under it look like. */
  --halo: #f8fafb;
}

@media (prefers-color-scheme: dark) {
  .maplibre-box {
    --accent: #6ea8fe;
    --accent-fill: rgba(110, 168, 254, 0.3);
    --accent-saved: #f072d0;
    --accent-saved-fill: rgba(240, 114, 208, 0.3);
    --halo: rgba(20, 23, 28, 0.8);
  }
}

.maplibre-box__map {
  position: absolute;
  inset: 0;
}

/* Marks the exact lng/lat at the center. A CSS overlay rather than a map
   layer, so it stays put through every pan without per-frame work, and
   pointer-events:none so it never blocks dragging from the middle. */
.maplibre-box__reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}

.maplibre-box__hint,
.maplibre-box__toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  border-radius: 4px;
  background: rgba(20, 23, 28, 0.9);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.maplibre-box__hint {
  top: calc(50% + 22px);
  padding: 4px 8px;
  font: 12px/1.4 system-ui, sans-serif;
}

.maplibre-box__toast {
  bottom: 24px;
  padding: 8px 14px;
  font: 13px/1.4 system-ui, sans-serif;
}

.maplibre-box__hint.is-visible,
.maplibre-box__toast.is-visible {
  opacity: 1;
}

/* Pan arrows as a cross around the center target toggle. Each button is its
   own embossed tile with a gap around it - matching the NavigationControl's
   zoom buttons rather than fusing into one ctrl-group box. */
.maplibre-box .nav-cluster {
  display: grid;
  grid-template-columns: repeat(3, 29px);
  grid-template-rows: repeat(3, 29px);
  gap: 4px;
  background: none;
  box-shadow: none;
}

.maplibre-box .nav-cluster-btn {
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font: 16px/1 system-ui, sans-serif;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.maplibre-box .nav-cluster-btn:hover { background: #f2f2f2; }
.maplibre-box .nav-cluster-btn:active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); }

/* The target at the middle of the pan cross. Pink in BOTH states, because
   this is the one control that saves a location and it has to be
   recognisable as the same object as the pink pins it drops - it used to be
   grey until something was already saved, which made "the pink target
   button" invisible right up until you had found it by accident. Saved
   state is carried by the fill instead: hollow = nothing saved here,
   filled = this exact center is a memory. */
.maplibre-box .nav-cluster-target::before {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-saved);
  background: transparent;
}

.maplibre-box .nav-cluster-target.is-active::before {
  background: radial-gradient(circle, var(--accent-saved-fill) 0 55%, transparent 55%);
}

/* Popups */
.maplibre-box .camera-tooltip { font: 12px/1.5 system-ui, sans-serif; }
.maplibre-box .camera-tooltip .tooltip-osm {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #e2e5e9;
  color: #5b6470;
}

/* Informational only - clicks fall through to the pin underneath. */
.maplibregl-popup.camera-hover-popup { pointer-events: none; }

.maplibre-box .popup-notes textarea { width: 100%; box-sizing: border-box; }
.maplibre-box .popup-notes button { margin-top: 4px; }

.memory-popup { font: 12px/1.5 system-ui, sans-serif; }
.memory-popup input { width: 100%; box-sizing: border-box; }
.memory-popup .memory-actions { margin-top: 6px; display: flex; gap: 6px; }
.memory-popup .memory-link {
  display: block;
  margin-top: 6px;
  max-width: 260px;
  overflow-wrap: anywhere;
  font-size: 11px;
  color: #1f6feb;
}

/* Compact preset: a small embed shows the map and zoom, nothing else. */
.maplibre-box--compact .maplibregl-ctrl-attrib { font-size: 10px; }