Upload 2 files

10.08_styles.css

@@ -2,7 +2,7 @@
    DEPTH geospatial risk map — shared by V6 (10.08) and V7 (10.09)
    ============================================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Space+Mono:ital,wght@0,400;0,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');
 
 /* -- Design tokens --------------------------------------------------------- */
 :root {
@@ -11,41 +11,80 @@
   --space-2:  8px;
   --space-3: 12px;
   --space-4: 16px;
+  --space-5: 20px;
   --space-6: 24px;
+  --space-8: 32px;
+
+  /* Surface layers — translucent glass on a near-white field (Spatial UI) */
+  --c-canvas:       oklch(98.5% 0.003 250);
+  --c-glass-1:      oklch(100% 0 0 / 0.72);
+  --c-glass-2:      oklch(100% 0 0 / 0.85);
+  --c-glass-hover:  oklch(96%  0.004 250 / 0.92);
+  --c-glass-stroke: oklch(82%  0.006 250 / 0.6);
+  --c-glass-stroke-strong: oklch(72% 0.008 250 / 0.75);
+
+  /* Back-compat aliases for legacy class names still in use */
+  --c-surf:        var(--c-glass-1);
+  --c-surf-hover:  var(--c-glass-hover);
+  --c-border:      var(--c-glass-stroke);
+  --c-border-str:  var(--c-glass-stroke-strong);
+
+  /* Text — all AA on white and on glass-1 */
+  --c-text:     oklch(18% 0.012 250);    /* ~13.5:1 on white */
+  --c-text-mid: oklch(38% 0.010 250);    /* ~7.4:1   */
+  --c-text-dim: oklch(50% 0.008 250);    /* ~4.7:1   */
+
+  /* Deep teal / navy — kept for back-compat with existing classes */
+  --c-navy:     #032425;
+  --c-navy-dim: #0a4042;
 
-  /* Light overlay surfaces — tinted toward brand navy (hue 265)
-     Works against both dark-matter and positron map styles              */
-  --c-surf:        oklch(99%  0.003 265);
-  --c-surf-hover:  oklch(95%  0.005 265);
-  --c-border:      oklch(87%  0.005 265);
-  --c-border-str:  oklch(77%  0.007 265);
+  /* Rights Lab teal — primary accent (5.5:1 on white) */
+  --c-teal:        oklch(43% 0.12  218);
+  --c-teal-pale:   oklch(96% 0.025 218);
+  --c-teal-brand:  oklch(68% 0.12  218);
 
-  /* Text on light surfaces */
-  --c-text:     oklch(20%  0.010 265);
-  --c-text-mid: oklch(43%  0.008 265);
-  --c-text-dim: oklch(62%  0.007 265);
+  --c-accent:      var(--c-teal);
+  --c-accent-soft: var(--c-teal-pale);
+  --c-accent-ink:  oklch(28% 0.10 218);
 
-  /* Deep teal — accent for interactive & risk indicators */
-  --c-navy:     #032425;
-  --c-navy-dim: #0a4042;
+  --c-focus:       oklch(58% 0.18 240);
+
+  /* Depth / shadow scale — Spatial layered, restrained */
+  --depth-1: 0 1px 2px oklch(20% 0.01 250 / 0.06),
+             0 1px 1px oklch(20% 0.01 250 / 0.04);
+  --depth-2: 0 4px 12px oklch(20% 0.01 250 / 0.08),
+             0 1px 2px  oklch(20% 0.01 250 / 0.05);
+  --depth-3: 0 12px 32px oklch(20% 0.01 250 / 0.12),
+             0 2px 6px   oklch(20% 0.01 250 / 0.06);
+
+  /* Glass blur */
+  --blur-glass: saturate(140%) blur(14px);
 
-  /* Rights Lab teal (darkened to pass WCAG AA on white)
-     oklch(43% 0.12 218) ≈ #006B82   contrast on white: ~5.5:1             */
-  --c-teal:      oklch(43%  0.12  218);
-  --c-teal-pale: oklch(95%  0.03  218);
+  /* Typography — Inter throughout, mono only for stats / coordinates */
+  --font-ui:    'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono:  'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
 
-  /* Brand teal at full brightness — used only for decorative border-bottom */
-  --c-teal-brand: oklch(68%  0.12  218);
+  /* Back-compat aliases — keep legacy class refs working */
+  --font-label: var(--font-ui);
+  --font-body:  var(--font-ui);
 
-  /* Typography */
-  --font-label: 'DM Sans', system-ui, sans-serif;
-  --font-body:  'Space Mono', system-ui, sans-serif;
-  --font-mono:  'Space Mono', monospace;
+  /* Motion — Spatial spring */
+  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
+  --t-fast: 140ms; --t-base: 220ms; --t-slow: 320ms;
 
-  /* Radii — restrained */
-  --radius-sm:  3px;
-  --radius-md:  6px;
-  --radius-lg: 10px;
+  /* Radii */
+  --radius-sm:  6px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
+  --radius-pill: 999px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 
 /* -- Page shell ------------------------------------------------------------ */
@@ -72,7 +111,7 @@
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  background: oklch(18%  0.015 265);
+  background: var(--c-canvas);
 }
 
 .depth-map .htmlwidget,
@@ -134,60 +173,12 @@
   flex-shrink: 0;
 }
 
-/* -- Draw mode buttons (below draw toolbar, top-right) --------------------- */
-.draw-extra-ctrl {
-  position: absolute;
-  top: 262px;
-  right: 10px;
-  left: auto;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
+/* (draw-extra-ctrl + btn-controls removed — controls now live in .depth-nav) */
 
-.draw-extra-btn {
-  width: 30px;
-  height: 30px;
-  background: var(--c-surf);
-  border: 1px solid var(--c-border);
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--c-text-mid);
-  box-shadow: 0 1px 4px oklch(20%  0.01 265 / 0.12);
-  transition: background 0.12s, color 0.12s;
-}
-
-.draw-extra-btn:hover {
-  background: var(--c-surf-hover);
-  color: var(--c-text);
-}
-
-.draw-extra-btn.active {
-  background: var(--c-teal-pale) !important;
-  color: var(--c-teal) !important;
-  border-color: var(--c-teal);
-}
-
-/* -- Right column: grid + style + 3D (below draw-extra-ctrl) --------------- */
-.btn-controls {
-  position: absolute;
-  top: 200px;
-  right: 10px;
-  left: auto;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  align-items: flex-end;
-  width: 10px;
-}
-
-/* -- Style picker: icon button + dropdown ---------------------------------- */
-.style-btn-wrap {
+/* Wrappers that anchor popovers from nav-bar buttons */
+.style-btn-wrap,
+.grid-btn-wrap,
+.state-btn-wrap {
   position: relative;
 }
 
@@ -195,14 +186,17 @@
   position: absolute;
   right: 0;
   left: auto;
-  top: calc(100% + var(--space-1));
-  background: var(--c-surf);
-  border: 1px solid var(--c-border);
+  top: calc(100% + 6px);
+  background: var(--c-glass-2);
+  backdrop-filter: var(--blur-glass);
+  -webkit-backdrop-filter: var(--blur-glass);
+  border: 1px solid var(--c-glass-stroke);
   border-radius: var(--radius-md);
   padding: var(--space-1);
-  min-width: 152px;
-  box-shadow: 0 4px 14px oklch(20%  0.01 265 / 0.18);
-  z-index: 1001;
+  min-width: 168px;
+  box-shadow: var(--depth-3);
+  z-index: 1100;
+  animation: nav-pop-in var(--t-base) var(--ease-spring);
 }
 
 .style-option {
@@ -219,7 +213,8 @@
   color: var(--c-text-dim);
   cursor: pointer;
   border-radius: var(--radius-sm);
-  transition: background 0.1s, color 0.1s;
+  transition: background var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out);
 }
 
 .style-option:hover {
@@ -262,14 +257,16 @@
   bottom: var(--space-3);
   left: 11px;
   z-index: 999;
-  background: var(--c-surf);
-  border: 1px solid var(--c-border);
+  background: var(--c-glass-1);
+  backdrop-filter: var(--blur-glass);
+  -webkit-backdrop-filter: var(--blur-glass);
+  border: 1px solid var(--c-glass-stroke);
   border-radius: var(--radius-lg);
   overflow: hidden;
-  box-shadow: 0 2px 8px oklch(20%  0.01 265 / 0.16);
-  min-width: 198px;
-  max-width: 228px;
-  font-family: var(--font-body);
+  box-shadow: var(--depth-2);
+  min-width: 256px;
+  max-width: 288px;
+  font-family: var(--font-ui);
 }
 
 .layer-ctrl-header {
@@ -285,10 +282,10 @@
   letter-spacing: 0.10em;
   text-transform: uppercase;
   user-select: none;
-  transition: background 0.1s;
+  transition: background var(--t-fast) var(--ease-out);
 }
 
