/* ============================================================================
 * Map — cartographic styles. Muted fills, expressive strokes.
 * ==========================================================================*/

.a-map svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: var(--map-bg);
}
.a-map svg.dragging { cursor: grabbing; }

/* Generic feature paint. Layer-specific paints override below. */
.a-map path.feature {
  fill: var(--paper-warm);
  stroke: var(--stroke-district);
  stroke-width: 0.5;
  stroke-linejoin: round;
  transition: fill var(--motion-fast) var(--ease),
              stroke-width var(--motion-fast) var(--ease),
              opacity var(--motion-fast) var(--ease);
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}
.a-map path.feature.hovered {
  fill: var(--sel-bg);
  stroke: var(--sel);
  stroke-width: 1.2;
}
.a-map path.feature.selected {
  fill: var(--sel-bg) !important;
  stroke: var(--sel);
  stroke-width: 1.6;
}

/* -- Districts as the atlas base ---------------------------------------- */
.a-map .layer-districts path.feature {
  fill: var(--paper-warm);
  stroke: var(--stroke-district);
  stroke-width: 0.45;
}

/* Choropleth by division. */
.a-map svg.mode-division .layer-districts path[data-division="Ajmer"]     { fill: var(--div-Ajmer);     fill-opacity: 0.85; }
.a-map svg.mode-division .layer-districts path[data-division="Bharatpur"] { fill: var(--div-Bharatpur); fill-opacity: 0.85; }
.a-map svg.mode-division .layer-districts path[data-division="Bikaner"]   { fill: var(--div-Bikaner);   fill-opacity: 0.85; }
.a-map svg.mode-division .layer-districts path[data-division="Jaipur"]    { fill: var(--div-Jaipur);    fill-opacity: 0.85; }
.a-map svg.mode-division .layer-districts path[data-division="Jodhpur"]   { fill: var(--div-Jodhpur);   fill-opacity: 0.85; }
.a-map svg.mode-division .layer-districts path[data-division="Kota"]      { fill: var(--div-Kota);      fill-opacity: 0.85; }
.a-map svg.mode-division .layer-districts path[data-division="Udaipur"]   { fill: var(--div-Udaipur);   fill-opacity: 0.85; }

/* Highlight retained new districts. */
.a-map svg.mode-new .layer-districts path[data-new="true"] {
  fill: var(--sym-tr-soft); stroke: var(--sym-tr); stroke-width: 1.1;
}
.a-map svg.mode-new .layer-districts path[data-new="false"] { opacity: 0.35; }

/* When environment / reader mode is active, districts recede. */
.a-map svg.mode-env    .layer-districts path.feature { opacity: 0.42; }
.a-map svg.mode-reader .layer-districts path.feature { opacity: 0.28; }

/* Districts must always be clickable regardless of mode.
 * SVG's default `pointer-events: visiblePainted` requires a *painted*
 * fill; when opacity is faded to 0.15-0.42 in thematic modes, some
 * browsers stop registering hits inside the polygons and clicks pass
 * through to the <svg> root. `pointer-events: all` forces districts
 * to receive events regardless of paint visibility — essential for the
 * DistrictProfile click pipeline to work in every mode. */
.a-map .layer-districts path.feature { pointer-events: all; }

/* -- Overlays: north arrow, scale bar, zoom pill, locator inset -------- */
.a-map .overlay {
  position: absolute;
  pointer-events: none;
  color: var(--ink-2);
  font-family: var(--serif);
  z-index: 4;
}

/* Compass sits at bottom-LEFT (top-right was permanently covered by
 * the selection detail panel + sikhwal callouts). Bottom-left is
 * otherwise empty since LocatorInset is hidden by CalloutMode. */
.a-map .overlay.north {
  bottom: var(--sp-4); left: var(--sp-4);
  width: 44px; height: 44px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hair);
  border-radius: 50%;
  padding: 2px;
  box-sizing: border-box;
}

/* Mobile map-chrome overrides are appended at the very END of this
 * file (search for MOBILE MAP CHROME) so they win the cascade over
 * the desktop .a-map .map-controls rule that sits later in the file. */
.a-map .overlay.north svg { width: 100%; height: 100%; }

