/* SPDX-License-Identifier: Apache-2.0 */
/* SPDX-FileCopyrightText: 2026 Standard Magic */
/**
 * Maps plugin — public map UI (dashboard layout).
 *
 * Full-bleed map with floating panels: a top bar (brand + search + date +
 * filters + menu), left zoom/locate controls, a right Filters panel, an
 * on-map info popup, a bottom stats HUD, and modal flows for reporting and
 * About. Everything themes through the host brand tokens
 * (--brand-primary/-accent/-background/-panel/-text/-muted/-rule).
 */

.maps-app {
  --maps-primary: var(--brand-primary, #2f4a38);
  --maps-accent: var(--brand-accent, #b3592e);
  --maps-bg: var(--brand-background, #eef1ee);
  --maps-panel: var(--brand-panel, #ffffff);
  --maps-text: var(--brand-text, #1c211d);
  --maps-muted: var(--brand-muted, #6b7169);
  --maps-rule: var(--brand-rule, rgba(20, 30, 24, 0.12));
  --maps-blue: #2f6fed;
  --maps-fatal: #e0483c;
  --maps-injury: #ef8a2e;
  --maps-minor: #f2c53d;
  --maps-none: #9aa0a6;
  --maps-shadow: 0 18px 44px -18px rgba(15, 25, 18, 0.4);
  --maps-shadow-sm: 0 6px 18px -8px rgba(15, 25, 18, 0.28);
  --maps-radius: 18px;
  position: relative;
  width: 100%;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--maps-text);
  overflow: hidden;
  background: var(--maps-bg);
}
.maps-body { margin: 0; }
.maps-app--fullscreen { position: fixed; inset: 0; height: 100dvh; }
.maps-app *, .maps-app *::before, .maps-app *::after { box-sizing: border-box; }
.maps-app [hidden] { display: none !important; }
.maps-app button { font: inherit; }
.maps-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.maps-canvas { position: absolute; inset: 0; z-index: 1; }
.maps-noscript { padding: 40px 20px; max-width: 560px; margin: 0 auto; }

/* Placement: the whole map cursor becomes a pin so it's clear you're placing. */
.maps-app.is-placing .leaflet-container,
.maps-app.is-placing .leaflet-grab { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 4c-6 0-11 4.6-11 11 0 8 11 21 11 21s11-13 11-21c0-6.4-5-11-11-11z' fill='%23b3592e' stroke='white' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='15' r='4' fill='white'/%3E%3C/svg%3E") 20 38, crosshair; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.maps-topbar {
  position: absolute; z-index: 30;
  top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  background: var(--maps-panel); border: 1px solid var(--maps-rule);
  border-radius: 16px; box-shadow: var(--maps-shadow-sm);
}
.maps-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.maps-brand-tile {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--maps-primary); color: #fff;
}
.maps-brand-tile svg, .maps-brand-tile img { width: auto; height: 28px; max-width: 30px; }
.maps-brand-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.maps-brand-name { font-size: 18px; font-weight: 850; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.maps-brand-tag { font-size: 9.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--maps-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 2px; }
.maps-topsearch { position: relative; flex: 1 1 auto; min-width: 0; max-width: 460px; margin: 0 auto; }
.maps-topsearch-field {
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px;
  border: 1px solid var(--maps-rule); border-radius: 999px; background: color-mix(in srgb, var(--maps-text) 3%, var(--maps-panel));
}
.maps-topsearch-field:focus-within { border-color: var(--maps-primary); background: var(--maps-panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--maps-primary) 15%, transparent); }
.maps-topsearch-field svg { width: 18px; height: 18px; color: var(--maps-muted); flex: 0 0 auto; }
.maps-topsearch-field input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--maps-text); outline: none; }
.maps-topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.maps-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 15px; border: 1px solid var(--maps-rule);
  border-radius: 12px; background: var(--maps-panel); color: var(--maps-text);
  font-size: 13.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.maps-pill:hover { border-color: var(--maps-primary); }
.maps-pill svg { width: 17px; height: 17px; flex: 0 0 auto; }
.maps-pill-badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--maps-primary); color: #fff; font-size: 11px; font-weight: 800; }
.maps-pill--icon { padding: 0; width: 44px; justify-content: center; }

/* ── Left controls ────────────────────────────────────────────────────── */
.maps-leftctrls { position: absolute; z-index: 20; left: 14px; top: calc(var(--maps-top-h, 62px) + 22px); display: flex; flex-direction: column; gap: 8px; }
.maps-ctrl-label { display: none; }
.maps-ctrl-group { display: flex; flex-direction: column; background: var(--maps-panel); border: 1px solid var(--maps-rule); border-radius: 12px; box-shadow: var(--maps-shadow-sm); overflow: hidden; }
.maps-ctrl { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--maps-text); cursor: pointer; }
.maps-ctrl + .maps-ctrl { border-top: 1px solid var(--maps-rule); }
.maps-ctrl:hover { background: color-mix(in srgb, var(--maps-text) 5%, transparent); }
.maps-ctrl svg { width: 20px; height: 20px; }
.maps-ctrl.is-active { color: var(--maps-primary); }

