/**
 * @file map-mode-legends.css
 * @purpose Place solar, wind and AQI legends consistently at the map's lower left.
 * @dependencies map.html, sidebar width state and attribution clearance variable.
 * @public .map-mode-legend; feature controllers retain ownership of visibility/content.
 * @sideEffects Follows sidebar expansion; prevents overflow on short/narrow screens.
 */

/* Reserve the same space above attribution for each mutually exclusive mode. */
.map-mode-legend {
  position: absolute;
  z-index: 8;
  left: calc(var(--sidebar-current-width) + .65rem);
  bottom: max(1rem, var(--map-attribution-clearance, 2rem));
  width: min(22rem, calc(100% - var(--sidebar-current-width) - 1.3rem));
  max-height: calc(100% - 7rem - var(--map-attribution-clearance, 2rem));
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: .7rem .55rem;
  background: rgba(28, 35, 40, .96);
  color: white;
  border: 1px solid #ffffff28;
  border-radius: 4px;
  box-shadow: 0 3px 16px #0003;
  /* Animate both edges together so closing a phone menu never widens the viewport. */
  transition: left 220ms ease, width 220ms ease;
}
.map-mode-legend[hidden] { display: none; }

/* A pinned phone menu temporarily takes priority; closing it restores the legend. */
@media (max-width: 44rem) {
  .map-shell.is-sidebar-pinned .map-mode-legend { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .map-mode-legend { transition: none; }
}