/* Map layer chrome shared by index.html and share.html: emoji markers,
   clusters, the draft pin, the user dot, corner controls, Leaflet overrides.
   Tokens from /theme.css; no colour literals here. */

.leaflet-container { background: var(--bg-secondary); font-family: var(--font); }

/* === Emoji marker: the iOS floatingMarkerChrome (solid disc, ring, badge) === */
.emoji-marker {
    position: relative; box-sizing: border-box;
    width: var(--marker); height: var(--marker);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--chrome-border);
    border-radius: 50%;
    box-shadow: var(--shadow-marker);
    color: var(--text-primary);
}
.emoji-marker-glyph {
    width: 27px; height: 27px; line-height: 27px;
    font-size: 22px; text-align: center;
}
.emoji-marker.expiring { border: 2px solid var(--orange); }
.emoji-marker.visited { border: 2px solid var(--green); }
.marker-badge {
    position: absolute; right: -4px; bottom: -4px; box-sizing: border-box;
    width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid var(--badge-stroke);
    display: flex; align-items: center; justify-content: center;
}
.marker-badge svg { width: 9px; height: 9px; stroke: var(--badge-stroke); }
.marker-badge.expiring { background: var(--orange); }
.marker-badge.visited { background: var(--green); }
/* Followed maps (W7): indigo link badge + indigo count capsule; pane under own pins. */
.marker-badge.link { background: var(--indigo); }
.cluster-count.borrowed { background: var(--indigo); }
.leaflet-followed-pane { z-index: 590; }
.cluster-count {
    position: absolute; top: -8px; right: -8px; box-sizing: border-box;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px;
    background: var(--accent); color: var(--on-accent);
    border: 1.5px solid var(--badge-stroke);
    font-family: var(--font); font-size: var(--fs-caption2); font-weight: 600; line-height: 17px;
    text-align: center;
}
@media (hover: hover) {
    .emoji-marker { transition: transform var(--dur-snap) var(--ease-out); }
    .leaflet-marker-icon:hover .emoji-marker { transform: scale(1.06); }
}
/* Draft pin (save card open): bare emoji with the blue glow, no chrome. */
.draft-pin {
    width: 48px; height: 48px; line-height: 48px; text-align: center;
    font-size: 42px; transform: scale(1.1);
    filter: drop-shadow(0 0 16px var(--accent-glow));
}
.pin-tooltip {
    background: var(--material-thick); color: var(--text-primary);
    border: 1px solid var(--chrome-border); border-radius: 8px;
    box-shadow: var(--shadow-chrome);
    font-family: var(--font); font-size: var(--fs-footnote); padding: 4px 8px;
}
.pin-tooltip::before { display: none; }

/* === User location (14pt blue dot, white ring, no pulse) === */
.user-location-dot {
    width: 19px; height: 19px; box-sizing: border-box;
    background: var(--accent);
    border: 2.5px solid var(--badge-stroke);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-halo);
}

/* === Corner controls: 48pt circles with the map-button chrome === */
.leaflet-bottom.leaflet-right .leaflet-control,
.leaflet-bottom.leaflet-left .leaflet-control { margin: 0 16px 16px; }
.leaflet-bottom.leaflet-right,
.leaflet-bottom.leaflet-left { margin-bottom: env(safe-area-inset-bottom, 0px); }
.nemo-locate-btn {
    width: var(--ctl); height: var(--ctl); padding: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: var(--material-ultrathick);
    color: var(--text-primary);
    border: 1px solid var(--chrome-border);
    border-radius: 50%;
    box-shadow: var(--shadow-chrome);
    cursor: pointer;
}
.nemo-locate-btn:active { opacity: 0.8; }
.nemo-locate-btn.active { color: var(--accent); }
.nemo-locate-btn.denied { color: var(--text-tertiary); cursor: default; }
.nemo-locate-btn.locating { cursor: progress; }
.nemo-locate-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--fill-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Zoom: hidden on touch (the phone has none); circles on desktop. */
@media (pointer: coarse) { .leaflet-control-zoom { display: none; } }
.leaflet-control-zoom.leaflet-bar,
.leaflet-touch .leaflet-control-zoom.leaflet-bar {
    border: 0; background: transparent; box-shadow: none;
    display: flex; flex-direction: column; gap: 8px;
}
/* Specific enough to beat leaflet.css even when it loads AFTER this file
   (share.html adds it lazily): Leaflet rounds only the outer corners of the
   first/last button and paints a light hover, which made the pair look
   like two halves of a bar. */
.leaflet-control-zoom.leaflet-bar a,
.leaflet-control-zoom.leaflet-bar a:first-child,
.leaflet-control-zoom.leaflet-bar a:last-child,
.leaflet-control-zoom.leaflet-bar a:hover,
.leaflet-control-zoom.leaflet-bar a:focus,
.leaflet-touch .leaflet-control-zoom.leaflet-bar a,
.leaflet-touch .leaflet-control-zoom.leaflet-bar a:first-child,
.leaflet-touch .leaflet-control-zoom.leaflet-bar a:last-child {
    width: var(--ctl); height: var(--ctl); line-height: 46px; box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--chrome-border);
    background: var(--material-ultrathick);
    box-shadow: var(--shadow-chrome);
    color: var(--text-primary);
    font-family: var(--font); font-size: 22px; font-weight: 500;
}
.leaflet-control-zoom.leaflet-bar a.leaflet-disabled,
.leaflet-touch .leaflet-control-zoom.leaflet-bar a.leaflet-disabled { color: var(--text-tertiary); background: var(--material-ultrathick); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .nemo-locate-btn, .leaflet-control-zoom a, .pin-tooltip {
        backdrop-filter: var(--material-blur); -webkit-backdrop-filter: var(--material-blur);
    }
}

/* Attribution + popups (popups are used by share.html only) */
.leaflet-container .leaflet-control-attribution {
    background: var(--material-thick); color: var(--text-secondary);
    border-top-left-radius: 8px; font-size: 10px; padding: 2px 6px;
}
.leaflet-container .leaflet-control-attribution a { color: var(--text-secondary); }
.leaflet-popup-content-wrapper {
    background: var(--bg-elevated) !important; color: var(--text-primary) !important;
    border-radius: 12px !important; box-shadow: var(--shadow-card) !important;
}
.leaflet-popup-content {
    margin: 12px 14px !important;
    font-family: var(--font) !important;
    font-size: var(--fs-subheadline) !important; line-height: 1.4 !important;
}
.leaflet-popup-tip { background: var(--bg-elevated) !important; }
.leaflet-popup-close-button { color: var(--text-secondary) !important; }