/* ── Bottom stats HUD (dark) ───────────────────────────────────────────── */
.maps-hud {
  --hud-ink: #14201a; --hud-line: rgba(255,255,255,0.10); --hud-sub: rgba(255,255,255,0.62);
  position: absolute; z-index: 20;
  left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: stretch; gap: 8px;
  padding: 16px 20px;
  background: var(--hud-ink); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px; box-shadow: 0 22px 50px -20px rgba(8,14,10,0.7);
  color: #fff; overflow-x: auto;
}
.maps-hud-range { display: grid; align-content: center; gap: 2px; align-self: stretch; flex: 0 0 auto; padding: 4px 20px 4px 2px; margin-right: 4px; border-right: 1px solid var(--hud-line); position: relative; min-width: 128px; }
.maps-hud-range svg { width: 16px; height: 16px; }
.maps-hud-range-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hud-sub); }
.maps-hud-range-val { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.maps-hud-range-span { font-size: 12.5px; font-weight: 600; color: var(--hud-sub); }
.maps-hud-range-btn { position: absolute; left: 2px; bottom: 2px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--hud-line); border-radius: 10px; background: rgba(255,255,255,0.04); color: #fff; cursor: pointer; }
.maps-hud-range-btn:hover { background: rgba(255,255,255,0.10); }
.maps-hud-range-span + .maps-hud-range-btn { bottom: 2px; }
.maps-hud-range { padding-bottom: 44px; }
.maps-hud-scope { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(255,255,255,0.10); color: #fff; font-size: 10.5px; font-weight: 700; width: fit-content; }
.maps-hud-scope svg { width: 12px; height: 12px; color: currentColor; }
.maps-hud-stat { flex: 1 1 0; min-width: 116px; padding: 2px 15px; border-left: 1px solid var(--hud-line); display: grid; align-content: center; gap: 3px; }
.maps-hud-stat:first-of-type, .maps-hud-range + .maps-hud-stat { border-left: 0; }
.maps-hud-label { font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--hud-sub); }
.maps-hud-val { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.maps-hud-spark { margin-top: 6px; height: 30px; width: 100%; }
.maps-hud-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.maps-hud-ctx { margin-top: 5px; font-size: 11px; font-weight: 650; color: var(--hud-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maps-hud-ctx.is-muted { opacity: 0.6; }
.maps-hud-delta { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--hud-sub); }
.maps-hud-delta svg { width: 12px; height: 12px; }
.maps-delta-down { color: #6ec98a; }   /* fewer incidents = good */
.maps-delta-up { color: #ef8a7a; }      /* more incidents = bad */
.maps-hud-share { align-self: center; flex: 0 0 auto; margin-left: auto; padding-left: 8px; }
.maps-btn--onink { background: rgba(255,255,255,0.06); border-color: var(--hud-line); color: #fff; }
.maps-btn--onink:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); }
/* Loading skeleton shimmer (on dark) */
.maps-skel { display: block; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 37%, rgba(255,255,255,0.06) 63%); background-size: 400% 100%; animation: maps-shimmer 1.4s ease infinite; }
.maps-skel-sm { width: 70%; height: 10px; }
.maps-skel-lg { width: 54px; height: 26px; }
.maps-skel-spark { width: 100%; height: 100%; border-radius: 8px; }
@keyframes maps-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Date-range dropdown */
.maps-datewrap { position: relative; }
.maps-pill--date .maps-pill svg:last-child, .maps-pill--date > svg:last-child { opacity: .7; }
.maps-pill--date.is-open { border-color: var(--maps-primary); }
.maps-datemenu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 240px; padding: 8px; background: var(--maps-panel); border: 1px solid var(--maps-rule); border-radius: 14px; box-shadow: var(--maps-shadow); }
.maps-datemenu[hidden] { display: none !important; }
.maps-dm-group { padding: 4px 0; }
.maps-dm-group + .maps-dm-group { border-top: 1px solid var(--maps-rule); margin-top: 2px; }
.maps-dm-title { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--maps-muted); padding: 4px 10px 6px; }
.maps-dm-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--maps-text); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.maps-dm-item:hover { background: color-mix(in srgb, var(--maps-primary) 9%, transparent); }
.maps-dm-item.is-active { background: color-mix(in srgb, var(--maps-primary) 12%, transparent); color: var(--maps-primary); font-weight: 750; }
.maps-dm-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--maps-muted); }
.maps-dm-check svg { color: var(--maps-primary); }
.maps-dm-custom { color: var(--maps-text); }
.maps-dm-fields { display: grid; gap: 8px; padding: 8px 10px 6px; }
.maps-dm-fields[hidden] { display: none; }
.maps-dm-fields label { display: grid; gap: 3px; font-size: 12px; font-weight: 650; color: var(--maps-muted); }
.maps-dm-fields input { min-height: 38px; padding: 6px 10px; border: 1px solid var(--maps-rule); border-radius: 9px; background: var(--maps-panel); color: var(--maps-text); font: inherit; font-size: 13px; }
.maps-btn--sm { min-height: 38px; padding: 8px 14px; font-size: 13px; }