-.layer-ctrl-header:hover { background: var(--c-surf-hover); }
+.layer-ctrl-header:hover { background: var(--c-glass-hover); }
 
 .layer-ctrl-icon {
   font-size: 10px;
@@ -324,9 +321,9 @@
 .layer-ctrl-body .form-check-label {
   color: var(--c-text-dim);
   font-size: 11px;
-  font-family: var(--font-body);
+  font-family: var(--font-ui);
   cursor: pointer;
-  transition: color 0.1s;
+  transition: color var(--t-fast) var(--ease-out);
 }
 
 .layer-ctrl-body .form-check-input:checked ~ .form-check-label {
@@ -338,14 +335,15 @@
 
 /* -- Analysis panel — right column, 30 % of layout ----------------------- */
 .depth-panel {
-  width: 360px;
+  width: 384px;
   flex-shrink: 0;
-  background: var(--c-surf);
-  border-left: 1px solid var(--c-teal-pale);
+  background: oklch(99% 0.002 250);
+  border-left: 1px solid var(--c-glass-stroke);
+  box-shadow: inset 1px 0 0 oklch(100% 0 0 / 0.6);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  font-family: var(--font-body);
+  font-family: var(--font-ui);
   color: var(--c-text);
 }
 
@@ -423,28 +421,30 @@
 
 .stat-val {
   font-family: var(--font-mono);
-  font-size: 28px;
-  font-weight: 700;
+  font-size: 30px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
   line-height: 1;
-  margin-bottom: 3px;
+  margin-bottom: 4px;
   letter-spacing: -0.02em;
+  color: var(--c-text);
 }
 
 .stat-lbl {
-  font-family: var(--font-label);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
+  font-family: var(--font-ui);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--c-text-dim);
+  color: var(--c-text-mid);
 }
 
 .stat-sub {
-  font-size: 10px;
+  font-size: 11px;
   color: var(--c-text-mid);
-  margin-top: 3px;
-  line-height: 1.3;
-  min-height: 13px;
+  margin-top: 4px;
+  line-height: 1.45;
+  min-height: 16px;
 }
 
 /* -- Mini stats grid ------------------------------------------------------- */
@@ -616,11 +616,19 @@
 
 /* -- Indicator cards inside panel groups ----------------------------------- */
 .ind-card {
-  border: 1px solid var(--c-border);
+  border: 1px solid var(--c-glass-stroke);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-2);
   overflow: hidden;
-  background: oklch(99.5% 0.001 265);
+  background: oklch(100% 0 0);
+  box-shadow: var(--depth-1);
+  transition: transform var(--t-base) var(--ease-spring),
+              box-shadow var(--t-base) var(--ease-out);
+}
+
+.ind-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--depth-2);
 }
 
 .ind-card-hdr {
@@ -633,10 +641,10 @@
 }
 
 .ind-card-title {
-  font-family: var(--font-label);
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
+  font-family: var(--font-ui);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--c-text-mid);
 }
@@ -655,9 +663,9 @@
 }
 
 .ind-card-note {
-  font-size: 8px;
-  color: var(--c-text-dim);
-  font-style: italic;
+  font-size: 11px;
+  color: var(--c-text-mid);
+  line-height: 1.5;
   padding: 0 10px 4px;
 }
 
@@ -701,7 +709,8 @@
   padding: 3px var(--space-2) !important;
   flex-shrink: 0 !important;
   white-space: nowrap !important;
-  transition: background 0.1s, color 0.1s !important;
+  transition: background var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out) !important;
 }
 
 .btn-clear:hover {
@@ -728,27 +737,18 @@
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  transition: background 0.15s;
+  transition: background var(--t-base) var(--ease-out),
+              transform var(--t-base) var(--ease-spring),
+              box-shadow var(--t-base) var(--ease-out);
 }
 
 .dp-footer .btn:hover {
   background: var(--c-navy-dim) !important;
+  transform: translateY(-1px);
+  box-shadow: var(--depth-2);
 }
 
-/* -- Equal-width icon buttons (29px matches MapLibre native controls) ------- */
-.btn-ctrl-sq {
-  width: 29px !important;
-  min-width: 29px !important;
-  height: 29px !important;
-  padding: 0 !important;
-  justify-content: center !important;
-}
-
-.btn-ctrl-sq.active {
-  background: var(--c-teal-pale) !important;
-  color: var(--c-teal) !important;
-  border-color: var(--c-teal) !important;
-}
+/* (.btn-ctrl-sq removed — superseded by .nav-btn in the top nav-bar) */
 
 /* -- Expanded layer panel for accordion ------------------------------------ */
 .layer-ctrl-panel {
@@ -770,14 +770,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 5px var(--space-3);
+  padding: 6px var(--space-3);
   cursor: pointer;
   user-select: none;
-  transition: background 0.1s;
+  transition: background var(--t-fast) var(--ease-out);
 }
 
 .acc-header:hover {
-  background: var(--c-surf-hover);
+  background: var(--c-glass-hover);
 }
 
 .acc-label {
@@ -831,40 +831,44 @@
 .acc-toggle-track {
   display: inline-flex;
   align-items: center;
-  width: 28px;
-  height: 15px;
-  background: var(--c-border-str);
-  border-radius: 8px;
+  width: 34px;
+  height: 18px;
+  background: var(--c-glass-stroke-strong);
+  border-radius: 999px;
   position: relative;
   flex-shrink: 0;
-  transition: background 0.2s;
+  transition: background var(--t-base) var(--ease-spring);
 }
 
 .acc-toggle-thumb {
   position: absolute;
   left: 2px;
-  width: 11px;
-  height: 11px;
-  background: white;
+  width: 14px;
+  height: 14px;
+  background: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-  transition: left 0.2s;
+  box-shadow: 0 1px 3px oklch(20% 0.01 250 / 0.3);
+  transition: left var(--t-base) var(--ease-spring);
 }
 
 .acc-toggle-label:has(.acc-toggle-input:checked) .acc-toggle-track {
-  background: var(--c-navy);
+  background: var(--c-accent);
 }
 
 .acc-toggle-label:has(.acc-toggle-input:checked) .acc-toggle-thumb {
-  left: 15px;
+  left: 18px;
+}
+
+.acc-toggle-label:focus-within .acc-toggle-track {
+  box-shadow: 0 0 0 3px oklch(43% 0.12 218 / 0.18);
 }
 
 .acc-toggle-text {
-  font-size: 11px;
-  color: var(--c-text-dim);
-  font-family: var(--font-body);
-  transition: color 0.1s;
-  line-height: 1.35;
+  font-size: 11.5px;
+  color: var(--c-text-mid);
+  font-family: var(--font-ui);
+  transition: color var(--t-fast) var(--ease-out);
+  line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -878,11 +882,12 @@
   cursor: help;
   display: inline-flex;
   align-items: center;
-  opacity: 0.55;
-  transition: opacity 0.1s;
+  opacity: 0.7;
+  transition: opacity var(--t-fast) var(--ease-out);
 }
 
-.acc-info-wrap:hover { opacity: 1; }
+.acc-info-wrap:hover,
+.acc-info-wrap:focus-visible { opacity: 1; outline: none; }
 
 /* -- Layer legends ---------------------------------------------------------- */
 .acc-legend {
@@ -905,19 +910,19 @@
 .acc-legend-labels {
   display: flex;
   justify-content: space-between;
-  font-size: 9px;
-  color: var(--c-text-dim);
-  font-family: var(--font-label);
+  font-size: 10px;
+  color: var(--c-text-mid);
+  font-family: var(--font-ui);
+  font-variant-numeric: tabular-nums;
 }
 
 .acc-legend-bound {
-  font-size: 7px;
-  font-weight: 700;
+  font-size: 9px;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--c-text-dim);
-  opacity: 0.7;
-  margin-right: 2px;
+  margin-right: 3px;
 }
 
 .acc-legend-bound.bound-max {
@@ -992,28 +997,38 @@
 }
 
 .acc-radio {
-  font-family: var(--font-label);
-  font-size: 9px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  color: var(--c-text-dim);
-  background: var(--c-border);
+  font-family: var(--font-ui);
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: var(--c-text-mid);
+  background: oklch(94% 0.004 250);
   border: none;
-  border-radius: 2px;
-  padding: 2px 5px;
+  border-radius: var(--radius-pill);
+  padding: 4px 9px;
   cursor: pointer;
-  transition: background 0.1s, color 0.1s;
+  transition: background var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out),
+              transform var(--t-base) var(--ease-spring),
+              box-shadow var(--t-base) var(--ease-out);
   line-height: 1.4;
 }
 
 .acc-radio:hover {
-  background: var(--c-border-str);
+  background: oklch(90% 0.005 250);
   color: var(--c-text);
+  transform: translateY(-0.5px);
+}
+
+.acc-radio:focus-visible {
+  outline: 2px solid var(--c-focus);
+  outline-offset: 2px;
 }
 
 .acc-radio.active {
-  background: var(--c-navy);
+  background: var(--c-accent);
   color: #fff;
+  box-shadow: var(--depth-1);
 }
 
 /* Static ENVIPE sub-labels */
