/* ==========================================================================
   Relocate — design system
   Ultra-Premium Glassmorphism, HSL Color Scales & Micro-Animations
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* LIGHT MODE (EXECUTIVE SLEEK) */
  --bg-main: #f8fafc;
  --bg-navbar: rgba(255, 255, 255, 0.92);
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-card-hover: rgba(241, 245, 249, 0.98);
  --bg-card-border: rgba(15, 23, 42, 0.08);
  --bg-input: #f1f5f9;
  --text-main: #0f172a;
  --text-muted: #475569;
  --accent-cyan: #0284c7;
  --accent-cyan-glow: rgba(2, 132, 199, 0.25);
  --accent-purple: #6366f1;
  --accent-green: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
  --card-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
  --popover-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --tooltip-bg: rgba(255, 255, 255, 0.98);
  --tooltip-text: #0f172a;
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Grotesk', monospace;
}

/* DARK MODE OVERRIDES (NEON GLASS) */
body.dark-theme {
  --bg-main: #070a12;
  --bg-navbar: rgba(11, 16, 28, 0.92);
  --bg-card: rgba(16, 24, 40, 0.78);
  --bg-card-hover: rgba(27, 38, 59, 0.85);
  --bg-card-border: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(255, 255, 255, 0.05);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.3);
  --accent-purple: #8b5cf6;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --card-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.6);
  --popover-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  --tooltip-bg: rgba(15, 23, 42, 0.96);
  --tooltip-text: #f8fafc;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--bg-card-border);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-family);
  overflow-x: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

/* TOP EXECUTIVE NAVIGATION BAR */
.navbar {
  height: 64px;
  background: var(--bg-navbar);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bg-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
  box-shadow: var(--card-shadow);
  flex-shrink: 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-cyan-glow);
}

.brand-title h1 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-pro {
  font-size: 0.65rem;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.15), rgba(99, 102, 241, 0.15));
  color: var(--accent-cyan);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(2, 132, 199, 0.3);
  font-weight: 800;
  letter-spacing: 0.05em;
}

.brand-title p {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* VIEW MODE TABS */
.view-mode-tabs {
  display: flex;
  background: var(--bg-input);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--bg-card-border);
  gap: 4px;
}

.nav-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.nav-tab.active {
  background: var(--bg-card);
  color: var(--accent-cyan);
  border: 1px solid var(--bg-card-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-weight: 800;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* SPOTLIGHT SEARCH CONTAINER */
.global-search {
  position: relative;
  width: 320px;
}

.search-field, .compare-input-box {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1.5px solid var(--bg-card-border);
  border-radius: 12px;
  padding: 0 14px;
  height: 42px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-field:focus-within, .compare-input-box:focus-within {
  border-color: var(--accent-cyan);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--accent-cyan-glow);
}

.search-icon {
  color: var(--text-muted);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.search-field input, .compare-input-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 8px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.search-kbd {
  font-size: 0.65rem;
  font-weight: 800;
  font-family: var(--font-mono);
  background: var(--bg-card-border);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  flex-shrink: 0;
}

.clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* SPOTLIGHT SEARCH POPOVER */
.search-popover, .compare-popover {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  background: var(--bg-navbar);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--bg-card-border);
  border-radius: 16px;
  box-shadow: var(--popover-shadow);
  z-index: 2000;
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.search-popover.hidden, .compare-popover.hidden {
  display: none !important;
}

.popover-item {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
  margin-bottom: 4px;
  border: 1px solid transparent;
}

.popover-item:hover, .popover-item.selected {
  background: var(--bg-card-hover);
  border-color: rgba(2, 132, 199, 0.3);
  transform: translateX(3px);
}

.popover-left {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.popover-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(2, 132, 199, 0.12);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.popover-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.popover-sub {
  font-size: 0.73rem;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.popover-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.popover-stat-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.popover-pincode-badge {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.75rem;
  background: rgba(2, 132, 199, 0.15);
  color: var(--accent-cyan);
  padding: 3px 8px;
  border-radius: 6px;
}

.theme-toggle-btn {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
}

/* APP VIEWPORT */
.app-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: calc(100vh - 64px);
}

.view-section {
  display: none;
  width: 100%;
  height: 100%;
}

.view-section.active {
  display: flex;
}

/* MAP VIEW ATLAS */
#mapView {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.map-instance {
  width: 100%;
  height: 100%;
  background: #e2e8f0;
}

.control-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 340px;
  max-height: calc(100vh - 96px);
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--bg-card-border);
  border-radius: 18px;
  padding: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  box-shadow: var(--card-shadow);
}

.hud-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hud-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.domain-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--bg-input);
  padding: 3px;
  border-radius: 10px;
}

