/*
 * map.css — U1 basemap
 *
 * MapLibre GL styling for the Power Map view and the project-detail Location
 * panel. Kept out of the frozen styles.css. References design tokens from
 * tokens.css so the map chrome matches the institutional palette (quiet gray
 * Positron basemap, clay accents, Public Sans / IBM Plex Mono).
 */

/* ============================================================ */
/*  Power Map stage — real basemap                              */
/* ============================================================ */

/* When MapLibre owns the stage we drop the old square SVG-scatter sizing
 * (aspect-ratio:1; max-width:460px) in favor of a proper landscape canvas.
 * The `.maplibre-stage` class is added by ensurePowerMapLibre(). */
.power-map-stage.maplibre-stage {
  aspect-ratio: auto;
  max-width: none;
  margin-inline: 0;
  width: 100%;
  height: clamp(420px, 60vh, 720px);
  min-height: 420px;
  background: var(--color-paper-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* The old SVG-era decorative frame (::before pseudo-blob) must not paint
 * over the live canvas. */
.power-map-stage.maplibre-stage::before {
  content: none;
}

/* The MapLibre canvas fills its container. */
.power-map-stage.maplibre-stage .maplibregl-map {
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
}

/* ============================================================ */
/*  MapLibre control chrome — palette alignment                 */
/* ============================================================ */

.maplibregl-ctrl-group {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--elevation-1) !important;
  border: 1px solid var(--border) !important;
}

.maplibregl-ctrl-group button {
  border-radius: 0;
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--color-line-100);
}

/* Attribution: required by OSM/CARTO. Keep it legible but quiet. */
.maplibregl-ctrl-attrib {
  font-family: var(--font-sans);
  font-size: 10px;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--color-steel-400);
}

.maplibregl-ctrl-attrib a {
  color: var(--color-steel-500);
}

/* ============================================================ */
/*  Project point popup                                         */
/* ============================================================ */

.map-popup .maplibregl-popup-content {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--elevation-2);
  padding: 10px 12px;
  font-family: var(--font-sans);
}

.map-popup .maplibregl-popup-tip {
  border-top-color: var(--surface);
}

.map-popup-body {
  display: grid;
  gap: 3px;
}

.map-popup-title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--color-ink-800);
}

.map-popup-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-steel-400);
}

/* Precision honesty: the county-level note is set apart in clay so the
 * analyst can't miss that the plotted point is an estimate. */
.map-popup-precision {
  margin-top: 4px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--color-brand-700);
  background: var(--color-brand-50);
  border: 1px dashed var(--color-brand-500);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  line-height: 1.3;
}

.map-popup-precision--located {
  color: var(--color-info-text);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-style: solid;
}

/* Population context is background, not a finding: the popup note stays quiet
 * -- a muted violet on a faint tint, never as loud as the clay precision chip
 * or a project point. Mirrors the muted population-violet of the choropleth. */
.map-popup-context {
  margin-top: 4px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: #5f4a83;
  background: rgba(118, 92, 158, 0.08);
  border: 1px solid rgba(118, 92, 158, 0.28);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  line-height: 1.3;
}

/* ============================================================ */
/*  Project-detail Location panel                               */
/* ============================================================ */

.location-panel-body {
  display: grid;
  gap: 10px;
}

.detail-location-map {
  width: 100%;
  height: 280px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-tint);
}

.detail-location-map .maplibregl-map {
  font-family: var(--font-sans);
}

/* Caption under the compact map: dot + text. Clay dashed treatment for a
 * centroid estimate, solid info treatment for a located coordinate. */
.location-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--color-steel-500);
}

.location-caption-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}

.location-caption--estimate {
  color: var(--color-brand-700);
}

.location-caption--estimate .location-caption-dot {
  background: transparent;
  border: 1.5px dashed var(--color-brand-600);
}

.location-caption--located .location-caption-dot {
  background: var(--color-brand-600);
  border: 1.5px solid var(--color-brand-600);
}

.location-tile-note {
  font-size: 11px;
  color: var(--color-warn-text);
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  margin-top: 4px;
}

.location-facts {
  display: grid;
  gap: 6px;
}

.location-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--color-line-100);
  padding-bottom: 5px;
}

.location-fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.location-fact-label {
  color: var(--color-steel-400);
  font-family: var(--font-mono);
  font-size: 11px;
}

.location-fact-value {
  color: var(--color-ink-800);
  text-align: right;
  font-weight: var(--fw-medium);
}

.location-empty {
  display: grid;
  gap: 6px;
}

.location-empty-lead {
  font-weight: var(--fw-semibold);
  color: var(--color-ink-800);
  font-size: 13px;
}

.location-empty-help {
  font-size: 12px;
  color: var(--color-steel-400);
  line-height: 1.5;
}