@@ -1046,68 +1061,77 @@
   flex-shrink: 0;
 }
 
-/* -- Grid toggle panel (expands horizontally to the left of the button) ---- */
+/* -- Grid toggle panel (drops down from nav-bar trigger) ------------------- */
 .grid-btn-wrap {
   position: relative;
-  display: flex;
-  flex-direction: row;
+  display: inline-flex;
   align-items: center;
-  gap: 3px;
 }
 
 .grid-panel {
   position: absolute;
-  right: calc(100% + 4px); /* opens to the left of the btn-wrap */
+  top: calc(100% + 6px);
+  right: 0;
   left: auto;
-  top: 0;
-  background: var(--c-surf);
-  border: 1px solid var(--c-border);
+  background: var(--c-glass-2);
+  backdrop-filter: var(--blur-glass);
+  -webkit-backdrop-filter: var(--blur-glass);
+  border: 1px solid var(--c-glass-stroke);
   border-radius: var(--radius-md);
-  padding: 3px;
+  padding: 4px;
   display: flex;
   flex-direction: row;
   gap: 2px;
-  box-shadow: 0 4px 12px oklch(20%  0.01 265 / 0.18);
-  z-index: 1001;
+  box-shadow: var(--depth-3);
+  z-index: 1100;
   white-space: nowrap;
-  /* animate open/close via JS .open class */
   opacity: 0;
-  transform: scaleX(0.85);
-  transform-origin: right center;
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  transform: translateY(-4px) scale(0.97);
+  transform-origin: top right;
+  transition: opacity var(--t-base) var(--ease-spring),
+              transform var(--t-base) var(--ease-spring);
   pointer-events: none;
 }
 
 .grid-panel.open {
   opacity: 1;
-  transform: scaleX(1);
+  transform: translateY(0) scale(1);
   pointer-events: auto;
 }
 
 .grid-nivel-btn {
-  width: 29px;
-  height: 23px;
+  width: 34px;
+  height: 28px;
   background: none;
   border: none;
   border-radius: var(--radius-sm);
-  font-family: var(--font-label);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  color: var(--c-text-dim);
+  font-family: var(--font-ui);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--c-text-mid);
   cursor: pointer;
-  transition: background 0.1s, color 0.1s;
+  transition: background var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out),
+              transform var(--t-base) var(--ease-spring);
   position: relative;
 }
 
 .grid-nivel-btn:not(.soon):hover {
-  background: var(--c-surf-hover);
+  background: var(--c-glass-hover);
   color: var(--c-text);
+  transform: translateY(-0.5px);
+}
+
+.grid-nivel-btn:focus-visible {
+  outline: 2px solid var(--c-focus);
+  outline-offset: 2px;
 }
 
 .grid-nivel-btn.active {
-  background: var(--c-navy);
+  background: var(--c-accent);
   color: #fff;
+  box-shadow: var(--depth-1);
 }
 
 /* N7/N8 coming-soon buttons */
@@ -1131,21 +1155,25 @@
   line-height: 1;
 }
 
-/* -- JS-positioned tooltip -------------------------------------------------- */
+/* -- JS-positioned tooltip (inverted glass) -------------------------------- */
 .depth-tooltip {
   position: fixed;
-  background: var(--c-navy);
-  color: #fff;
-  font-size: 10px;
-  font-family: var(--font-body);
-  line-height: 1.45;
-  padding: 6px 9px;
+  background: oklch(15% 0.012 250 / 0.92);
+  backdrop-filter: blur(12px) saturate(140%);
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  color: oklch(98% 0.003 250);
+  font-size: 11px;
+  font-family: var(--font-ui);
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 8px 12px;
   border-radius: var(--radius-md);
-  max-width: 210px;
+  border: 1px solid oklch(100% 0 0 / 0.08);
+  max-width: 260px;
   z-index: 99999;
   pointer-events: none;
   transform: translateY(-50%);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  box-shadow: var(--depth-3);
   word-break: break-word;
   display: none;
 }
@@ -1161,86 +1189,29 @@ button.mapbox-gl-draw_uncombine { display: none !important; }
 
 /* (draw-extra-ctrl position now set in the overrides section below) */
 
-/* -- Viewport info bar (top-center of map) ---------------------------------- */
-.viewport-bar {
-  position: absolute;
-  top: var(--space-3);
-  bottom: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 999;
-  background: var(--c-surf);
-  border: 1px solid var(--c-border);
-  border-radius: var(--radius-md);
-  padding: 4px var(--space-3);
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  white-space: nowrap;
-  box-shadow: 0 2px 8px oklch(20% 0.01 265 / 0.14);
-  pointer-events: none;
-}
-
-.vp-item {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-}
-
-.vp-key {
-  font-family: var(--font-label);
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.10em;
-  text-transform: uppercase;
-  color: var(--c-text-dim);
-}
-
-.vp-val {
-  font-family: var(--font-label);
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--c-text);
-  min-width: 38px;
-  text-align: right;
-}
-
-.vp-sep {
-  width: 1px;
-  height: 14px;
-  background: var(--c-border);
-  flex-shrink: 0;
-}
-
-/* -- Position overrides: draw-extra-ctrl below draw toolbar with safe gap ---- */
-/* draw ctrl-group: starts at 10px, 3 visible buttons + padding ~126px bottom  */
-.draw-extra-ctrl { top: 136px; right: 10px; left: auto; }
+/* (Viewport coords moved into .nav-coords inside the top nav-bar) */
 
-/* btn-controls: below draw-extra-ctrl (3 btns x 30px + 2 gaps x 2px = 94px)  */
-/* 136 + 94 + 6px gap = 236 -> start at 236px                                  */
-.btn-controls { top: 236px !important; right: 10px !important; width: auto !important; }
-
-/* State picker: opens left of draw-extra-ctrl, aligned to its top             */
-.state-picker-panel { top: 136px !important; right: 48px !important; }
-
-/* -- Reposition draw measurement display from bottom-left to top-left ------- */
+/* Draw measurement display stays at top-left of the map */
 .maplibregl-ctrl-bottom-left {
   top: 46px;
   bottom: auto;
 }
 
-/* -- State filter picker panel ---------------------------------------------- */
+/* -- State filter picker panel (drops down from nav-bar trigger) ----------- */
 .state-picker-panel {
   position: absolute;
-  top: 10px;
-  right: 48px;
-  z-index: 1000;
-  background: var(--c-surf);
-  border: 1px solid var(--c-border);
+  top: calc(100% + 6px);
+  right: 0;
+  left: auto;
+  z-index: 1100;
+  background: var(--c-glass-2);
+  backdrop-filter: var(--blur-glass);
+  -webkit-backdrop-filter: var(--blur-glass);
+  border: 1px solid var(--c-glass-stroke);
   border-radius: var(--radius-md);
   padding: var(--space-2) var(--space-3);
-  box-shadow: 0 2px 8px oklch(20% 0.01 265 / 0.14);
-  min-width: 200px;
+  box-shadow: var(--depth-3);
+  min-width: 220px;
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
@@ -1307,3 +1278,349 @@ button.mapbox-gl-draw_uncombine { display: none !important; }
   color: var(--c-text-dim);
   margin-bottom: 1px;
 }