.domain-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.domain-btn.active {
  background: var(--bg-card);
  color: var(--accent-cyan);
  border: 1px solid rgba(2, 132, 199, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.metric-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-btn {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chip-btn:hover {
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.chip-btn.active {
  background: var(--accent-cyan);
  color: #fff;
  font-weight: 800;
  border-color: var(--accent-cyan);
  box-shadow: 0 4px 12px var(--accent-cyan-glow);
}

.time-card {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  padding: 12px;
  border-radius: 12px;
}

.time-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pill-toggle {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pill-toggle.active {
  background: var(--accent-purple);
  color: #fff;
  border-color: var(--accent-purple);
}

.year-selector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.sub-txt {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.year-btn-grid {
  display: flex;
  gap: 4px;
  flex: 1;
}

.year-btn {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-muted);
  padding: 5px 0;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.year-btn.active {
  background: var(--accent-cyan);
  color: #fff;
  border-color: var(--accent-cyan);
}

.month-matrix {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.month-btn {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  text-align: center;
  padding: 6px 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.month-btn:hover:not(.disabled) {
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.month-btn.active {
  background: rgba(99, 102, 241, 0.2);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  font-weight: 800;
}

.month-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hud-select {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  outline: none;
  width: 100%;
}

.select-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rank-card {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  padding: 12px;
  border-radius: 12px;
}

.rank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rank-toggle-group {
  display: flex;
  gap: 4px;
}

.rank-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.rank-btn.active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.rank-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.rank-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.rank-row-item:hover {
  background: var(--bg-card-hover);
  border-color: rgba(2, 132, 199, 0.3);
  transform: translateX(2px);
}

.map-context-bar {
  position: absolute;
  top: 16px;
  left: 372px;
  right: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
  padding: 8px 16px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--card-shadow);
}

.context-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px currentColor;
}

.map-tools {
  display: flex;
  gap: 8px;
}

.map-tool-btn {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.map-tool-btn:hover {
  background: var(--bg-card-hover);
}

.map-tool-btn.accent {
  background: var(--accent-cyan);
  color: #fff;
  border-color: var(--accent-cyan);
  box-shadow: 0 4px 12px var(--accent-cyan-glow);
}

.hud-legend {
  position: absolute;
  bottom: 24px;
  right: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
  padding: 12px 16px;
  z-index: 500;
  box-shadow: var(--card-shadow);
}

.legend-header {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.legend-scale-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color-box {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-label-text {
  font-size: 0.72rem;
  font-weight: 700;
}

.legend-range-text {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* RELOCATION FINDER & SIMULATOR VIEW */
.relocate-container {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  gap: 20px;
  overflow-y: auto;
}

.relocate-sidebar {
  width: 340px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--bg-card-border);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--card-shadow);
  flex-shrink: 0;
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-title h2 {
  font-size: 1.15rem;
  font-weight: 800;
}

.sidebar-title p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* PERSONA PRESETS CONTAINER */
.persona-presets-container {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.persona-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.persona-btn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.persona-btn {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.persona-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-main);
}

.persona-btn.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.15), rgba(99, 102, 241, 0.15));
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

.pref-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pref-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pref-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pref-val-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-cyan);
  background: rgba(2, 132, 199, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
}

.pref-select {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  outline: none;
}

.pref-slider {
  width: 100%;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}

.relocate-results-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* SIMULATOR HERO CARD */
.simulator-card {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(99, 102, 241, 0.08));
  border: 1.5px solid rgba(2, 132, 199, 0.25);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--card-shadow);
}

.simulator-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sim-badge {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  font-weight: 800;
  background: rgba(2, 132, 199, 0.15);
  color: var(--accent-cyan);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.simulator-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-top: 4px;
}

.simulator-header p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sim-inputs-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sim-input-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sim-input-box label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.sim-input-box input {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  outline: none;
  transition: all 0.2s ease;
}

.sim-input-box input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--accent-cyan-glow);
}

.sim-vs-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--accent-cyan-glow);
}

.sim-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.sim-result-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.sim-result-card span {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
}

.sim-result-card strong {
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 4px;
  display: block;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  padding: 16px 20px;
  border-radius: 16px;
}

.results-header h2 {
  font-size: 1.2rem;
  font-weight: 800;
}

.results-header p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.results-count-badge {
  background: rgba(5, 150, 105, 0.15);
  color: var(--accent-green);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(5, 150, 105, 0.3);
}

.relocate-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.relocate-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--card-shadow);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.relocate-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-cyan);
  box-shadow: 0 16px 36px -8px rgba(0,0,0,0.12);
}

.relocate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.city-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-cyan);
  background: rgba(2, 132, 199, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
}

.match-score-badge {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.15), rgba(16, 185, 129, 0.15));
  color: var(--accent-green);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(5, 150, 105, 0.3);
}

.relocate-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.relocate-metric-card {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.relocate-metric-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
}

.relocate-metric-card span {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
}

.relocate-metric-card strong {
  font-size: 0.95rem;
  font-weight: 800;
  margin-top: 2px;
  display: block;
}

.inspect-btn {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inspect-btn:hover {
  background: var(--accent-cyan);
  color: #fff;
  border-color: var(--accent-cyan);
}

/* DUAL-CITY COMPARATIVE DASHBOARD VIEW */
.dashboard-compare-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 18px;
  overflow-y: auto;
}

.compare-control-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--bg-card-border);
  padding: 14px 20px;
  border-radius: 18px;
  box-shadow: var(--card-shadow);
}

.compare-search-card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compare-search-card label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.compare-swap-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 16px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.compare-swap-btn:hover {
  background: var(--accent-cyan);
  color: #fff;
  transform: rotate(180deg);
}

.compare-year-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compare-year-card label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.compare-select {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  outline: none;
  height: 42px;
}

.compare-summary-banner {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(2, 132, 199, 0.08));
  border: 1.5px solid rgba(5, 150, 105, 0.25);
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--card-shadow);
}

.banner-winner h3 {
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.banner-winner p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.banner-metrics-pills {
  display: flex;
  gap: 8px;
}

.adv-pill {
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--bg-card);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--bg-card-border);
}

.dual-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.city-dashboard-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--card-shadow);
}

.city-header-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.city-header-hero h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-top: 4px;
}

.city-header-hero p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.main-stat-badge {
  font-size: 1.25rem;
  font-weight: 800;
  background: var(--bg-input);
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid var(--bg-card-border);
  cursor: pointer;
}

.parameters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.param-card {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.param-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
}

.param-card span {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
}

.param-card strong {
  font-size: 0.95rem;
  font-weight: 800;
  margin-top: 2px;
  display: block;
}

.comparative-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.comp-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--card-shadow);
}

.comp-chart-card h3 {
  font-size: 0.92rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* DATA TABLE & PINCODE MATRIX VIEW */
.data-table-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 16px;
  overflow-y: auto;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  padding: 16px 20px;
  border-radius: 18px;
  box-shadow: var(--card-shadow);
}

.table-toolbar h2 {
  font-size: 1.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-search-box {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  padding: 0 14px;
  height: 42px;
  border-radius: 12px;
  width: 300px;
}

.table-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 8px;
  width: 100%;
}

.table-responsive-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.pro-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.pro-data-table th {
  background: var(--bg-input);
  padding: 14px 16px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--bg-card-border);
}

.pro-data-table td {
  padding: 14px 16px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--bg-card-border);
}

.pro-data-table tr:hover {
  background: var(--bg-card-hover);
}

