/* Leaflet maps (2D, SWOT, results, "on map" mode of the viewers) and their overlay controls. */
.map { position: absolute; inset: 0; background: var(--bg-2); }
.leaflet-container { font-family: inherit; background: var(--bg-2); }
.leaflet-control-attribution { font-size: 9.5px !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border-strong); }
.img-pixelated { image-rendering: pixelated; }
.map-tip { font-size: 12px; }
.map-tools { position: absolute; left: 10px; top: 10px; z-index: 610; display: flex; flex-direction: column; gap: 6px; }
.map-tools .sep { height: 1px; background: var(--border); margin: 2px 4px; }
.map-search { position: absolute; z-index: 620; top: 10px; left: 56px; display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 9px; padding: 4px; width: min(320px, calc(100% - 120px)); }
.map-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: 5px 6px; font-size: 13px; }
.search-results { position: absolute; z-index: 630; top: 52px; left: 56px; width: min(320px, calc(100% - 120px)); background: var(--panel); border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.search-results button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; font-size: 12.5px; color: var(--text-2); }
.search-results button:hover, .search-results button:focus { background: var(--panel-3); color: var(--text); }
.basemap-select { position: absolute; right: 10px; bottom: 22px; z-index: 620; display: flex; flex-wrap: wrap; gap: 4px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 9px; padding: 4px; max-width: calc(100% - 20px); }
.basemap-select button { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; color: var(--text-2); font-size: 12px; }
.basemap-select button:hover { color: var(--text); border-color: var(--border-strong); }
.basemap-select button.active { border-color: var(--accent); color: var(--text); background: var(--panel-3); }
.overlay-toggles { position: absolute; right: 10px; top: 10px; z-index: 620; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 9px; padding: 6px 10px; font-size: 12.5px; }
.coord { position: absolute; left: 10px; bottom: 22px; z-index: 550; pointer-events: none; background: #10243ae6; padding: 3px 8px; border-radius: 6px; font: 11px var(--mono); }
.coord:empty { display: none; }
.map-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 640; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; }
.offline-note { position: absolute; left: 10px; right: 10px; bottom: 60px; z-index: 600; padding: 6px 10px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); border-radius: 7px; font-size: 12px; }
.leaflet-container.drawing, .leaflet-container.drawing * { cursor: crosshair !important; }
.aoi-handle { width: 12px !important; height: 12px !important; margin: -6px 0 0 -6px !important; background: #fff; border: 2px solid var(--accent); border-radius: 2px; box-shadow: 0 0 0 1px #0008; }
.aoi-move { width: 22px !important; height: 22px !important; margin: -11px 0 0 -11px !important; background: var(--accent); color: var(--accent-ink); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; box-shadow: 0 0 0 2px #fff; }

/* swipe compare on maps */
.compare-line { position: absolute; z-index: 690; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #e8ffff; box-shadow: 0 0 6px #000a; touch-action: none; cursor: ew-resize; }
.compare-handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border: 3px solid #fff; background: #0e7490; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 900; }
.compare-line:focus-visible .compare-handle { outline: 3px solid var(--warn); }
.cmp-label { position: absolute; top: 10px; z-index: 560; pointer-events: none; max-width: 42%; padding: 4px 9px; border-radius: 7px; font-size: 12px; background: var(--panel); border: 1px solid var(--border-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-left { left: 56px; } .cmp-right { right: 10px; }

/* click card (results map) */
.inspect { position: absolute; right: 10px; top: 52px; z-index: 700; width: min(320px, calc(100% - 70px)); max-height: calc(100% - 110px); overflow-y: auto; background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.inspect-head { display: flex; align-items: center; gap: 8px; }
.inspect-head .mono { flex: 1; font-size: 11px; }
.inspect-head .icon-btn { width: 26px; height: 26px; }
.inspect-item { border-top: 1px solid var(--border); padding: 8px 0 4px; margin-top: 6px; }
.inspect-layer { font-weight: 700; font-size: 12px; color: var(--text-2); }
.inspect-class, .inspect-value { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.explain { margin: 4px 0 0; color: var(--text-2); line-height: 1.5; }
.offline-map { display: grid; }
.offline-svg { width: 100%; height: 100%; display: block; cursor: crosshair; }
.offline-bg { fill: var(--bg-2); }