/* Map area: base layer, markers, "you are here" and overlays (values from the prototype). */
.map { position: relative; flex-grow: 1; height: 100%; overflow: clip; background: var(--bhm-map-land); touch-action: none; user-select: none; }
.map-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 0.45s var(--bhm-ease); will-change: transform; }
.map-base { position: absolute; left: 0; top: 0; overflow: visible; }
.map-label { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; }
/* Two stacking contexts: every marker and cluster stays below every map control, whatever their own z-index. */
.map-markers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.map--still .map-stage, .map--still .bhm-marker, .map--still .map-you { transition: none; }

.bhm-marker { position: absolute; z-index: 10; pointer-events: auto; transition: left 0.45s var(--bhm-ease), top 0.45s var(--bhm-ease), transform 0.15s; }
.bhm-marker[data-hover="true"] { z-index: 20; transform: scale(1.07); }
.bhm-marker[data-hover="true"] .bhm-shape { stroke-width: 2.4; }
.bhm-marker[data-state="selected"] { z-index: 30; }
.bhm-marker__count[hidden] { display: none; }
.bhm-marker__tag { position: absolute; left: 50%; bottom: 46px; display: none; transform: translateX(calc(-50% + var(--tag-shift, 0px)));
  max-width: min(320px, calc(100vw - 16px)); overflow: hidden; text-overflow: ellipsis; padding: 5px 10px; border-radius: var(--bhm-r-pill); background: var(--bhm-card); color: var(--bhm-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(28,27,24,0.12), 0 4px 12px rgba(28,27,24,0.10); }
.bhm-marker[data-state="selected"] .bhm-marker__tag, .bhm-marker[data-hover="true"] .bhm-marker__tag { display: block; }

.map-you { position: absolute; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: rgba(47,111,222,0.16); display: flex; align-items: center; justify-content: center; transition: left 0.45s, top 0.45s; }
.map-you__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bhm-you); border: 2.5px solid #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

.map-chrome { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.map-chrome > * { pointer-events: auto; }
.map-dim { position: absolute; inset: 0; z-index: 35; background: rgba(246,244,239,0.55); display: flex; align-items: center; justify-content: center; }
.map-dim__message { max-width: 420px; padding: 12px 18px; border-radius: 14px; background: var(--bhm-card); font-size: 14px; font-weight: 500; text-align: center; box-shadow: 0 2px 10px rgba(28,27,24,0.12); }
.map-demo { position: absolute; left: 16px; top: 16px; z-index: 36; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.94); font-size: 12.5px; color: #3A3833; box-shadow: 0 1px 3px rgba(28,27,24,0.10); }
.map-demo__dot { width: 8px; height: 8px; border-radius: 50%; background: #B8860B; }
.map-controls { position: absolute; right: 16px; top: 16px; z-index: 36; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transition: right 0.3s; }
.chrome--card .map-controls, .chrome--card .map-note { right: 440px; }
.map-orient { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.94); font-size: 12.5px; font-weight: 500; color: #3A3833; box-shadow: 0 1px 3px rgba(28,27,24,0.10); }
.zoom { display: flex; flex-direction: column; border-radius: 12px; background: var(--bhm-card); box-shadow: 0 1px 3px rgba(28,27,24,0.12); overflow: hidden; }
.zoom__button { width: 40px; height: 40px; border: 0; background: var(--bhm-card); display: flex; align-items: center; justify-content: center; }
.zoom__button:disabled { color: var(--bhm-ink-3); }
.zoom__divider { height: 1px; background: #EFEBE3; }
.map-legend { position: absolute; left: 16px; bottom: 16px; z-index: 36; width: 250px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,0.96); box-shadow: var(--bhm-shadow-float); display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.map-legend__title { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bhm-ink-3); }
.map-legend__row { display: flex; align-items: center; gap: 10px; }
.legend__mark { position: relative; width: 22px; height: 22px; }
.legend__mark svg { display: block; }
.legend__mark--container { display: grid; place-items: center; }
.legend__mark--container > .legend__mark { position: absolute; inset: 0; }
.legend__mark--container > .icon-container { position: relative; color: var(--bhm-ink); }
.legend__badge { position: absolute; right: -6px; top: -6px; width: 15px; height: 15px; border-radius: 8px; background: var(--bhm-ink); color: #FFFFFF; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.legend__you { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.legend__you-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bhm-you); border: 2px solid #FFFFFF; box-shadow: 0 0 0 5px rgba(47,111,222,0.16); }
.map-legend__note { padding-top: 8px; border-top: 1px solid #EFEBE3; font-size: 12.5px; line-height: 1.4; color: var(--bhm-ink-2); }
/* #625D55 instead of ink-3: ink-3 on the map land is 4.35:1, below the spec's 4.5:1. */
.map-note { position: absolute; right: 16px; bottom: 10px; z-index: 36; font-size: 11px; color: #625D55; transition: right 0.3s; }

/* Map prototype (?map=v2): MapLibre canvas under the same overlays; the SVG map and DOM markers are hidden. */
#map-gl.map-gl { position: absolute; inset: 0; z-index: 0; }   /* over MapLibre's own .maplibregl-map { position: relative } */
body[data-map="v2"] .map-stage, body[data-map="v2"] .map-markers, body[data-map="v2"] .map-note { display: none; }
.map-gl .maplibregl-ctrl-attrib { font-size: 10px; }
.map-gl .maplibregl-ctrl-bottom-right { bottom: var(--cover, 0px); }