.a-map .overlay.scale {
  left: 50%; transform: translateX(-50%); bottom: var(--sp-4);
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--ink-2);
  text-align: center;
  padding: 3px 10px 5px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hair);
  border-radius: var(--rad-sm);
}
.a-map .overlay.scale .bar {
  height: 3px; background: var(--ink-2);
  border: 1px solid var(--ink-2);
  margin: 2px auto 0;
}

.a-map .overlay.zoom {
  right: var(--sp-4); bottom: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--t-meta);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(4px);
  padding: 3px 10px;
  border: 1px solid var(--hair);
  border-radius: var(--rad-pill);
  color: var(--ink-3);
}

/* Locator inset — bottom-left mini-map with India + Rajasthan + viewport box */
.a-map .overlay.locator {
  left: var(--sp-4); bottom: var(--sp-4);
  width: 140px; height: 140px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hair);
  border-radius: var(--rad-sm);
  padding: 6px;
  pointer-events: none;
  overflow: hidden;
}
.a-map .overlay.locator svg { width: 100%; height: 100%; }
.a-map .overlay.locator .lbl {
  position: absolute; left: 8px; top: 4px;
  font-family: var(--serif);
  font-size: 9px;
  letter-spacing: var(--small-caps-letter-spacing);
  text-transform: uppercase;
  color: var(--ink-3);
}
.a-map .overlay.locator .india { fill: var(--paper-warm); stroke: var(--rule); stroke-width: 0.6; }
.a-map .overlay.locator .rajasthan { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 0.8; }
.a-map .overlay.locator .viewport { fill: none; stroke: var(--sel); stroke-width: 1.2; }

/* -- Floating map controls (bottom-LEFT column, above the compass) ------
 * Moved from top-right because the right-side detail panel + sikhwal
 * callouts permanently overlapped that area. Bottom-left stack is:
 * [+ / − / ⌂] on top → compass (44px) at the very bottom. */
.a-map .map-controls {
  position: absolute;
  bottom: calc(var(--sp-4) + 56px);
  left: var(--sp-4);
  display: flex; flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.a-map .map-controls .mc {
  width: 34px; height: 34px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--rad-sm);
  cursor: pointer;
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 16px;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
  box-shadow: var(--shadow-card);
}
.a-map .map-controls .mc:hover { background: var(--card-quiet); border-color: var(--rule); color: var(--ink); }
.a-map .map-controls .mc:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.a-map .map-controls .mc.active { background: var(--sel-bg); border-color: var(--sel); color: var(--ink); }
.a-map .map-controls .divider { height: 8px; }

/* -- Layers popover ---------------------------------------------------- */
.layers-popover {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  /* Above the Sikhwal edge-column callouts (z-index 10) so it can be
   * opened and used even while callouts flank the map. */
  z-index: 20;
}
.layers-popover .lp-toggle {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--rad-sm);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-small);
  display: flex; gap: 6px; align-items: center;
  box-shadow: var(--shadow-card);
  transition: background var(--motion-fast);
}
.layers-popover .lp-toggle:hover { background: var(--card-quiet); }
.layers-popover .lp-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.layers-popover .lp-panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 280px;
  max-width: min(320px, 90vw);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--rad-md);
  box-shadow: var(--shadow-float);
  padding: var(--sp-4);
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}
.layers-popover .lp-panel::-webkit-scrollbar { width: 8px; }
.layers-popover .lp-panel::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 4px; }
.layers-popover .lp-panel::-webkit-scrollbar-track { background: transparent; }
.layers-popover.open .lp-panel { display: block; }