+
+/* =========================================================================
+   TOP NAV-BAR  —  Spatial UI horizontal control strip
+   ========================================================================= */
+
+.bslib-page-fill { display: flex !important; flex-direction: column !important; }
+
+.depth-nav {
+  flex-shrink: 0;
+  height: 52px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0 var(--space-3);
+  background: var(--c-glass-1);
+  backdrop-filter: var(--blur-glass);
+  -webkit-backdrop-filter: var(--blur-glass);
+  border-bottom: 1px solid var(--c-glass-stroke);
+  box-shadow: var(--depth-1);
+  z-index: 1000;
+  position: relative;
+  font-family: var(--font-ui);
+}
+
+/* ---- Brand ---- */
+.nav-brand {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--c-text);
+  padding: 0 var(--space-2);
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+}
+
+.nav-brand-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--c-accent);
+  margin-right: 8px;
+}
+
+/* ---- Search input + popover ---- */
+.nav-search {
+  position: relative;
+  flex: 0 1 380px;
+  min-width: 240px;
+  height: 36px;
+}
+
+.nav-search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--c-text-mid);
+  pointer-events: none;
+  display: inline-flex;
+}
+
+.nav-search-input {
+  width: 100%;
+  height: 100%;
+  padding: 0 32px 0 34px;
+  font-family: var(--font-ui);
+  font-size: 13px;
+  color: var(--c-text);
+  background: oklch(100% 0 0 / 0.6);
+  border: 1px solid var(--c-glass-stroke);
+  border-radius: var(--radius-md);
+  transition: background var(--t-fast) var(--ease-out),
+              border-color var(--t-fast) var(--ease-out),
+              box-shadow var(--t-base) var(--ease-spring);
+  outline: none;
+}
+
+.nav-search-input::placeholder { color: var(--c-text-dim); }
+
+.nav-search-input:hover {
+  background: oklch(100% 0 0 / 0.78);
+  border-color: var(--c-glass-stroke-strong);
+}
+
+.nav-search-input:focus-visible {
+  border-color: var(--c-accent);
+  background: oklch(100% 0 0 / 0.95);
+  box-shadow: 0 0 0 3px oklch(43% 0.12 218 / 0.18);
+}
+
+.nav-search-clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  color: var(--c-text-mid);
+  cursor: pointer;
+  transition: background var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out);
+}
+
+.nav-search-clear:hover {
+  background: var(--c-glass-hover);
+  color: var(--c-text);
+}
+
+.nav-search.has-value .nav-search-clear { display: inline-flex; }
+
+.nav-search-results {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  background: var(--c-glass-2);
+  backdrop-filter: var(--blur-glass);
+  -webkit-backdrop-filter: var(--blur-glass);
+  border: 1px solid var(--c-glass-stroke);
+  border-radius: var(--radius-md);
+  box-shadow: var(--depth-3);
+  max-height: 320px;
+  overflow-y: auto;
+  z-index: 1100;
+  display: none;
+  animation: nav-pop-in var(--t-base) var(--ease-spring);
+}
+
+.nav-search.is-open .nav-search-results { display: block; }
+
+.nav-search-result {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--c-text);
+  cursor: pointer;
+  transition: background var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out);
+}
+
+.nav-search-result:hover,
+.nav-search-result[aria-selected="true"] {
+  background: var(--c-accent-soft);
+  color: var(--c-accent-ink);
+}
+
+.nav-search-result-meta {
+  margin-left: auto;
+  font-size: 10.5px;
+  color: var(--c-text-mid);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.nav-search-empty,
+.nav-search-loading {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--c-text-mid);
+  text-align: center;
+}
+
+@keyframes nav-pop-in {
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---- Primary action (Overview) ---- */
+.nav-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #fff;
+  background: var(--c-accent);
+  border: 1px solid var(--c-accent);
+  border-radius: var(--radius-md);
+  box-shadow: var(--depth-1);
+  cursor: pointer;
+  transition: transform var(--t-base) var(--ease-spring),
+              box-shadow var(--t-base) var(--ease-out),
+              background var(--t-fast) var(--ease-out);
+  white-space: nowrap;
+}
+
+.nav-primary:hover {
+  background: oklch(38% 0.12 218);
+  transform: translateY(-1px);
+  box-shadow: var(--depth-2);
+  color: #fff;
+}
+
+.nav-primary:active {
+  transform: translateY(0);
+}
+
+.nav-primary:focus-visible {
+  outline: 2px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+/* ---- Tool groups + dividers ---- */
+.nav-divider {
+  width: 1px;
+  height: 22px;
+  background: var(--c-glass-stroke);
+  flex-shrink: 0;
+}
+
+.nav-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Single icon-button token-source for the nav-bar */
+.nav-btn {
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--c-text-mid);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  padding: 0;
+  transition: background var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out),
+              transform var(--t-base) var(--ease-spring),
+              box-shadow var(--t-base) var(--ease-out),
+              border-color var(--t-fast) var(--ease-out);
+}
+
+.nav-btn:hover {
+  background: var(--c-glass-hover);
+  color: var(--c-text);
+  transform: translateY(-0.5px);
+  box-shadow: var(--depth-1);
+}
+
+.nav-btn:active { transform: translateY(0) scale(0.97); }
+
+.nav-btn:focus-visible {
+  outline: 2px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.nav-btn.active {
+  background: var(--c-accent-soft);
+  color: var(--c-accent-ink);
+  border-color: var(--c-accent);
+}
+
+/* Native mapgl draw buttons relocated into the nav inherit .nav-btn sizing.
+   Their built-in background icons need to be re-centered. */
+.depth-nav .mapbox-gl-draw_polygon,
+.depth-nav .mapbox-gl-draw_rectangle,
+.depth-nav .mapbox-gl-draw_radius {
+  background-color: transparent !important;
+  background-position: center center !important;
+  background-repeat: no-repeat !important;
+  border: 1px solid transparent !important;
+  box-shadow: none !important;
+}
+
+.depth-nav .mapbox-gl-draw_polygon.active,
+.depth-nav .mapbox-gl-draw_rectangle.active,
+.depth-nav .mapbox-gl-draw_radius.active {
+  background-color: var(--c-accent-soft) !important;
+  border-color: var(--c-accent) !important;
+}
+
+/* ---- Coords pill ---- */
+.nav-coords {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 32px;
+  padding: 0 12px;
+  background: oklch(100% 0 0 / 0.5);
+  border: 1px solid var(--c-glass-stroke);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  color: var(--c-text);
+  white-space: nowrap;
+}
+
+.nav-coords-item {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+}
+
+.nav-coords-key {
+  font-family: var(--font-ui);
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text-mid);
+}
+
+.nav-coords-val {
+  min-width: 44px;
+  text-align: right;
+}
+
+.nav-coords-sep {
+  width: 1px;
+  height: 12px;
+  background: var(--c-glass-stroke);
+}
+
+/* ---- Responsive collapse ---- */
+@media (max-width: 1280px) {
+  .nav-brand { display: none; }
+  .nav-search { flex-basis: 280px; }
+}
+
+@media (max-width: 1024px) {
+  .nav-coords { display: none; }
+  .nav-primary-label { display: none; }
+  .nav-primary { padding: 0; width: 36px; justify-content: center; }
+  .nav-divider:nth-of-type(n+3) { display: none; }
+}

10.11_draw_query_indicators_v10_HF.R

@@ -49,6 +49,7 @@ library(htmltools)
 library(glue)
 library(writexl)
 library(ggplot2)
+library(httr2)
 
 source("helpers.R")
 
@@ -58,29 +59,31 @@ source("helpers.R")
 DB_PATH <- Sys.getenv("DEPTH_DDB_PATH", "/app/depth_mexico.duckdb")
 
 # --- Colour constants -----------------------------------------------------------
+# Recalibrated for Spatial UI light mode: saturation dropped ~10%, no neon,
+# all foreground/data colours stay AA-distinguishable on the near-white canvas.
 COL_RISK   <- "#032425"
 COL_INFRA  <- "#006B82"
 COL_COUNT  <- "#374151"
 
-COL_RED    <- "#b91c2e"
-COL_YEL    <- "#DEB406"
-COL_AMBER  <- "#405162"
-COL_PURPLE <- "#94579D"
-COL_GREEN  <- "#337F5E"
+COL_RED    <- "#9E2A3A"   # muted brick red
+COL_YEL    <- "#B89307"   # muted ochre (was bright #DEB406)
+COL_AMBER  <- "#3A4B5C"   # cool slate (point colour)
+COL_PURPLE <- "#7E4A86"   # toned-down mauve
+COL_GREEN  <- "#2D6E54"   # forest, lower chroma
 COL_BLUE   <- COL_RISK
-COL_LIGHT_BLUE   <- "#009BC1"
+COL_LIGHT_BLUE   <- "#0987A8"  # softer teal-blue
 
 BAR_RAMP <- rev(c(
-  "#fdba74", "#fb923c", "#f97316", "#ef4444",
-  "#dc2626", "#b91c1c", "#991b1b", "#7f1d1d", "#450a0a", "#1c0000"
+  "#F2CFBA", "#E8A98D", "#D88665", "#C46248",
+  "#A8482F", "#8C3320", "#6E2418", "#511811", "#321008", "#3D0F0F"
 ))
 