/* ── Floating panel base (Filters, About, popup) ──────────────────────── */
.maps-panelcard {
  position: absolute; z-index: 35;
  background: var(--maps-panel); border: 1px solid var(--maps-rule);
  border-radius: var(--maps-radius); box-shadow: var(--maps-shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.maps-panelcard[hidden] { display: none !important; }
.maps-panelcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.maps-panelcard-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.maps-panelcard-body { padding: 4px 20px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.maps-x {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--maps-rule); border-radius: 50%; background: var(--maps-panel);
  color: var(--maps-text); cursor: pointer;
}
.maps-x:hover { background: color-mix(in srgb, var(--maps-text) 5%, transparent); }
.maps-x svg { width: 17px; height: 17px; }

/* ── Filters panel (right) ────────────────────────────────────────────── */
.maps-filters { top: 84px; right: 14px; width: 340px; max-height: calc(100% - 210px); }
.maps-fsec { margin: 14px 0 0; }
.maps-fsec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 9px; }
.maps-fsec-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--maps-muted); }
.maps-fsec-action { font-size: 12.5px; font-weight: 650; color: var(--maps-primary); background: none; border: 0; cursor: pointer; }
.maps-fcheck { display: flex; align-items: center; gap: 11px; padding: 9px 2px; cursor: pointer; font-size: 14px; font-weight: 600; }
.maps-fcheck input { position: absolute; opacity: 0; pointer-events: none; }
.maps-fcheck-box { width: 20px; height: 20px; flex: 0 0 auto; border: 1.5px solid var(--maps-rule); border-radius: 6px; display: grid; place-items: center; }
.maps-fcheck input:checked + .maps-fcheck-box { background: var(--maps-primary); border-color: var(--maps-primary); }
.maps-fcheck input:checked + .maps-fcheck-box::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: translateY(-1px) rotate(45deg); }
.maps-fdot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.maps-vehrow { display: flex; gap: 8px; flex-wrap: wrap; }
.maps-vehbtn { width: 52px; height: 46px; display: grid; place-items: center; border: 1px solid var(--maps-rule); border-radius: 12px; background: var(--maps-panel); color: var(--maps-text); cursor: pointer; }
.maps-vehbtn:hover { border-color: var(--maps-primary); }
.maps-vehbtn.is-on { background: color-mix(in srgb, var(--maps-primary) 12%, var(--maps-panel)); border-color: var(--maps-primary); color: var(--maps-primary); }
.maps-vehbtn svg { width: 22px; height: 22px; }
.maps-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.maps-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--maps-rule); border-radius: 999px; background: var(--maps-panel); color: var(--maps-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.maps-chip.is-on { background: var(--maps-primary); border-color: var(--maps-primary); color: #fff; }
.maps-chip .maps-cat-dot { width: 9px; height: 9px; border-radius: 50%; }
.maps-filters-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--maps-rule); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.maps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--maps-rule); border-radius: 12px; background: var(--maps-panel); color: var(--maps-text); font-size: 14px; font-weight: 650; cursor: pointer; text-decoration: none; }
.maps-btn:hover { border-color: var(--maps-primary); }
.maps-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.maps-btn--primary { background: var(--maps-primary); border-color: var(--maps-primary); color: #fff; }
.maps-btn--primary:hover { filter: brightness(1.08); }
.maps-btn--ghost { border: 0; background: none; color: var(--maps-muted); }
.maps-btn--block { width: 100%; }
.maps-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── On-map info popup (badge + inline meta + info tiles) ──────────────── */
.maps-popup { z-index: 34; width: 420px; max-width: calc(100% - 28px); }
.maps-popup-body { position: relative; padding: 22px 22px 20px; }
.maps-popup-head { display: flex; align-items: flex-start; gap: 16px; margin: 0 44px 12px 0; }
.maps-popup-badge { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--maps-cat-color, var(--maps-primary)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--maps-cat-color, var(--maps-primary)) 75%, transparent); }
.maps-popup-badge svg, .maps-popup-badge img { width: 26px; height: 26px; }
.maps-popup-headtext { min-width: 0; padding-top: 1px; }
.maps-popup h3 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.maps-popup-metaline { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--maps-rule); flex-wrap: wrap; }
.maps-popup-vr { width: 1px; height: 18px; background: var(--maps-rule); }
.maps-popup-when { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--maps-muted); }
.maps-popup-when svg { width: 15px; height: 15px; }
.maps-sev-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.maps-sev-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.maps-sev-fatal, .maps-sev-critical { color: var(--maps-fatal); }
.maps-sev-high { color: var(--maps-injury); }
.maps-sev-medium { color: var(--maps-injury); }
.maps-sev-low { color: #2f8f57; }
.maps-popup-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.maps-poptile { flex: 1 1 160px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; align-items: center; }
.maps-poptile-ico { grid-row: 1 / span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--maps-text) 8%, transparent); color: var(--maps-text); }
.maps-poptile-ico svg, .maps-poptile-ico img { width: 20px; height: 20px; }
.maps-poptile-ico--accent { background: color-mix(in srgb, var(--maps-cat-color, var(--maps-primary)) 16%, transparent); color: var(--maps-cat-color, var(--maps-primary)); }
.maps-poptile-label { align-self: end; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--maps-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maps-poptile-val { align-self: start; font-size: 15px; font-weight: 750; overflow-wrap: anywhere; text-transform: capitalize; }
.maps-popup-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15px; font-weight: 750; color: var(--maps-blue); background: none; border: 0; cursor: pointer; padding: 0; }
.maps-popup-more svg { width: 17px; height: 17px; }
.maps-popup .maps-x { position: absolute; top: 16px; right: 16px; }

/* ── Detail modal (full record) + create + about share a modal shell ──── */
.maps-modal { position: absolute; inset: 0; z-index: 50; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 20px; background: color-mix(in srgb, var(--maps-text) 45%, transparent); }
.maps-modal[hidden] { display: none !important; }
.maps-modal-card { width: min(460px, 100%); max-height: calc(100% - 40px); background: var(--maps-panel); border-radius: 20px; box-shadow: var(--maps-shadow); display: flex; flex-direction: column; overflow: hidden; }
.maps-modal-head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 12px; }
.maps-modal-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.maps-modal-body { min-height: 0; padding: 6px 22px 22px; overflow-y: auto; }

