/* Shared MapLibre control theme for the drone viewers (/spot, /mission).
   Single source of truth so the two pages can't drift apart. Both pages
   define the same CSS variables (--panel, --line, --accent) with their own
   values, so this stylesheet themes each viewer in its own accent while
   keeping one identical layout/behaviour. Linked via /css (see meta.routes).

   Controls covered:
   - Zoom/nav control ("focus") — dark glass group, transparent buttons,
     accent-tinted hover, light icons. The reset also neutralises each page's
     global `button {}` style, which would otherwise bleed into the control.
   - Scale bar ("ratio") — intentionally NOT restyled here; left as the
     MapLibre default so both viewers match.
   - Top-right corner offset shared by the nav control and the measurement
     tool (both dock top-right). */

.maplibregl-ctrl-group {
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}
.maplibregl-ctrl-group button {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: none;
  transition: background 0.15s;
}
.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--line);
}
.maplibregl-ctrl-group button:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  filter: none;
}
.maplibregl-ctrl-group button:focus {
  outline: none;
  box-shadow: none;
}
.maplibregl-ctrl-group button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(1) opacity(0.8);
}

.maplibregl-ctrl-top-right {
  top: 8px;
  right: 8px;
}