/* hub-map.css — the HUB's MapLibre chrome (dark glass), shared by every map view.
   Pair with assets/js/hub-map.js. Pages set --hm-* to retune. */
:root {
  --hm-panel: rgba(17, 21, 29, .86);
  --hm-panel-2: rgba(24, 29, 39, .94);
  --hm-line: #27303d;
  --hm-ink: #e9eef5;
  --hm-muted: #8b96a5;
}
.maplibregl-ctrl-group {
  background: var(--hm-panel) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45) !important;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.maplibregl-ctrl-group button {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
  width: 34px;
  height: 34px;
}
.maplibregl-ctrl-group button:first-child { border-top: 0 !important; }
.maplibregl-ctrl-group button:hover { background: rgba(255, 255, 255, .07) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.2); }
.maplibregl-ctrl-attrib {
  background: rgba(11, 14, 19, .7) !important;
  color: var(--hm-muted) !important;
  font-size: 10px;
  border-radius: 6px;
}
.maplibregl-ctrl-attrib a { color: var(--hm-muted) !important; }
.maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(11, 14, 19, .7) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }
.maplibregl-popup-content {
  background: var(--hm-panel-2);
  color: var(--hm-ink);
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--hm-panel-2); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--hm-panel-2); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--hm-panel-2); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--hm-panel-2); }
.maplibregl-popup-close-button { color: var(--hm-muted); font-size: 16px; }
.maplibregl-popup-content img { max-width: 220px; border-radius: 6px; display: block; margin-top: 6px; }
.maplibregl-marker { cursor: pointer; }
.maplibregl-canvas:focus { outline: none; }