/**
 * Shared Leaflet map UI (Mexico + Toronto).
 * Source of truth: websites/_shared/map-family-base.css
 * Deployed copies: MexicoConflictMap/map-family-base.css, TorontoIncidentMap/map-family-base.css
 * After editing, run from repo root: node websites/sync-map-family-css.mjs
 * Each site loads this before styles.css; use var(--accent) etc. from the app stylesheet.
 */

.traffic-api-notice {
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: rgba(201, 162, 39, 0.08);
    border: 1px solid var(--accent);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-2, var(--text-muted));
    max-width: 100%;
}

.traffic-api-notice a {
    color: var(--accent);
}

.traffic-api-notice code {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.78rem;
}

.leaflet-popup-content-wrapper {
    background: #fff;
    color: #1a1a2e;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.leaflet-popup-content {
    margin: 0.75rem;
    min-width: min(240px, calc(100vw - 80px));
    max-width: min(360px, calc(100vw - 60px));
}

/* Touch / safe margins for map controls (Toronto + Mexico) */
.leaflet-container {
    touch-action: pan-x pan-y pinch-zoom;
}

.leaflet-bottom.leaflet-left {
    margin-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    margin-left: max(0.35rem, env(safe-area-inset-left, 0px));
}

.leaflet-top.leaflet-right {
    margin-top: max(0.35rem, env(safe-area-inset-top, 0px));
    margin-right: max(0.35rem, env(safe-area-inset-right, 0px));
}

/* Optional <details> summary blocks inside light popups */
.popup-details-summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.popup-details-summary::-webkit-details-marker {
    display: none;
}

.popup-details-body {
    margin-top: 0.35rem;
    line-height: 1.45;
    max-height: 140px;
    overflow-y: auto;
}