-# Palettes
+# Palettes — recalibrated (no neon; uniform lightness steps in oklch)
 CRIME_STEP_PAL <- c("#E8D2CB","#CFAEAE", "#B38B97", "#936A85",
                     "#6E4F6E", "#4B3654", "#2A1F3B")
-DESAP_PAL  <- c("#FFFFFF00", "#FFF46A", "#FFE935", "#FFDD00", "#FF9441", "#FF4B71","#FF00A2")
+DESAP_PAL  <- c("#FFFFFF00", "#FAEBED", "#F1CDD3", "#E8A6B3", "#D8688F", "#B53868", "#7B1843")
 PAM_PAL    <- c("#EDF4F1","#C7D9D2","#9ABFB3","#6EA595","#4F8B7A","#3B6F63","#2A524A")
-ENVIPE_PAL <- c("#fff7ed", "#fdba74", "#f97316", "#ea580c", "#c2410c", "#7c2d12")
+ENVIPE_PAL <- c("#fff7ed", "#F5D5B5", "#E8A87C", "#D87B4B", "#A8542A", "#5C2A12")
 
 GIIM_COLORS <- c(
   "Nulo"      = "#f8fafc",
@@ -92,12 +95,12 @@ GIIM_COLORS <- c(
   "No aplica" = "#94a3b8"
 )
 
-MIGRANTS_PAL <- c("#FDFBF3", "#F8F0CD", "#F2E19B", "#EBD26A", "#E5C338", "#DEB406")
-GRAVES_PAL   <- c("#faf5ff", "#ff9999", "#ff6666", "#ff4d4d", "#cc2929", "#660000")
-INFRA_PAL    <- c("#f0fdf4", "#bbf7d0", "#22c55e", "#16a34a", "#166534", "#052e16")
-OCVED_PAL    <- c("#fffbeb", "#fde68a", "#f59e0b", "#d97706", "#b45309", "#713f12")
-GED_PAL      <- c("#eff6ff", "#bfdbfe", "#3b82f6", "#2563eb", "#1d4ed8", "#1e3a8a")
-FOSAS_PAL    <- c("#fff7ed", "#fed7aa", "#fb923c", "#c2410c", "#7c2d12", "#3b0402")
+MIGRANTS_PAL <- c("#FAF6E1", "#F0E5B5", "#E5D080", "#D6B852", "#B89307", "#8C6F00")
+GRAVES_PAL   <- c("#F8E6E6", "#EAB8B8", "#D88B8B", "#C46161", "#9E3030", "#5C0E0E")
+INFRA_PAL    <- c("#EAF6EE", "#BCDDC6", "#7AB89A", "#4E9777", "#27704E", "#0E3A28")
+OCVED_PAL    <- c("#F5ECDD", "#E2C99E", "#C7A063", "#9E7A38", "#705220", "#3F2D10")
+GED_PAL      <- c("#E5EDF5", "#BCD0E3", "#7AA1C5", "#4F7CA8", "#2F548A", "#1B3A66")
+FOSAS_PAL    <- c("#F5E8DC", "#E2C0A2", "#C18A65", "#945C3C", "#5E331F", "#3B1410")
 
 CRIME_COLS <- list(
   "Homicide rate"     = list(col = "homicidio",      breaks = c(10, 30, 60, 100, 150)),
@@ -459,6 +462,67 @@ web_sql_simplified <- function(name, tol = 0.008, ...) {
 }
 .APP_CACHE <- .load_app_cache()
 
+#######################################################################################
+# Nominatim geocoder proxy -- server-side fetch with 24h cache.
+#   The client posts a query via input$search_query; the server calls Nominatim
+#   from R with a proper User-Agent (Nominatim usage policy requirement) and
+#   caches results in-process for 24h. Results are pushed back to the client via
+#   custom message 'search_results'.
+#######################################################################################
+
+.NOMINATIM_CACHE <- new.env(parent = emptyenv())
+.NOMINATIM_UA    <- "DEPTH-RiskMap/1.0 (Rights Lab, University of Nottingham)"
+
+nominatim_search <- function(q, limit = 6, country = "mx") {
+  q <- trimws(q %||% "")
+  if (nchar(q) < 3) return(list())
+  key <- paste0(tolower(country), "|", tolower(q))
+  now <- as.numeric(Sys.time())
+  cached <- .NOMINATIM_CACHE[[key]]
+  if (!is.null(cached) && (now - cached$ts) < 86400) return(cached$value)
+
+  out <- tryCatch({
+    req <- httr2::request("https://nominatim.openstreetmap.org/search") |>
+      httr2::req_url_query(
+        format       = "json",
+        countrycodes = country,
+        limit        = limit,
+        q            = q,
+        addressdetails = 0
+      ) |>
+      httr2::req_headers(
+        `User-Agent`      = .NOMINATIM_UA,
+        `Accept-Language` = "es,en"
+      ) |>
+      httr2::req_timeout(8) |>
+      httr2::req_retry(max_tries = 2, backoff = function(i) 1)
+    resp <- httr2::req_perform(req)
+    raw  <- httr2::resp_body_json(resp, simplifyVector = FALSE)
+    lapply(raw, function(r) {
+      label <- paste(strsplit(r$display_name %||% "", ",")[[1]][1:2], collapse = ",")
+      label <- trimws(gsub(",\\s*$", "", label))
+      type  <- r$type %||% ""
+      zoom  <- if (identical(type, "city") || identical(type, "town"))         11
+               else if (identical(type, "state") || identical(type, "region")) 7
+               else if (identical(type, "country"))                            5
+               else                                                            14
+      list(
+        label = label,
+        meta  = type,
+        lat   = as.numeric(r$lat),
+        lon   = as.numeric(r$lon),
+        zoom  = zoom
+      )
+    })
+  }, error = function(e) {
+    message("[nominatim] ", conditionMessage(e))
+    list()
+  })
+
+  .NOMINATIM_CACHE[[key]] <- list(ts = now, value = out)
+  out
+}
+
 #######################################################################################
 # WEB_SPEC -- declarative layer / accordion / panel / palette config.
 #   Single source consumed by the Shiny UI AND the docs converter so the two
@@ -697,31 +761,12 @@ LUCIDE_JS <- tags$head(
           Shiny.setInputValue('grid_nivel',  '6',             { priority: 'event' });
         }, 300);
 
-        // mapgl injects rect/radius into the first ctrl-group it finds.
-        // Identify draw ctrl-group by the trash button and move them there.
-        var fixTries = 0;
-        var fixTimer = setInterval(function() {
-          fixTries++;
-          var mapEl = document.querySelector('.maplibregl-map');
-          if (!mapEl) { if (fixTries >= 40) clearInterval(fixTimer); return; }
-          var drawGroup = null;
-          mapEl.querySelectorAll('.maplibregl-ctrl-group').forEach(function(g) {
-            if (g.querySelector('.mapbox-gl-draw_trash')) drawGroup = g;
-          });
-          if (!drawGroup) { if (fixTries >= 40) clearInterval(fixTimer); return; }
-          var trashBtn = drawGroup.querySelector('.mapbox-gl-draw_trash');
-          var moved = false;
-          mapEl.querySelectorAll('.maplibregl-ctrl-group').forEach(function(g) {
-            if (g === drawGroup) return;
-            ['.mapbox-gl-draw_rectangle', '.mapbox-gl-draw_radius'].forEach(function(sel) {
-              var btn = g.querySelector(sel);
-              if (!btn) return;
-              if (trashBtn) drawGroup.insertBefore(btn, trashBtn);
-              else          drawGroup.appendChild(btn);
-              moved = true;
-            });
-          });
-          if (moved || fixTries >= 40) clearInterval(fixTimer);
+        // Relocate native mapgl draw buttons (polygon/rectangle/radius) into the
+        // top nav-bar so they sit alongside the custom selection tools.
+        var navTries = 0;
+        var navTimer = setInterval(function() {
+          navTries++;
+          if (relocateDrawButtonsToNav() || navTries >= 40) clearInterval(navTimer);
         }, 100);
       });
 
@@ -778,9 +823,11 @@ LUCIDE_JS <- tags$head(
     function toggleLayerPanel() {
       var body = document.getElementById('layer-ctrl-body');
       var icon = document.getElementById('layer-ctrl-icon');
+      var hdr  = document.querySelector('.layer-ctrl-header');
       var hidden = body.style.display === 'none';
       body.style.display = hidden ? '' : 'none';
       icon.innerHTML = hidden ? '&#9650;' : '&#9660;';
+      if (hdr) hdr.setAttribute('aria-expanded', hidden ? 'true' : 'false');
     }
 
     function toggleGroup(id) {
@@ -907,11 +954,172 @@ LUCIDE_JS <- tags$head(
         set('vp-lon',  c.lng.toFixed(3));
         set('vp-lat',  c.lat.toFixed(3));
         set('vp-zoom', m.getZoom().toFixed(1));
-        set('vp-brng', m.getBearing().toFixed(0) + '°');
-        set('vp-ptch', m.getPitch().toFixed(0) + '°');
       } catch(e) {}
     }
 
+    // -- Native draw-button relocation -----------------------------------------
+    // mapgl mounts its draw control top-right inside the map. We move the
+    // polygon/rectangle/radius buttons into #nav-tools-select so all drawing
+    // and selection controls sit together in the nav-bar.
+    function relocateDrawButtonsToNav() {
+      var mapEl = document.querySelector('.maplibregl-map');
+      var nav   = document.getElementById('nav-tools-select');
+      if (!mapEl || !nav) return false;
+      var nativeBtns = mapEl.querySelectorAll(
+        '.mapbox-gl-draw_polygon, .mapbox-gl-draw_rectangle, .mapbox-gl-draw_radius'
+      );
+      if (!nativeBtns.length) return false;
+      var firstCustom = document.getElementById('btn_mode_click');
+      nativeBtns.forEach(function(btn) {
+        if (btn.dataset.navMoved === '1') return;
+        btn.dataset.navMoved = '1';
+        btn.classList.add('nav-btn');
+        if (!btn.getAttribute('aria-label')) {
+          btn.setAttribute('aria-label', btn.getAttribute('title') || 'Draw');
+        }
+        if (firstCustom && firstCustom.parentNode === nav) {
+          nav.insertBefore(btn, firstCustom);
+        } else {
+          nav.appendChild(btn);
+        }
+      });
+      // Hide now-empty mapgl ctrl-group containers on the map
+      mapEl.querySelectorAll('.maplibregl-ctrl-top-right .maplibregl-ctrl-group')
+        .forEach(function(g) {
+          var hasVisible = false;
+          g.querySelectorAll('button').forEach(function(b) {
+            if (b.offsetParent !== null && !b.dataset.navMoved) hasVisible = true;
+          });
+          if (!hasVisible) g.style.display = 'none';
+        });
+      return true;
+    }
+
+    // -- Nav-bar search (R-proxied Nominatim) ----------------------------------
+    var COORD_RE = /^\\s*(-?\\d{1,3}(?:\\.\\d+)?)\\s*[,;\\s]\\s*(-?\\d{1,3}(?:\\.\\d+)?)\\s*$/;
+    var searchDebounce = null;
+    var searchLastQuery = '';
+
+    function navSearchInit() {
+      var inp = document.getElementById('nav_search_input');
+      if (!inp) return;
+      inp.addEventListener('input', function(e) {
+        var q = e.target.value;
+        var wrap = document.getElementById('nav-search-wrap');
+        wrap.classList.toggle('has-value', q.trim().length > 0);
+
+        var m = q.trim().match(COORD_RE);
+        if (m) {
+          var lat = parseFloat(m[1]), lon = parseFloat(m[2]);
+          // Heuristic: if first number exceeds latitude range, user wrote lon,lat -- swap
+          if (Math.abs(lat) > 90) { var t = lat; lat = lon; lon = t; }
+          navSearchRender([{
+            label: 'Go to coordinates',
+            meta:  lat.toFixed(4) + ', ' + lon.toFixed(4),
+            lat: lat, lon: lon, zoom: 12
+          }]);
+          return;
+        }
+        if (q.trim().length < 3) { navSearchClose(); return; }
+
+        clearTimeout(searchDebounce);
+        searchDebounce = setTimeout(function() {
+          if (q === searchLastQuery) return;
+          searchLastQuery = q;
+          navSearchRenderLoading();
+          if (typeof Shiny !== 'undefined') {
+            Shiny.setInputValue('search_query', q, { priority: 'event' });
+          }
+        }, 300);
+      });
+
+      inp.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') { navSearchClose(); inp.blur(); }
+        if (e.key === 'Enter') {
+          var first = document.querySelector('.nav-search-result');
+          if (first) first.click();
+        }
+      });
+
+      // Close on outside click
+      document.addEventListener('click', function(e) {
+        if (!e.target.closest('#nav-search-wrap')) navSearchClose();
+      });
+    }
+
+    function navSearchRenderLoading() {
+      var box = document.getElementById('nav-search-results');
+      box.innerHTML = '<div class=\"nav-search-loading\">Searching...</div>';
+      document.getElementById('nav-search-wrap').classList.add('is-open');
+    }
+
+    function navSearchRender(items) {
+      var box = document.getElementById('nav-search-results');
+      var wrap = document.getElementById('nav-search-wrap');
+      if (!items || !items.length) {
+        box.innerHTML = '<div class=\"nav-search-empty\">No matches</div>';
+      } else {
+        var html = '';
+        for (var i = 0; i < items.length; i++) {
+          var it = items[i];
+          html += '<div class=\"nav-search-result\" role=\"option\"' +
+                  ' data-lat=\"' + it.lat + '\"' +
+                  ' data-lon=\"' + it.lon + '\"' +
+                  ' data-zoom=\"' + (it.zoom || 12) + '\"' +
+                  ' onclick=\"navSearchPick(this)\">' +
+                  '<span>' + escapeHtml(it.label) + '</span>' +
+                  '<span class=\"nav-search-result-meta\">' + escapeHtml(it.meta || '') + '</span>' +
+                  '</div>';
+        }
+        box.innerHTML = html;
+      }
+      wrap.classList.add('is-open');
+    }
+
+    function escapeHtml(s) {
+      return String(s).replace(/[&<>\"']/g, function(c) {
+        return { '&':'&amp;', '<':'&lt;', '>':'&gt;', '\"':'&quot;', \"'\":'&#39;' }[c];
+      });
+    }
+
+    function navSearchPick(el) {
+      var lat = parseFloat(el.dataset.lat),
+          lon = parseFloat(el.dataset.lon),
+          zm  = parseFloat(el.dataset.zoom);
+      if (typeof Shiny !== 'undefined') {
+        Shiny.setInputValue('search_flyto',
+                            { lat: lat, lon: lon, zoom: zm, ts: Date.now() },
+                            { priority: 'event' });
+      }
+      navSearchClose();
+    }
+
+    function navSearchClose() {
+      var w = document.getElementById('nav-search-wrap');
+      if (w) w.classList.remove('is-open');
+    }
+
+    function clearSearch() {
+      var inp = document.getElementById('nav_search_input');
+      if (!inp) return;
+      inp.value = '';
+      searchLastQuery = '';
+      var wrap = document.getElementById('nav-search-wrap');
+      wrap.classList.remove('has-value', 'is-open');
+      inp.focus();
+    }
+
+    // Init search wiring after DOM is ready (LUCIDE_JS runs at <head>)
+    document.addEventListener('DOMContentLoaded', function() { setTimeout(navSearchInit, 200); });
+    // And register the server-side results handler once Shiny connects
+    $(document).on('shiny:connected', function() {
+      if (typeof Shiny !== 'undefined' && Shiny.addCustomMessageHandler) {
+        Shiny.addCustomMessageHandler('search_results', function(msg) {
+          navSearchRender(msg && msg.items ? msg.items : []);
+        });
+      }
+    });
+
     function toggleDpGroup(id) {
       var body = document.getElementById('dp-group-body-' + id);
       var icon = document.getElementById('dp-group-icon-' + id);
@@ -1000,8 +1208,12 @@ acc_layer <- function(value, label, tooltip = NULL, legend = NULL, checked = FAL
         span(class = "acc-toggle-text", label)
       ),
       if (!is.null(tooltip))
-        tags$span(class = "acc-info-wrap", `data-tooltip` = tooltip,
-          HTML('<i data-lucide="info" style="width:11px;height:11px;stroke-width:2.5;color:var(--c-text-dim)"></i>')
+        tags$span(class = "acc-info-wrap",
+          `data-tooltip` = tooltip,
+          role           = "button",
+          tabindex       = "0",
+          `aria-label`   = paste0("Info: ", tooltip),
+          HTML('<i data-lucide="info" style="width:12px;height:12px;stroke-width:2.5;color:var(--c-text-mid)"></i>')
         )
     ),
     if (!is.null(legend)) legend
@@ -1247,153 +1459,217 @@ render_panel_groups <- function() {
 # === UI =========================================================================
 
 ui <- page_fillable(
-  theme   = bs_theme(version = 5, bg = "#0f172a", fg = "#f8fafc",
-                     primary = COL_BLUE, base_font = font_google("Inter")),
+  theme   = bs_theme(version = 5, bg = "#FAFAFB", fg = "#0F172A",
+                     primary = "#006B82", base_font = font_google("Inter")),
   padding = 0,
   LUCIDE_JS,
   includeCSS("10.08_styles.css"),
 
-  div(class = "depth-shell",
-
-    # === Map area (flex: 1) =====================================================
-    div(class = "depth-map",
-
-      maplibreOutput("map", width = "100%", height = "100%"),
-
-      # --- Viewport info bar (bottom-center) ---------------------------------
-      div(id = "viewport-bar", class = "viewport-bar",
-          span(class = "vp-item",
-               span(class = "vp-key", "Lon"),
-               span(class = "vp-val", id = "vp-lon", "--")),
-          span(class = "vp-sep"),
-          span(class = "vp-item",
-               span(class = "vp-key", "Lat"),
-               span(class = "vp-val", id = "vp-lat", "--")),
-          span(class = "vp-sep"),
-          span(class = "vp-item",
-               span(class = "vp-key", "Zoom"),
-               span(class = "vp-val", id = "vp-zoom", "--")),
-          span(class = "vp-sep"),
-          span(class = "vp-item",
-               span(class = "vp-key", "Bearing"),
-               span(class = "vp-val", id = "vp-brng", "--")),
-          span(class = "vp-sep"),
-          span(class = "vp-item",
-               span(class = "vp-key", "Pitch"),
-               span(class = "vp-val", id = "vp-ptch", "--"))
+  # === TOP NAV-BAR ============================================================
+  tags$nav(class = "depth-nav", role = "banner",
+
+    # Brand
+    div(class = "nav-brand",
+        span(class = "nav-brand-dot"),
+        "DEPTH"),
+
+    # Search (place + coordinates) -- queries Nominatim via the R proxy
+    div(class = "nav-search", id = "nav-search-wrap",
+      tags$span(class = "nav-search-icon",
+        HTML('<i data-lucide="search" style="width:16px;height:16px;stroke-width:2"></i>')),
+      tags$input(
+        id           = "nav_search_input",
+        class        = "nav-search-input",
+        type         = "search",
+        placeholder  = "Search a place, municipality or '19.43,-99.13'",
+        autocomplete = "off",
+        spellcheck   = "false",
+        `aria-label` = "Search places or coordinates"
       ),
+      tags$button(class = "nav-search-clear", type = "button",
+                  `aria-label` = "Clear search",
+                  onclick      = "clearSearch()",
+                  HTML('<i data-lucide="x" style="width:14px;height:14px;stroke-width:2"></i>')),
+      div(class = "nav-search-results", id = "nav-search-results",
+          role = "listbox", `aria-label` = "Search results")
+    ),
 
-      # --- Extra draw controls (between draw toolbar and grid buttons) ----------
-      tags$div(class = "draw-extra-ctrl",
-        tags$button(id = "btn_mode_click", class = "draw-extra-btn",
-                    title = "Click municipality to analyse", onclick = "setMapMode('click')",
-                    HTML('<i data-lucide="mouse-pointer-click" style="width:14px;height:14px;stroke-width:2.5"></i>')),
-        tags$button(id = "btn_state_filter", class = "draw-extra-btn",
-                    title = "Filter by state", onclick = "toggleStatePanel()",
-                    HTML('<i data-lucide="text-cursor" style="width:14px;height:14px;stroke-width:2.5"></i>')),
-        tags$button(id = "btn_brush_clear", class = "draw-extra-btn",
-                    title = "Clear selection", onclick = "clearDrawing()",
-                    HTML('<i data-lucide="brush-cleaning" style="width:14px;height:14px;stroke-width:2.5"></i>'))
+    # Spacer pushes the rest to the right
+    div(style = "flex:1"),
+
+    # Primary -- Overview (reset to full Mexico)
+    actionButton("home_btn", class = "nav-primary",
+                 `aria-label` = "Reset map to full Mexico overview",
+                 tagList(
+                   HTML('<i data-lucide="house" style="width:14px;height:14px;stroke-width:2"></i>'),
+                   span(class = "nav-primary-label", "Overview")
+                 )),
+
+    div(class = "nav-divider"),
+
+    # Selection / drawing tool group.
+    # Native mapgl draw buttons (rectangle/radius/polygon) are relocated into
+    # this container by initRelocateDrawButtons() after the map mounts.
+    div(class = "nav-group", id = "nav-tools-select",
+      tags$button(id = "btn_mode_click", class = "nav-btn",
+                  type = "button",
+                  `aria-label` = "Click a municipality to analyse it",
+                  title        = "Click a municipality",
+                  onclick      = "setMapMode('click')",
+                  HTML('<i data-lucide="mouse-pointer-click" style="width:16px;height:16px;stroke-width:2"></i>')),
+      div(class = "state-btn-wrap",
+        tags$button(id = "btn_state_filter", class = "nav-btn",
+                    type = "button",
+                    `aria-label` = "Filter analysis by state",
+                    title        = "Filter by state",
+                    onclick      = "toggleStatePanel()",
+                    HTML('<i data-lucide="land-plot" style="width:16px;height:16px;stroke-width:2"></i>')),
+        div(id = "state-picker-panel", class = "state-picker-panel", style = "display:none;",
+            div(class = "state-picker-header",
+                span("Filter by state"),
+                tags$button(class = "state-picker-close", type = "button",
+                            onclick = "toggleStatePanel()", HTML("&times;"))
+            ),
+            selectInput("state_select", NULL,
+                        choices = list(), selectize = FALSE, width = "100%"),
+            div(class = "state-picker-actions",
+                actionButton("state_filter_clear", "Clear",
+                             class = "btn btn-clear",
+                             style = "flex:1; font-size:10px;")
+            )
+        )
       ),
+      tags$button(id = "btn_brush_clear", class = "nav-btn",
+                  type = "button",
+                  `aria-label` = "Clear current selection",
+                  title        = "Clear selection",
+                  onclick      = "clearDrawing()",
+                  HTML('<i data-lucide="eraser" style="width:16px;height:16px;stroke-width:2"></i>'))
+    ),
 
-      # --- Right column: home + grid + style + 3D (below draw-extra-ctrl) -----
-      div(class = "btn-controls",
-          actionButton("home_btn",
-                       HTML('<i data-lucide="house" style="width:14px;height:14px;display:inline-block;vertical-align:middle"></i>'),
-                       class = "btn btn-ctrl btn-ctrl-sq",
-                       title = "Reset to full Mexico overview"),
-          # Grid toggle with expandable nivel panel + info icon
-          div(class = "grid-btn-wrap",
-              tags$span(
-                class = "acc-info-wrap grid-info-btn",
-                `data-tooltip` = "Overlay a spatial grid on the map. Select resolution: N4 (~500 km2, national overview) to N6 (~20 km2, municipality level). Grid colours follow the active layer.",
-                HTML('<i data-lucide="info" style="width:11px;height:11px;stroke-width:2.5;color:var(--c-text-mid)"></i>')
-              ),
-              tags$button(
-                id      = "grid-icon-btn",
-                class   = "btn btn-ctrl btn-ctrl-sq",
-                onclick = "toggleGridPanel()",
-                title   = "Toggle spatial grid",
-                HTML('<i data-lucide="grid-3x3" style="width:14px;height:14px;display:inline-block;vertical-align:middle"></i>')
-              ),
-              div(id = "grid-panel", class = "grid-panel", style = "display:none;",
-                  lapply(WEB_SPEC$niveles, function(nv) {
-                    tags$button(
-                      class = paste0("grid-nivel-btn", if (nv == "6") " active" else ""),
-                      `data-nivel` = nv,
-                      onclick = paste0("setGridNivel('", nv, "')"),
-                      paste0("N", nv)
-                    )
-                  }),
-                  lapply(WEB_SPEC$niveles_soon, function(nv)
-                    tags$button(class = "grid-nivel-btn soon",
-                                title = "Coming soon", paste0("N", nv)))
-              )
-          ),
-          div(class = "style-btn-wrap",
+    div(class = "nav-divider"),
+
+    # View tool group: grid (with nivel popover), basemap style, 3D toggle
+    div(class = "nav-group",
+      div(class = "grid-btn-wrap",
+        tags$span(
+          class = "acc-info-wrap grid-info-btn",
+          `data-tooltip` = "Overlay a spatial grid on the map. Select resolution: N4 (~500 km2, national overview) to N7 (~4 km2, local detail). Grid colours follow the active layer.",
+          style = "display:none;",
+          HTML('<i data-lucide="info" style="width:11px;height:11px;stroke-width:2.5;color:var(--c-text-mid)"></i>')
+        ),
+        tags$button(
+          id      = "grid-icon-btn",
+          class   = "nav-btn",
+          type    = "button",
+          onclick = "toggleGridPanel()",
+          `aria-label` = "Toggle spatial grid overlay",
+          title   = "Toggle grid",
+          HTML('<i data-lucide="grid-3x3" style="width:16px;height:16px;stroke-width:2"></i>')
+        ),
+        div(id = "grid-panel", class = "grid-panel", style = "display:none;",
+            lapply(WEB_SPEC$niveles, function(nv) {
               tags$button(
-                class   = "btn btn-ctrl btn-ctrl-sq",
-                onclick = "toggleStylePicker()",
-                title   = "Map style",
-                HTML('<i data-lucide="map" style="width:14px;height:14px;display:inline-block;vertical-align:middle"></i>')
-              ),
-              div(id = "style-picker", class = "style-picker",
-                  style = "display:none;",
-                  tags$button(class = "style-option active",
-                              `data-style` = "dark-matter",
-                              onclick = "setMapStyle('dark-matter')",
-                              "Dark Matter"),
-                  tags$button(class = "style-option",
-                              `data-style` = "positron",
-                              onclick = "setMapStyle('positron')",
-                              "Positron"),
-                  tags$button(class = "style-option",
-                              `data-style` = "voyager",
-                              onclick = "setMapStyle('voyager')",
-                              "Voyager")
+                class = paste0("grid-nivel-btn", if (nv == "6") " active" else ""),
+                `data-nivel` = nv,
+                onclick = paste0("setGridNivel('", nv, "')"),
+                paste0("N", nv)
               )
-          ),
-          actionButton("toggle_3d",
-                       HTML('<i data-lucide="box" style="width:14px;height:14px;display:inline-block;vertical-align:middle"></i>'),
-                       class = "btn btn-ctrl btn-ctrl-sq",
-                       title = "Toggle 2D / 3D")),
+            }),
+            lapply(WEB_SPEC$niveles_soon, function(nv)
+              tags$button(class = "grid-nivel-btn soon",
+                          title = "Coming soon", paste0("N", nv)))
+        )
+      ),
+      div(class = "style-btn-wrap",
+        tags$button(
+          class   = "nav-btn",
+          type    = "button",
+          onclick = "toggleStylePicker()",
+          `aria-label` = "Choose basemap style",
+          title   = "Basemap",
+          HTML('<i data-lucide="map" style="width:16px;height:16px;stroke-width:2"></i>')
+        ),
+        div(id = "style-picker", class = "style-picker", style = "display:none;",
+          tags$button(class = "style-option active",
+                      `data-style` = "positron",
+                      onclick = "setMapStyle('positron')",
+                      "Positron"),
+          tags$button(class = "style-option",
+                      `data-style` = "dark-matter",
+                      onclick = "setMapStyle('dark-matter')",
+                      "Dark Matter"),
+          tags$button(class = "style-option",
+                      `data-style` = "voyager",
+                      onclick = "setMapStyle('voyager')",
+                      "Voyager")
+        )
+      ),
+      actionButton("toggle_3d", class = "nav-btn",
+                   `aria-label` = "Toggle 2D / 3D view",
+                   title        = "Toggle 2D / 3D",
+                   HTML('<i data-lucide="box" style="width:16px;height:16px;stroke-width:2"></i>'))
+    ),
+
+    div(class = "nav-divider"),
+
+    # Coords pill -- live Lon / Lat / Zoom (Bearing + Pitch dropped)
+    div(class = "nav-coords", role = "status",
+        `aria-label` = "Map viewport coordinates",
+        span(class = "nav-coords-item",
+             span(class = "nav-coords-key", "Lon"),
+             span(class = "nav-coords-val", id = "vp-lon", "--")),
+        span(class = "nav-coords-sep"),
+        span(class = "nav-coords-item",
+             span(class = "nav-coords-key", "Lat"),
+             span(class = "nav-coords-val", id = "vp-lat", "--")),
+        span(class = "nav-coords-sep"),
+        span(class = "nav-coords-item",
+             span(class = "nav-coords-key", "Zoom"),
+             span(class = "nav-coords-val", id = "vp-zoom", "--"))
+    )
+  ),
+  # === END TOP NAV-BAR ========================================================
+
+  div(class = "depth-shell",
+
+    # === Map area (flex: 1) =====================================================
+    div(class = "depth-map",
+
+      maplibreOutput("map", width = "100%", height = "100%"),
 
       # --- Accordion layer panel (bottom-left) --------------------------------
-      div(class = "layer-ctrl-panel",
+      tags$section(class = "layer-ctrl-panel",
+          role         = "region",
+          `aria-label` = "Map data layers",
           div(class = "layer-ctrl-header",
-              onclick = "toggleLayerPanel()",
-              HTML('<i data-lucide="layers-plus" style="width:13px;height:13px;flex-shrink:0"></i> Data layers available'),
+              role     = "button",
+              tabindex = "0",
+              onclick  = "toggleLayerPanel()",
+              onkeydown = "if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleLayerPanel();}",
+              `aria-expanded` = "false",
+              `aria-controls` = "layer-ctrl-body",
+              `aria-label`    = "Toggle data layers panel",
+              HTML('<i data-lucide="layers-plus" style="width:14px;height:14px;flex-shrink:0"></i> Data layers available'),
               span(id = "layer-ctrl-icon", class = "layer-ctrl-icon",
                    HTML("&#9660;"))),
           div(id = "layer-ctrl-body", class = "layer-ctrl-body", style = "display:none;",
             render_accordion()
           )), # end layer-ctrl-panel
 
-      # --- State filter picker panel (top-right, near draw controls) ----------
-      div(id = "state-picker-panel", class = "state-picker-panel", style = "display:none;",
-          div(class = "state-picker-header",
-              span("Filter by state"),
-              tags$button(class = "state-picker-close", type = "button",
-                          onclick = "toggleStatePanel()", HTML("&times;"))
-          ),
-          selectInput("state_select", NULL,
-                      choices = list(), selectize = FALSE, width = "100%"),
-          div(class = "state-picker-actions",
-              actionButton("state_filter_clear", "Clear",
-                           class = "btn btn-clear", style = "flex:1; font-size:10px;")
-          )
-      ),
-
     ), # end .depth-map
 
     # === Analysis panel — right column =========================================
-    div(class = "depth-panel",
+    tags$aside(class = "depth-panel",
+      role         = "complementary",
+      `aria-label` = "Analysis panel",
       tags$div(style = "display:none;", actionButton("clear_btn", "")),
       div(class = "dp-header",
           tags$h1(class = "dp-title", WEB_SPEC$panel$title),
           tags$p(class = "dp-sub", WEB_SPEC$panel$subtitle),
           div(class = "dp-selection-badge",
-              HTML('<i data-lucide="map-pin" style="width:9px;height:9px;stroke-width:2.5;flex-shrink:0"></i>'),
+              `aria-live` = "polite",
+              HTML('<i data-lucide="map-pin" style="width:10px;height:10px;stroke-width:2.5;flex-shrink:0" aria-hidden="true"></i>'),
               textOutput("panel_subtitle", inline = TRUE))
       ),
 
@@ -1848,7 +2124,6 @@ server <- function(input, output, session) {
       style  = carto_style("positron"),
       center = c(-102.5, 23.6), zoom = 4.5
     ) |>
-      add_geocoder_control(position = "top-left", placeholder = "Search location...") |>
       add_draw_control(
         position          = "top-right",
         freehand          = TRUE,
@@ -2237,6 +2512,22 @@ server <- function(input, output, session) {
       ease_to(c(-102.5, 23.6), zoom = 4.5, pitch = 0, bearing = 0, duration = 1200)
   })
 
+  # --- Nav-bar search: proxied Nominatim lookup -------------------------------
+  observeEvent(input$search_query, {
+    q <- input$search_query
+    items <- nominatim_search(q)
+    session$sendCustomMessage("search_results", list(items = items))
+  }, ignoreInit = TRUE, ignoreNULL = TRUE)
+
+  # --- Nav-bar search: fly to picked result -----------------------------------
+  observeEvent(input$search_flyto, {
+    pt <- input$search_flyto
+    if (is.null(pt) || is.null(pt$lat) || is.null(pt$lon)) return()
+    zm <- pt$zoom %||% 12
+    maplibre_proxy("map") |>
+      fly_to(center = c(pt$lon, pt$lat), zoom = zm, duration = 1500)
+  }, ignoreInit = TRUE, ignoreNULL = TRUE)
+
   observeEvent(input$toggle_3d, {
     new_3d  <- !is_3d()
     is_3d(new_3d)