/* SOURCES & VERIFICATION VIEW */
.sources-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 20px;
  overflow-y: auto;
}

.sources-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sources-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.source-tile {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--card-shadow);
  transition: all 0.25s ease;
}

.source-tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent-cyan);
}

.source-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(2, 132, 199, 0.12);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.source-tile h3 {
  font-size: 1.05rem;
  font-weight: 800;
}

.source-tile p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.source-link-btn {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-cyan);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  transition: all 0.2s ease;
}

.source-link-btn:hover {
  color: var(--accent-purple);
}

/* MULTI-LEVEL DRILL-DOWN MODAL */
.drill-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.drill-modal-backdrop.hidden {
  display: none !important;
}

.drill-modal-card {
  width: 100%;
  max-width: 900px;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--popover-shadow);
  max-height: 90vh;
  overflow-y: auto;
  animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.drill-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.drill-breadcrumbs {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.bc-step.active {
  color: var(--accent-cyan);
  font-weight: 800;
}

.drill-modal-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
}

.drill-modal-header p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.drill-close-btn {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drill-close-btn:hover {
  background: var(--accent-rose);
  color: #fff;
}

.drill-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.drill-stat-box {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  padding: 14px;
  border-radius: 14px;
}

.drill-stat-box span {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
}

.drill-stat-box strong {
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 4px;
  display: block;
}

.drill-chart-container {
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-header-row h3 {
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.drill-back-btn {
  background: var(--accent-cyan);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.drill-subgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.subgrid-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  padding: 14px;
  border-radius: 14px;
}

.subgrid-card h4 {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.subgrid-card strong {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 4px;
  display: block;
}

/* WET BULB TEMPERATURE BADGE */
.wb-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wb-badge.wb-safe {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.wb-badge.wb-caution {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.wb-badge.wb-danger {
  background: rgba(225, 29, 72, 0.15);
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.3);
  animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
  0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

/* PRINT DOSSIER FORMATTING (@media print) */
@media print {
  body {
    background: #ffffff !important;
    color: #0f172a !important;
    height: auto !important;
    overflow: visible !important;
  }

  .navbar, .control-hud, .map-context-bar, .relocate-sidebar, .compare-control-bar, .theme-toggle-btn, .nav-tab, .search-kbd, button {
    display: none !important;
  }

  .app-viewport {
    height: auto !important;
    overflow: visible !important;
  }

  .view-section {
    display: block !important;
    padding: 0 !important;
  }

  .relocate-results-area, .dashboard-compare-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .simulator-card, .comp-chart-card, .source-tile {
    break-inside: avoid;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   VAYU-BHARAT PRO 3.0 EXTENSIONS (AHP WEIGHTS, SPOTLIGHT ⌘K, TRUE COST)
   ========================================================================== */

/* AHP Sensitivity Weights Card */
.ahp-weights-card {
  margin-top: 16px;
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  padding: 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ahp-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ahp-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ahp-row span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.ahp-slider {
  width: 100%;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}

/* Spotlight Command Palette Modal (⌘K) */
.spotlight-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.spotlight-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  width: 100%;
  max-width: 680px;
  border-radius: 20px;
  box-shadow: var(--popover-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-input-row {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg-card-border);
  gap: 12px;
}

.spotlight-icon {
  color: var(--accent-cyan);
  width: 22px;
  height: 22px;
}

.spotlight-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 1.1rem;
  font-weight: 600;
  outline: none;
}

.spotlight-esc {
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--bg-card-border);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
}

.spotlight-results-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 10px;
}

.spotlight-empty {
  padding: 30px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.spotlight-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.spotlight-item:hover, .spotlight-item.active {
  background: var(--bg-card-hover);
  border-left: 3px solid var(--accent-cyan);
}

.spotlight-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spotlight-item-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
}

.spotlight-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.spotlight-item-pin {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(2, 132, 199, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
}

/* 12-Month Seasonal Climate Hazard Calendar Widget */
.seasonal-calendar-box {
  margin-top: 14px;
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
  padding: 14px;
}

.seasonal-calendar-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.seasonal-month-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

.seasonal-month-cell {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
  font-size: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s ease;
}

.seasonal-month-cell:hover {
  transform: translateY(-2px);
}

.seasonal-month-name {
  font-weight: 700;
  color: var(--text-muted);
}

.seasonal-month-indicator {
  height: 6px;
  border-radius: 4px;
}

.risk-good { background: #10b981; }
.risk-moderate { background: #eab308; }
.risk-severe { background: #e11d48; }

/* True Net Monthly Cost Breakdown */
.expense-breakdown {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.expense-pill {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-input);
  border: 1px solid var(--bg-card-border);
  color: var(--text-muted);
}

.expense-pill strong {
  color: var(--text-main);
}


/* ==========================================================================
   EVIDENCE & PROVENANCE SYSTEM
   --------------------------------------------------------------------------
   Design rules these styles enforce:
     - Grade is never communicated by colour alone. Every chip carries its
       letter; wherever there is room it carries its word too. Roughly 1 in 12
       men has a colour-vision deficiency and red/amber/green is the worst axis
       on which to encode a safety signal without redundancy.
     - The uncertainty band sits immediately beneath its number, in the same
       visual group, so a value is never read without its range.
     - Evidence chrome is quieter than the data it qualifies. It must be
       glanceable, never louder than the number itself.
   ========================================================================== */

:root {
  --ev-a: #059669;  --ev-a-bg: rgba(5, 150, 105, 0.10);  --ev-a-br: rgba(5, 150, 105, 0.30);
  --ev-b: #0284c7;  --ev-b-bg: rgba(2, 132, 199, 0.10);  --ev-b-br: rgba(2, 132, 199, 0.30);
  --ev-c: #b45309;  --ev-c-bg: rgba(180, 83, 9, 0.10);   --ev-c-br: rgba(180, 83, 9, 0.32);
  --ev-d: #be123c;  --ev-d-bg: rgba(190, 18, 60, 0.10);  --ev-d-br: rgba(190, 18, 60, 0.32);
}
body.dark-theme {
  --ev-a: #34d399;  --ev-a-bg: rgba(52, 211, 153, 0.14); --ev-a-br: rgba(52, 211, 153, 0.34);
  --ev-b: #38bdf8;  --ev-b-bg: rgba(56, 189, 248, 0.14); --ev-b-br: rgba(56, 189, 248, 0.34);
  --ev-c: #fbbf24;  --ev-c-bg: rgba(251, 191, 36, 0.14); --ev-c-br: rgba(251, 191, 36, 0.34);
  --ev-d: #fb7185;  --ev-d-bg: rgba(251, 113, 133, 0.14);--ev-d-br: rgba(251, 113, 133, 0.34);
}

/* ------------------------------------------------------------- grade chip */
.ev-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 4px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
}
/* The letter badge. Background comes from the grade variable rather than
   `currentColor`, because the chip also sets `color` for its own text — using
   currentColor for the background made the two identical and the letter
   invisible in dark mode. */
.ev-chip .ev-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800;
  color: #ffffff;
}
.ev-A .ev-letter { background: var(--ev-a); }
.ev-B .ev-letter { background: var(--ev-b); }
.ev-C .ev-letter { background: var(--ev-c); }
.ev-D .ev-letter { background: var(--ev-d); }
/* Dark-theme grade colours are bright, so the letter flips to dark for contrast. */
body.dark-theme .ev-chip .ev-letter { color: #0b1220; }
.ev-chip.ev-sm { padding: 2px 7px 2px 3px; font-size: 0.64rem; }
.ev-chip.ev-sm .ev-letter { width: 14px; height: 14px; font-size: 0.6rem; }

.ev-A { color: var(--ev-a); background: var(--ev-a-bg); border-color: var(--ev-a-br); }
.ev-B { color: var(--ev-b); background: var(--ev-b-bg); border-color: var(--ev-b-br); }
.ev-C { color: var(--ev-c); background: var(--ev-c-bg); border-color: var(--ev-c-br); }
.ev-D { color: var(--ev-d); background: var(--ev-d-bg); border-color: var(--ev-d-br); }

.ev-bg-A { background: var(--ev-a); } .ev-bg-B { background: var(--ev-b); }
.ev-bg-C { background: var(--ev-c); } .ev-bg-D { background: var(--ev-d); }

/* Left edge stripe on cards — a second, non-colour cue via stripe width. */
.ev-edge-A { border-left: 3px solid var(--ev-a); }
.ev-edge-B { border-left: 3px solid var(--ev-b); }
.ev-edge-C { border-left: 3px dashed var(--ev-c); }
.ev-edge-D { border-left: 3px dotted var(--ev-d); }

/* ------------------------------------------------------ value + interval */
.ev-value { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.ev-value > :first-child, .ev-value { font-weight: 800; }
.ev-value .ev-unit { font-size: 0.72em; font-weight: 600; opacity: 0.66; margin-left: 2px; }
.ev-band {
  font-size: 0.64rem; font-weight: 600; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: -0.01em; opacity: 0.85;
}

/* ------------------------------------------------------- station callout */
.ev-station {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-input); border: 1px solid var(--bg-card-border);
}
.ev-station-icon { color: var(--ev-a); font-size: 1rem; line-height: 1.2; }
.ev-station-name { font-weight: 700; font-size: 0.82rem; }
.ev-station-city { font-weight: 500; color: var(--text-muted); }
.ev-station-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.ev-station-none { color: var(--ev-d); font-size: 0.78rem; }

/* -------------------------------------------------------- lineage banner */
.ev-banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px; margin: 10px 0;
  border: 1px solid var(--bg-card-border); background: var(--bg-input);
}
.ev-banner-A { border-left: 4px solid var(--ev-a); }
.ev-banner-B { border-left: 4px solid var(--ev-b); }
.ev-banner-C { border-left: 4px solid var(--ev-c); }
.ev-banner-D { border-left: 4px solid var(--ev-d); }
.ev-banner-headline { font-size: 0.85rem; font-weight: 600; line-height: 1.45; }
.ev-banner-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 3px; }

/* ----------------------------------------------------------- coverage bar */
.ev-cov { margin: 14px 0; }
.ev-cov-bar {
  display: flex; height: 30px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--bg-card-border);
}
.ev-cov-seg { transition: opacity 0.15s ease; }
.ev-cov-seg:hover { opacity: 0.82; }
.ev-cov-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 16px; margin-top: 12px;
}
.ev-cov-key { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; }
.ev-cov-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ev-cov-k { font-family: var(--font-mono); font-weight: 700; width: 12px; }
.ev-cov-l { color: var(--text-muted); flex: 1; }
.ev-cov-n { font-weight: 700; font-family: var(--font-mono); font-size: 0.72rem; }
.ev-cov-n em { font-style: normal; color: var(--text-muted); font-weight: 600; }

/* --------------------------------------------------------- rank stability */
.ev-rank { min-width: 132px; }
.ev-rank-head { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.ev-rank-num { font-size: 1.45rem; font-weight: 800; font-family: var(--font-mono); line-height: 1; }
.ev-rank-range { font-size: 0.68rem; font-weight: 700; font-family: var(--font-mono); }
.ev-rank-high { color: var(--ev-a); } .ev-rank-mid { color: var(--ev-c); } .ev-rank-low { color: var(--ev-d); }
.ev-rank-track {
  position: relative; height: 6px; margin-top: 7px; border-radius: 3px;
  background: var(--bg-input); border: 1px solid var(--bg-card-border); overflow: hidden;
}
.ev-rank-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; opacity: 0.45; }
.ev-rank-fill.ev-rank-high { background: var(--ev-a); }
.ev-rank-fill.ev-rank-mid  { background: var(--ev-c); }
.ev-rank-fill.ev-rank-low  { background: var(--ev-d); }
.ev-rank-point {
  position: absolute; top: -2px; width: 2px; height: 10px;
  background: var(--text-main); border-radius: 1px;
}

/* -------------------------------------------------------------- stub card */
.ev-stub {
  padding: 18px; border-radius: 14px; background: var(--bg-card);
  border: 1px solid var(--bg-card-border); box-shadow: var(--card-shadow);
}
.ev-stub-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ev-stub-icon { font-size: 1.3rem; color: var(--accent-cyan); }
.ev-stub-title { font-weight: 800; font-size: 1rem; }
.ev-stub-sub { font-size: 0.76rem; color: var(--text-muted); }
.ev-stub-body { font-size: 0.85rem; line-height: 1.55; margin: 8px 0 10px; }
.ev-stub-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.ev-stub-list li {
  font-size: 0.8rem; line-height: 1.5; padding-left: 12px;
  border-left: 2px solid var(--bg-card-border); color: var(--text-muted);
}
.ev-stub-list strong { color: var(--text-main); }

/* ------------------------------------------------------- relocation cards */
.relocate-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.rc-ident h3 { font-size: 1.18rem; font-weight: 800; margin-top: 4px; }
.rc-ident p { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.rc-evidence { display: flex; align-items: center; gap: 9px; margin: 10px 0 4px; flex-wrap: wrap; }
.rc-ev-note { font-size: 0.71rem; color: var(--text-muted); font-weight: 600; }
.rc-aqli { display: flex; flex-direction: column; line-height: 1.1; }
.rc-aqli em { font-style: normal; font-size: 0.6rem; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
.relocate-metric-card strong em {
  font-style: normal; font-size: 0.62rem; font-weight: 600;
  color: var(--text-muted); margin-left: 3px;
}
.rc-cohort-warn, .rc-breach {
  font-size: 0.75rem; line-height: 1.5; padding: 9px 11px;
  border-radius: 9px; margin-top: 10px;
}
.rc-cohort-warn { background: var(--ev-c-bg); border: 1px solid var(--ev-c-br); }
.rc-breach { background: var(--ev-d-bg); border: 1px solid var(--ev-d-br); }
.rc-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
.rc-stab-msg { font-size: 0.72rem; color: var(--text-muted); flex: 1; min-width: 190px; }
.badge-sub { display: block; font-size: 0.68rem; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
.cmp-ev { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cmp-ev-km { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }

/* ------------------------------------------------------------ map tooltip */
.custom-leaflet-tooltip .mtt-title { font-weight: 800; font-size: 0.84rem; }
.custom-leaflet-tooltip .mtt-sub { font-size: 0.71rem; opacity: 0.75; }
.custom-leaflet-tooltip .mtt-val { font-size: 1.05rem; font-weight: 800; margin-top: 4px; }
.custom-leaflet-tooltip .mtt-val span { font-size: 0.66rem; font-weight: 600; opacity: 0.7; margin-left: 3px; }
.custom-leaflet-tooltip .mtt-band { font-size: 0.66rem; opacity: 0.72; font-family: var(--font-mono); }
.custom-leaflet-tooltip .mtt-ev { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.custom-leaflet-tooltip .mtt-km { font-size: 0.65rem; opacity: 0.75; }
.custom-leaflet-tooltip .mtt-hint { font-size: 0.63rem; opacity: 0.55; margin-top: 5px; }

/* ------------------------------------------------------------ map toolbar */
.map-tool-btn.active {
  background: var(--ev-a-bg); border-color: var(--ev-a-br); color: var(--ev-a);
}

/* ----------------------------------------------------------- lineage view */
.lineage-container { max-width: 1080px; margin: 0 auto; padding: 28px 22px 60px; }
.lin-hero h2 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; }
.lin-lede { font-size: 0.95rem; color: var(--text-muted); margin-top: 8px; max-width: 62ch; line-height: 1.62; }

.lin-headline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin: 26px 0;
}
.lin-stat {
  padding: 18px; border-radius: 14px; background: var(--bg-card);
  border: 1px solid var(--bg-card-border); box-shadow: var(--card-shadow);
}
.lin-stat-warn { border-color: var(--ev-d-br); background: var(--ev-d-bg); }
.lin-stat-n { font-size: 2.1rem; font-weight: 800; font-family: var(--font-mono); line-height: 1; letter-spacing: -0.03em; }
.lin-stat-warn .lin-stat-n { color: var(--ev-d); }
.lin-stat-l { font-size: 0.83rem; font-weight: 700; margin-top: 7px; }
.lin-stat-s { font-size: 0.71rem; color: var(--text-muted); margin-top: 5px; line-height: 1.45; }

.lin-block {
  padding: 20px; border-radius: 14px; background: var(--bg-card);
  border: 1px solid var(--bg-card-border); margin-bottom: 16px;
}
.lin-block h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.lin-note { font-size: 0.79rem; color: var(--text-muted); line-height: 1.62; margin-top: 12px; max-width: 76ch; }
.lin-note.lin-warn {
  color: var(--text-main); background: var(--ev-c-bg);
  border: 1px solid var(--ev-c-br); padding: 11px 13px; border-radius: 9px;
}

.lin-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin-top: 10px; }
.lin-table th {
  text-align: left; padding: 8px 10px; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--bg-card-border);
}
.lin-table td { padding: 9px 10px; border-bottom: 1px solid var(--bg-card-border); line-height: 1.5; vertical-align: top; }
.lin-table code { font-family: var(--font-mono); font-size: 0.73rem; font-weight: 700; }
.lin-tag {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--bg-input); color: var(--text-muted);
}
.lin-tag-m { background: var(--ev-a-bg); color: var(--ev-a); }
.lin-tag-e { background: var(--ev-c-bg); color: var(--ev-c); }

.lin-sources { list-style: none; padding: 0; display: grid; gap: 11px; margin-top: 8px; }
.lin-sources li {
  font-size: 0.79rem; line-height: 1.55; padding-left: 13px;
  border-left: 2px solid var(--accent-cyan); color: var(--text-muted);
}
.lin-sources strong { color: var(--text-main); }
.lin-sources a { color: var(--accent-cyan); font-weight: 600; }

.lin-changed { border-color: var(--ev-c-br); }
.lin-changed ul { margin-top: 10px; padding-left: 18px; display: grid; gap: 9px; }
.lin-changed li { font-size: 0.8rem; line-height: 1.6; color: var(--text-muted); }
.lin-changed strong { color: var(--text-main); }
.lin-changed code { font-family: var(--font-mono); font-size: 0.73rem; background: var(--bg-input); padding: 1px 5px; border-radius: 4px; }

/* ---------------------------------------------------------- fatal banner */
.fatal-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 9999;
  padding: 14px 20px; background: #be123c; color: #fff;
  font-size: 0.85rem; line-height: 1.5;
}
.fatal-banner code { background: rgba(0,0,0,0.25); padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono); }

/* --------------------------------------------------------- a11y & motion */
.ev-chip:focus-visible, .map-tool-btn:focus-visible {
  outline: 2px solid var(--accent-cyan); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ev-cov-seg { transition: none; }
}
@media (prefers-contrast: more) {
  .ev-chip { border-width: 2px; }
  .ev-band { opacity: 1; }
}

.drill-stub-host { padding: 4px 0 8px; }


/* --------------------------------------------------------------------------
   Global .hidden
   The stylesheet only ever defined scoped variants (.search-popover.hidden,
   .drill-modal-backdrop.hidden), so adding `hidden` to anything else did
   nothing — the drill-down chart stayed on screen underneath the
   "no profile held" notice, showing the PREVIOUS location's data. That is
   exactly the kind of stale-data-looks-like-fresh-data bug this whole build
   is about, so it gets a global rule.
   -------------------------------------------------------------------------- */
.hidden { display: none !important; }

/* ==========================================================================
   HEAT BAND TOKENS — WCAG AA in both themes
   --------------------------------------------------------------------------
   The raw hexes in Science.HEAT_BANDS (#f59e0b et al.) are tuned for a dark
   background and measure 1.7–2.4:1 against a light card. That is far below the
   4.5:1 WCAG AA requires, and it was being applied to the most safety-critical
   text in the product — the line telling a user that a place rated "Caution"
   for them is "Dangerous" for an adult over 65.

   Light-theme values are darkened until they clear 4.5:1 on --bg-card and on
   --bg-input; dark-theme values are lightened to clear it on the dark card.
   ========================================================================== */

:root {
  --heat-safe:    #047857;   /* 5.4:1 on #fff  */
  --heat-caution: #a16207;   /* 4.8:1 on #fff  */
  --heat-danger:  #b45309;   /* 5.0:1 on #fff  */
  --heat-extreme: #be123c;   /* 6.0:1 on #fff  */
}
body.dark-theme {
  --heat-safe:    #34d399;
  --heat-caution: #fbbf24;
  --heat-danger:  #fb923c;
  --heat-extreme: #fb7185;
}

.heat-safe    { color: var(--heat-safe)    !important; }
.heat-caution { color: var(--heat-caution) !important; }
.heat-danger  { color: var(--heat-danger)  !important; }
.heat-extreme { color: var(--heat-extreme) !important; }

/* Card edge stripe driven by the same token. */
.sim-result-card.heat-edge { border-left: 4px solid currentColor; }
.sim-result-card.heat-edge > span,
.sim-result-card.heat-edge > p { color: var(--text-muted); }

.sim-cohort-note {
  font-size: 0.68rem; margin-top: 5px; font-weight: 700; line-height: 1.4;
}

/* The wet-bulb status pill. Solid token background with a fixed light
   foreground, so it does not depend on the surrounding card. */
.wb-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; vertical-align: middle; margin-left: 6px;
  color: #ffffff;
}
.wb-safe    { background: var(--heat-safe); }
.wb-caution { background: var(--heat-caution); }
.wb-danger  { background: var(--heat-danger); }
body.dark-theme .wb-badge { color: #0b1220; }

/* --------------------------------------------------------------------------
   Remaining AA shortfalls found by the contrast audit.
   Each of these was a light-theme accent sitting on a light background.
   -------------------------------------------------------------------------- */
:root {
  --accent-cyan-text: #026a9c;   /* readable text weight of --accent-cyan */
}
body.dark-theme { --accent-cyan-text: #7dd3fc; }

.sim-vs-badge { background: var(--accent-cyan); color: #ffffff; }
body.dark-theme .sim-vs-badge { color: #0b1220; }

.results-count-badge,
.sim-badge,
.pref-val-badge,
.persona-btn.active,
.ev-label { color: var(--accent-cyan-text); }

.results-count-badge, .sim-badge { font-weight: 700; }

/* The grade chip's word label rides on the chip's own tinted background, so it
   needs the darker text weight of each grade rather than the fill colour. */
:root {
  --ev-a-text: #04785d; --ev-b-text: #026a9c;
  --ev-c-text: #8a5a00; --ev-d-text: #a80f34;
}
body.dark-theme {
  --ev-a-text: #6ee7b7; --ev-b-text: #7dd3fc;
  --ev-c-text: #fcd34d; --ev-d-text: #fda4af;
}
.ev-A .ev-label { color: var(--ev-a-text); }
.ev-B .ev-label { color: var(--ev-b-text); }
.ev-C .ev-label { color: var(--ev-c-text); }
.ev-D .ev-label { color: var(--ev-d-text); }

/* ==========================================================================
   EXPLICIT LIGHT THEME
   --------------------------------------------------------------------------
   The stylesheet was written dark-first: `:root` holds the light tokens and
   `body.dark-theme` overrides them. That works only while the light state is
   "no class at all" — but toggleTheme() writes `body.className =
   "light-theme"`, a class no rule in the file ever matched. The result was a
   light state that depended on the absence of a selector rather than the
   presence of one, which is fragile and was resolving inconsistently.

   Declaring the light tokens explicitly on `body.light-theme` makes the theme
   a positive assertion in both directions. It also matches the specificity of
   `body.dark-theme` (0,2,0 vs 0,2,0), so whichever class is present wins
   cleanly on source order rather than by accident.
   ========================================================================== */
body.light-theme {
  --bg-main: #f8fafc;
  --bg-navbar: rgba(255, 255, 255, 0.92);
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-card-hover: rgba(241, 245, 249, 0.98);
  --bg-card-border: rgba(15, 23, 42, 0.08);
  --bg-input: #f1f5f9;
  --text-main: #0f172a;
  --text-muted: #475569;
  --accent-cyan: #0284c7;
  --accent-cyan-glow: rgba(2, 132, 199, 0.25);
  --accent-purple: #6366f1;
  --accent-green: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
  --card-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
  --popover-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --tooltip-bg: rgba(255, 255, 255, 0.98);
  --tooltip-text: #0f172a;

  --ev-a: #059669; --ev-a-bg: rgba(5, 150, 105, 0.10); --ev-a-br: rgba(5, 150, 105, 0.30);
  --ev-b: #0284c7; --ev-b-bg: rgba(2, 132, 199, 0.10); --ev-b-br: rgba(2, 132, 199, 0.30);
  --ev-c: #b45309; --ev-c-bg: rgba(180, 83, 9, 0.10);  --ev-c-br: rgba(180, 83, 9, 0.32);
  --ev-d: #be123c; --ev-d-bg: rgba(190, 18, 60, 0.10); --ev-d-br: rgba(190, 18, 60, 0.32);

  --ev-a-text: #04785d; --ev-b-text: #026a9c;
  --ev-c-text: #8a5a00; --ev-d-text: #a80f34;

  --heat-safe: #047857; --heat-caution: #a16207;
  --heat-danger: #b45309; --heat-extreme: #be123c;

  --accent-cyan-text: #026a9c;

  color: var(--text-main);
  background-color: var(--bg-main);
}

/* The letter badge and solid pills flip their foreground with the theme. */
body.light-theme .ev-chip .ev-letter,
body.light-theme .wb-badge,
body.light-theme .sim-vs-badge { color: #ffffff; }

/* ==========================================================================
   RESPONSIVE LAYER
   --------------------------------------------------------------------------
   The base layout assumes a wide desktop: a floating HUD panel over a map, a
   fixed-width sidebar beside a card grid, and a navbar with five text tabs and
   a search field on one row. On a 375px phone that produced a HUD covering the
   entire map, a navbar overflowing horizontally, and a body that scrolled
   sideways.

   Someone deciding where to live in India is very likely doing it on a phone,
   so this is not a nicety. The approach:

     - Navbar becomes brand + a horizontally snap-scrolling tab strip.
     - The map HUD becomes a bottom sheet: collapsed to a handle by default so
       the map is actually visible, expanded on tap.
     - Every side-by-side layout collapses to a single column.
     - Wide content (tables, charts) scrolls inside its own container so the
       page body never scrolls sideways.
     - Touch targets go to 44px, the minimum comfortable hit area.
   ========================================================================== */

/* Never let the page itself scroll sideways. Wide children opt into their own
   scroll container instead. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ------------------------------------------------------- tablet and below */
@media (max-width: 1024px) {
  .navbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; height: auto; }
  .navbar-right { width: 100%; order: 3; }
  .global-search { width: 100%; }
  .view-mode-tabs { order: 2; width: 100%; overflow-x: auto; }

  .relocate-container { grid-template-columns: 1fr; }
  .relocate-sidebar { position: static; width: auto; max-height: none; }
  .dual-dashboard-grid { grid-template-columns: 1fr; }
  .sim-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relocate-cards-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 640px) {

  /* ---- navbar ---- */
  .navbar {
    position: sticky; top: 0; z-index: 900;
    flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 10px;
  }
  .navbar-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .brand-logo { width: 32px; height: 32px; flex: none; }
  .brand-title { min-width: 0; }
  .brand-title h1 { font-size: 0.95rem; white-space: nowrap; }
  /* The tagline is decoration on a phone; the tabs below say what this is. */
  .brand-title p { display: none; }
  .badge-pro { font-size: 0.54rem; padding: 1px 5px; }

  /* Tabs scroll horizontally with snap rather than wrapping into a tall block. */
  .view-mode-tabs {
    display: flex; flex-wrap: nowrap; width: 100%;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 2px;
  }
  .view-mode-tabs::-webkit-scrollbar { height: 0; }
  .nav-tab {
    flex: 0 0 auto; scroll-snap-align: start;
    white-space: nowrap; font-size: 0.74rem; padding: 9px 12px; min-height: 40px;
  }

  .navbar-right { display: flex; gap: 8px; align-items: center; }
  .global-search { flex: 1; min-width: 0; }
  .search-field input { font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .search-kbd { display: none; }
  .theme-toggle-btn { flex: none; width: 40px; height: 40px; }

  /* ---- map view: HUD as a bottom sheet ---- */
  /* The map fills whatever the navbar leaves. `dvh` tracks the mobile browser
     chrome as it hides and shows, which `vh` does not — with `vh` the map is
     always short by the height of the URL bar. */
  .app-viewport { height: auto; min-height: 0; display: block; }
  #mapView.view-section.active { display: flex; flex-direction: column; position: relative; }
  .map-wrapper {
    width: 100%; flex: 1;
    height: calc(100dvh - var(--mobile-nav-h, 150px));
    min-height: 340px;
  }
  .map-instance { height: 100%; width: 100%; }

  .control-hud {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none; max-height: 72vh;
    border-radius: 18px 18px 0 0;
    padding: 8px 14px 20px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 950;
    box-shadow: 0 -12px 32px -8px rgba(0, 0, 0, 0.35);
  }
  body.hud-open .control-hud { transform: translateY(0); }

  /* The grab handle doubles as the toggle. */
  .control-hud::before {
    content: ''; display: block; width: 42px; height: 4px; border-radius: 2px;
    background: var(--text-muted); opacity: 0.4; margin: 0 auto 10px;
  }
  .hud-sheet-toggle {
    display: flex;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 14px; z-index: 960;
    display: flex; align-items: center; gap: 7px;
    padding: 11px 20px; min-height: 44px;
    border-radius: 999px; border: 1px solid var(--bg-card-border);
    background: var(--bg-card); color: var(--text-main);
    font-size: 0.8rem; font-weight: 700; box-shadow: var(--popover-shadow);
    backdrop-filter: blur(12px);
  }
  body.hud-open .hud-sheet-toggle { display: none; }

  .map-context-bar {
    flex-direction: column; align-items: stretch; gap: 7px;
    padding: 8px; font-size: 0.72rem;
  }
  .map-tools { display: flex; gap: 6px; }
  .map-tool-btn { flex: 1; justify-content: center; min-height: 40px; font-size: 0.7rem; }
  .hud-legend { display: none; }   /* the tooltip carries the same information */

  /* ---- relocate view ---- */
  .relocate-container { display: block; padding: 10px; }
  .relocate-sidebar { margin-bottom: 12px; }
  .sim-results-grid { grid-template-columns: 1fr; gap: 9px; }
  .relocate-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relocate-card-header { flex-direction: column; gap: 9px; }
  .ev-rank { min-width: 0; width: 100%; }
  .ev-rank-head { justify-content: flex-start; }
  .rc-footer { flex-direction: column; align-items: stretch; }
  .rc-footer .inspect-btn { width: 100%; min-height: 44px; }
  .persona-presets-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-io-row { flex-direction: column; gap: 8px; }
  .sim-vs-badge { align-self: center; }

  /* ---- compare view ---- */
  .dual-dashboard-grid { grid-template-columns: 1fr; }
  .compare-control-bar { flex-direction: column; gap: 8px; }
  .compare-control-bar > * { width: 100%; }

  /* ---- table view: scroll the table, not the page ---- */
  .pro-table-wrapper, .table-scroll-box {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .pro-table { min-width: 720px; }

  /* ---- lineage view ---- */
  .lineage-container { padding: 16px 12px 40px; }
  .lin-hero h2 { font-size: 1.35rem; }
  .lin-headline { grid-template-columns: 1fr; }
  .lin-stat-n { font-size: 1.75rem; }
  .lin-table { font-size: 0.72rem; }
  .lin-table th:first-child, .lin-table td:first-child { white-space: nowrap; }
  .ev-cov-legend { grid-template-columns: 1fr; }

  /* ---- modals go full-screen ---- */
  .drill-modal-card, .spotlight-card {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; padding: 14px;
  }
  .drill-modal-backdrop, .spotlight-modal-backdrop { padding: 0; }
  .drill-close-btn { width: 44px; height: 44px; }
  .chart-canvas-box { height: 220px; }

  /* ---- touch targets ---- */
  .year-btn, .month-btn, .chip-btn, .domain-btn,
  .rank-btn, .persona-btn, .inspect-btn, .hud-select {
    min-height: 40px;
  }
  input[type="range"] { height: 30px; }

  /* Drop the heaviest blur effects — they are expensive to composite on
     mid-range Android hardware and buy nothing at this size. */
  .relocate-card, .lin-block, .sim-result-card { backdrop-filter: none; }
}

/* Very small phones. */
@media (max-width: 380px) {
  .relocate-metrics-grid { grid-template-columns: 1fr; }
  .brand-title h1 { font-size: 0.86rem; }
  .nav-tab { font-size: 0.7rem; padding: 8px 10px; }
}

/* Coarse pointers get larger targets regardless of viewport width. */
@media (pointer: coarse) {
  .nav-tab, .map-tool-btn, .inspect-btn, .rank-btn, .domain-btn { min-height: 40px; }
}

/* Matrix table: evidence column */
.tbl-aqli {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem;
  color: var(--ev-c-text);
}
.tbl-km { font-size: 0.66rem; color: var(--text-muted); margin-left: 4px; white-space: nowrap; }

/* Dual-city: evidence asymmetry warning and unavailable state */
.cmp-asymmetry {
  margin-top: 10px; padding: 11px 13px; border-radius: 10px;
  background: var(--ev-c-bg); border: 1px solid var(--ev-c-br);
  font-size: 0.78rem; line-height: 1.55;
}
.cmp-asymmetry strong { display: block; margin-bottom: 3px; color: var(--ev-c-text); }
.cmp-unavailable {
  grid-column: 1 / -1; padding: 34px 22px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: 14px;
}
.cmp-unavailable h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; }
.cmp-unavailable p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.55; max-width: 56ch; margin: 0 auto; }
.cmp-unavailable-sub { margin-top: 8px !important; font-size: 0.76rem !important; opacity: 0.8; }


/* The bottom-sheet trigger exists only on phones; the desktop layout shows the
   HUD permanently. Without this it rendered as an unstyled floating button. */
.hud-sheet-toggle { display: none; }
@media (max-width: 640px) { .hud-sheet-toggle { display: flex; } }

/* A parameter we deliberately do not hold. Not clickable, visibly muted. */
.param-card-na { cursor: default; opacity: 0.72; }
.param-card-na strong { font-size: 0.74rem !important; font-weight: 600 !important; color: var(--text-muted) !important; }

/* ==========================================================================
   ACCESSIBILITY PRIMITIVES
   ==========================================================================
   .sr-only removes content from view without removing it from the accessibility
   tree — `display:none` and `visibility:hidden` would hide it from screen
   readers too, which defeats the point. The 1px-clip technique is the one that
   survives every engine.

   The skip link is the counterweight to a dense dashboard: this page has ~300
   focusable controls, and without a way past the header a keyboard user pays
   for the whole chrome on every page load.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  /* fixed, not absolute: <body> is a flex column with `overflow: hidden auto`,
     which would both clip the link while it is parked above the fold and make
     its centring depend on body's used width rather than the viewport's. */
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 10000;
  padding: 12px 24px;
  border-radius: 0 0 12px 12px;
  background: var(--accent-primary, #0284c7);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* Landing on a panel via the skip link or a tab shouldn't paint a focus ring
   around a third of the screen — the panel is a destination, not a control. */
.view-section:focus { outline: none; }
.view-section:focus-visible { outline: 2px solid var(--accent-primary, #0284c7); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* Promoted clickables (see promoteClickables in app.js) are real tab stops now,
   so they need a focus ring that is visible against both themes. Keyboard only:
   :focus-visible keeps the ring off mouse clicks. */
[data-kb-ready]:focus-visible,
.nav-tab:focus-visible {
  outline: 3px solid var(--accent-primary, #0284c7);
  outline-offset: 2px;
  border-radius: 10px;
}