/* ============================================================================
   scene-map.css · Operation Head store map (Leaflet). The map chrome + pins +
   popups; the OSM tiles keep their own light look (normal for maps) in both themes.
   ========================================================================== */
.opmap { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--softer); }
.opmap__head { flex: none; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 18px 24px 14px; }
.opmap__title h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1.2rem + .8vw, 28px); letter-spacing: -.02em; }
.opmap__title p { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; max-width: 560px; line-height: 1.45; }
.opmap__ctrls { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.opmap__wrap { position: relative; flex: 1; min-height: 0; margin: 0 16px 16px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.opmap__canvas { position: absolute; inset: 0; background: var(--soft); }
.opmap-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: var(--text-soft); font-size: 13px; }
.opmap-fallback .mi { width: 26px; height: 26px; color: var(--text-soft); }

.opmap__legend { position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; box-shadow: var(--shadow); }
.opmap-leg { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.opmap-leg::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.opmap-leg.crit::before { background: var(--danger); } .opmap-leg.warn::before { background: var(--warn); } .opmap-leg.ok::before { background: var(--mint); }

/* health pins */
.opmap-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, .35); font-family: var(--font-display); font-weight: 800; font-size: 11px; color: #fff; }
.opmap-pin.crit { background: var(--danger); } .opmap-pin.warn { background: var(--warn); } .opmap-pin.ok { background: var(--mint); }
.opmap-pin.is-pulse { animation: opmap-pulse 1.8s ease-out infinite; }
@keyframes opmap-pulse { 0% { box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 0 0 0 rgba(220,38,38,.5); } 70% { box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 0 0 12px rgba(220,38,38,0); } 100% { box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 0 0 0 rgba(220,38,38,0); } }
@media (prefers-reduced-motion: reduce) { .opmap-pin.is-pulse { animation: none; } }

/* popup */
.leaflet-popup-content-wrapper { border-radius: 13px; box-shadow: 0 10px 34px rgba(0, 0, 0, .18); }
.leaflet-popup-content { margin: 12px 14px; }
.opmap-pop { min-width: 190px; font-family: var(--font); }
.opmap-pop__brand { font-family: var(--font-display); font-weight: 800; font-size: 11px; }
.opmap-pop__name { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; margin: 1px 0 6px; color: var(--text-1); }
.opmap-pop__row { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.opmap-pop__row b { font-family: var(--font-display); font-weight: 800; color: var(--text-1); }
.opmap-pop__row .up { color: var(--ok); } .opmap-pop__row .dn { color: var(--danger); }
.opmap-pop__issue { margin-top: 7px; font-size: 11.5px; color: #b42318; background: var(--danger-soft); padding: 5px 9px; border-radius: 8px; }
.opmap-pop__btn { margin-top: 10px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--mint); color: #fff; font-weight: 700; font-size: 12px; padding: 8px; border-radius: 9px; border: none; cursor: pointer; transition: background .15s; }
.opmap-pop__btn:hover { background: var(--mint-hover); }

@media (max-width: 720px) { .opmap__head { padding: 14px; } .opmap__ctrls { width: 100%; } }