/* Detail (mockup: app-icon hero + grouped info cards) — reused in modal */
.maps-report-hero { display: flex; align-items: flex-start; gap: 16px; margin: 4px 0 16px; }
.maps-hero-tile { flex: 0 0 auto; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 19px; color: #fff; background: var(--maps-cat-color, var(--maps-primary)); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--maps-cat-color, var(--maps-primary)) 70%, transparent); }
.maps-hero-tile svg, .maps-hero-tile img { width: 34px; height: 34px; }
.maps-hero-meta { min-width: 0; padding-top: 2px; }
.maps-hero-name { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.maps-detail-desc { margin: 14px 0 16px; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.maps-info-card { margin: 0 0 14px; border-radius: 16px; background: color-mix(in srgb, var(--maps-text) 4%, var(--maps-panel)); border: 1px solid color-mix(in srgb, var(--maps-text) 6%, transparent); overflow: hidden; }
.maps-info-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.maps-info-row + .maps-info-row { border-top: 1px solid color-mix(in srgb, var(--maps-text) 8%, transparent); }
.maps-info-ico { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--maps-text) 8%, transparent); color: var(--maps-text); }
.maps-info-ico svg, .maps-info-ico img { width: 19px; height: 19px; }
.maps-info-text { min-width: 0; display: grid; gap: 2px; }
.maps-info-text small { font-size: 12.5px; color: var(--maps-muted); }
.maps-info-text strong { font-size: 15.5px; font-weight: 650; overflow-wrap: anywhere; }
.maps-info-text strong.maps-info-cap { text-transform: capitalize; }
.maps-origin-link { display: inline-flex; align-items: center; gap: 5px; margin: 2px 16px 16px; font-size: 14.5px; font-weight: 650; color: var(--maps-blue); text-decoration: none; }
.maps-origin-link svg { width: 16px; height: 16px; }
.maps-report-foot { margin: 4px 2px 0; font-size: 13px; color: var(--maps-muted); }
.maps-detail-media { margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.maps-detail-media img { width: 80px; height: 80px; object-fit: cover; border-radius: 12px; border: 1px solid var(--maps-rule); }

/* Severity line for the full detail modal */
.maps-sev-line { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; font-weight: 650; }

/* ── About / Signal panel ─────────────────────────────────────────────── */
.maps-about-modal .maps-modal-card { width: min(1000px, 100%); }
.maps-about-modal .maps-modal-head { position: absolute; right: 0; top: 0; padding: 16px 16px 0; z-index: 2; }
.maps-about-modal .maps-modal-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.maps-about-modal .maps-modal-body { padding: 30px 34px 26px; }
.maps-about-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.maps-about-brand { display: flex; align-items: center; gap: 16px; }
.maps-about-logo { flex: 0 0 auto; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: var(--maps-primary); color: #fff; }
.maps-about-logo svg { width: auto; height: 50px; max-width: 54px; }
.maps-about-name { font-size: 46px; font-weight: 850; line-height: 1; letter-spacing: -0.02em; }
.maps-about-tag { margin-top: 6px; font-size: 13px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--maps-primary); }
.maps-about-illus { flex: 0 0 auto; width: 190px; max-width: 38%; }
.maps-about-illus svg { width: 100%; height: auto; display: block; }
.maps-about-lead { margin: 22px 0 10px; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; max-width: 560px; }
.maps-about-intro { margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--maps-muted); max-width: 620px; }
.maps-about-sec { margin: 0 0 26px; }
.maps-about-sec h3 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--maps-muted); }
.maps-actgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.maps-actcard { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border: 1px solid var(--maps-rule); border-radius: 16px; background: var(--maps-panel); text-align: left; color: inherit; font: inherit; }
button.maps-actcard { cursor: pointer; }
button.maps-actcard:hover { border-color: var(--maps-primary); box-shadow: var(--maps-shadow-sm); }
.maps-actcard-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 2px; }
.maps-actcard-ico svg { width: 23px; height: 23px; }
.maps-tone-green { background: color-mix(in srgb, #3f7d58 18%, transparent); color: #35704c; }
.maps-tone-amber { background: color-mix(in srgb, #ef8a2e 20%, transparent); color: #c96a15; }
.maps-tone-blue { background: color-mix(in srgb, #2f6fed 16%, transparent); color: #2f6fed; }
.maps-tone-violet { background: color-mix(in srgb, #7c5cd6 18%, transparent); color: #6b4fc4; }
.maps-actcard-title { font-size: 16px; font-weight: 800; }
.maps-actcard-desc { font-size: 13.5px; line-height: 1.5; color: var(--maps-muted); }
.maps-actcard-go { margin-top: auto; padding-top: 6px; color: var(--maps-muted); }
.maps-actcard-go svg { width: 20px; height: 20px; }
button.maps-actcard:hover .maps-actcard-go { color: var(--maps-primary); }
.maps-respills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.maps-respill { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--maps-rule); border-radius: 13px; background: var(--maps-panel); font-size: 14px; font-weight: 700; color: inherit; text-decoration: none; }
a.maps-respill:hover { border-color: var(--maps-primary); }
.maps-respill-ico { flex: 0 0 auto; color: var(--maps-primary); }
.maps-respill-ico svg { width: 22px; height: 22px; }
.maps-respill span:nth-of-type(1) { flex: 1 1 auto; line-height: 1.25; }
.maps-respill-go { flex: 0 0 auto; color: var(--maps-muted); }
.maps-respill-go svg { width: 15px; height: 15px; }
.maps-howrow { display: flex; align-items: flex-start; gap: 8px; padding: 20px; border: 1px solid var(--maps-rule); border-radius: 16px; background: color-mix(in srgb, var(--maps-text) 3%, var(--maps-panel)); }
.maps-howstep { flex: 1 1 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.maps-howstep-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--maps-panel); border: 1px solid var(--maps-rule); color: var(--maps-primary); }
.maps-howstep-ico svg { width: 24px; height: 24px; }
.maps-howstep-title { font-size: 14.5px; font-weight: 800; }
.maps-howstep-desc { font-size: 12.5px; line-height: 1.45; color: var(--maps-muted); max-width: 210px; }
.maps-howarrow { flex: 0 0 auto; align-self: center; color: var(--maps-muted); }
.maps-howarrow svg { width: 22px; height: 22px; }
.maps-about-note { display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--maps-rule); border-radius: 14px; background: color-mix(in srgb, var(--maps-text) 3%, var(--maps-panel)); }
.maps-about-note-ico { flex: 0 0 auto; color: var(--maps-primary); }
.maps-about-note-ico svg { width: 26px; height: 26px; }
.maps-about-note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--maps-muted); }
.maps-about-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding-top: 20px; border-top: 1px solid var(--maps-rule); }
.maps-footlink { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--maps-text); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; }
.maps-footlink:hover { color: var(--maps-primary); }
.maps-footlink svg { width: 17px; height: 17px; color: var(--maps-muted); }

/* ── Create form ──────────────────────────────────────────────────────── */
.maps-loc-chip { display: flex; align-items: center; gap: 11px; padding: 11px 13px; margin: 0 0 16px; border: 1px solid var(--maps-rule); border-radius: 13px; background: color-mix(in srgb, var(--maps-primary) 6%, var(--maps-panel)); }
.maps-loc-chip .maps-loc-ico { width: 20px; height: 20px; color: var(--maps-accent); flex: 0 0 auto; }
.maps-loc-chip .maps-loc-text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.maps-loc-chip .maps-loc-text small { display: block; color: var(--maps-muted); font-size: 11.5px; }
.maps-loc-chip button { flex: 0 0 auto; border: 0; background: none; color: var(--maps-primary); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.maps-form label { display: grid; gap: 6px; margin: 0 0 14px; font-size: 13px; font-weight: 650; }
.maps-form label > span .maps-req { color: var(--maps-accent); }
.maps-form input[type="text"], .maps-form input[type="email"], .maps-form input[type="number"],
.maps-form input[type="datetime-local"], .maps-form select, .maps-form textarea {
  width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--maps-rule);
  border-radius: 11px; background: var(--maps-panel); color: var(--maps-text); font: inherit; font-size: 14px;
}
.maps-form input:focus, .maps-form select:focus, .maps-form textarea:focus { outline: none; border-color: var(--maps-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--maps-primary) 15%, transparent); }
.maps-form textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.maps-form select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7169' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
.maps-form .maps-hint { font-size: 11.5px; font-weight: 450; color: var(--maps-muted); }
.maps-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.maps-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; border: 1.5px solid var(--maps-rule); border-radius: 6px; background: var(--maps-panel); cursor: pointer; position: relative; }
.maps-check input[type="checkbox"]:checked { background: var(--maps-primary); border-color: var(--maps-primary); }
.maps-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.maps-multi { display: flex; flex-wrap: wrap; gap: 7px; }
.maps-multi-opt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border: 1px solid var(--maps-rule); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; }
.maps-multi-opt input { position: absolute; opacity: 0; pointer-events: none; }
.maps-multi-opt.is-on { background: var(--maps-primary); border-color: var(--maps-primary); color: #fff; }
.maps-multi-opt .maps-mode-ico { width: 17px; height: 17px; flex: 0 0 auto; }
.maps-mode-ico svg { width: 100%; height: 100%; display: block; }
.maps-mode-inline { display: inline-flex; width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.maps-mode-inline svg { width: 100%; height: 100%; }
.maps-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.maps-cat-pick { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1.5px solid var(--maps-rule); border-radius: 12px; background: var(--maps-panel); cursor: pointer; color: inherit; font-size: 13px; font-weight: 640; text-align: left; }
.maps-cat-pick .maps-cat-ico { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--maps-cat-color, var(--maps-primary)); }
.maps-cat-pick .maps-cat-ico svg { width: 17px; height: 17px; }
.maps-cat-pick.is-selected { border-color: var(--maps-cat-color, var(--maps-primary)); background: color-mix(in srgb, var(--maps-cat-color, var(--maps-primary)) 9%, var(--maps-panel)); }
.maps-typing-field { position: relative; display: block; }
.maps-typing-field textarea { display: block; }
.maps-typing { position: absolute; left: 15px; top: 14px; display: flex; align-items: center; gap: 5px; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.maps-typing.is-on { opacity: 1; }
.maps-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--maps-blue); animation: maps-typing-bounce 1.3s ease-in-out infinite; }
.maps-typing-dot:nth-child(2) { animation-delay: .18s; }
.maps-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes maps-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.maps-form-error { margin: 0 0 12px; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(160, 50, 30, 0.4); background: rgba(180, 60, 40, 0.09); color: #8a2b1c; font-size: 13px; font-weight: 600; }
.maps-form-error[hidden] { display: none; }
.maps-success { text-align: center; padding: 26px 8px; }
.maps-success svg { width: 46px; height: 46px; color: var(--maps-primary); }
.maps-success h3 { margin: 14px 0 6px; }
.maps-success p { margin: 0 0 16px; color: var(--maps-muted); font-size: 14px; }

/* Placement bar */
.maps-placebar { position: absolute; z-index: 40; left: 50%; transform: translateX(-50%); bottom: 118px; width: min(560px, calc(100% - 28px)); padding: 12px 14px; border-radius: var(--maps-radius); background: var(--maps-panel); border: 1px solid var(--maps-rule); box-shadow: var(--maps-shadow); display: grid; gap: 10px; }
.maps-placebar[hidden] { display: none !important; }
.maps-placebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.maps-placebar-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 0 2px 2px; }
.maps-placebar-title svg { width: 16px; height: 16px; color: var(--maps-accent); }
/* Point / Zone toggle */
.maps-placetoggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--maps-rule); border-radius: 999px; background: color-mix(in srgb, var(--maps-text) 4%, transparent); flex: 0 0 auto; }
.maps-placetoggle-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 0; border-radius: 999px; background: none; color: var(--maps-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.maps-placetoggle-btn svg { width: 15px; height: 15px; }
.maps-placetoggle-btn.is-on { background: var(--maps-panel); color: var(--maps-primary); box-shadow: var(--maps-shadow-sm); }
/* Floating confirm/cancel that flank the placed pin */
.maps-place-actions { position: absolute; z-index: 41; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 58px; pointer-events: none; }
.maps-place-actions[hidden] { display: none !important; }
.maps-place-act { pointer-events: auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; cursor: pointer; box-shadow: 0 6px 16px -4px rgba(0,0,0,.5); }
.maps-place-act svg { width: 20px; height: 20px; }
.maps-place-ok { background: #2f8f57; color: #fff; }
.maps-place-x { background: var(--maps-fatal); color: #fff; }
.maps-place-act:hover { filter: brightness(1.08); }
/* Zone resize handle on the ring edge */
.maps-zone-handle { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--maps-fatal); box-shadow: 0 2px 6px rgba(0,0,0,.4); cursor: ew-resize; }
.maps-placebar-search { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 15px; border: 1px solid var(--maps-rule); border-radius: 999px; }
.maps-placebar-search:focus-within { border-color: var(--maps-primary); }
.maps-placebar-search svg { width: 17px; height: 17px; color: var(--maps-muted); flex: 0 0 auto; }
.maps-placebar-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; outline: none; color: var(--maps-text); }
.maps-placebar-clear { border: 0; background: none; color: var(--maps-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; flex: 0 0 auto; }
.maps-placebar-hint { font-size: 12px; color: var(--maps-muted); padding: 0 2px; min-height: 16px; }
.maps-placebar-hint.is-warn { color: var(--maps-accent); font-weight: 650; }
.maps-placebar-actions { display: flex; gap: 10px; }
.maps-placebar-actions .maps-btn { flex: 1 1 auto; }
.maps-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; border: 1px solid var(--maps-rule); border-radius: 12px; background: var(--maps-panel); box-shadow: var(--maps-shadow); overflow: hidden; }
.maps-placebar .maps-search-results { top: auto; bottom: calc(100% + 6px); }
.maps-search-results button { display: block; width: 100%; padding: 11px 15px; border: 0; border-bottom: 1px solid var(--maps-rule); background: none; text-align: left; font-size: 13px; color: inherit; cursor: pointer; }
.maps-search-results button:last-child { border-bottom: 0; }
.maps-search-results button:hover { background: color-mix(in srgb, var(--maps-primary) 8%, transparent); }

/* ── Report FAB (opens the placement flow) ────────────────────────────── */
.maps-fab { position: absolute; z-index: 25; right: 14px; bottom: 118px; min-height: 50px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--maps-accent); color: #fff; font-size: 15px; font-weight: 750; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; box-shadow: var(--maps-shadow); }
.maps-fab svg { width: 19px; height: 19px; }
.maps-fab:hover { filter: brightness(1.06); }

/* ── Toast ────────────────────────────────────────────────────────────── */
.maps-toast { position: absolute; z-index: 60; left: 50%; transform: translateX(-50%) translateY(10px); bottom: 118px; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: var(--maps-text); color: var(--maps-panel); font-size: 13px; font-weight: 650; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: calc(100vw - 32px); }
.maps-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.maps-toast button { border: 0; border-radius: 999px; padding: 5px 12px; background: var(--maps-accent); color: #fff; font-weight: 700; cursor: pointer; }

/* ── Markers ──────────────────────────────────────────────────────────── */
.maps-marker { background: transparent; border: 0; }
.maps-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Data markers: severity-colored teardrop with the mode/category glyph inside. */
.maps-pin { position: relative; width: 30px; height: 40px; }
.maps-pin::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%) rotate(45deg); width: 26px; height: 26px; background: var(--maps-pin-color, var(--maps-none)); border: 2px solid #fff; border-radius: 50% 50% 50% 2px; box-shadow: 0 4px 9px -2px rgba(0,0,0,.45); }
.maps-pin-ico { position: absolute; left: 50%; top: 12px; transform: translate(-50%, -50%); width: 15px; height: 15px; color: #fff; display: grid; place-items: center; z-index: 1; }
.maps-pin-ico svg, .maps-pin-ico img { width: 15px; height: 15px; display: block; }
.maps-pin.is-selected { z-index: 1000; }
.maps-pin.is-selected::before { width: 34px; height: 34px; border-width: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--maps-pin-color, var(--maps-primary)) 26%, transparent), 0 8px 18px -4px rgba(0,0,0,.5); }
.maps-pin.is-selected .maps-pin-ico { top: 15px; width: 19px; height: 19px; }
.maps-pin.is-selected .maps-pin-ico svg, .maps-pin.is-selected .maps-pin-ico img { width: 19px; height: 19px; }
.maps-marker-pin { position: relative; width: 46px; height: 56px; }
.maps-marker-tile { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 14px; background: var(--maps-cat-color, var(--maps-primary)); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px -6px rgba(0,0,0,.5); }
.maps-marker-tile svg, .maps-marker-tile img { width: 24px; height: 24px; }
.maps-marker-pin::after { content: ""; position: absolute; left: 50%; top: 40px; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: var(--maps-cat-color, var(--maps-primary)); border-radius: 3px; box-shadow: 4px 4px 8px -4px rgba(0,0,0,.4); }
.maps-cluster { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; font-weight: 800; font-size: 13px; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.maps-place-marker { animation: maps-drop .3s cubic-bezier(.2,.8,.3,1.2); }
@keyframes maps-drop { 0% { transform: translateY(-16px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* Leaflet chrome */
.maps-app .leaflet-control-zoom { display: none; } /* we render our own */
.maps-app .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.82); }

/* ── Mobile app-shell components ─────────────────────────────────────────
   The hamburger + search buttons, the light Overview sheet, the section list
   view and the bottom tab bar are all display:none on desktop; the ≤820px
   media block below switches them on and the dark HUD off. */
.maps-topmenu, .maps-topsearchbtn { display: none; flex: 0 0 auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--maps-rule); border-radius: 12px; background: var(--maps-panel); color: var(--maps-text); cursor: pointer; }
.maps-topmenu svg, .maps-topsearchbtn svg { width: 21px; height: 21px; }
.maps-sheet, .maps-listview, .maps-tabbar { display: none; }

/* Light "Overview" sheet */
.maps-sheet { position: absolute; z-index: 24; left: 8px; right: 8px; bottom: calc(var(--maps-tabbar-h, 58px) + 8px); flex-direction: column; gap: 10px; padding: 6px 14px 14px; background: var(--maps-panel); border: 1px solid var(--maps-rule); border-radius: 22px; box-shadow: var(--maps-shadow); }
.maps-sheet-grip { display: block; width: 42px; height: 5px; margin: 2px auto 0; padding: 0; border: 0; border-radius: 999px; background: var(--maps-rule); cursor: pointer; }
.maps-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.maps-sheet-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.maps-sheet-title > svg { width: 22px; height: 22px; color: var(--maps-primary); flex: 0 0 auto; }
.maps-sheet-title strong { display: block; font-size: 17px; font-weight: 820; letter-spacing: -0.01em; }
.maps-sheet-title small { display: block; font-size: 12px; font-weight: 600; color: var(--maps-muted); }
.maps-sheet-more { display: inline-flex; align-items: center; gap: 1px; padding: 8px 8px 8px 13px; border: 1px solid var(--maps-rule); border-radius: 999px; background: var(--maps-panel); color: var(--maps-accent); font-size: 13px; font-weight: 750; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.maps-sheet-more svg { width: 16px; height: 16px; }
.maps-sheet-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -14px; padding: 2px 14px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.maps-sheet-cards::-webkit-scrollbar { display: none; }
.maps-kpi { scroll-snap-align: start; flex: 0 0 45%; min-width: 148px; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--maps-rule); border-radius: 16px; background: color-mix(in srgb, var(--maps-text) 2.5%, var(--maps-panel)); }
.maps-kpi-label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--maps-muted); }
.maps-kpi-val { font-size: 29px; font-weight: 820; letter-spacing: -0.02em; line-height: 1.1; }
.maps-kpi-spark { height: 28px; margin: 5px 0 3px; }
.maps-kpi-spark svg { width: 100%; height: 100%; display: block; }
.maps-kpi-peak { font-size: 11.5px; font-weight: 600; color: var(--maps-muted); }
.maps-kpi-peak.is-muted { opacity: .75; }
.maps-kpi-delta { display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; font-size: 11.5px; font-weight: 750; }
.maps-kpi-delta svg { width: 13px; height: 13px; }
.maps-kpi-delta.maps-delta-up { color: var(--maps-fatal); }
.maps-kpi-delta.maps-delta-down { color: #1f9d57; }
.maps-kpi-delta.maps-delta-flat { color: var(--maps-muted); }
.maps-sheet-foot { display: none; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--maps-rule); }
.maps-sheet-range { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.maps-sheet-range svg { width: 16px; height: 16px; color: var(--maps-muted); flex: 0 0 auto; }
.maps-sheet-range-label { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--maps-muted); display: block; }
.maps-sheet-range-val { font-size: 14px; font-weight: 750; display: block; }
.maps-sheet.is-expanded .maps-sheet-cards { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin: 0; padding: 2px 0; }
.maps-sheet.is-expanded .maps-kpi { flex: initial; min-width: 0; }
.maps-sheet.is-expanded .maps-sheet-foot { display: flex; }

