#map {
    width: 100%;
    height: 260px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-2);
    /* Leaflet needs touch-action:none on its container to handle its own
       one-finger pan / pinch-zoom gestures instead of the browser scrolling
       the page underneath the map. */
    touch-action: none;
}

@media (min-width: 480px) {
    #map {
        height: 320px;
    }
}

@media (min-width: 768px) {
    #map {
        height: 380px;
    }
}

/* Leaflet's default divIcon draws a white square background/border; the
   map indicator pills supply their own styling instead. */
.leaflet-div-icon.wind-indicator,
.leaflet-div-icon.visibility-indicator {
    background: none;
    border: none;
}

.map-indicator-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 4px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Center each pill horizontally over the marker, since iconAnchor can't do
   this for an auto-sized divIcon; each pill is offset to its own side of
   the point so the two never overlap — wind above, visibility below. */
.wind-indicator-pill {
    transform: translate(-50%, calc(-100% - 12px));
}

.visibility-indicator-pill {
    transform: translate(-50%, 12px);
}

.wind-indicator-arrow {
    color: var(--color-primary);
}

.visibility-indicator-dot {
    font-size: 0.6rem;
}

/* Match the app's font stack instead of Leaflet's default tooltip styling,
   used for the "which spot looks good today" hover labels. */
.leaflet-tooltip {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}