/* Stili della pagina radar (radar.html). Token str4tum-ds + override minimi di Leaflet. */

/* Toggle Osservato / Previsto. */
.radar-modes { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.rmode {
  background: none; border: var(--hairline-w) solid var(--hairline); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; color: var(--text-muted);
  padding: var(--space-2) var(--space-4); min-height: 40px;
}
.rmode[data-active="true"] { color: var(--text-primary); border-color: var(--hairline-strong); background: var(--bg-panel-elevated); }
.rmode:focus-visible { outline: 2px solid var(--accent-link); outline-offset: 2px; }

#radar-map {
  height: 60vh; min-height: 360px;
  border: var(--hairline-w) solid var(--hairline); border-radius: var(--r-md);
  margin-bottom: var(--space-3);
}
/* Leaflet: sfondo coerente col tema + font mono (niente font esterni). */
.leaflet-container { background: var(--bg-panel); font-family: var(--font-mono); }
.leaflet-control-zoom a { color: var(--text-primary); }

/* Etichette città: testo nudo con alone, niente box/freccetta del tooltip. */
.radar-city {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--text-secondary); font-size: var(--fs-xs); padding: 0; font-weight: var(--fw-medium);
  text-shadow: 0 0 3px var(--bg-base), 0 0 3px var(--bg-base), 0 0 3px var(--bg-base);
}
.radar-city::before { display: none !important; }

/* Comandi animazione. */
.radar-controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.r-slider { flex: 1; min-width: 140px; accent-color: var(--accent-link); }
.r-when { white-space: nowrap; }
.r-stamp { font-size: var(--fs-md); }
.r-zoom { display: flex; gap: var(--space-2); margin-left: auto; }

/* Legenda mm/h. */
.radar-legend { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-3); }
.radar-legend .rl-sw { width: 26px; height: 12px; display: inline-block; }
.radar-legend .rl-v { margin-right: var(--space-2); }

/* Descrizione "cosa fanno" le due modalità (sotto la mappa). */
.radar-about { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
.radar-about p { margin: var(--space-1) 0; }
.radar-about strong { color: var(--text-primary); }

@media (max-width: 560px) {
  #radar-map { height: 56vh; }
  .r-zoom { margin-left: 0; width: 100%; }
}