/* Map controls: one visual system. Opaque buttons (zoom, position, filter, help/settings/menu, attribution) share --ctl-* tokens;
   floating bars (search bar with menu and live status, toast) share --float-*. Loaded last so nothing below overrides it. */
.fab, .maplibregl-ctrl-group, .map-credits .map-credits-toggle { color: var(--ctl-fg); background: var(--ctl-bg) !important; border: 1px solid var(--ctl-border); box-shadow: var(--ctl-shadow) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background var(--dur-fast), color var(--dur-fast); }
.fab { border-radius: 50% !important; }
.map-credits .map-credits-toggle { border-radius: 50%; cursor: pointer; }
/* +/- as one pill: the group carries surface, border and shadow; the halves only add a hairline and their own hover. */
.maplibregl-ctrl-group { display: flex; flex-direction: column; width: var(--button); overflow: hidden; border-radius: calc(var(--button) / 2) !important; }
.maplibregl-ctrl-group button { width: 100%; height: var(--zoom-button); color: inherit; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--ctl-border) !important; }
/* Hover only where a pointer can hover; always a lighter grey surface, never transparent or border-only. */
@media (hover: hover) {
  .fab:not(:disabled):hover, .map-credits .map-credits-toggle:hover { background: var(--ctl-bg-hover) !important; }
  .maplibregl-ctrl-group button:not(:disabled):hover { background: var(--ctl-bg-hover) !important; }
}
.fab:not(:disabled):active, .map-credits .map-credits-toggle:active, .maplibregl-ctrl-group button:not(:disabled):active { background: var(--ctl-bg-active) !important; }
.fab:focus-visible, .map-credits .map-credits-toggle:focus-visible { outline: 3px solid var(--ctl-ring); outline-offset: 2px; }
.maplibregl-ctrl-group button:focus-visible { outline: 3px solid var(--ctl-ring); outline-offset: -3px; }
.fab[aria-expanded="true"] { border-color: var(--accent); }
/* Toggled state (following): same filled blue in every state. */
.fab[aria-pressed="true"], .fab[aria-pressed="true"]:is(:hover, :active) { background: var(--follow) !important; color: var(--on-follow); border-color: var(--follow); }
/* Floating bars: one translucent surface, blur, border and shadow. */
.search-field, .toast[data-level="info"] { background: var(--float-bg); border: 1px solid var(--float-border); box-shadow: var(--ctl-shadow);
  -webkit-backdrop-filter: blur(var(--float-blur)); backdrop-filter: blur(var(--float-blur)); }
.toast[data-level="info"] { --toast-bg: var(--float-bg); --toast-border: var(--float-border); }