/* Section list view (Reports / Incidents / Saved) */
.maps-listview { position: absolute; z-index: 26; left: 0; right: 0; top: calc(var(--maps-top-h, 120px) + 22px); bottom: var(--maps-tabbar-h, 58px); flex-direction: column; background: var(--maps-bg); border-radius: 20px 20px 0 0; box-shadow: 0 -14px 40px -22px rgba(15,25,18,.5); overflow: hidden; }
.maps-lv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 13px; border-bottom: 1px solid var(--maps-rule); background: var(--maps-panel); }
.maps-lv-heading h2 { margin: 0; font-size: 19px; font-weight: 820; letter-spacing: -0.01em; }
.maps-lv-heading span { font-size: 12.5px; font-weight: 650; color: var(--maps-muted); }
.maps-lv-close { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--maps-rule); border-radius: 11px; background: var(--maps-panel); color: var(--maps-text); cursor: pointer; }
.maps-lv-close svg { width: 21px; height: 21px; }
.maps-lv-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
.maps-lv-row { display: flex; align-items: stretch; gap: 8px; }
.maps-lv-row + .maps-lv-row { margin-top: 8px; }
.maps-lv-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--maps-rule); border-radius: 14px; background: var(--maps-panel); cursor: pointer; text-align: left; color: inherit; }
.maps-lv-open:active { background: color-mix(in srgb, var(--maps-primary) 6%, var(--maps-panel)); }
.maps-lv-ico { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; }
.maps-lv-ico svg, .maps-lv-ico img { width: 20px; height: 20px; }
.maps-lv-body { flex: 1 1 auto; min-width: 0; }
.maps-lv-title { display: block; font-size: 14.5px; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maps-lv-meta { display: block; font-size: 12px; color: var(--maps-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maps-lv-sev { flex: 0 0 auto; align-self: center; font-size: 10.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .03em; }
.maps-lv-save { flex: 0 0 auto; width: 46px; display: grid; place-items: center; border: 1px solid var(--maps-rule); border-radius: 14px; background: var(--maps-panel); color: var(--maps-muted); cursor: pointer; }
.maps-lv-save svg { width: 20px; height: 20px; }
.maps-save.is-on { color: var(--maps-accent); border-color: color-mix(in srgb, var(--maps-accent) 40%, var(--maps-rule)); }
.maps-save.is-on svg { fill: currentColor; }
.maps-lv-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 44px 30px; text-align: center; color: var(--maps-muted); }
.maps-lv-empty svg { width: 40px; height: 40px; opacity: .45; }
.maps-lv-empty p { margin: 0; font-size: 14px; line-height: 1.5; max-width: 260px; }

/* Bottom tab bar */
.maps-tabbar { position: absolute; z-index: 45; left: 0; right: 0; bottom: 0; align-items: stretch; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--maps-panel) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--maps-rule); }
.maps-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--maps-muted); cursor: pointer; font: inherit; }
.maps-tab-ico { width: 24px; height: 24px; display: grid; place-items: center; }
.maps-tab-ico svg { width: 23px; height: 23px; }
.maps-tab-label { font-size: 10.5px; font-weight: 700; }
.maps-tab.is-active { color: var(--maps-accent); }
.maps-tab.is-active .maps-tab-ico { transform: translateY(-1px); }