/* -- Layers-popover: two-tab layout --------------------------------- */
.layers-popover .lp-tabs {
  display: flex;
  gap: 0;
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3);
  border-bottom: 1px solid var(--hair);
  padding: 0;
  background: var(--card-quiet);
  border-radius: var(--rad-md) var(--rad-md) 0 0;
  overflow: hidden;
}
.layers-popover .lp-tab {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.layers-popover .lp-tab:hover { color: var(--ink); background: var(--card); }
.layers-popover .lp-tab.active {
  color: var(--ink);
  border-bottom-color: var(--sel);
  background: var(--card);
  font-weight: 500;
}
.layers-popover .lp-tab-panel { display: none; }
.layers-popover .lp-tab-panel.active { display: block; }
.layers-popover .lp-hint {
  margin: 0 0 var(--sp-3);
  font-size: var(--t-meta);
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.4;
}

/* -- Layers-popover: curated sectioned Presets grid ------------------- */
.layers-popover .lp-preset-section {
  margin-bottom: 14px;
}
.layers-popover .lp-preset-section:last-of-type { margin-bottom: 4px; }
.layers-popover .lp-preset-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hair);
}
.layers-popover .lp-preset-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.layers-popover .lp-preset-title {
  font-family: var(--serif);
  font-size: var(--t-caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.layers-popover .lp-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 6px;
}
.layers-popover .lp-preset-grid .lp-mode {
  margin: 0;
  padding: 6px 8px;
  font-size: 11.5px;
}

/* -- Layers-popover: legacy hidden mode container --------------------- */
.layers-popover .lp-legacy-modes {
  display: none !important;
}

/* ============================================================================
 * Legend panel — floating map-corner key for the currently-active view mode.
 * ==========================================================================*/
.a-map .legend-panel {
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-4);
  z-index: 4;
  display: none;
  min-width: 190px;
  max-width: 260px;
  max-height: min(calc(100vh - 200px), 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--rad-md);
  box-shadow: var(--shadow-card);
  padding: 0;
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}
.a-map .legend-panel.open { display: block; }
.a-map .legend-panel .legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hair);
  background: var(--card-quiet);
  border-radius: var(--rad-md) var(--rad-md) 0 0;
}
.a-map .legend-panel .legend-title {
  font-family: var(--serif);
  font-size: var(--t-caps);
  letter-spacing: var(--small-caps-letter-spacing);
  text-transform: uppercase;
  color: var(--ink-3);
}
.a-map .legend-panel .legend-close {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 18px; line-height: 1;
  padding: 0 4px; border-radius: var(--rad-sm);
  transition: color var(--motion-fast);
}
.a-map .legend-panel .legend-close:hover { color: var(--ink); }
.a-map .legend-panel .legend-body { padding: 6px 10px 10px; }
.a-map .legend-panel .legend-box + .legend-box {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--hair);
}
.a-map .legend-panel h5 {
  margin: 6px 0 6px;
  font-family: var(--serif);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.a-map .legend-panel .legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.a-map .legend-panel .legend-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--ink);
  font-size: var(--t-small);
  line-height: 1.3;
}
.a-map .legend-panel .legend-swatch {
  display: inline-block;
  width: 16px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  flex-shrink: 0;
}
.theme-dark .a-map .legend-panel .legend-swatch { border-color: rgba(255, 255, 255, 0.12); }
.a-map .legend-panel .legend-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .a-map .legend-panel { display: none !important; }
}

.layers-popover h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-caps);
  letter-spacing: var(--small-caps-letter-spacing);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--sp-3) 0 var(--sp-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hair);
}
.layers-popover h4:first-child { margin-top: 0; }
.layers-popover .lp-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 0;
  font-size: var(--t-small);
  color: var(--ink-2);
  cursor: pointer;
}
.layers-popover .lp-row:hover { color: var(--ink); }
.layers-popover .lp-row input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.layers-popover .lp-row .sw {
  width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid; flex-shrink: 0;
}
.layers-popover .lp-row .lp-name { flex: 1; min-width: 0; }
.layers-popover .lp-row .lp-switch {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 20px;
  background: var(--hair);
  border-radius: 999px;
  position: relative;
  transition: background var(--motion-fast);
}
.layers-popover .lp-row .lp-switch.on { background: var(--accent); }
.layers-popover .lp-row .lp-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: left var(--motion-fast);
}
.layers-popover .lp-row .lp-switch.on::after { left: 14px; }
.layers-popover .lp-row input[type="checkbox"]:focus-visible ~ .lp-switch {
  box-shadow: var(--focus-ring);
}
.layers-popover .lp-modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 4px;
}
.layers-popover .lp-modes button {
  appearance: none;
  padding: 6px 8px;
  border: 1px solid var(--hair);
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-small);
  border-radius: var(--rad-sm);
  cursor: pointer;
  transition: background var(--motion-fast);
}
.layers-popover .lp-modes button:hover { background: var(--card-quiet); }
.layers-popover .lp-modes button.active { background: var(--sel-bg); border-color: var(--sel); color: var(--ink); }

