/* ════════════════════════════
   MAP — container, tiles, markers, connectors
════════════════════════════ */
#map {
  position: fixed;
  top:      var(--topbar-h);
  left:     0;
  right:    0;
  bottom:   0;
  z-index:  0;
}

.leaflet-container            { background: #0c0d13 !important; }
.leaflet-tile-pane            { filter: brightness(2) contrast(1.05) saturate(0.8); }
.leaflet-shadow-pane          { filter: brightness(1.4) contrast(1.2); }
.leaflet-control-zoom         { display: none !important; }
.leaflet-control-attribution  { display: none !important; }

/* ── AQI dot markers ── */
.custom-aqi-marker {
  background: transparent !important;
  border:     none !important;
  overflow:   visible !important;
}

.leaflet-marker-icon { overflow: visible !important; }

.aqi-circle {
  width:         var(--marker-size);
  height:        var(--marker-size);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-family:   inherit;
  font-size:     calc(var(--marker-size) * 0.34);
  color:         #fff;
  text-shadow:   0 1px 2px rgba(0,0,0,0.8);
  border:        none;
  cursor:        pointer;
  transition:    transform 0.12s;
  box-shadow:    0 0 6px 2px var(--gc1, rgba(255,200,0,0.7));
}

.aqi-circle:hover {
  transform:  scale(1.2);
  box-shadow: none;
}

.zoom-out-style .aqi-circle {
  width:      calc(var(--marker-size) * 0.65);
  height:     calc(var(--marker-size) * 0.65);
  box-shadow: none;
}

.zoom-out-style .aqi-circle span { display: none; }

/* ── SVG connector layer ── */
#canvas-svg {
  position:       fixed;
  top:            var(--topbar-h);
  left:           0;
  width:          100%;
  height:         calc(100% - var(--topbar-h));
  pointer-events: none;
  z-index:        500;
  overflow:       visible;
}

.connector {
  fill:             none;
  stroke:           rgba(79,195,247,0.55);
  stroke-width:     2;
  stroke-dasharray: 6 3;
}

/* ── Floating node container ── */
#app {
  position:       fixed;
  top:            var(--topbar-h);
  left:           0;
  width:          100%;
  height:         calc(100% - var(--topbar-h));
  pointer-events: none;
  z-index:        600;
}