/* ====== TERRITORY MAP ====== */

.territory { position: relative; }

/* View tabs */
.view-tabs {
  display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.view-tab {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--bg-2); color: var(--muted);
  border: 1px solid var(--border); padding: 10px 20px;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; gap: 10px;
}
.view-tab:hover { border-color: var(--accent); color: var(--ink); }
.view-tab.active { background: var(--accent); color: var(--black); border-color: var(--accent); }
.view-tab .vt-n {
  font-family: var(--display-alt); font-size: 14px;
  opacity: 0.5;
}
.view-tab.active .vt-n { opacity: 1; }

/* Map container */
.map-wrap {
  position: relative; border: 1px solid var(--border);
  overflow: hidden;
}
.map-canvas {
  width: 100%; height: 560px;
}
@media (max-width: 860px) { .map-canvas { height: 420px; } }
@media (max-width: 520px) { .map-canvas { height: 340px; } }

/* Map chrome overlay */
.map-chrome {
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none; z-index: 2;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.map-chrome > * { pointer-events: auto; }

/* Stats rail */
.stats-rail {
  display: flex; gap: 20px; flex-wrap: wrap;
}
.stats-rail .stat {
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  padding: 10px 16px; border-radius: 2px;
  border: 1px solid rgba(201,169,97,0.3);
}
.stats-rail .stat .stat-val {
  font-family: var(--display-alt); font-size: 22px;
  color: var(--accent); letter-spacing: 0.04em;
}
.stats-rail .stat .stat-lbl {
  font-family: var(--sans); font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-top: 2px;
}

/* City filter rail */
.city-rail {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.city-pill {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 12px; border-radius: 2px;
  cursor: pointer; transition: all .2s;
  backdrop-filter: blur(6px);
}
.city-pill:hover { border-color: var(--accent); color: #fff; }
.city-pill.active { background: var(--accent); color: var(--black); border-color: var(--accent); }

/* Legend */
.legend {
  position: absolute; bottom: 16px; left: 16px;
  display: flex; gap: 16px; z-index: 2;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.1);
}
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
}

/* Timeline slider */
.timeline {
  position: absolute; bottom: 16px; right: 16px; left: 200px;
  z-index: 2; display: none;
}
.territory.view-timeline .timeline { display: flex; }
.timeline-inner {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  padding: 10px 16px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.1);
}
.timeline-year {
  font-family: var(--display-alt); font-size: 20px;
  color: var(--accent); letter-spacing: 0.04em; min-width: 50px;
}
.timeline-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; background: rgba(255,255,255,0.2);
  outline: none; cursor: pointer;
}
.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; cursor: pointer;
}
.timeline-play {
  background: none; border: 1px solid rgba(255,255,255,0.3);
  color: #fff; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  font-size: 12px; transition: all .2s;
}
.timeline-play:hover { border-color: var(--accent); color: var(--accent); }

/* View state toggles */
.territory .legend { display: flex; }
.territory.view-heatmap .legend { display: none; }
.territory.view-timeline .legend { display: none; }

/* Mapbox popup styling */
.mapboxgl-popup-content {
  background: #111 !important; color: #fff !important;
  border: 1px solid rgba(201,169,97,0.4) !important;
  border-radius: 2px !important; padding: 14px 18px !important;
  font-family: var(--sans); box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.mapboxgl-popup-tip { border-top-color: #111 !important; }
.mapboxgl-popup-close-button {
  color: rgba(255,255,255,0.5) !important; font-size: 18px !important;
  right: 6px !important; top: 4px !important;
}
.mapboxgl-popup-close-button:hover { color: var(--accent) !important; }
.popup-addr {
  font-family: var(--slab); font-weight: 700; font-size: 14px;
  margin-bottom: 6px;
}
.popup-price {
  font-family: var(--display-alt); font-size: 20px;
  color: var(--accent); letter-spacing: 0.04em; margin-bottom: 4px;
}
.popup-meta {
  font-size: 11px; color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
}
.popup-meta span { margin-right: 10px; }

@media (max-width: 860px) {
  .stats-rail { gap: 8px; }
  .stats-rail .stat { padding: 8px 12px; }
  .stats-rail .stat .stat-val { font-size: 18px; }
  .timeline { left: 16px; }
}
@media (max-width: 520px) {
  .view-tabs { gap: 6px; }
  .view-tab { padding: 8px 14px; font-size: 10px; }
}