/* ── Responsive ───────────────────────────────────────────────────────── */

/* Tablet & down: the HUD becomes a grid (no horizontal scrollbar). Time-range
   spans the top with Share; the four stats sit in an even grid below. */
@media (max-width: 1080px) {
  .maps-hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; overflow: visible; align-items: start; padding: 14px 16px; }
  .maps-hud-range { grid-column: 1 / 4; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; border-right: 0; padding: 0; min-width: 0; }
  .maps-hud-range-label { width: 100%; }
  .maps-hud-range-val { font-size: 20px; }
  .maps-hud-range-btn { position: static; order: 5; margin-left: auto; }
  .maps-hud-scope { margin-top: 0; }
  .maps-hud-share { grid-column: 4 / 5; grid-row: 1; align-self: start; justify-self: end; margin: 0; padding: 0; }
  .maps-hud-stat { border-left: 0; padding: 0; min-width: 0; }
  .maps-hud-val { font-size: 27px; }
}

/* ≤820px: switch to the native app-shell — hamburger top bar, light Overview
   sheet, bottom tab bar, full-screen section lists. The dark HUD steps out. */
@media (max-width: 820px) {
  .maps-hud { display: none; }
  .maps-sheet { display: flex; }
  .maps-listview { display: flex; }
  .maps-tabbar { display: flex; }
  .maps-topmenu, .maps-topsearchbtn { display: inline-flex; }

  /* Top bar becomes a three-row grid: menu · brand · search / field / pills. */
  .maps-topbar { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "menu brand searchbtn" "search search search" "actions actions actions"; align-items: center; gap: 9px 10px; padding: 9px 11px; }
  .maps-topmenu { grid-area: menu; }
  .maps-topsearchbtn { grid-area: searchbtn; }
  .maps-brand { grid-area: brand; justify-content: center; gap: 9px; min-width: 0; }
  .maps-brand-name { font-size: 17px; }
  .maps-brand-tag { display: block; font-size: 7.5px; letter-spacing: .04em; }
  .maps-brand-tile { width: 38px; height: 38px; }
  .maps-topsearch { grid-area: search; max-width: none; margin: 0; }
  .maps-topbar-actions { grid-area: actions; gap: 8px; }
  .maps-topbar-actions .maps-datewrap { flex: 1 1 0; }
  .maps-topbar-actions .maps-datewrap .maps-pill { width: 100%; justify-content: space-between; }
  .maps-topbar-actions > .maps-pill { flex: 1 1 0; justify-content: center; }
  .maps-topbar-actions .maps-pill--icon { display: none; } /* replaced by hamburger + More tab */
  .maps-datemenu { width: min(300px, calc(100vw - 28px)); left: 0; right: auto; }

  /* Circular report FAB (label hidden). Bottom offset comes from layoutOverlays. */
  .maps-fab { right: 16px; padding: 0; width: 56px; height: 56px; min-height: 0; border-radius: 50%; justify-content: center; gap: 0; }
  .maps-fab-label { display: none; }
  .maps-fab svg { width: 24px; height: 24px; }

  /* Left controls: hide zoom, show labeled Locate / Layers cards. */
  .maps-leftctrls .maps-ctrl-group:not(.maps-ctrl-group--labeled) { display: none; }
  .maps-ctrl-group--labeled { background: transparent; border: 0; box-shadow: none; overflow: visible; gap: 8px; }
  .maps-ctrl-group--labeled .maps-ctrl { width: 60px; height: auto; flex-direction: column; gap: 3px; padding: 9px 4px 8px; background: var(--maps-panel); border: 1px solid var(--maps-rule); border-radius: 14px; box-shadow: var(--maps-shadow-sm); }
  .maps-ctrl-label { display: block; font-size: 11px; font-weight: 700; line-height: 1; }

  /* Floating panels clear the tab bar + sheet stack. */
  .maps-filters { top: auto; bottom: calc(var(--maps-bottom-h, 220px) + 16px); right: 14px; left: 14px; width: auto; max-height: 50dvh; }
  .maps-popup { left: 14px !important; right: 14px !important; bottom: calc(var(--maps-bottom-h, 220px) + 16px) !important; top: auto !important; width: auto !important; }
  .maps-placebar-head { flex-wrap: wrap; }
}

