/*
 * MapInspector — click-to-inspect panel.
 *
 * Reuses the existing map-popup vocabulary (.popup-header / .popup-title /
 * .popup-close / .popup-body / .popup-section / .section-label / .popup-stats /
 * .popup-stat / .stat-label / .stat-value / .popup-sep) so the panel reads as
 * part of the same surface family. Only inspector-specific structure gets new
 * class names, and every colour comes from an existing theme token so the panel
 * follows [data-theme="light"] with no extra rules.
 */

.wm-map-inspector {
  position: fixed;
  z-index: 1001;
  width: 340px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 40px var(--shadow-color, rgba(0, 0, 0, 0.45));
  overflow: hidden;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.wm-map-inspector:focus {
  outline: none;
}

.wm-map-inspector:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.wm-map-inspector .popup-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.wm-map-inspector-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* .popup-title defaults to var(--red) for alert popups; the inspector is
   neutral chrome, so it takes the standard text colour. */
.wm-map-inspector .popup-title {
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.wm-map-inspector-subtitle {
  font-size: calc(9px * var(--wm-panel-effective-scale, 1));
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* ── overlap picker ─────────────────────────────────────────────────────── */

.wm-map-inspector-picker {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  max-height: 30vh;
  overflow-y: auto;
}

.wm-map-inspector-picker[hidden] {
  display: none;
}

.wm-map-inspector-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.wm-map-inspector-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}

.wm-map-inspector-option:hover {
  background: var(--surface-hover);
}

.wm-map-inspector-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.wm-map-inspector-option.is-selected {
  background: var(--surface-active);
  border-color: var(--border-strong);
}

.wm-map-inspector-option-label {
  font-size: calc(11px * var(--wm-panel-effective-scale, 1));
  color: var(--text);
  overflow-wrap: anywhere;
}

.wm-map-inspector-option-source {
  font-size: calc(8px * var(--wm-panel-effective-scale, 1));
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── body ───────────────────────────────────────────────────────────────── */

.wm-map-inspector-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.wm-map-inspector .popup-stats {
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.wm-map-inspector .popup-stat {
  padding: 5px 7px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  min-width: 0;
}

/* Values must never be clipped — ids and codes are the point of this panel. */
.wm-map-inspector .stat-value {
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wm-map-inspector .popup-sep {
  background: var(--border-subtle);
}

.wm-map-inspector-coords {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}

.wm-map-inspector-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: calc(11px * var(--wm-panel-effective-scale, 1));
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 4px 6px;
  overflow-wrap: anywhere;
}

.wm-map-inspector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wm-map-inspector-chip {
  font-size: calc(9px * var(--wm-panel-effective-scale, 1));
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 2px 7px;
}

/* ── property tree ──────────────────────────────────────────────────────── */

.wm-map-inspector-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wm-map-inspector-row {
  display: grid;
  grid-template-columns: minmax(72px, 38%) 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.wm-map-inspector-row:last-child {
  border-bottom: none;
}

.wm-map-inspector-key {
  font-size: calc(9px * var(--wm-panel-effective-scale, 1));
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.wm-map-inspector-value {
  font-size: calc(11px * var(--wm-panel-effective-scale, 1));
  color: var(--text);
  /* No ellipsis, no max-width: full ids and URLs wrap instead of truncating. */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.wm-map-inspector-value.is-muted {
  color: var(--text-faint);
  font-style: italic;
}

.wm-map-inspector-hint {
  grid-column: 2;
  font-size: calc(9px * var(--wm-panel-effective-scale, 1));
  color: var(--text-muted);
}

.wm-map-inspector-branch {
  border-bottom: 1px solid var(--border-subtle);
}

.wm-map-inspector-branch > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  user-select: none;
}

.wm-map-inspector-branch > summary::-webkit-details-marker {
  display: none;
}

.wm-map-inspector-branch > summary::before {
  content: '\25B6';
  font-size: calc(7px * var(--wm-panel-effective-scale, 1));
  color: var(--text-muted);
  transition: transform 0.15s;
}

.wm-map-inspector-branch[open] > summary::before {
  transform: rotate(90deg);
}

.wm-map-inspector-branch > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.wm-map-inspector-count {
  font-size: calc(9px * var(--wm-panel-effective-scale, 1));
  color: var(--text-faint);
}

.wm-map-inspector-children {
  padding-left: 10px;
  border-left: 1px solid var(--border-subtle);
  margin-left: 3px;
}

/* ── raw JSON ───────────────────────────────────────────────────────────── */

.wm-map-inspector-raw > summary {
  font-size: calc(8px * var(--wm-panel-effective-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  padding: 3px 0;
}

.wm-map-inspector-raw > summary::-webkit-details-marker {
  display: none;
}

.wm-map-inspector-raw > summary::before {
  content: '\25B6  ';
  font-size: calc(7px * var(--wm-panel-effective-scale, 1));
}

.wm-map-inspector-raw[open] > summary::before {
  content: '\25BC  ';
}

.wm-map-inspector-raw > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.wm-map-inspector-json {
  margin: 4px 0 0;
  padding: 8px;
  max-height: 240px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: calc(10px * var(--wm-panel-effective-scale, 1));
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wm-map-inspector-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.wm-map-inspector-btn {
  font-family: inherit;
  font-size: calc(9px * var(--wm-panel-effective-scale, 1));
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.wm-map-inspector-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.wm-map-inspector-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.wm-map-inspector-renderer {
  font-size: calc(8px * var(--wm-panel-effective-scale, 1));
  color: var(--text-faint);
  letter-spacing: 0.5px;
}

/* ── mobile sheet ───────────────────────────────────────────────────────── */

.wm-map-inspector.is-sheet {
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  top: auto;
  width: auto;
  max-height: 62vh;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .wm-map-inspector-option,
  .wm-map-inspector-branch > summary::before,
  .wm-map-inspector-btn {
    transition: none;
  }
}