/* Fixed-position anchor shared by the km scale bar and the legend box below
   it. A flex column keeps the scale bar flush against the box's top edge no
   matter how tall the box currently is (it grows upward between its
   collapsed and expanded states, since it's bottom-anchored) — without this
   the scale bar would need JS to track the box's top edge on every toggle. */
.map-legend-stack {
  position: fixed;
  left: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.map-legend {
  width: 15rem;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.map-legend:hover,
.map-legend:focus-visible {
  background-color: #000;
  color: #fff;
  --color-text: #fff;
}

.map-legend__minimized {
  display: none;
  padding: var(--space-xs) var(--space-xs) var(--space-xxs) var(--space-xs);
}

.map-legend--collapsed .map-legend__minimized {
  display: block;
}

.map-legend--collapsed .map-legend__expanded {
  display: none;
}

.map-legend__section {
  padding: var(--space-sm);
}

.map-legend__section + .map-legend__section {
  border-top: 1px solid var(--color-text);
}

.map-legend__row {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
}

.map-legend__row + .map-legend__row {
  margin-top: var(--space-xxs);
}

.map-legend__swatch {
  flex-shrink: 0;
  width: 1.25rem;
}

.map-legend__swatch--line {
  height: 0.125rem;
  background-color: var(--map-legend-swatch-color, currentColor);
}

.map-legend__swatch--dashed {
  height: 0.125rem;
  background-image: repeating-linear-gradient(
    to right,
    var(--map-legend-swatch-color, currentColor) 0,
    var(--map-legend-swatch-color, currentColor) 4px,
    transparent 4px,
    transparent 7px
  );
}

.map-legend__swatch--zone {
  height: 0.75rem;
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-text) 0,
    var(--color-text) 1px,
    transparent 1px,
    transparent 6px
  );
  opacity: 0.6;
}

.map-legend__circle-row {
  align-items: flex-end;
  gap: var(--space-sm);
}

.map-legend__circle-row-label {
  line-height: 1;
}

.map-legend__circle-scale {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

/* Shared fixed-width slot, reused by the dot rows AND the numbers row below
   them, so "1/10/50/200" lines up under its matching dot in both the
   Missing and Dead rows regardless of how large that dot renders. */
.map-legend__circle-scale-item {
  width: 1.25rem;
  display: flex;
  justify-content: center;
}

.map-legend__circle {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--map-legend-circle-color, currentColor);
  border: 1px solid var(--color-text);
}

.map-legend__circle--dead {
  border: none;
}

.map-legend__circle-scale-numbers {
  gap: var(--space-sm);
  font-size: 0.6rem;
  opacity: 0.6;
}

.map-legend__note {
  font-size: 0.7rem;
  opacity: 0.6;
  margin: var(--space-xs) 0 0;
}

.map-legend__section--scale {
  padding-bottom: var(--space-sm);
}

/* Reuse Mapbox's own live-updating ScaleControl instead of hand-building a
   distance scale — see map.js, which calls scaleControl.onAdd(map) and
   inserts the returned element here rather than letting Mapbox position it
   in its own corner container. No background, and no enclosing frame — but
   the bracket border (sides + bottom, no top) has to stay: it's not
   decoration, it's the actual tick marks that make the label read as "this
   width = this distance" rather than a floating number. */
.map-legend__section--scale .mapboxgl-ctrl-scale {
  background-color: transparent;
  border: 2px solid var(--color-text);
  border-top: none;
  padding: 0 var(--space-xxs) var(--space-xxs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 50rem) {
  .map-legend-stack {
    display: none;
  }
}