/* Phones: bottom-sheet modals, compact chrome. */
@media (max-width: 560px) {
  .maps-app { --maps-radius: 16px; }
  .maps-topsearch-field { height: 42px; }
  .maps-pill { height: 42px; }
  .maps-kpi { flex-basis: 62%; }
  .maps-tab-label { font-size: 10px; }
  .maps-modal { padding: 0; align-items: flex-end; }
  .maps-modal-card { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  /* An embed is shorter than the browser viewport: keep the close control and
     scrollable detail body inside the map instead of clipping its top edge. */
  .cms-maps-embed .maps-modal-card { max-height: 100%; }
  .maps-about-modal .maps-modal-card { width: 100%; }
  .maps-actgrid, .maps-respills { grid-template-columns: 1fr 1fr; }
  .maps-about-name { font-size: 34px; }
  .maps-about-illus { display: none; }
  .maps-howrow { flex-direction: column; }
  .maps-howarrow { transform: rotate(90deg); }
  /* On phones the placebar already carries big Cancel/Place buttons, and the
     floating on-map circles would collide with it — drop them here. */
  .maps-place-actions { display: none !important; }
}

/* Grab cursor while moving the placement pin. */
.maps-place-marker { cursor: grab; }
.maps-place-marker:active { cursor: grabbing; }
.leaflet-dragging .maps-place-marker { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) { .maps-app * { animation: none !important; transition: none !important; } }

/* ── Reporter attachments ─────────────────────────────────────────────────
   Files upload to a private quarantine on drop; the list shows per-file
   state so a reporter knows what actually made it. */
.maps-drop { display: block; margin: 10px 0 4px; }
.maps-drop-zone { display: block; margin-top: 6px; padding: 18px 14px; border: 1.5px dashed var(--maps-border, #c9d0d8); border-radius: 10px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.maps-drop-zone:hover, .maps-drop-zone:focus-visible, .maps-drop-zone.is-over { border-color: var(--maps-accent, #1f6feb); background: rgba(31, 111, 235, .06); outline: none; }
.maps-drop-copy { font-size: 13px; line-height: 1.5; }
.maps-drop-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.maps-drop-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.maps-drop-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maps-drop-ok { color: #1a7f37; font-weight: 600; }
.maps-drop-err { color: #b3472d; font-weight: 600; }
.maps-drop-x { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.maps-drop-x:hover { opacity: 1; }

/* ── Report modal: wide two-column layout ─────────────────────────────────
   The report form is long (location, 8 categories, title, description, date,
   attachments, contact), and at 460px it forced several screens of scrolling
   on a desktop that had room to spare. Widening the card and flowing the
   fields into two columns fits nearly the whole form above the fold.
   Full-width rows (.maps-f-wide) opt out where a field needs the span. */
.maps-report-modal .maps-modal-card { width: min(940px, 100%); }

@media (min-width: 760px) {
  .maps-report-modal .maps-modal-body { padding: 6px 26px 24px; }
  .maps-report-modal .maps-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    align-items: start;
  }
  /* Rows that read badly when halved. */
  .maps-report-modal .maps-form > .maps-f-wide,
  .maps-report-modal .maps-form > .maps-form-error,
  .maps-report-modal .maps-form > .maps-drop,
  .maps-report-modal .maps-form > .maps-btn--block { grid-column: 1 / -1; }
  /* The category label sits directly above its grid, not in a column of its own. */
  .maps-report-modal .maps-form > label.maps-f-wide { margin-bottom: -4px; }
  /* 8 categories in 4 columns is two rows instead of four. */
  .maps-report-modal .maps-cat-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  /* Title gets a top margin in the single-column build; the grid gap covers it. */
  .maps-report-modal .maps-form > label[style] { margin-top: 0 !important; }
  .maps-report-modal .maps-form textarea { min-height: 104px; }
}

/* Compact pass for the wide report form: every row that is not the
   description gives back a few pixels, and the card claims more of the
   viewport, so the whole form lands within about one screen. */
@media (min-width: 760px) {
  .maps-report-modal { padding: 12px; }
  .maps-report-modal .maps-modal-card { max-height: calc(100% - 24px); }
  .maps-report-modal .maps-modal-head { padding: 14px 26px 8px; }
  .maps-report-modal .maps-form { gap: 10px 22px; }
  .maps-report-modal .maps-cat-pick { padding: 9px 11px; }
  .maps-report-modal .maps-loc-chip { padding: 10px 12px; }
  .maps-report-modal .maps-form textarea { min-height: 88px; }
  /* The dropzone keeps its full-width span: measured at zero height cost,
     and a half-width drop target just leaves dead space beside it. */
  .maps-report-modal .maps-drop-zone { padding: 12px 10px; }
}