/* -- Tooltip ----------------------------------------------------------- */
.tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: var(--rad-sm);
  box-shadow: var(--shadow-tip);
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: var(--t-small);
  max-width: 300px;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity var(--motion-fast) var(--ease);
}
.tooltip.on { opacity: 1; }
.tooltip .tt-name {
  font-family: var(--serif);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.tooltip .tt-meta {
  color: var(--ink-3);
  font-size: var(--t-meta);
  letter-spacing: 0.03em;
}
.tooltip .tt-metric {
  font-family: var(--mono);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.tooltip .tt-fact {
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.35;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--hair);
}
.tooltip .tt-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: var(--rad-pill);
  background: var(--sym-tr-soft);
  color: var(--sym-tr);
  font-size: 9.5px;
  letter-spacing: var(--small-caps-letter-spacing);
  text-transform: uppercase;
}

/* ═══ MOBILE MAP CHROME ═══════════════════════════════════════════════
 * Placed at file-end so the mobile @media rules follow (and therefore
 * beat, at equal specificity) the desktop rules above. */
@media (max-width: 640px) {
  /* Zoom +/- pill sits TOP-RIGHT of the map on mobile so the compass
   * has clean run of the bottom-left corner. */
  .a-map .map-controls {
    top: 12px !important; right: 12px !important;
    bottom: auto !important; left: auto !important;
    flex-direction: row !important;
    gap: 0 !important;
    background: color-mix(in srgb, var(--card) 90%, transparent);
    backdrop-filter: blur(4px);
    border: 1px solid var(--hair);
    border-radius: 10px;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
  .a-map .map-controls .divider { display: none; }
  .a-map .map-controls .mc {
    width: 36px !important; height: 36px !important;
    border: none;
    background: transparent;
    border-radius: 6px;
  }
  /* Compass tucks smaller into bottom-left */
  .a-map .overlay.north {
    width: 40px; height: 40px;
    bottom: 12px; left: 12px;
  }
  /* Hide the desktop zoom-level pill on mobile — the info isn't
   * essential and it fights the FAB stack for corner real-estate. */
  .a-map .overlay.zoom { display: none !important; }
  /* Selection breadcrumb — was hidden below 640 by SelectionBreadcrumb's
   * own CSS. Override that: on mobile it's THE way to know what you
   * selected. Docks below the header. */
  .a-map .overlay.selection-breadcrumb {
    display: inline-flex !important;
    top: 12px;
    max-width: min(60vw, 240px);
    font-size: 11.5px;
    padding: 6px 12px;
  }
  .a-map .overlay.selection-breadcrumb .sb-feature { max-width: 160px; }

  /* Layers popover — full-width overlay panel on mobile */
  .layers-popover { top: 12px; left: 12px; }
  .layers-popover .lp-toggle {
    padding: 8px 14px;
    font-size: 13px;
  }
  .layers-popover .lp-panel {
    position: fixed;
    top: 56px; left: 0; right: 0; bottom: 0;
    min-width: 0; max-width: 100vw;
    max-height: none;
    border-radius: 0;
    border-left: none; border-right: none;
    border-top: 1px solid var(--hair);
    padding: 16px;
    z-index: 40;
    display: none;
  }
  .layers-popover.open .lp-panel { display: block; }
  .layers-popover .lp-row {
    padding: 12px 8px;
    font-size: 14px;
  }
  .layers-popover .lp-row .lp-switch {
    width: 40px; height: 24px;
  }
  .layers-popover .lp-row .lp-switch::after {
    width: 20px; height: 20px;
  }
  .layers-popover .lp-row .lp-switch.on::after { left: 18px; }
  .layers-popover h4 {
    font-size: 11px;
    padding: 10px 4px 6px;
    border-bottom: 1px solid var(--hair);
  }
}