/* Niche Map: the map box, the layer switches above it, and the popups. Colors come from the site's stylesheet
   through the custom properties below when it sets them; the defaults are neutral. */
.niche-map-wrap { --nm-accent: var(--blue, #173f8f); --nm-ink: var(--ink, #111827); --nm-rule: var(--rule, #dfe3ea); margin: 1.5rem 0; }
.niche-map { height: 70vh; min-height: 420px; max-height: 760px; width: 100%; background: #e8ecf1; border-radius: 10px; z-index: 0; }
.niche-map:not(.nm-ready)::before { content: "Loading the map…"; display: block; padding: 1rem; color: #5b6472; font-size: .95rem; }
.nm-layers { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 0 .6rem; font-size: .95rem; }
.nm-layer { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none; padding: .3rem .6rem; border: 1px solid var(--nm-rule); border-radius: 999px; background: #fff; }
.nm-layer input { margin: 0; accent-color: var(--nm-accent); }
.nm-layer.nm-loading { opacity: .55; }
.nm-layer.nm-loading::after { content: "…"; }
.nm-swatch { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.nm-credits { font-size: .78rem; color: #6b7280; margin: .4rem 0 0; }
.leaflet-popup-content { margin: .8rem 1rem; font-size: .95rem; line-height: 1.4; }
.leaflet-popup-content .nm-name { display: block; font-size: 1.05rem; margin-bottom: .2rem; color: var(--nm-ink); }
.leaflet-popup-content .nm-note { display: block; color: #5b6472; font-size: .88rem; }
.leaflet-popup-content .nm-links { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.leaflet-popup-content .nm-links a { text-decoration: none; font-weight: 600; font-size: .88rem; padding: .35rem .7rem; border-radius: 999px; border: 1.5px solid var(--nm-accent); color: var(--nm-accent); }
.leaflet-popup-content .nm-links a[rel~="sponsored"] { background: var(--nm-accent); color: #fff; }
.leaflet-container { font-family: inherit; }
.leaflet-container a.leaflet-popup-close-button { top: 6px; right: 6px; }
.leaflet-interactive { cursor: pointer; }
.leaflet-tooltip { font-size: .85rem; }
@media (max-width: 600px) { .niche-map { height: 62vh; min-height: 360px; } .nm-layers { font-size: .88rem; gap: .3rem .5rem; } }
@media print { .niche-map-wrap { display: none; } }