/* Карта на MapLibre GL: холст и HTML-маркеры по дизайн-системе (белый круг, чёрная иконка, цветная точка). Слои карты рисуются в WebGL (map.js). */
#map { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--land); outline: 0; }
#map .maplibregl-canvas { outline: 0; }
#map .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; } #map .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }

/* ---- маркеры ---- */
.mk { position: relative; width: 0; height: 0; cursor: pointer; font-family: var(--font-ui); --c: var(--accent); }
.mk .bg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2px var(--ink), 0 2px 8px rgba(0, 0, 0, .18); color: var(--ink); }
.mk .bg .i { width: 18px; height: 18px; }
.mk .dot { position: absolute; left: 50%; top: 50%; translate: 6px -18px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2.2px var(--panel); }
.mk .tag { position: absolute; left: 22px; top: -10px; white-space: nowrap; height: 20px; padding: 0 9px; border-radius: 10px; background: var(--ink); color: var(--panel); font-size: 11px; font-weight: 600; letter-spacing: -.01em; line-height: 20px; pointer-events: none; }
.mk .halo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 48px; height: 48px; border-radius: 50%; background: var(--c); opacity: .25; animation: hkpulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes hkpulse { from { transform: scale(.6); opacity: .5; } to { transform: scale(2.1); opacity: 0; } }
.mk.hk .tag { left: 24px; }
.mk.hk.soon .halo { background: var(--accent); }
.mk.hk.late .bg, .mk.hk.alarm .bg, .mk.hk.sos .bg { background: var(--bad); box-shadow: inset 0 0 0 2px var(--bad), 0 2px 10px rgba(229, 50, 43, .4); color: #fff; }
.mk.hk.late .dot, .mk.hk.alarm .dot, .mk.hk.sos .dot { background: #fff; box-shadow: 0 0 0 2.2px var(--bad); }
.mk.hk.late .halo, .mk.hk.alarm .halo, .mk.hk.sos .halo { background: var(--bad); animation-duration: 1s; opacity: .3; }
.mk.hk.back { opacity: .5; } .mk.hk.back .dot { background: var(--ink-3); } .mk.hk.back .halo { display: none; }
.mk.dv .bg, .mk.gw .bg, .mk.ent .bg { width: 28px; height: 28px; } .mk.dv .bg .i, .mk.gw .bg .i, .mk.ent .bg .i { width: 15px; height: 15px; }
.mk.dv .dot, .mk.gw .dot, .mk.ent .dot { translate: 4px -15px; width: 9px; height: 9px; }
.mk.dv .dot { background: var(--ink-3); } .mk.dv.rented .dot { background: var(--accent); } .mk.dv.low .dot { background: var(--bad); }
.mk.gw.off .bg { box-shadow: inset 0 0 0 2px var(--ink-3), 0 2px 8px rgba(0, 0, 0, .12); color: var(--ink-3); } .mk.gw.off .dot { background: var(--bad); }
.mk.gw .wave { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--lora); opacity: 0; animation: gwwave 3.2s cubic-bezier(.2, .5, .4, 1) infinite; pointer-events: none; }
.mk.gw.off .wave { display: none; }
@keyframes gwwave { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(3.2); opacity: 0; } }
.mk.ent .tag, .mk.gw .tag { left: 20px; background: var(--panel); color: var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, .18); font-weight: 700; }
.mk.wp .num { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--panel); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2.5px var(--panel); }
.mk.zl { cursor: default; pointer-events: none; } .mk.zl .zl { position: absolute; translate: -50% -50%; white-space: nowrap; padding: 0 11px; height: 24px; border-radius: 12px; background: var(--accent); color: #0B0B0B; font-size: 11px; font-weight: 800; line-height: 24px; }

/* ---- подсказка по клику ---- */
#map .maplibregl-ctrl-bottom-left, #map .maplibregl-ctrl-bottom-right { display: none; }