Upload 5 files

10.08_styles.css

@@ -0,0 +1,1309 @@
+/* ============================================================================
+   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');
+
+/* -- Design tokens --------------------------------------------------------- */
+:root {
+  /* 4pt spacing scale */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+
+  /* 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);
+
+  /* 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);
+
+  /* Deep teal — accent for interactive & risk indicators */
+  --c-navy:     #032425;
+  --c-navy-dim: #0a4042;
+
+  /* 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);
+
+  /* Brand teal at full brightness — used only for decorative border-bottom */
+  --c-teal-brand: oklch(68%  0.12  218);
+
+  /* Typography */
+  --font-label: 'DM Sans', system-ui, sans-serif;
+  --font-body:  'Space Mono', system-ui, sans-serif;
+  --font-mono:  'Space Mono', monospace;
+
+  /* Radii — restrained */
+  --radius-sm:  3px;
+  --radius-md:  6px;
+  --radius-lg: 10px;
+}
+
+/* -- Page shell ------------------------------------------------------------ */
+.bslib-page-fill {
+  display: flex !important;
+  flex-direction: column !important;
+  height: 100dvh !important;
+  overflow: hidden !important;
+}
+
+/* depth-shell: row container — map takes ~70 %, panel fills ~30 % */
+.depth-shell {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Map area: all overlay controls are absolute inside here */
+.depth-map {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: oklch(18%  0.015 265);
+}
+
+.depth-map .htmlwidget,
+.depth-map .maplibregl-map {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* -- Top bar: crime selector + grid controls ------------------------------- */
+.map-overlay-top {
+  position: absolute;
+  top: var(--space-3);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+  background: var(--c-surf);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1) var(--space-3);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  white-space: nowrap;
+  max-width: calc(100vw - 220px);
+  box-shadow: 0 2px 8px oklch(20%  0.01 265 / 0.16);
+}
+
+.map-overlay-top .form-group { margin-bottom: 0 !important; }
+
+.map-overlay-top select {
+  background: var(--c-surf) !important;
+  color: var(--c-text) !important;
+  border: 1px solid var(--c-border-str) !important;
+  border-radius: var(--radius-md) !important;
+  font-size: 11px !important;
+  font-family: var(--font-label) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.06em !important;
+  text-transform: uppercase !important;
+  padding: 5px var(--space-2) !important;
+  cursor: pointer;
+  outline: none;
+  box-shadow: 0 2px 6px oklch(20%  0.01 265 / 0.12) !important;
+}
+
+.map-overlay-top span {
+  color: var(--c-text-mid);
+  font-size: 11px;
+  font-family: var(--font-label);
+  font-weight: 700;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+}
+
+.map-overlay-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--c-border);
+  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-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 {
+  position: relative;
+}
+
+.style-picker {
+  position: absolute;
+  right: 0;
+  left: auto;
+  top: calc(100% + var(--space-1));
+  background: var(--c-surf);
+  border: 1px solid var(--c-border);
+  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;
+}
+
+.style-option {
+  display: block;
+  width: 100%;
+  padding: var(--space-1) var(--space-3);
+  background: none;
+  border: none;
+  text-align: left;
+  font-size: 10px;
+  font-family: var(--font-label);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--c-text-dim);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background 0.1s, color 0.1s;
+}
+
+.style-option:hover {
+  background: var(--c-surf-hover);
+  color: var(--c-text);
+}
+
+.style-option.active {
+  color: var(--c-navy);
+  background: var(--c-teal-pale);
+}
+
+.btn-ctrl {
+  background: var(--c-surf) !important;
+  color: var(--c-text) !important;
+  border: 1px solid var(--c-border) !important;
+  border-radius: var(--radius-md) !important;
+  font-size: 10px !important;
+  font-family: var(--font-label) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.10em !important;
+  text-transform: uppercase;
+  padding: var(--space-2) var(--space-3) !important;
+  cursor: pointer !important;
+  box-shadow: 0 2px 6px oklch(20%  0.01 265 / 0.14) !important;
+  transition: background 0.12s, border-color 0.12s !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: var(--space-1) !important;
+}
+
+.btn-ctrl:hover {
+  background: var(--c-surf-hover) !important;
+  border-color: var(--c-border-str) !important;
+}
+
+/* -- Layer control panel (bottom-left) ------------------------------------- */
+.layer-ctrl-panel {
+  position: absolute;
+  bottom: var(--space-3);
+  left: 11px;
+  z-index: 999;
+  background: var(--c-surf);
+  border: 1px solid var(--c-border);
+  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);
+}
+
+.layer-ctrl-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  color: var(--c-text);
+  font-size: 10px;
+  font-family: var(--font-label);
+  font-weight: 700;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  user-select: none;
+  transition: background 0.1s;
+}
+
+.layer-ctrl-header:hover { background: var(--c-surf-hover); }
+
+.layer-ctrl-icon {
+  font-size: 10px;
+  color: var(--c-text-dim);
+}
+
+.layer-ctrl-body {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-1) var(--space-3) var(--space-2);
+  border-top: 1px solid var(--c-border);
+}
+
+.layer-ctrl-body::-webkit-scrollbar { width: 4px; }
+.layer-ctrl-body::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: var(--c-border-str);
+}
+.layer-ctrl-body::-webkit-scrollbar-track { background: transparent; }
+
+.layer-ctrl-body .form-check {
+  padding: 3px 0 3px 20px;
+  margin: 0;
+}
+
+.layer-ctrl-body .form-check-input {
+  margin-left: -16px;
+  cursor: pointer;
+  accent-color: var(--c-navy);
+}
+
+.layer-ctrl-body .form-check-label {
+  color: var(--c-text-dim);
+  font-size: 11px;
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition: color 0.1s;
+}
+
+.layer-ctrl-body .form-check-input:checked ~ .form-check-label {
+  color: var(--c-text);
+}
+
+.layer-ctrl-body .shiny-input-container { margin: 0 !important; }
+.layer-ctrl-body > .shiny-input-container > .form-group { margin: 0 !important; }
+
+/* -- Analysis panel — right column, 30 % of layout ----------------------- */
+.depth-panel {
+  width: 360px;
+  flex-shrink: 0;
+  background: var(--c-surf);
+  border-left: 1px solid var(--c-teal-pale);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: var(--font-body);
+  color: var(--c-text);
+}
+
+/* All-light header: brand teal appears only as a 2px bottom border */
+.dp-header {
+  background: var(--c-surf);
+  color: var(--c-text);
+  padding: var(--space-3) var(--space-4);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-bottom: 1px solid var(--c-teal-pale);
+}
+
+.dp-title {
+  font-family: var(--font-label);
+  font-size: 24px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin: 0 0 3px;
+  color: var(--c-navy);
+}
+
+.dp-sub {
+  font-size: 11px;
+  color: var(--c-text-mid);
+  margin: 0;
+  line-height: 1.45;
+}
+
+/* -- Scrollable body — sections divided by lines, not nested cards --------- */
+.dp-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--space-4);
+  display: flex;
+  flex-direction: column;
+}
+
+.dp-scroll::-webkit-scrollbar { width: 4px; }
+.dp-scroll::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: var(--c-border-str);
+}
+.dp-scroll::-webkit-scrollbar-track { background: transparent; }
+
+.dp-card {
+  padding: var(--space-3) 0;
+  flex-shrink: 0;
+}
+
+.dp-card + .dp-card {
+  border-top: 1px solid var(--c-border);
+}
+
+.dp-label {
+  font-family: var(--font-label);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--c-text-dim);
+  margin: 0 0 var(--space-3);
+}
+
+/* -- Big stats grid -------------------------------------------------------- */
+.stat-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3) var(--space-6);
+  margin-bottom: var(--space-3);
+}
+
+.stat-val {
+  font-family: var(--font-mono);
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 3px;
+  letter-spacing: -0.02em;
+}
+
+.stat-lbl {
+  font-family: var(--font-label);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--c-text-dim);
+}
+
+.stat-sub {
+  font-size: 10px;
+  color: var(--c-text-mid);
+  margin-top: 3px;
+  line-height: 1.3;
+  min-height: 13px;
+}
+
+/* -- Mini stats grid ------------------------------------------------------- */
+.mini-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--space-2) var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--c-border);
+}
+
+.mini-val {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 1px;
+}
+
+.mini-lbl {
+  font-family: var(--font-label);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--c-text-dim);
+}
+
+/* -- Municipality rank list ------------------------------------------------ */
+.rank-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.rank-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-2) 0;
+}
+
+.rank-item + .rank-item {
+  border-top: 1px solid var(--c-border);
+}
+
+.rank-num {
+  font-family: var(--font-label);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--c-text-dim);
+  min-width: 18px;
+  padding-top: 3px;
+  text-align: right;
+}
+
+.rank-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.rank-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rank-meta {
+  font-size: 10px;
+  color: var(--c-text-dim);
+  margin: 1px 0 var(--space-1);
+}
+
+.rank-track {
+  height: 2px;
+  background: var(--c-border);
+  border-radius: 1px;
+  overflow: hidden;
+}
+
+.rank-fill {
+  height: 100%;
+  border-radius: 1px;
+  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.rank-rate {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--c-text-mid);
+  padding-top: 2px;
+  white-space: nowrap;
+}
+
+/* -- States ---------------------------------------------------------------- */
+.dp-empty {
+  padding: var(--space-6) var(--space-2);
+  color: var(--c-text-dim);
+  font-size: 12px;
+  text-align: center;
+  line-height: 1.6;
+}
+
+.dp-more {
+  font-family: var(--font-label);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: var(--c-text-dim);
+  text-align: center;
+  padding: var(--space-1) 0 var(--space-2);
+}
+
+/* -- Analysis panel: selection badge --------------------------------------- */
+.dp-selection-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-label);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--c-teal);
+  background: var(--c-teal-pale);
+  border-radius: 10px;
+  padding: 2px 8px;
+  margin-top: var(--space-1);
+}
+
+/* -- Analysis panel collapsible section headers ---------------------------- */
+.dp-group {
+  border-bottom: 1px solid var(--c-border);
+  margin-bottom: var(--space-1);
+}
+
+.dp-group-hdr {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding: var(--space-2) var(--space-1);
+  user-select: none;
+  border-radius: var(--radius-sm);
+}
+
+.dp-group-hdr:hover { background: var(--c-surf-hover); }
+
+.dp-group-label {
+  font-family: var(--font-label);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--c-text);
+}
+
+.dp-group-icon {
+  font-size: 7px;
+  color: var(--c-text-dim);
+  flex-shrink: 0;
+}
+
+.dp-group-body {
+  padding: var(--space-1) 0 var(--space-2) 0;
+}
+
+/* -- Indicator cards inside panel groups ----------------------------------- */
+.ind-card {
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-2);
+  overflow: hidden;
+  background: oklch(99.5% 0.001 265);
+}
+
+.ind-card-hdr {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  background: var(--c-surf-hover);
+  border-bottom: 1px solid var(--c-border);
+}
+
+.ind-card-title {
+  font-family: var(--font-label);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--c-text-mid);
+}
+
+.ind-card-body {
+  padding: var(--space-2) 10px;
+}
+
+.ind-card-body .stat-grid {
+  margin-bottom: 0;
+}
+
+.ind-card-chart {
+  border-top: 1px solid var(--c-border);
+  padding: var(--space-1) 10px var(--space-2);
+}
+
+.ind-card-note {
+  font-size: 8px;
+  color: var(--c-text-dim);
+  font-style: italic;
+  padding: 0 10px 4px;
+}
+
+/* -- Horizontal stat row (label left, value right) ------------------------- */
+.dp-stat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--c-border);
+}
+
+.dp-stat:last-child { border-bottom: none; }
+
+.dp-stat-lbl {
+  font-family: var(--font-label);
+  font-size: 10px;
+  color: var(--c-text-mid);
+  flex: 1;
+  padding-right: var(--space-2);
+}
+
+.dp-stat-val {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+/* -- Clear button (light header context) ----------------------------------- */
+.btn-clear {
+  background: transparent !important;
+  color: var(--c-text-mid) !important;
+  border: 1px solid var(--c-border-str) !important;
+  border-radius: var(--radius-sm) !important;
+  font-size: 9px !important;
+  font-family: var(--font-label) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.08em !important;
+  text-transform: uppercase !important;
+  padding: 3px var(--space-2) !important;
+  flex-shrink: 0 !important;
+  white-space: nowrap !important;
+  transition: background 0.1s, color 0.1s !important;
+}
+
+.btn-clear:hover {
+  background: var(--c-surf-hover) !important;
+  color: var(--c-text) !important;
+}
+
+/* -- Footer: download button — navy accent --------------------------------- */
+.dp-footer {
+  padding: var(--space-2) var(--space-4) var(--space-3);
+  flex-shrink: 0;
+  border-top: 1px solid var(--c-border);
+}
+
+.dp-footer .btn {
+  width: 100%;
+  padding: var(--space-2) 0;
+  background: var(--c-navy) !important;
+  color: oklch(97%  0.003 265) !important;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 11px;
+  font-family: var(--font-label);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transition: background 0.15s;
+}
+
+.dp-footer .btn:hover {
+  background: var(--c-navy-dim) !important;
+}
+
+/* -- 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;
+}
+
+/* -- Expanded layer panel for accordion ------------------------------------ */
+.layer-ctrl-panel {
+  max-width: 280px !important;
+  min-width: 240px !important;
+}
+
+.layer-ctrl-body {
+  max-height: 480px !important;
+  padding: 0 0 var(--space-1) !important;
+}
+
+/* -- Accordion groups ------------------------------------------------------ */
+.acc-group + .acc-group {
+  border-top: 1px solid var(--c-border);
+}
+
+.acc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px var(--space-3);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.1s;
+}
+
+.acc-header:hover {
+  background: var(--c-surf-hover);
+}
+
+.acc-label {
+  font-family: var(--font-label);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--c-text-mid);
+}
+
+.acc-icon {
+  font-size: 7px;
+  color: var(--c-text-dim);
+}
+
+.acc-body {
+  padding-bottom: 4px;
+}
+
+.acc-item-wrap {
+  border-bottom: 1px solid transparent;
+}
+
+.acc-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px var(--space-3);
+  gap: var(--space-1);
+}
+
+/* -- iOS-style toggle switch ------------------------------------------------ */
+.acc-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+}
+
+.acc-toggle-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.acc-toggle-track {
+  display: inline-flex;
+  align-items: center;
+  width: 28px;
+  height: 15px;
+  background: var(--c-border-str);
+  border-radius: 8px;
+  position: relative;
+  flex-shrink: 0;
+  transition: background 0.2s;
+}
+
+.acc-toggle-thumb {
+  position: absolute;
+  left: 2px;
+  width: 11px;
+  height: 11px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+  transition: left 0.2s;
+}
+
+.acc-toggle-label:has(.acc-toggle-input:checked) .acc-toggle-track {
+  background: var(--c-navy);
+}
+
+.acc-toggle-label:has(.acc-toggle-input:checked) .acc-toggle-thumb {
+  left: 15px;
+}
+
+.acc-toggle-text {
+  font-size: 11px;
+  color: var(--c-text-dim);
+  font-family: var(--font-body);
+  transition: color 0.1s;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.acc-toggle-label:has(.acc-toggle-input:checked) .acc-toggle-text {
+  color: var(--c-text);
+}
+
+.acc-info-wrap {
+  flex-shrink: 0;
+  cursor: help;
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.55;
+  transition: opacity 0.1s;
+}
+
+.acc-info-wrap:hover { opacity: 1; }
+
+/* -- Layer legends ---------------------------------------------------------- */
+.acc-legend {
+  display: none;
+  padding: 2px var(--space-3) 6px calc(var(--space-3) + 34px);
+}
+
+/* Legend visibility driven by JS class toggle (preserves correct display type per shape) */
+.acc-legend.legend-visible           { display: block; }
+.acc-legend-dot.legend-visible       { display: flex; }
+.acc-legend-line-wrap.legend-visible { display: flex; }
+.acc-legend-cats.legend-visible      { display: flex; }
+
+.acc-legend-ramp .acc-legend-bar {
+  height: 8px;
+  border-radius: 3px;
+  margin-bottom: 3px;
+}
+
+.acc-legend-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 9px;
+  color: var(--c-text-dim);
+  font-family: var(--font-label);
+}
+
+.acc-legend-bound {
+  font-size: 7px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--c-text-dim);
+  opacity: 0.7;
+  margin-right: 2px;
+}
+
+.acc-legend-bound.bound-max {
+  margin-right: 0;
+  margin-left: 2px;
+}
+
+.acc-legend-cats {
+  flex-direction: column;
+  gap: 2px;
+}
+
+.acc-legend-cat {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 9px;
+  color: var(--c-text-dim);
+  font-family: var(--font-label);
+}
+
+.acc-legend-swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  flex-shrink: 0;
+  border: 1px solid rgba(0,0,0,0.08);
+}
+
+.acc-legend-dot {
+  align-items: center;
+  gap: 6px;
+}
+
+.acc-legend-circle {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid rgba(0,0,0,0.15);
+}
+
+.acc-legend-dot-lbl {
+  font-size: 9px;
+  color: var(--c-text-dim);
+  font-family: var(--font-label);
+}
+
+.acc-legend-line-wrap {
+  align-items: center;
+  gap: 6px;
+}
+
+.acc-legend-line-seg {
+  display: inline-block;
+  width: 24px;
+  flex-shrink: 0;
+}
+
+.acc-legend-line-lbl {
+  font-size: 9px;
+  color: var(--c-text-dim);
+  font-family: var(--font-label);
+}
+
+/* Crime sub-type radio chips */
+.acc-radios {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  padding: 2px var(--space-3) 5px calc(var(--space-3) + 34px);
+}
+
+.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);
+  border: none;
+  border-radius: 2px;
+  padding: 2px 5px;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  line-height: 1.4;
+}
+
+.acc-radio:hover {
+  background: var(--c-border-str);
+  color: var(--c-text);
+}
+
+.acc-radio.active {
+  background: var(--c-navy);
+  color: #fff;
+}
+
+/* Static ENVIPE sub-labels */
+.acc-subs {
+  padding: 0 var(--space-3) 3px calc(var(--space-3) + 17px);
+}
+
+.acc-sub {
+  font-size: 9px;
+  color: var(--c-text-dim);
+  font-family: var(--font-body);
+  line-height: 1.7;
+}
+
+/* Disabled / coming-soon items */
+.acc-disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.acc-coming-tag {
+  font-family: var(--font-label);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--c-teal);
+  background: var(--c-teal-pale);
+  border-radius: 2px;
+  padding: 1px 4px;
+  flex-shrink: 0;
+}
+
+/* -- Grid toggle panel (expands horizontally to the left of the button) ---- */
+.grid-btn-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 3px;
+}
+
+.grid-panel {
+  position: absolute;
+  right: calc(100% + 4px); /* opens to the left of the btn-wrap */
+  left: auto;
+  top: 0;
+  background: var(--c-surf);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  padding: 3px;
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  box-shadow: 0 4px 12px oklch(20%  0.01 265 / 0.18);
+  z-index: 1001;
+  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;
+  pointer-events: none;
+}
+
+.grid-panel.open {
+  opacity: 1;
+  transform: scaleX(1);
+  pointer-events: auto;
+}
+
+.grid-nivel-btn {
+  width: 29px;
+  height: 23px;
+  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);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  position: relative;
+}
+
+.grid-nivel-btn:not(.soon):hover {
+  background: var(--c-surf-hover);
+  color: var(--c-text);
+}
+
+.grid-nivel-btn.active {
+  background: var(--c-navy);
+  color: #fff;
+}
+
+/* N7/N8 coming-soon buttons */
+.grid-nivel-btn.soon {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.grid-nivel-btn.soon::after {
+  content: 'soon';
+  position: absolute;
+  top: -5px;
+  right: -3px;
+  font-size: 6px;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: var(--c-teal);
+  background: var(--c-teal-pale);
+  border-radius: 2px;
+  padding: 1px 2px;
+  line-height: 1;
+}
+
+/* -- JS-positioned tooltip -------------------------------------------------- */
+.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;
+  border-radius: var(--radius-md);
+  max-width: 210px;
+  z-index: 99999;
+  pointer-events: none;
+  transform: translateY(-50%);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  word-break: break-word;
+  display: none;
+}
+
+/* -- Hide MapLibre Draw buttons not needed for area selection --------------- */
+/* mapbox-gl-draw_polygon IS the freehand/lasso — keep it visible             */
+/* trash is replaced by our own btn_delete in draw-extra-ctrl                 */
+button.mapbox-gl-draw_line_string,
+button.mapbox-gl-draw_point,
+button.mapbox-gl-draw_trash,
+button.mapbox-gl-draw_combine,
+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; }
+
+/* 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 ------- */
+.maplibregl-ctrl-bottom-left {
+  top: 46px;
+  bottom: auto;
+}
+
+/* -- State filter picker panel ---------------------------------------------- */
+.state-picker-panel {
+  position: absolute;
+  top: 10px;
+  right: 48px;
+  z-index: 1000;
+  background: var(--c-surf);
+  border: 1px solid var(--c-border);
+  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;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.state-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: var(--font-label);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text-dim);
+}
+
+.state-picker-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--c-text-dim);
+  font-size: 14px;
+  line-height: 1;
+  padding: 0;
+}
+
+.state-picker-panel .selectize-control,
+.state-picker-panel select {
+  font-size: 11px;
+  width: 100%;
+}
+
+.state-picker-actions {
+  display: flex;
+  gap: var(--space-1);
+}
+
+/* -- Temporal analysis card (migrants, bottom-center of map) ---------------- */
+.temporal-card {
+  position: absolute;
+  bottom: var(--space-3);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 270px;
+  display: none;
+  background: var(--c-surf);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  padding: 5px 10px 4px;
+  z-index: 100;
+  box-shadow: 0 2px 8px oklch(20% 0.01 265 / 0.14);
+}
+
+.temporal-card-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 8px;
+  font-family: var(--font-label);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text-dim);
+  margin-bottom: 1px;
+}

10.11_draw_query_indicators_v10_HF.R

@@ -0,0 +1,2320 @@
+#######################################################################################
+# Purpose : Interactive Shiny map v10_HF -- Hugging Face Docker Space build of
+#           v9 (10.11). App behaviour is identical to v9; only the deployment
+#           wiring differs: the DuckDB path comes from an env var (baked into
+#           the image at build time), the connection is read-only, and the
+#           server binds 0.0.0.0:$PORT. Keep app-logic changes in v9 and
+#           regenerate this file by re-copying v9 + re-applying the 4 edits.
+#
+#   Changes vs v8 (10.10)
+#   -----------------------------------------------------------------------
+#   - All SQL centralised in WEB_SQL (templates + builders) -- no inline glue
+#   - Layers / accordion / analysis panel / palettes / niveles centralised in
+#     WEB_SPEC and rendered from it (Shiny UI and generated docs cannot drift)
+#   - grid_nivel7 loaded + toggled identically to grid_nivel6 (full-load)
+#   - Extract-mode guard: source() with options(depth.extract_mode = TRUE)
+#     defines every object without launching the server (used by the converter)
+#
+#   Inputs
+#   -----------------------------------------------------------------------
+#   [DDB] depth_mexico.duckdb  -> all tables (grid_nivel4/5/6/7,
+#         grid_crosswalk, dim_remesas_mun, ...). Path from env var
+#         DEPTH_DDB_PATH (default /app/depth_mexico.duckdb). On HF the
+#         Dockerfile downloads it from the edgarodriguez/depth_alpha
+#         dataset at build time and bakes it into the image.
+#   [ENV] DEPTH_DDB_PATH -> DuckDB file path (default /app/...)
+#   [ENV] PORT           -> server port (default 7860, HF Spaces)
+#
+#   Outputs
+#   -----------------------------------------------------------------------
+#   Interactive Shiny app served on 0.0.0.0:$PORT (no file output).
+#   HF Docker Space: CMD ["Rscript", "10.11_draw_query_indicators_v10_HF.R"]
+#   Local test:
+#     Rscript -e "shiny::runApp('R/10.11_draw_query_indicators_v10_HF.R')"
+#   Extract mode (no server, for the converter):
+#     Rscript -e "options(depth.extract_mode=TRUE); source('R/10.11_draw_query_indicators_v10_HF.R')"
+#
+# LLM Disclaimer: Generated with the assistance of Claude Code (VSCode extension claude-opus-4-7)
+#######################################################################################
+
+library(shiny)
+library(bslib)
+library(mapgl)
+library(DBI)
+library(duckdb)
+library(sf)
+library(dplyr)
+library(jsonlite)
+library(htmltools)
+library(glue)
+library(writexl)
+library(ggplot2)
+
+source("helpers.R")
+
+`%||%` <- function(x, y) if (is.null(x) || length(x) == 0) y else x
+
+# Deployment edit (v10_HF): DuckDB path from env var, baked into the image.
+DB_PATH <- Sys.getenv("DEPTH_DDB_PATH", "/app/depth_mexico.duckdb")
+
+# --- Colour constants -----------------------------------------------------------
+COL_RISK   <- "#032425"
+COL_INFRA  <- "#006B82"
+COL_COUNT  <- "#374151"
+
+COL_RED    <- "#b91c2e"
+COL_YEL    <- "#DEB406"
+COL_AMBER  <- "#405162"
+COL_PURPLE <- COL_RISK
+COL_GREEN  <- COL_INFRA
+COL_BLUE   <- COL_RISK
+COL_LIGHT_BLUE   <- "#009BC1"
+
+BAR_RAMP <- rev(c(
+  "#fdba74", "#fb923c", "#f97316", "#ef4444",
+  "#dc2626", "#b91c1c", "#991b1b", "#7f1d1d", "#450a0a", "#1c0000"
+))
+
+# Palettes
+CRIME_STEP_PAL <- c("#E8D2CB","#CFAEAE", "#B38B97", "#936A85",
+                    "#6E4F6E", "#4B3654", "#2A1F3B")
+DESAP_PAL  <- c("#FFFFFF00", "#FFF46A", "#FFE935", "#FFDD00", "#FF9441", "#FF4B71","#FF00A2")
+PAM_PAL    <- c("#EDF4F1","#C7D9D2","#9ABFB3","#6EA595","#4F8B7A","#3B6F63","#2A524A")
+ENVIPE_PAL <- c("#fff7ed", "#fdba74", "#f97316", "#ea580c", "#c2410c", "#7c2d12")
+
+GIIM_COLORS <- c(
+  "Nulo"      = "#f8fafc",
+  "Muy bajo"  = "#dbeafe",
+  "Bajo"      = "#93c5fd",
+  "Medio"     = "#3b82f6",
+  "Alto"      = "#1d4ed8",
+  "Muy alto"  = "#1e3a8a",
+  "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")
+
+CRIME_COLS <- list(
+  "Homicide rate"     = list(col = "homicidio",      breaks = c(10, 30, 60, 100, 150)),
+  "Robbery rate"      = list(col = "robo",            breaks = c(100, 300, 700, 1500, 3000)),
+  "Kidnapping rate"   = list(col = "secuestro",       breaks = c(1, 3, 7, 15, 30)),
+  "Child trafficking" = list(col = "trafico_menores", breaks = c(0.1, 0.5, 1, 3, 7)),
+  "Human trafficking" = list(col = "trata_personas",  breaks = c(0.5, 1, 3, 7, 15))
+)
+
+MAP_STYLES <- c(
+  "Positron"      = "positron",
+  "Dark Matter"   = "dark-matter",
+  "Voyager"       = "voyager"
+
+)
+
+GRID_LAYER_CFG <- list(
+  "crime-choro"   = "crime",
+  "desap-choro"   = "desap",
+  "fosas-choro"   = "fosas",
+  "remesas-choro" = "remesas",
+  "pam-choro"     = "pam",
+  "migrants-pts"  = "migrants",
+  "graves-pts"    = "graves",
+  "infra-pts"     = "infra",
+  "ocved-pts"     = "ocved",
+  "ged-pts"       = "ged"
+)
+NON_GRID_LAYERS <- c("envipe-state", "routes-lines", "viaferrea-lines")
+
+ENVIPE_COLS <- list(
+  "insecurity"   = list(col = "insecurity_perc",   breaks = c(40, 55, 65, 75, 85)),
+  "dark_figures" = list(col = "dark_figures_perc", breaks = c(88, 90, 92, 94, 96))
+)
+
+FOSAS_COLS <- list(
+  "fosas"   = list(col = "fosas_total",   breaks = c(1, 5, 15, 40, 80)),
+  "cuerpos" = list(col = "cuerpos_total", breaks = c(1, 10, 30, 80, 200))
+)
+
+#######################################################################################
+# WEB_SQL -- canonical query templates (single source for Shiny + docs converter)
+#   Static templates use {placeholder} tokens substituted by web_sql().
+#   Dynamic queries (qbreaks, grid_unified) are builder functions.
+#   The converter (10.13_build_docs.R) serialises these verbatim into
+#   docs/js/queries.js; the browser substitutes the same {placeholder} tokens.
+#######################################################################################
+
+WEB_SQL_TEMPLATES <- list(
+
+  nat_migrants =
+    "SELECT COUNT(*) AS n,
+            COALESCE(SUM(CAST(n_dead    AS INTEGER)), 0) AS n_dead,
+            COALESCE(SUM(CAST(n_missing AS INTEGER)), 0) AS n_miss,
+            COALESCE(SUM(CAST(n_total   AS INTEGER)), 0) AS n_total
+     FROM migrants",
+
+  nat_count = "SELECT COUNT(*) AS n FROM {tbl}",
+
+  nat_mun_agg =
+    "SELECT COUNT(*) AS n_mun,
+            COALESCE(SUM(CAST(d.desap_nl AS INTEGER)), 0) AS desap_n,
+            COALESCE(SUM(CAST(p.pam_total AS INTEGER)), 0) AS pam_n
+     FROM crime_mun c
+     LEFT JOIN (SELECT CVEGEO, SUM(final_desap_nl) AS desap_nl FROM dim_desap_mun GROUP BY CVEGEO) d
+       ON c.CVEGEO = d.CVEGEO
+     LEFT JOIN (SELECT CVEGEO, SUM(pam_n) AS pam_total FROM dim_pam_mun GROUP BY CVEGEO) p
+       ON c.CVEGEO = p.CVEGEO",
+
+  mun_table =
+    "SELECT c.municipio, c.entidad, c.CVEGEO,
+            CAST(c.homicidio       AS DOUBLE) AS homicidio,
+            CAST(c.robo            AS DOUBLE) AS robo,
+            CAST(c.secuestro       AS DOUBLE) AS secuestro,
+            CAST(c.trafico_menores AS DOUBLE) AS trafico_menores,
+            CAST(c.trata_personas  AS DOUBLE) AS trata_personas,
+            COALESCE(CAST(d.desap_nl    AS INTEGER), 0) AS desap_n,
+            COALESCE(CAST(p.pam_total   AS INTEGER), 0) AS pam_n,
+            COALESCE(r.giim_mun, 'No aplica')           AS giim_mun
+     FROM crime_mun c
+     LEFT JOIN (SELECT CVEGEO, SUM(final_desap_nl) AS desap_nl FROM dim_desap_mun GROUP BY CVEGEO) d
+       ON c.CVEGEO = d.CVEGEO
+     LEFT JOIN (SELECT CVEGEO, SUM(pam_n) AS pam_total FROM dim_pam_mun GROUP BY CVEGEO) p
+       ON c.CVEGEO = p.CVEGEO
+     LEFT JOIN dim_remesas_mun r ON c.CVEGEO = r.CVEGEO
+     ORDER BY c.homicidio DESC NULLS LAST",
+
+  load_pts =
+    "SELECT row_number() OVER () AS row_id, lon, lat
+     FROM {tbl}
+     WHERE lon IS NOT NULL AND lat IS NOT NULL
+     LIMIT {limit}",
+
+  pts_in_poly =
+    "SELECT * FROM {tbl}
+     WHERE lon BETWEEN {xmin} AND {xmax}
+       AND lat BETWEEN {ymin} AND {ymax}
+       AND ST_Within(ST_Point(lon, lat), ST_GeomFromText('{poly_wkt}'))",
+
+  mun_in_poly =
+    "SELECT c.municipio, c.entidad, c.CVEGEO,
+            CAST(c.homicidio       AS DOUBLE) AS homicidio,
+            CAST(c.robo            AS DOUBLE) AS robo,
+            CAST(c.secuestro       AS DOUBLE) AS secuestro,
+            CAST(c.trafico_menores AS DOUBLE) AS trafico_menores,
+            CAST(c.trata_personas  AS DOUBLE) AS trata_personas,
+            COALESCE(CAST(d.desap_nl  AS INTEGER), 0) AS desap_n,
+            COALESCE(CAST(p.pam_total AS INTEGER), 0) AS pam_n,
+            COALESCE(r.giim_mun, 'No aplica')         AS giim_mun
+     FROM crime_mun c
+     LEFT JOIN (SELECT CVEGEO, SUM(final_desap_nl) AS desap_nl FROM dim_desap_mun GROUP BY CVEGEO) d
+       ON c.CVEGEO = d.CVEGEO
+     LEFT JOIN (SELECT CVEGEO, SUM(pam_n) AS pam_total FROM dim_pam_mun GROUP BY CVEGEO) p
+       ON c.CVEGEO = p.CVEGEO
+     LEFT JOIN dim_remesas_mun r ON c.CVEGEO = r.CVEGEO
+     WHERE c.lon BETWEEN {xmin} AND {xmax}
+       AND c.lat BETWEEN {ymin} AND {ymax}
+       AND ST_Intersects(
+             ST_GeomFromText(c.wkt),
+             ST_GeomFromText('{poly_wkt}')
+           )
+     ORDER BY c.homicidio DESC NULLS LAST",
+
+  src_crime =
+    "SELECT municipio, entidad, CVEGEO,
+            CAST(homicidio       AS DOUBLE) AS homicidio,
+            CAST(robo            AS DOUBLE) AS robo,
+            CAST(secuestro       AS DOUBLE) AS secuestro,
+            CAST(trafico_menores AS DOUBLE) AS trafico_menores,
+            CAST(trata_personas  AS DOUBLE) AS trata_personas,
+            wkt
+     FROM crime_mun",
+
+  src_desap =
+    "SELECT c.municipio, c.entidad, c.CVEGEO,
+            COALESCE(CAST(d.desap_rate AS DOUBLE), 0) AS desap_per_100k,
+            c.wkt
+     FROM crime_mun c
+     LEFT JOIN (SELECT CVEGEO, AVG(final_desap_nl_per_100k) AS desap_rate
+                FROM dim_desap_mun GROUP BY CVEGEO) d
+       ON c.CVEGEO = d.CVEGEO",
+
+  src_remesas =
+    "SELECT c.municipio, c.entidad, c.CVEGEO,
+            COALESCE(r.giim_mun, 'No aplica') AS giim_mun,
+            c.wkt
+     FROM crime_mun c LEFT JOIN dim_remesas_mun r ON c.CVEGEO = r.CVEGEO",
+
+  src_pam =
+    "SELECT c.municipio, c.entidad, c.CVEGEO,
+            COALESCE(CAST(p.pam_total AS INTEGER), 0) AS pam_n,
+            c.wkt
+     FROM crime_mun c
+     LEFT JOIN (SELECT CVEGEO, SUM(pam_n) AS pam_total
+                FROM dim_pam_mun GROUP BY CVEGEO) p
+       ON c.CVEGEO = p.CVEGEO",
+
+  src_fosas =
+    "SELECT c.municipio, c.entidad, c.CVEGEO,
+            COALESCE(CAST(f.fosas_total   AS INTEGER), 0) AS fosas_total,
+            COALESCE(CAST(f.cuerpos_total AS INTEGER), 0) AS cuerpos_total,
+            c.wkt
+     FROM crime_mun c LEFT JOIN dim_fosas_mun f ON c.CVEGEO = f.CVEGEO",
+
+  src_state =
+    "SELECT CVE_ENT, desc_entidad,
+            CAST(perception_insecurity_perc AS DOUBLE) AS insecurity_perc,
+            CAST(dark_figures_perc          AS DOUBLE) AS dark_figures_perc,
+            wkt
+     FROM state_polygons",
+
+  src_routes =
+    "SELECT source_geocve, target_geocve, CAST(freq AS DOUBLE) AS freq, wkt
+     FROM routed_paths",
+
+  src_via = "SELECT tipo, condicion, wkt FROM viaferrea",
+
+  state_choices =
+    "SELECT CVE_ENT, {label_col} AS label FROM state_polygons ORDER BY {label_col}",
+
+  click_mun =
+    "SELECT CVEGEO, wkt FROM crime_mun
+     WHERE lon BETWEEN {lon_lo} AND {lon_hi}
+       AND lat BETWEEN {lat_lo} AND {lat_hi}
+       AND ST_Within(ST_Point({lon}, {lat}), ST_GeomFromText(wkt))
+     LIMIT 1",
+
+  state_wkt =
+    "SELECT wkt FROM state_polygons WHERE CVE_ENT = '{cve_ent}' LIMIT 1",
+
+  temporal_mig_all =
+    "SELECT {yr_expr} AS yr, COUNT(*) AS n FROM migrants
+     WHERE incident_date_ts IS NOT NULL
+     GROUP BY yr HAVING yr > 2000 AND yr <= 2030 ORDER BY yr",
+
+  temporal_mig_sel =
+    "SELECT {yr_expr} AS yr, COUNT(*) AS n FROM migrants
+     WHERE incident_date_ts IS NOT NULL
+       AND lon IS NOT NULL AND lat IS NOT NULL
+       AND ST_Within(ST_Point(lon, lat), ST_GeomFromText('{poly_wkt}'))
+     GROUP BY yr HAVING yr > 2000 AND yr <= 2030 ORDER BY yr",
+
+  temporal_yr_all =
+    "SELECT {yr_expr} AS yr, COUNT(*) AS n FROM {tbl}
+     WHERE {yr_col} IS NOT NULL
+     GROUP BY yr HAVING yr > 2000 AND yr <= 2030 ORDER BY yr",
+
+  temporal_yr_sel =
+    "SELECT {yr_expr} AS yr, COUNT(*) AS n FROM {tbl}
+     WHERE {yr_col} IS NOT NULL
+       AND lon IS NOT NULL AND lat IS NOT NULL
+       AND ST_Within(ST_Point(lon, lat), ST_GeomFromText('{poly_wkt}'))
+     GROUP BY yr HAVING yr > 2000 AND yr <= 2030 ORDER BY yr"
+)
+
+# Substitute {tokens} in a named template (Shiny side). Browser does the same.
+web_sql <- function(name, ...) {
+  tmpl <- WEB_SQL_TEMPLATES[[name]]
+  if (is.null(tmpl)) stop("Unknown WEB_SQL template: ", name)
+  d <- list(...)
+  if (length(d) == 0) return(tmpl)
+  as.character(glue::glue_data(d, tmpl, .open = "{", .close = "}"))
+}
+
+# Dynamic: variable number of percentile terms (mirrors compute_qbreaks)
+web_sql_qbreaks <- function(tbl, col, n_colors, filter_zero = TRUE) {
+  n_breaks <- n_colors - 1L
+  probs    <- seq_len(n_breaks) / n_colors
+  where    <- if (filter_zero) paste0("WHERE CAST(", col, " AS DOUBLE) > 0") else ""
+  sel <- paste(
+    paste0("PERCENTILE_CONT(", round(probs, 8),
+           ") WITHIN GROUP (ORDER BY CAST(", col, " AS DOUBLE))"),
+    collapse = ", "
+  )
+  paste("SELECT", sel, "FROM", tbl, where)
+}
+
+# Dynamic: unified per-nivel grid join (mirrors load_grid_unified). niv 4..8.
+# grid_crosswalk has codigo_n4..codigo_n8, so the equi-join always applies.
+web_sql_grid_unified <- function(niv, has_fosas, limit = NULL) {
+  col_n        <- paste0("codigo_n", niv)
+  limit_clause <- if (!is.null(limit)) paste0("\nLIMIT ", limit) else ""
+  fosas_cols <- if (has_fosas)
+    ",\n                  COALESCE(CAST(f.fosas_total   AS INTEGER), 0) AS fosas_total,\n                  COALESCE(CAST(f.cuerpos_total AS INTEGER), 0) AS cuerpos_total"
+  else
+    ",\n                  0 AS fosas_total, 0 AS cuerpos_total"
+  fosas_join <- if (has_fosas)
+    "\n           LEFT JOIN dim_fosas_mun   f   ON g.CVEGEO = f.CVEGEO"
+  else ""
+  # Subqueries ensure exactly one row per CVEGEO; direct joins on multi-row
+  # tables (dim_desap_mun ~58k rows, dim_pam_mun ~7.5k rows) explode memory.
+  desap_sub <- "(SELECT CVEGEO, AVG(final_desap_nl_per_100k) AS desap_rate FROM dim_desap_mun GROUP BY CVEGEO)"
+  pam_sub   <- "(SELECT CVEGEO, SUM(pam_n) AS pam_total FROM dim_pam_mun GROUP BY CVEGEO)"
+  glue::glue(
+      "WITH pts_src AS (
+         SELECT {col_n} AS codigo,
+                SUM(CASE WHEN src = 'migrants' THEN 1 ELSE 0 END) AS migrants_n,
+                SUM(CASE WHEN src = 'graves'   THEN 1 ELSE 0 END) AS graves_n,
+                SUM(CASE WHEN src = 'ocved'    THEN 1 ELSE 0 END) AS ocved_n,
+                SUM(CASE WHEN src = 'ged'      THEN 1 ELSE 0 END) AS ged_n,
+                SUM(CASE WHEN src = 'infra'    THEN 1 ELSE 0 END) AS infra_n
+         FROM (
+           SELECT cw.{col_n}, 'migrants' AS src
+           FROM grid_crosswalk cw
+           INNER JOIN migrants m ON cw.lon = m.lon AND cw.lat = m.lat
+           WHERE cw.{col_n} IS NOT NULL
+           UNION ALL
+           SELECT cw.{col_n}, 'graves'
+           FROM grid_crosswalk cw
+           INNER JOIN graves gv ON cw.lon = gv.lon AND cw.lat = gv.lat
+           WHERE cw.{col_n} IS NOT NULL
+           UNION ALL
+           SELECT cw.{col_n}, 'ocved'
+           FROM grid_crosswalk cw
+           INNER JOIN ocved_events oe ON cw.lon = oe.lon AND cw.lat = oe.lat
+           WHERE cw.{col_n} IS NOT NULL
+           UNION ALL
+           SELECT cw.{col_n}, 'ged'
+           FROM grid_crosswalk cw
+           INNER JOIN ged_events ge ON cw.lon = ge.lon AND cw.lat = ge.lat
+           WHERE cw.{col_n} IS NOT NULL
+           UNION ALL
+           SELECT cw.{col_n}, 'infra'
+           FROM grid_crosswalk cw
+           INNER JOIN support_infrastructure si ON cw.lon = si.lon AND cw.lat = si.lat
+           WHERE cw.{col_n} IS NOT NULL
+         ) all_pts
+         GROUP BY {col_n}
+       )
+       SELECT g.codigo, g.CVEGEO, g.wkt,
+              CAST(c.homicidio       AS DOUBLE) AS homicidio,
+              CAST(c.robo            AS DOUBLE) AS robo,
+              CAST(c.secuestro       AS DOUBLE) AS secuestro,
+              CAST(c.trafico_menores AS DOUBLE) AS trafico_menores,
+              CAST(c.trata_personas  AS DOUBLE) AS trata_personas,
+              COALESCE(CAST(d.desap_rate AS DOUBLE), 0) AS desap_per_100k{fosas_cols},
+              COALESCE(r.giim_mun, 'No aplica')           AS giim_mun,
+              COALESCE(CAST(p.pam_total AS INTEGER), 0)   AS pam_n,
+              COALESCE(pts.migrants_n, 0)                 AS migrants_n,
+              COALESCE(pts.graves_n,   0)                 AS graves_n,
+              COALESCE(pts.ocved_n,    0)                 AS ocved_n,
+              COALESCE(pts.ged_n,      0)                 AS ged_n,
+              COALESCE(pts.infra_n,    0)                 AS infra_n
+       FROM grid_nivel{niv} g
+       LEFT JOIN crime_mun       c   ON g.CVEGEO = c.CVEGEO
+       LEFT JOIN {desap_sub}     d   ON g.CVEGEO = d.CVEGEO{fosas_join}
+       LEFT JOIN dim_remesas_mun r   ON g.CVEGEO = r.CVEGEO
+       LEFT JOIN {pam_sub}       p   ON g.CVEGEO = p.CVEGEO
+       LEFT JOIN pts_src         pts ON g.codigo = pts.codigo{limit_clause}"
+  )
+}
+
+#######################################################################################
+# WEB_SPEC -- declarative layer / accordion / panel / palette config.
+#   Single source consumed by the Shiny UI AND the docs converter so the two
+#   cannot drift. References the palette/break constants above (one definition).
+#######################################################################################
+
+WEB_SPEC <- list(
+
+  niveles = c("4", "5", "6", "7"),   # N7 enabled (full-load, like N6); N8 = soon
+  niveles_soon = c("8"),
+
+  palettes = list(
+    crime    = CRIME_STEP_PAL, desap = DESAP_PAL, pam = PAM_PAL,
+    envipe   = ENVIPE_PAL,     fosas = FOSAS_PAL,
+    migrants = MIGRANTS_PAL,   graves = GRAVES_PAL, infra = INFRA_PAL,
+    ocved    = OCVED_PAL,      ged = GED_PAL,
+    giim     = GIIM_COLORS,    bar_ramp = BAR_RAMP
+  ),
+
+  crime_cols  = CRIME_COLS,
+  fosas_cols  = FOSAS_COLS,
+  envipe_cols = ENVIPE_COLS,
+  map_styles  = MAP_STYLES,
+  grid_layer_cfg  = GRID_LAYER_CFG,
+  non_grid_layers = NON_GRID_LAYERS,
+
+  # Count-layer breaks (point density on grid cells + grid_color_expr)
+  count_breaks = list(
+    migrants = c(1, 5, 20, 50, 100),
+    graves   = c(1, 2, 5, 15, 30),
+    infra    = c(1, 3, 8, 20, 50),
+    ocved    = c(1, 5, 20, 60, 200),
+    ged      = c(1, 3, 10, 30, 80)
+  ),
+
+  # Map layer descriptors (converter -> docs/js/map.js)
+  layers = list(
+    list(id = "crime-choro",     type = "fill",   src = "src_crime",
+         geom = "polygon", color = "crime_qstep", value = "homicidio",
+         opacity = 0.6,  visible = TRUE),
+    list(id = "desap-choro",     type = "fill",   src = "src_desap",
+         geom = "polygon", color = "desap_qstep", value = "desap_per_100k",
+         opacity = 0.6,  visible = FALSE),
+    list(id = "remesas-choro",   type = "fill",   src = "src_remesas",
+         geom = "polygon", color = "giim_match",  value = "giim_mun",
+         opacity = 0.75, visible = FALSE),
+    list(id = "pam-choro",       type = "fill",   src = "src_pam",
+         geom = "polygon", color = "pam_qstep",   value = "pam_n",
+         opacity = 0.7,  visible = FALSE),
+    list(id = "fosas-choro",     type = "fill",   src = "src_fosas",
+         geom = "polygon", color = "fosas_step",  value = "fosas_total",
+         opacity = 0.65, visible = FALSE, requires = "dim_fosas_mun"),
+    list(id = "envipe-state",    type = "fill",   src = "src_state",
+         geom = "polygon", color = "envipe_step", value = "insecurity_perc",
+         opacity = 0.6,  visible = FALSE),
+    list(id = "routes-lines",    type = "line",   src = "src_routes",
+         geom = "line",    color = COL_AMBER,      opacity = 0.1, visible = FALSE),
+    list(id = "viaferrea-lines", type = "line",   src = "src_via",
+         geom = "line",    color = "#990f0f",      opacity = 0.9,  visible = FALSE,
+         dash = c(4, 2)),
+    list(id = "migrants-pts", type = "circle", src = "migrants",
+         geom = "point", color = COL_YEL, radius = 2, visible = FALSE, limit = 8000),
+    list(id = "graves-pts",   type = "circle", src = "graves",
+         geom = "point", color = COL_RED,   radius = 2, visible = FALSE, limit = 5000),
+    list(id = "infra-pts",    type = "circle", src = "support_infrastructure",
+         geom = "point", color = COL_GREEN, radius = 2, visible = FALSE, limit = 5000),
+    list(id = "ocved-pts",    type = "circle", src = "ocved_events",
+         geom = "point", color = COL_AMBER, radius = 1, visible = FALSE, limit = 80000),
+    list(id = "ged-pts",      type = "circle", src = "ged_events",
+         geom = "point", color = COL_LIGHT_BLUE,  radius = 1, visible = FALSE, limit = 80000)
+  ),
+
+  # Accordion layer panel (converter -> docs/js/panels.js; Shiny UI renders this too)
+  accordion = list(
+    list(id = "risk", label = "Risk", open = FALSE, items = list(
+      list(kind = "soon", label = "Transit migration risk index")
+    )),
+    list(id = "hazards", label = "Hazards", open = TRUE, items = list(
+      list(kind = "layer", value = "crime-choro",
+           label = "Criminal incidence by municipality",
+           tooltip = "Rate of crimes per 100,000 people in each municipality. Select crime type using the buttons below.",
+           legend = list(type = "ramp", pal = "crime", lo = "0 /100k", hi = "150+ /100k"),
+           checked = TRUE),
+      list(kind = "radios", group = "crime"),
+      list(kind = "layer", value = "migrants-pts",
+           label = "Missing migrant incidents by IOM",
+           tooltip = "Each dot marks a location where migrants went missing or died, recorded by the International Organization for Migration.",
+           legend = list(type = "dot", color = COL_YEL, label = "Incident location")),
+      list(kind = "layer", value = "desap-choro",
+           label = "Enforced disappearances per 100k (RNPDNO)",
+           tooltip = "People officially reported as forcibly disappeared in each municipality, shown per 100,000 residents.",
+           legend = list(type = "ramp", pal = "desap", lo = "0 /100k", hi = "150+ /100k")),
+      list(kind = "layer", value = "fosas-choro",
+           label = "Clandestine burial pits by municipality",
+           tooltip = "Number of clandestine burial pits (fosas) and bodies found per municipality. Source: RNPED.",
+           legend = list(type = "ramp", pal = "fosas", lo = "0", hi = "High")),
+      list(kind = "radios", group = "fosas"),
+      list(kind = "layer", value = "graves-pts",
+           label = "Clandestine burial sites",
+           tooltip = "Locations where clandestine grave sites have been discovered across Mexico.",
+           legend = list(type = "dot", color = COL_RED, label = "Burial site")),
+      list(kind = "layer", value = "ocved-pts",
+           label = "Organised criminal violence events (OCVED 2.0)",
+           tooltip = "Incidents of organised crime violence such as confrontations, attacks and criminal activities.",
+           legend = list(type = "dot", color = COL_AMBER, label = "Violence event")),
+      list(kind = "layer", value = "ged-pts",
+           label = "Armed conflict events (UCDP-GED)",
+           tooltip = "Armed conflict events recorded by Uppsala University's global conflict research dataset.",
+           legend = list(type = "dot", color = COL_LIGHT_BLUE, label = "Conflict event")),
+      list(kind = "layer", value = "envipe-state",
+           label = "Crime victimisation survey by state (ENVIPE)",
+           tooltip = "State-level survey on how safe people feel and how many crimes go unreported. Select metric below.",
+           legend = list(type = "ramp", pal = "envipe", lo = "Low %", hi = "High %")),
+      list(kind = "radios", group = "envipe"),
+      list(kind = "soon", label = "Heat stress index")
+    )),
+    list(id = "exposure", label = "Exposure", open = FALSE, items = list(
+      list(kind = "layer", value = "pam-choro",
+           label = "Irregular migration events by municipality (PAM)",
+           tooltip = "Number of people who arrived at migrant assistance points or shelters in each municipality.",
+           legend = list(type = "ramp", pal = "pam", lo = "0 events", hi = "1,000+ events")),
+      list(kind = "layer", value = "remesas-choro",
+           label = "Migration intensity index MEX-USA (GIIM)",
+           tooltip = "Index measuring the intensity of migration from Mexico to the United States, from none to very high.",
+           legend = list(type = "cats", pal = "giim")),
+      list(kind = "layer", value = "routes-lines",
+           label = "Main migration routes through Mexico",
+           tooltip = "Key routes migrants use to travel through Mexico towards the northern border.",
+           legend = list(type = "line", color = COL_AMBER, label = "Route")),
+      list(kind = "layer", value = "viaferrea-lines",
+           label = "Railway network (La Bestia routes)",
+           tooltip = "Railway lines used by migrants, including freight routes known as 'La Bestia'.",
+           legend = list(type = "line", color = "#94a3b8", label = "Railway", dashed = TRUE)),
+      list(kind = "soon", label = "Foreign population")
+    )),
+    list(id = "vulnerability", label = "Vulnerability", open = FALSE, items = list(
+      list(kind = "layer", value = "infra-pts",
+           label = "Migrant shelters and support centres",
+           tooltip = "Shelters, health posts, and other services available to migrants in transit.",
+           legend = list(type = "dot", color = COL_GREEN, label = "Support facility"))
+    ))
+  ),
+
+  radios = list(
+    crime = list(
+      list(label = "Homicides",         value = "Homicide rate"),
+      list(label = "Robberies",         value = "Robbery rate"),
+      list(label = "Kidnapping",        value = "Kidnapping rate"),
+      list(label = "Child trafficking", value = "Child trafficking"),
+      list(label = "Human trafficking", value = "Human trafficking")
+    ),
+    envipe = list(
+      list(label = "Insecurity perception", value = "insecurity"),
+      list(label = "Unreported crimes",     value = "dark_figures")
+    ),
+    fosas = list(
+      list(label = "Clandestine graves", value = "fosas"),
+      list(label = "Bodies (cuerpos)",   value = "cuerpos")
+    )
+  ),
+
+  # Analysis panel (converter -> docs/js/panels.js; Shiny renders this too)
+  panel = list(
+    title = "Transit Migration Risk Index",
+    subtitle = "Multi-variable analysis of components of vulnerability for migrants across Mexico.",
+    groups = list(
+      list(id = "hazards", label = "Hazards", open = TRUE, cards = list(
+        list(title = "Missing Migrants Incidents (IOM)", kind = "bigstat", chart = "temporal_plot",
+             stats = list(
+               list(id = "n_incidents",  label = "INCIDENTS",      sub = "sub_incidents",  color = COL_RISK),
+               list(id = "n_fatalities", label = "CONFIRMED DEAD",  sub = "sub_fatalities", color = COL_AMBER)
+             )),
+        list(title = "Criminal Incidence by Municipality", kind = "munlist"),
+        list(title = "Enforced Disappearances (RNPDNO)", kind = "stat",
+             stats = list(list(id = "n_desap", label = "Registered disappearances", color = COL_RISK))),
+        list(title = "Burial Data", kind = "stat",
+             stats = list(list(id = "n_graves", label = "Clandestine burial sites", color = COL_RED))),
+        list(title = "Organised Crime Violence (OCVED 2.0)", kind = "stat", chart = "temporal_ocved",
+             stats = list(list(id = "ocved_n", label = "Recorded violence events", color = COL_COUNT))),
+        list(title = "Armed Conflict Events (UCDP-GED)", kind = "stat", chart = "temporal_ged",
+             stats = list(list(id = "n_ged", label = "Conflict events", color = COL_LIGHT_BLUE)))
+      )),
+      list(id = "exposure", label = "Exposure", open = FALSE, cards = list(
+        list(title = "Irregular Migration Events (PAM)", kind = "stat",
+             stats = list(list(id = "n_pam", label = "Recorded irregular migration events", color = COL_COUNT)))
+      )),
+      list(id = "vulnerability", label = "Vulnerability", open = FALSE, cards = list(
+        list(title = "Migrant Support Facilities", kind = "stat",
+             stats = list(list(id = "n_facilities", label = "Active support facilities", color = COL_GREEN)))
+      ))
+    )
+  )
+)
+
+# --- Lucide icons + JS helpers --------------------------------------------------
+LUCIDE_JS <- tags$head(
+  tags$script(src = "https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"),
+  tags$script(HTML("
+    var gridOn = false;
+
+    document.addEventListener('DOMContentLoaded', function() {
+      setTimeout(function() {
+        if (window.lucide) lucide.createIcons();
+        updateActiveLayers(); // init legend visibility
+        setTimeout(initViewport, 800);
+      }, 400);
+
+      // Tooltip: positioned via JS to escape overflow:hidden containers
+      document.addEventListener('mouseover', function(e) {
+        var el = e.target.closest('[data-tooltip]');
+        if (!el) { hideTooltip(); return; }
+        var tip = document.getElementById('depth-tooltip');
+        if (!tip) {
+          tip = document.createElement('div');
+          tip.id = 'depth-tooltip';
+          tip.className = 'depth-tooltip';
+          document.body.appendChild(tip);
+        }
+        tip.textContent = el.dataset.tooltip;
+        var r = el.getBoundingClientRect();
+        tip.style.left = (r.right + 8) + 'px';
+        tip.style.top  = (r.top + r.height / 2) + 'px';
+        tip.style.display = 'block';
+      });
+      document.addEventListener('mouseout', function(e) {
+        if (e.target.closest('[data-tooltip]')) hideTooltip();
+      });
+
+      // Fire initial values once Shiny is connected
+      $(document).on('shiny:connected', function() {
+        setTimeout(function() {
+          updateActiveLayers();
+          Shiny.setInputValue('crime_type',  'Homicide rate', { priority: 'event' });
+          Shiny.setInputValue('envipe_type', 'insecurity',    { priority: 'event' });
+          Shiny.setInputValue('fosas_type',  'fosas',         { priority: 'event' });
+          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);
+        }, 100);
+      });
+
+      // Close style picker / grid panel / state panel when clicking outside
+      document.addEventListener('click', function(e) {
+        var styleWrap = document.querySelector('.style-btn-wrap');
+        if (styleWrap && !styleWrap.contains(e.target)) {
+          var picker = document.getElementById('style-picker');
+          if (picker) picker.style.display = 'none';
+        }
+        var gridWrap = document.querySelector('.grid-btn-wrap');
+        if (gridWrap && !gridWrap.contains(e.target) && gridOn) {
+          gridOn = false;
+          closeGridPanel();
+          var gridBtn = document.getElementById('grid-icon-btn');
+          if (gridBtn) gridBtn.classList.remove('active');
+        }
+        var statePanel = document.getElementById('state-picker-panel');
+        var stateBtn   = document.getElementById('btn_state_filter');
+        if (statePanel && statePanel.style.display !== 'none') {
+          if (!statePanel.contains(e.target) && e.target !== stateBtn &&
+              !(stateBtn && stateBtn.contains(e.target))) {
+            statePanel.style.display = 'none';
+          }
+        }
+      });
+
+      // Hide state panel on Shiny message
+      Shiny.addCustomMessageHandler('hideStatePanel', function(msg) {
+        var p = document.getElementById('state-picker-panel');
+        if (p) p.style.display = 'none';
+      });
+    });
+
+    function hideTooltip() {
+      var tip = document.getElementById('depth-tooltip');
+      if (tip) tip.style.display = 'none';
+    }
+
+    function clearDrawing() {
+      var btn = document.getElementById('clear_btn');
+      if (btn) btn.click();
+    }
+
+    function setMapMode(mode) {
+      if (typeof Shiny !== 'undefined')
+        Shiny.setInputValue('select_mode', mode, { priority: 'event' });
+      ['draw', 'click'].forEach(function(m) {
+        var btn = document.getElementById('btn_mode_' + m);
+        if (btn) btn.classList.toggle('active', m === mode);
+      });
+    }
+
+    function toggleLayerPanel() {
+      var body = document.getElementById('layer-ctrl-body');
+      var icon = document.getElementById('layer-ctrl-icon');
+      var hidden = body.style.display === 'none';
+      body.style.display = hidden ? '' : 'none';
+      icon.innerHTML = hidden ? '&#9650;' : '&#9660;';
+    }
+
+    function toggleGroup(id) {
+      var body = document.getElementById('group-' + id);
+      var icon = document.getElementById('icon-' + id);
+      if (!body) return;
+      var hidden = body.style.display === 'none';
+      body.style.display = hidden ? '' : 'none';
+      icon.innerHTML = hidden ? '&#9650;' : '&#9660;';
+    }
+
+    function updateActiveLayers() {
+      var checked = [];
+      document.querySelectorAll('.layer-check:checked').forEach(function(cb) {
+        checked.push(cb.value);
+      });
+      // Sync legend visibility: use class so CSS controls display type per legend shape
+      document.querySelectorAll('.acc-item-wrap').forEach(function(wrap) {
+        var input  = wrap.querySelector('.acc-toggle-input');
+        var legend = wrap.querySelector('.acc-legend');
+        if (legend) legend.classList.toggle('legend-visible', !!(input && input.checked));
+      });
+      if (typeof Shiny !== 'undefined')
+        Shiny.setInputValue('active_layers', checked, { priority: 'event' });
+    }
+
+    function setCrimeType(type) {
+      if (typeof Shiny !== 'undefined')
+        Shiny.setInputValue('crime_type', type, { priority: 'event' });
+      document.querySelectorAll('.crime-radio').forEach(function(r) {
+        r.classList.toggle('active', r.dataset.value === type);
+      });
+    }
+
+    function setEnvipeType(type) {
+      if (typeof Shiny !== 'undefined')
+        Shiny.setInputValue('envipe_type', type, { priority: 'event' });
+      document.querySelectorAll('.envipe-radio').forEach(function(r) {
+        r.classList.toggle('active', r.dataset.value === type);
+      });
+    }
+
+    function setFosasType(type) {
+      if (typeof Shiny !== 'undefined')
+        Shiny.setInputValue('fosas_type', type, { priority: 'event' });
+      document.querySelectorAll('.fosas-radio').forEach(function(r) {
+        r.classList.toggle('active', r.dataset.value === type);
+      });
+    }
+
+    function toggleStylePicker() {
+      var picker = document.getElementById('style-picker');
+      if (!picker) return;
+      picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
+    }
+
+    function setMapStyle(style) {
+      if (typeof Shiny !== 'undefined')
+        Shiny.setInputValue('map_style', style, { priority: 'event' });
+      document.querySelectorAll('.style-option').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.style === style);
+      });
+      var picker = document.getElementById('style-picker');
+      if (picker) picker.style.display = 'none';
+    }
+
+    function toggleStatePanel() {
+      var p = document.getElementById('state-picker-panel');
+      if (!p) return;
+      p.style.display = p.style.display === 'none' ? 'flex' : 'none';
+    }
+
+    function closeGridPanel() {
+      var panel = document.getElementById('grid-panel');
+      if (!panel) return;
+      panel.classList.remove('open');
+      setTimeout(function() { if (!panel.classList.contains('open')) panel.style.display = 'none'; }, 160);
+    }
+
+    function toggleGridPanel() {
+      var panel = document.getElementById('grid-panel');
+      if (!panel) return;
+      gridOn = !gridOn;
+      if (gridOn) {
+        panel.style.display = 'flex';
+        requestAnimationFrame(function() { panel.classList.add('open'); });
+      } else {
+        closeGridPanel();
+      }
+      var btn = document.getElementById('grid-icon-btn');
+      if (btn) btn.classList.toggle('active', gridOn);
+      if (typeof Shiny !== 'undefined')
+        Shiny.setInputValue('grid_icon_click', Date.now(), { priority: 'event' });
+    }
+
+    function setGridNivel(nivel) {
+      if (typeof Shiny !== 'undefined')
+        Shiny.setInputValue('grid_nivel', nivel, { priority: 'event' });
+      document.querySelectorAll('.grid-nivel-btn').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.nivel === nivel);
+      });
+      // Auto-collapse grid panel after selection
+      closeGridPanel();
+      var iconBtn = document.getElementById('grid-icon-btn');
+      if (iconBtn) iconBtn.classList.remove('active');
+      gridOn = false;
+    }
+
+    function initViewport() {
+      var widget = window.HTMLWidgets && HTMLWidgets.find('#map');
+      if (!widget) { setTimeout(initViewport, 500); return; }
+      var m = widget.map || (widget.getMap && widget.getMap());
+      if (!m || typeof m.getCenter !== 'function') { setTimeout(initViewport, 500); return; }
+      ['moveend', 'zoomend', 'rotateend', 'pitchend'].forEach(function(ev) {
+        m.on(ev, function() { renderViewport(m); });
+      });
+      renderViewport(m);
+    }
+
+    function renderViewport(m) {
+      try {
+        var c = m.getCenter();
+        var set = function(id, v) { var e = document.getElementById(id); if (e) e.textContent = v; };
+        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) {}
+    }
+
+    function toggleDpGroup(id) {
+      var body = document.getElementById('dp-group-body-' + id);
+      var icon = document.getElementById('dp-group-icon-' + id);
+      if (!body) return;
+      var hidden = body.style.display === 'none';
+      body.style.display = hidden ? '' : 'none';
+      if (icon) icon.innerHTML = hidden ? '&#9650;' : '&#9660;';
+    }
+
+    function toggleDpSubgroup(id) {
+      var body = document.getElementById('dp-sub-body-' + id);
+      var icon = document.getElementById('dp-sub-icon-' + id);
+      if (!body) return;
+      var hidden = body.style.display === 'none';
+      body.style.display = hidden ? '' : 'none';
+      if (icon) icon.innerHTML = hidden ? '&#9650;' : '&#9660;';
+    }
+  "))
+)
+
+# --- UI helpers -----------------------------------------------------------------
+
+big_stat <- function(val_id, label, sub_id = NULL, color = "#1e293b") {
+  div(
+    div(class = "stat-val", style = glue("color:{color}"),
+        textOutput(val_id, inline = TRUE)),
+    div(class = "stat-lbl", label),
+    if (!is.null(sub_id))
+      div(class = "stat-sub", textOutput(sub_id, inline = TRUE))
+  )
+}
+
+mini_stat <- function(val_id, label, color = "#1e293b") {
+  div(
+    div(class = "mini-val", style = glue("color:{color}"),
+        textOutput(val_id, inline = TRUE)),
+    div(class = "mini-lbl", label)
+  )
+}
+
+rank_row <- function(i, name, state, rate_str, pct, color) {
+  tags$li(class = "rank-item",
+    div(class = "rank-num", sprintf("%02d", i)),
+    div(class = "rank-body",
+      div(class = "rank-name", name),
+      div(class = "rank-meta", state),
+      div(class = "rank-track",
+          div(class = "rank-fill",
+              style = glue("width:{pct}%;background:{color}")))),
+    div(class = "rank-rate", rate_str)
+  )
+}
+
+# --- Accordion layer panel helpers ----------------------------------------------
+
+acc_group <- function(id, label, items_list, open = FALSE) {
+  div(class = "acc-group",
+    div(class = "acc-header",
+        onclick = paste0("toggleGroup('", id, "')"),
+      span(class = "acc-label", label),
+      span(id = paste0("icon-", id), class = "acc-icon",
+           HTML(if (open) "&#9650;" else "&#9660;"))
+    ),
+    div(id    = paste0("group-", id),
+        class = "acc-body",
+        style = if (!open) "display:none;" else NULL,
+      items_list
+    )
+  )
+}
+
+acc_layer <- function(value, label, tooltip = NULL, legend = NULL, checked = FALSE) {
+  div(class = "acc-item-wrap",
+    div(class = "acc-item",
+      tags$label(class = "acc-toggle-label",
+        tags$input(
+          type     = "checkbox",
+          class    = "layer-check acc-toggle-input",
+          value    = value,
+          onchange = "updateActiveLayers()",
+          checked  = if (checked) "checked" else NULL
+        ),
+        tags$span(class = "acc-toggle-track",
+          tags$span(class = "acc-toggle-thumb")
+        ),
+        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>')
+        )
+    ),
+    if (!is.null(legend)) legend
+  )
+}
+
+acc_legend_ramp <- function(pal, lo = "Low", hi = "High") {
+  stops <- paste(pal, collapse = ", ")
+  HTML(paste0(
+    '<div class="acc-legend acc-legend-ramp">',
+    '<div class="acc-legend-bar" style="background:linear-gradient(to right,', stops, ')"></div>',
+    '<div class="acc-legend-labels">',
+    '<span><span class="acc-legend-bound">min</span>', lo, '</span>',
+    '<span>', hi, '<span class="acc-legend-bound bound-max">max</span></span>',
+    '</div>',
+    '</div>'
+  ))
+}
+
+acc_legend_cats <- function(cats) {
+  items <- paste(sapply(seq_along(cats), function(i) {
+    paste0(
+      '<div class="acc-legend-cat">',
+      '<span class="acc-legend-swatch" style="background:', unname(cats[i]), '"></span>',
+      '<span>', names(cats)[i], '</span>',
+      '</div>'
+    )
+  }), collapse = "")
+  HTML(paste0('<div class="acc-legend acc-legend-cats">', items, '</div>'))
+}
+
+acc_legend_dot <- function(color, label = "Event / point") {
+  HTML(paste0(
+    '<div class="acc-legend acc-legend-dot">',
+    '<span class="acc-legend-circle" style="background:', color, '"></span>',
+    '<span class="acc-legend-dot-lbl">', label, '</span>',
+    '</div>'
+  ))
+}
+
+acc_legend_line <- function(color, label = "Route", dashed = FALSE) {
+  bstyle <- if (dashed) "dashed" else "solid"
+  HTML(paste0(
+    '<div class="acc-legend acc-legend-line-wrap">',
+    '<span class="acc-legend-line-seg" style="border-top:2px ', bstyle, ' ', color, '"></span>',
+    '<span class="acc-legend-line-lbl">', label, '</span>',
+    '</div>'
+  ))
+}
+
+acc_crime_radios <- function() {
+  crimes <- list(
+    list(label = "Homicides",    value = "Homicide rate"),
+    list(label = "Robberies",    value = "Robbery rate"),
+    list(label = "Kidnapping",   value = "Kidnapping rate"),
+    list(label = "Child trafficking", value = "Child trafficking"),
+    list(label = "Human trafficking", value = "Human trafficking")
+  )
+  div(class = "acc-radios",
+    lapply(crimes, function(cr) {
+      tags$button(
+        class        = paste0("acc-radio crime-radio", if (cr$value == "Homicide rate") " active" else ""),
+        `data-value` = cr$value,
+        onclick      = paste0("setCrimeType('", cr$value, "')"),
+        cr$label
+      )
+    })
+  )
+}
+
+acc_envipe_radios <- function() {
+  types <- list(
+    list(label = "Insecurity perception", value = "insecurity"),
+    list(label = "Unreported crimes",     value = "dark_figures")
+  )
+  div(class = "acc-radios",
+    lapply(types, function(tp) {
+      tags$button(
+        class        = paste0("acc-radio envipe-radio", if (tp$value == "insecurity") " active" else ""),
+        `data-value` = tp$value,
+        onclick      = paste0("setEnvipeType('", tp$value, "')"),
+        tp$label
+      )
+    })
+  )
+}
+
+acc_fosas_radios <- function() {
+  types <- list(
+    list(label = "Clandestine graves", value = "fosas"),
+    list(label = "Bodies (cuerpos)",    value = "cuerpos")
+  )
+  div(class = "acc-radios",
+    lapply(types, function(tp) {
+      tags$button(
+        class        = paste0("acc-radio fosas-radio", if (tp$value == "fosas") " active" else ""),
+        `data-value` = tp$value,
+        onclick      = paste0("setFosasType('", tp$value, "')"),
+        tp$label
+      )
+    })
+  )
+}
+
+# --- Analysis panel collapsible group helpers ----------------------------------
+
+dp_group <- function(id, label, items_list, open = TRUE) {
+  div(class = "dp-group",
+    div(class = "dp-group-hdr",
+        onclick = paste0("toggleDpGroup('", id, "')"),
+      span(class = "dp-group-label", label),
+      span(id = paste0("dp-group-icon-", id), class = "dp-group-icon",
+           HTML(if (open) "&#9650;" else "&#9660;"))
+    ),
+    div(id    = paste0("dp-group-body-", id),
+        class = "dp-group-body",
+        style = if (!open) "display:none;" else NULL,
+      items_list
+    )
+  )
+}
+
+dp_subgroup <- function(id, label, items_list, open = TRUE) {
+  div(class = "dp-subgroup",
+    div(class = "dp-subgroup-hdr",
+        onclick = paste0("toggleDpSubgroup('", id, "')"),
+      span(class = "dp-subgroup-label", label),
+      span(id = paste0("dp-sub-icon-", id), class = "dp-sub-icon",
+           HTML(if (open) "&#9650;" else "&#9660;"))
+    ),
+    div(id    = paste0("dp-sub-body-", id),
+        class = "dp-sub-body",
+        style = if (!open) "display:none;" else NULL,
+      items_list
+    )
+  )
+}
+
+dp_stat <- function(val_id, label, color = "#1e293b") {
+  div(class = "dp-stat",
+    span(class = "dp-stat-lbl", label),
+    span(class = "dp-stat-val", style = paste0("color:", color),
+         textOutput(val_id, inline = TRUE))
+  )
+}
+
+ind_card <- function(title, body, chart_id = NULL, note = NULL, soon = FALSE) {
+  div(class = "ind-card",
+    div(class = "ind-card-hdr",
+      span(class = "ind-card-title", title),
+      if (soon) tags$span(class = "acc-coming-tag", "Soon")
+    ),
+    div(class = "ind-card-body", body),
+    if (!is.null(note))
+      div(class = "ind-card-note", note),
+    if (!is.null(chart_id))
+      div(class = "ind-card-chart",
+          plotOutput(chart_id, width = "100%", height = "55px"))
+  )
+}
+
+# --- WEB_SPEC-driven UI builders (Shiny UI + docs converter share WEB_SPEC) -----
+
+acc_soon_item <- function(label) {
+  div(class = "acc-item acc-disabled",
+    tags$span(class = "acc-toggle-label",
+      tags$span(class = "acc-toggle-track", tags$span(class = "acc-toggle-thumb")),
+      tags$span(class = "acc-toggle-text", label)),
+    tags$span(class = "acc-coming-tag", "Soon")
+  )
+}
+
+acc_legend_from_spec <- function(lg) {
+  if (is.null(lg)) return(NULL)
+  pal <- if (!is.null(lg$pal)) WEB_SPEC$palettes[[lg$pal]] else NULL
+  switch(lg$type,
+    ramp = acc_legend_ramp(pal, lo = lg$lo %||% "Low", hi = lg$hi %||% "High"),
+    cats = acc_legend_cats(pal),
+    dot  = acc_legend_dot(lg$color, lg$label %||% "Event / point"),
+    line = acc_legend_line(lg$color, lg$label %||% "Route",
+                           dashed = isTRUE(lg$dashed)),
+    NULL
+  )
+}
+
+acc_radios_from_spec <- function(group) {
+  opts <- WEB_SPEC$radios[[group]]
+  cls  <- paste0(group, "-radio")
+  setter <- switch(group, crime = "setCrimeType",
+                   envipe = "setEnvipeType", fosas = "setFosasType")
+  default <- opts[[1]]$value
+  div(class = "acc-radios",
+    lapply(opts, function(op) {
+      tags$button(
+        class        = paste0("acc-radio ", cls,
+                              if (op$value == default) " active" else ""),
+        `data-value` = op$value,
+        onclick      = paste0(setter, "('", op$value, "')"),
+        op$label
+      )
+    })
+  )
+}
+
+render_accordion <- function() {
+  lapply(WEB_SPEC$accordion, function(grp) {
+    items <- lapply(grp$items, function(it) {
+      switch(it$kind,
+        soon   = acc_soon_item(it$label),
+        radios = acc_radios_from_spec(it$group),
+        layer  = acc_layer(it$value, it$label,
+                   tooltip = it$tooltip,
+                   legend  = acc_legend_from_spec(it$legend),
+                   checked = isTRUE(it$checked))
+      )
+    })
+    acc_group(grp$id, grp$label, tagList(items), open = isTRUE(grp$open))
+  })
+}
+
+render_panel_card <- function(card) {
+  body <- switch(card$kind,
+    bigstat = div(class = "stat-grid",
+      lapply(card$stats, function(s)
+        big_stat(s$id, s$label, s$sub, s$color %||% "#1e293b"))),
+    munlist = tagList(
+      div(class = "dp-label", textOutput("mun_section_lbl", inline = TRUE)),
+      uiOutput("mun_list")),
+    stat = tagList(
+      lapply(card$stats, function(s)
+        dp_stat(s$id, s$label, s$color %||% "#1e293b")))
+  )
+  ind_card(card$title, body, chart_id = card$chart)
+}
+
+render_panel_groups <- function() {
+  lapply(WEB_SPEC$panel$groups, function(grp) {
+    dp_group(grp$id, grp$label, open = isTRUE(grp$open),
+             tagList(lapply(grp$cards, render_panel_card)))
+  })
+}
+
+# === UI =========================================================================
+
+ui <- page_fillable(
+  theme   = bs_theme(version = 5, bg = "#0f172a", fg = "#f8fafc",
+                     primary = COL_BLUE, 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", "--"))
+      ),
+
+      # --- 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>'))
+      ),
+
+      # --- 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",
+              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")
+              )
+          ),
+          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")),
+
+      # --- Accordion layer panel (bottom-left) --------------------------------
+      div(class = "layer-ctrl-panel",
+          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'),
+              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$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>'),
+              textOutput("panel_subtitle", inline = TRUE))
+      ),
+
+      div(class = "dp-scroll",
+        render_panel_groups()
+      ),
+
+      div(class = "dp-footer",
+          downloadButton("dl_xlsx", "Download selection (.xlsx)"))
+    )
+
+  )
+)
+
+# === Server =====================================================================
+
+server <- function(input, output, session) {
+
+  con <- tryCatch(
+    # Deployment edit (v10_HF): read-only -- DB lives on a read-only image
+    # layer and is shared across concurrent Shiny sessions.
+    ddb_connect(DB_PATH, read_only = TRUE),
+    error = function(e) {
+      showNotification(glue("Cannot open DuckDB: {conditionMessage(e)}"),
+                       type = "error", duration = NULL)
+      NULL
+    }
+  )
+  session$onSessionEnded(function() {
+    if (!is.null(con)) DBI::dbDisconnect(con, shutdown = TRUE)
+  })
+
+  # Check fosas table once at session start — gates all fosas SQL and JS calls
+  has_fosas_tbl <- if (!is.null(con)) {
+    tryCatch(DBI::dbExistsTable(con, "dim_fosas_mun"), error = function(e) FALSE)
+  } else FALSE
+
+  # Tracks whether grid N7 layers were successfully added to the map
+  is_3d      <- reactiveVal(FALSE)
+  is_grid_on <- reactiveVal(FALSE)
+
+  rv <- reactiveValues(
+    n_incidents = "---", n_fatalities  = "---",
+    n_graves    = "---", n_facilities  = "---",
+    n_events    = "---", n_mun         = "---",
+    n_desap     = "---", n_pam         = "---",
+    ocved_n     = "---", n_ged         = "---",
+    sub_incidents  = " ", sub_fatalities = " ",
+    mun_df      = NULL,
+    dl_list     = NULL,
+    is_national = TRUE,
+    temporal_filter_wkt = NULL
+  )
+
+  # Mutable quantile-break cache; populated once in renderMaplibre()
+  qb <- list()
+
+  # Compute n_colors-1 quantile thresholds from a DuckDB table column
+  compute_qbreaks <- function(tbl, col, n_colors, filter_zero = TRUE) {
+    n_breaks <- n_colors - 1L
+    q <- tryCatch(
+      DBI::dbGetQuery(con, web_sql_qbreaks(tbl, col, n_colors, filter_zero)),
+      error = function(e) { message("qbreaks[", col, "]: ", e$message); NULL }
+    )
+    if (is.null(q) || nrow(q) == 0 || ncol(q) == 0)
+      return(seq_len(n_breaks))
+    as.numeric(q[1, ])
+  }
+
+  # --- Expression helpers -------------------------------------------------------
+
+  step_expr <- function(col, breaks, pal) {
+    parts <- list("step", list("get", col), pal[[1]])
+    for (i in seq_along(breaks))
+      parts <- c(parts, list(breaks[[i]], pal[[i + 1L]]))
+    parts
+  }
+
+  crime_step_expr <- function(col, breaks) {
+    inner <- step_expr(col, breaks, CRIME_STEP_PAL)
+    list("case", list("==", list("get", col), 0), "rgba(0,0,0,0)", inner)
+  }
+
+  count_step_expr <- function(col, breaks, pal) {
+    inner <- step_expr(col, breaks, pal)
+    list("case", list("==", list("get", col), 0), "rgba(0,0,0,0)", inner)
+  }
+
+  giim_match_expr <- function() {
+    pairs <- unlist(
+      lapply(names(GIIM_COLORS), function(nm) list(nm, unname(GIIM_COLORS[[nm]]))),
+      recursive = FALSE
+    )
+    c(list("match", list("get", "giim_mun")), pairs, list("#cccccc"))
+  }
+
+  fosas_step_expr <- function(fosas_type = "fosas") {
+    info  <- FOSAS_COLS[[fosas_type]] %||% FOSAS_COLS[["fosas"]]
+    inner <- step_expr(info$col, info$breaks, FOSAS_PAL)
+    list("case", list("==", list("get", info$col), 0), "rgba(0,0,0,0)", inner)
+  }
+
+  # Quantile-aware step expression builders (use qb cache if populated)
+  crime_qstep_expr <- function(crime_type) {
+    info   <- CRIME_COLS[[crime_type]]
+    breaks <- qb$crime[[crime_type]] %||% info$breaks
+    crime_step_expr(info$col, breaks)
+  }
+
+  desap_qstep_expr <- function() {
+    breaks <- qb$desap %||% c(5, 15, 40, 80, 150)
+    step_expr("desap_per_100k", breaks, DESAP_PAL)
+  }
+
+  pam_qstep_expr <- function() {
+    breaks <- qb$pam %||% c(10, 50, 200, 500, 1000)
+    count_step_expr("pam_n", breaks, PAM_PAL)
+  }
+
+  # Return the fill-color expression for a given original layer ID
+  grid_color_expr <- function(orig_lid, crime_type, fosas_type = "fosas") {
+    switch(orig_lid,
+      "crime-choro"   = crime_qstep_expr(crime_type),
+      "desap-choro"   = desap_qstep_expr(),
+      "fosas-choro"   = fosas_step_expr(fosas_type),
+      "remesas-choro" = giim_match_expr(),
+      "pam-choro"     = pam_qstep_expr(),
+      "migrants-pts"  = count_step_expr("migrants_n", c(1, 5, 20, 50, 100),  MIGRANTS_PAL),
+      "graves-pts"    = count_step_expr("graves_n",   c(1, 2, 5, 15, 30),    GRAVES_PAL),
+      "infra-pts"     = count_step_expr("infra_n",    c(1, 3, 8, 20, 50),    INFRA_PAL),
+      "ocved-pts"     = count_step_expr("ocved_n",    c(1, 5, 20, 60, 200),  OCVED_PAL),
+      "ged-pts"       = count_step_expr("ged_n",      c(1, 3, 10, 30, 80),   GED_PAL),
+      NULL
+    )
+  }
+
+  # Central visibility updater
+  apply_visibility <- function(active, grid_on, crime_type, nivel, envipe_type, fosas_type = "fosas") {
+    prx <- maplibre_proxy("map")
+
+    for (orig_lid in names(GRID_LAYER_CFG)) {
+      if (orig_lid == "fosas-choro" && !has_fosas_tbl) next
+      vis <- if (!grid_on && orig_lid %in% active) "visible" else "none"
+      prx <- prx |> set_layout_property(orig_lid, "visibility", vis)
+    }
+    prx <- prx |> set_layout_property(
+      "crime-border", "visibility",
+      if (!grid_on && "crime-choro" %in% active) "visible" else "none"
+    )
+
+    # Sync crime fill color to selected type when grid is OFF
+    if (!grid_on && "crime-choro" %in% active) {
+      prx <- prx |> set_paint_property(
+        "crime-choro", "fill-color",
+        crime_qstep_expr(crime_type)
+      )
+    }
+
+    # Sync fosas fill color to selected sub-type when grid is OFF
+    if (has_fosas_tbl && !grid_on && "fosas-choro" %in% active) {
+      prx <- prx |> set_paint_property(
+        "fosas-choro", "fill-color",
+        fosas_step_expr(fosas_type)
+      )
+    }
+
+    for (lid in NON_GRID_LAYERS) {
+      prx <- prx |> set_layout_property(
+        lid, "visibility",
+        if (lid %in% active) "visible" else "none"
+      )
+    }
+
+    # Sync ENVIPE fill color to selected sub-type when layer is active
+    if ("envipe-state" %in% active) {
+      env_info <- ENVIPE_COLS[[envipe_type]] %||% ENVIPE_COLS[["insecurity"]]
+      prx <- prx |> set_paint_property(
+        "envipe-state", "fill-color",
+        step_expr(env_info$col, env_info$breaks, ENVIPE_PAL)
+      )
+    }
+
+    # Grid fill layers (opacity-based to avoid always-visible init bug)
+    niv_seq <- if (grid7_loaded()) WEB_SPEC$niveles else c("4", "5", "6")
+    for (niv in niv_seq) {
+      for (orig_lid in names(GRID_LAYER_CFG)) {
+        if (orig_lid == "fosas-choro" && !has_fosas_tbl) next
+        key     <- GRID_LAYER_CFG[[orig_lid]]
+        grid_id <- paste0("grid-", key, "-n", niv)
+        show    <- grid_on && orig_lid %in% active && niv == nivel
+        prx     <- prx |> set_paint_property(grid_id, "fill-opacity", if (show) 0.65 else 0)
+        if (show) {
+          expr <- grid_color_expr(orig_lid, crime_type, fosas_type)
+          if (!is.null(expr))
+            prx <- prx |> set_paint_property(grid_id, "fill-color", expr)
+        }
+      }
+    }
+  }
+
+  # --- National totals ----------------------------------------------------------
+
+  load_national_totals <- function() {
+    if (is.null(con)) return()
+    rv$is_national          <- TRUE
+    rv$dl_list              <- NULL
+    rv$temporal_filter_wkt  <- NULL
+
+    migrants <- tryCatch(DBI::dbGetQuery(con, web_sql("nat_migrants")),
+      error = function(e) data.frame(n = 0, n_dead = 0, n_miss = 0, n_total = 0))
+    rv$n_incidents    <- fmt_n(migrants$n)
+    rv$n_fatalities   <- fmt_n(migrants$n_dead)
+    rv$sub_incidents  <- if (migrants$n_total > 0) glue("{fmt_n(migrants$n_total)} people recorded") else " "
+    rv$sub_fatalities <- if (migrants$n_miss  > 0) glue("{fmt_n(migrants$n_miss)} missing")          else " "
+
+    graves <- tryCatch(DBI::dbGetQuery(con, web_sql("nat_count", tbl = "graves")),
+                       error = function(e) data.frame(n = 0))
+    rv$n_graves <- fmt_n(graves$n)
+
+    infra <- tryCatch(DBI::dbGetQuery(con, web_sql("nat_count", tbl = "support_infrastructure")),
+                      error = function(e) data.frame(n = 0))
+    rv$n_facilities <- fmt_n(infra$n)
+
+    ocved <- tryCatch(DBI::dbGetQuery(con, web_sql("nat_count", tbl = "ocved_events")),
+                      error = function(e) data.frame(n = 0))
+    ged   <- tryCatch(DBI::dbGetQuery(con, web_sql("nat_count", tbl = "ged_events")),
+                      error = function(e) data.frame(n = 0))
+    rv$n_events <- fmt_n(ocved$n + ged$n)
+    rv$ocved_n  <- fmt_n(ocved$n)
+    rv$n_ged    <- fmt_n(ged$n)
+
+    mun_agg <- tryCatch(DBI::dbGetQuery(con, web_sql("nat_mun_agg")),
+      error = function(e) data.frame(n_mun = 0, desap_n = 0, pam_n = 0))
+    rv$n_mun   <- fmt_n(mun_agg$n_mun)
+    rv$n_desap <- fmt_n(mun_agg$desap_n)
+    rv$n_pam   <- fmt_n(mun_agg$pam_n)
+
+    rv$mun_df <- tryCatch(DBI::dbGetQuery(con, web_sql("mun_table")),
+      error = function(e) data.frame())
+  }
+
+  load_pts <- function(tbl, limit = 80000) {
+    tryCatch({
+      DBI::dbGetQuery(con, web_sql("load_pts", tbl = tbl, limit = limit)) |>
+        sf::st_as_sf(coords = c("lon", "lat"), crs = 4326)
+    }, error = function(e) { message("  [pts] ", tbl, ": ", e$message); NULL })
+  }
+
+  # --- Query helpers ------------------------------------------------------------
+
+  pts_in_poly <- function(tbl, poly_wkt, bb) {
+    DBI::dbGetQuery(con, web_sql("pts_in_poly", tbl = tbl,
+      xmin = bb["xmin"], xmax = bb["xmax"],
+      ymin = bb["ymin"], ymax = bb["ymax"], poly_wkt = poly_wkt))
+  }
+
+  mun_in_poly <- function(poly_wkt, bb) {
+    DBI::dbGetQuery(con, web_sql("mun_in_poly",
+      xmin = bb["xmin"], xmax = bb["xmax"],
+      ymin = bb["ymin"], ymax = bb["ymax"], poly_wkt = poly_wkt))
+  }
+
+  run_analysis <- function(poly_wkt, bb) {
+    rv$is_national         <- FALSE
+    rv$temporal_filter_wkt <- poly_wkt
+    migrants_df    <- tryCatch(pts_in_poly("migrants", poly_wkt, bb),
+                               error = function(e) data.frame())
+    rv$n_incidents <- fmt_n(nrow(migrants_df))
+    n_dead         <- sum(as.numeric(migrants_df$n_dead),    na.rm = TRUE)
+    n_miss         <- sum(as.numeric(migrants_df$n_missing), na.rm = TRUE)
+    n_total        <- sum(as.numeric(migrants_df$n_total),   na.rm = TRUE)
+    rv$n_fatalities   <- fmt_n(n_dead)
+    rv$sub_incidents  <- if (n_total > 0) glue("{fmt_n(n_total)} people recorded") else " "
+    rv$sub_fatalities <- if (n_miss  > 0) glue("{fmt_n(n_miss)} missing")          else " "
+
+    graves_df      <- tryCatch(pts_in_poly("graves", poly_wkt, bb),
+                               error = function(e) data.frame())
+    rv$n_graves    <- fmt_n(nrow(graves_df))
+
+    infra_df        <- tryCatch(pts_in_poly("support_infrastructure", poly_wkt, bb),
+                                error = function(e) data.frame())
+    rv$n_facilities <- fmt_n(nrow(infra_df))
+
+    ocved_df    <- tryCatch(pts_in_poly("ocved_events", poly_wkt, bb),
+                            error = function(e) data.frame())
+    ged_df      <- tryCatch(pts_in_poly("ged_events",   poly_wkt, bb),
+                            error = function(e) data.frame())
+    rv$n_events <- fmt_n(nrow(ocved_df) + nrow(ged_df))
+    rv$ocved_n  <- fmt_n(nrow(ocved_df))
+    rv$n_ged    <- fmt_n(nrow(ged_df))
+
+    mun_df     <- tryCatch(mun_in_poly(poly_wkt, bb),
+                           error = function(e) { message("mun: ", e$message); data.frame() })
+    rv$n_mun   <- fmt_n(nrow(mun_df))
+    rv$n_desap <- fmt_n(sum(mun_df$desap_n, na.rm = TRUE))
+    rv$n_pam   <- fmt_n(sum(mun_df$pam_n,   na.rm = TRUE))
+    rv$mun_df  <- mun_df
+
+    rv$dl_list <- list(
+      migrants = migrants_df, graves = graves_df,
+      infra    = infra_df,    ocved  = ocved_df,
+      ged      = ged_df,      mun    = mun_df
+    )
+  }
+
+  # Satellite fade-in expression helper
+  zoom_fade_in <- function(from_zoom, to_zoom) {
+    list("interpolate", list("linear"), list("zoom"), from_zoom, 0, to_zoom, 1)
+  }
+
+  # N7 is lazy-loaded on first selection (113k rows would block renderMaplibre).
+  grid7_sf     <- NULL
+  grid7_loaded <- reactiveVal(FALSE)
+
+  # Grid tooltip and layer builder live in server scope so the lazy N7
+  # observer can add N7 layers via maplibre_proxy after renderMaplibre completes.
+  grid_tooltip <- list("concat",
+    "<b>Cell: </b>",             list("get", "codigo"),
+    "<br>Homicide: <b>",         list("to-string", list("get", "homicidio")),      "</b> /100k",
+    "<br>Disappear./100k: <b>",  list("to-string", list("get", "desap_per_100k")), "</b>",
+    "<br>Burial pits: ",         list("to-string", list("get", "fosas_total")),
+    "<br>Irreg. mig. events: ",  list("to-string", list("get", "pam_n")),
+    "<br>IOM incidents: ",       list("to-string", list("get", "migrants_n")),
+    "<br>Grave sites: ",         list("to-string", list("get", "graves_n")),
+    "<br>Violence (OCVED): ",    list("to-string", list("get", "ocved_n")),
+    "<br>Conflict (GED): ",      list("to-string", list("get", "ged_n")),
+    "<br>Facilities: ",          list("to-string", list("get", "infra_n")))
+
+  add_typed_grid_layers <- function(m, grid_sf, niv) {
+    if (is.null(grid_sf)) return(m)
+    src <- paste0("grid-crime-n", niv)
+    m <- m |>
+      add_fill_layer(
+        id           = src,
+        source       = grid_sf,
+        fill_color   = crime_qstep_expr("Homicide rate"),
+        fill_opacity = 0,
+        tooltip      = grid_tooltip
+      )
+    m <- m |>
+      add_fill_layer(id = paste0("grid-desap-n",    niv), source = src,
+        fill_color = desap_qstep_expr(),
+        fill_opacity = 0, tooltip = grid_tooltip)
+    if (has_fosas_tbl) {
+      m <- m |> add_fill_layer(id = paste0("grid-fosas-n", niv), source = src,
+        fill_color   = fosas_step_expr("fosas"),
+        fill_opacity = 0, tooltip = grid_tooltip)
+    }
+    m <- m |>
+      add_fill_layer(id = paste0("grid-remesas-n",  niv), source = src,
+        fill_color = giim_match_expr(),
+        fill_opacity = 0, tooltip = grid_tooltip) |>
+      add_fill_layer(id = paste0("grid-pam-n",      niv), source = src,
+        fill_color = pam_qstep_expr(),
+        fill_opacity = 0, tooltip = grid_tooltip) |>
+      add_fill_layer(id = paste0("grid-migrants-n", niv), source = src,
+        fill_color = count_step_expr("migrants_n", c(1, 5, 20, 50, 100),  MIGRANTS_PAL),
+        fill_opacity = 0, tooltip = grid_tooltip) |>
+      add_fill_layer(id = paste0("grid-graves-n",   niv), source = src,
+        fill_color = count_step_expr("graves_n",   c(1, 2, 5, 15, 30),    GRAVES_PAL),
+        fill_opacity = 0, tooltip = grid_tooltip) |>
+      add_fill_layer(id = paste0("grid-infra-n",    niv), source = src,
+        fill_color = count_step_expr("infra_n",    c(1, 3, 8, 20, 50),    INFRA_PAL),
+        fill_opacity = 0, tooltip = grid_tooltip) |>
+      add_fill_layer(id = paste0("grid-ocved-n",    niv), source = src,
+        fill_color = count_step_expr("ocved_n",    c(1, 5, 20, 60, 200),  OCVED_PAL),
+        fill_opacity = 0, tooltip = grid_tooltip) |>
+      add_fill_layer(id = paste0("grid-ged-n",      niv), source = src,
+        fill_color = count_step_expr("ged_n",      c(1, 3, 10, 30, 80),   GED_PAL),
+        fill_opacity = 0, tooltip = grid_tooltip)
+    m
+  }
+
+  # --- Render map ---------------------------------------------------------------
+  output$map <- renderMaplibre({
+    req(con)
+
+    # Compute quantile breaks from actual data (populate qb cache)
+    qb$crime <- lapply(CRIME_COLS, function(info) {
+      compute_qbreaks("crime_mun", info$col, length(CRIME_STEP_PAL))
+    })
+    qb$desap <- compute_qbreaks("dim_desap_mun", "final_desap_nl_per_100k",
+                                length(DESAP_PAL))
+    qb$pam   <- compute_qbreaks("dim_pam_mun", "pam_n", length(PAM_PAL))
+
+    g  <- function(col) list("get", col)
+    ts <- function(col) list("to-string", list("get", col))
+
+    crime_sf <- tryCatch({
+      DBI::dbGetQuery(con, web_sql("src_crime")) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("crime_mun: ", e$message); NULL })
+
+    load_grid_unified <- function(niv, limit = NULL) {
+      tryCatch({
+        DBI::dbGetQuery(con,
+          web_sql_grid_unified(niv, has_fosas_tbl, limit)) |>
+          sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+          dplyr::select(-wkt)
+      }, error = function(e) { message("grid_nivel", niv, ": ", e$message); NULL })
+    }
+
+    # N7 (113k rows) is lazy-loaded; only N4-6 pre-loaded so the map renders fast.
+    RENDER_NIVELES <- c("4", "5", "6")
+    grid_sf_list <- setNames(
+      lapply(RENDER_NIVELES, \(n) load_grid_unified(as.integer(n))),
+      RENDER_NIVELES
+    )
+    grid4_sf <- grid_sf_list[["4"]]
+    grid5_sf <- grid_sf_list[["5"]]
+    grid6_sf <- grid_sf_list[["6"]]
+    # grid7_sf stays NULL until user first selects N7 (see lazy observer below)
+    desap_sf <- tryCatch({
+      DBI::dbGetQuery(con, web_sql("src_desap")) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("desap: ", e$message); NULL })
+
+    remesas_sf <- tryCatch({
+      DBI::dbGetQuery(con, web_sql("src_remesas")) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("remesas: ", e$message); NULL })
+
+    pam_sf <- tryCatch({
+      DBI::dbGetQuery(con, web_sql("src_pam")) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("pam: ", e$message); NULL })
+
+    fosas_sf <- tryCatch({
+      DBI::dbGetQuery(con, web_sql("src_fosas")) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("dim_fosas_mun: ", e$message); NULL })
+
+    state_sf <- tryCatch({
+      DBI::dbGetQuery(con, web_sql("src_state")) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("state_polygons: ", e$message); NULL })
+
+    routes_sf <- tryCatch({
+      DBI::dbGetQuery(con, web_sql("src_routes")) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("routes: ", e$message); NULL })
+
+    via_sf <- tryCatch({
+      DBI::dbGetQuery(con, web_sql("src_via")) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("viaferrea: ", e$message); NULL })
+
+    migrants_pts <- load_pts("migrants",               8000)
+    graves_pts   <- load_pts("graves",                 5000)
+    infra_pts    <- load_pts("support_infrastructure", 5000)
+    ocved_pts    <- load_pts("ocved_events",           80000)
+    ged_pts      <- load_pts("ged_events",             80000)
+
+    m <- maplibre(
+      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,
+        simplify_freehand = TRUE,
+        rectangle         = TRUE,
+        radius            = TRUE,
+        point_color       = COL_BLUE,
+        line_color        = COL_BLUE,
+        fill_color        = COL_BLUE,
+        fill_opacity      = 0.12,
+        active_color      = "#93c5fd",
+        line_width        = 2,
+        show_measurements = TRUE
+      ) 
+
+    # --- Satellite imagery (fades in at zoom > 14) ----------------------------
+    m <- m |>
+      add_raster_source(
+        id      = "satellite-source",
+        tiles   = list("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"),
+        tileSize = 256,
+        maxzoom = 19
+      ) |>
+      add_raster_layer(
+        id                   = "satellite-basemap",
+        source               = "satellite-source",
+        raster_opacity       = zoom_fade_in(14, 16),
+        raster_fade_duration = 300
+      )
+
+    # --- Municipality / state fill layers (crime-choro visible by default) -----
+    if (!is.null(crime_sf)) {
+      m <- m |>
+        add_fill_layer(
+          id           = "crime-choro",
+          source       = crime_sf,
+          fill_color   = crime_qstep_expr("Homicide rate"),
+          fill_opacity = 0.6,
+          tooltip      = list("concat",
+            "<b>", g("municipio"), "</b>, ", g("entidad"),
+            "<br>Homicide: <b>",     ts("homicidio"),       "</b> /100k",
+            "<br>Robbery: <b>",      ts("robo"),            "</b> /100k",
+            "<br>Kidnapping: <b>",   ts("secuestro"),       "</b> /100k",
+            "<br>Trafficking: <b>",  ts("trata_personas"),  "</b> /100k",
+            "<br>Child trafficking: <b>", ts("trafico_menores"), "</b> /100k")
+        ) |>
+        add_line_layer(
+          id         = "crime-border",
+          source     = "crime-choro",
+          line_color = "rgba(255,255,255,0.07)",
+          line_width = 0.2
+        )
+    }
+
+    if (!is.null(desap_sf)) {
+      m <- m |>
+        add_fill_layer(
+          id           = "desap-choro",
+          source       = desap_sf,
+          fill_color   = desap_qstep_expr(),
+          fill_opacity = 0.6, visibility = "none",
+          tooltip      = list("concat", "<b>", g("municipio"), "</b>",
+                              "<br>Disappearances: ", ts("desap_per_100k"), " /100k")
+        )
+    }
+
+    if (!is.null(remesas_sf)) {
+      m <- m |>
+        add_fill_layer(
+          id           = "remesas-choro",
+          source       = remesas_sf,
+          fill_color   = giim_match_expr(),
+          fill_opacity = 0.75, visibility = "none",
+          tooltip      = list("concat", "<b>", g("municipio"), "</b>",
+                              "<br>Migration intensity: <b>", g("giim_mun"), "</b>")
+        )
+    }
+
+    if (!is.null(pam_sf)) {
+      m <- m |>
+        add_fill_layer(
+          id           = "pam-choro",
+          source       = pam_sf,
+          fill_color   = pam_qstep_expr(),
+          fill_opacity = 0.7, visibility = "none",
+          tooltip      = list("concat", "<b>", g("municipio"), "</b>",
+                              "<br>Irregular migration events: ", ts("pam_n"))
+        )
+    }
+
+    if (!is.null(fosas_sf)) {
+      m <- m |>
+        add_fill_layer(
+          id           = "fosas-choro",
+          source       = fosas_sf,
+          fill_color   = fosas_step_expr("fosas"),
+          fill_opacity = 0.65, visibility = "none",
+          tooltip      = list("concat", "<b>", g("municipio"), "</b>",
+                              "<br>Burial pits (fosas): ", ts("fosas_total"),
+                              "<br>Bodies (cuerpos): ", ts("cuerpos_total"))
+        )
+    }
+
+    if (!is.null(state_sf)) {
+      m <- m |>
+        add_fill_layer(
+          id           = "envipe-state",
+          source       = state_sf,
+          fill_color   = step_expr("insecurity_perc", c(40, 55, 65, 75, 85), ENVIPE_PAL),
+          fill_opacity = 0.6, visibility = "none",
+          tooltip      = list("concat", "<b>", g("desc_entidad"), "</b>",
+                              "<br>Insecurity: ", ts("insecurity_perc"), "%",
+                              "<br>Dark figures: ", ts("dark_figures_perc"), "%")
+        )
+    }
+
+    # --- Grid layers: N4-6 pre-loaded; N7 added lazily by observer below -------
+    for (nv in RENDER_NIVELES)
+      m <- add_typed_grid_layers(m, grid_sf_list[[nv]], nv)
+
+    # --- Line layers ------------------------------------------------------------
+    if (!is.null(routes_sf)) {
+      m <- m |>
+        add_line_layer(
+          id           = "routes-lines",
+          source       = routes_sf,
+          line_color   = COL_AMBER,
+          line_width   = list("interpolate", list("linear"), list("zoom"),
+                              5, 0.5, 10, 2.0),
+          line_opacity = 0.1, visibility = "none"
+        )
+    }
+
+    if (!is.null(via_sf)) {
+      m <- m |>
+        add_line_layer(
+          id             = "viaferrea-lines",
+          source         = via_sf,
+          line_color     = "#990f0f",
+          line_width     = 1.5,
+          line_opacity   = 0.9,
+          line_dasharray = c(4, 2),
+          visibility     = "none"
+        )
+    }
+
+    # --- Point layers -----------------------------------------------------------
+    add_pts_layer <- function(m, pts, id, color, radius = 3) {
+      if (is.null(pts)) return(m)
+      m |> add_circle_layer(
+        id                  = id,
+        source              = pts,
+        circle_color        = color,
+        circle_radius       = radius,
+        circle_opacity      = 0.75,
+        circle_stroke_color = "rgba(0,0,0,0.4)",
+        circle_stroke_width = 0.7,
+        visibility          = "none"
+      )
+    }
+
+    m <- m |>
+      add_pts_layer(migrants_pts, "migrants-pts", COL_YEL,          2) |>
+      add_pts_layer(graves_pts,   "graves-pts",   COL_RED,          2) |>
+      add_pts_layer(infra_pts,    "infra-pts",    COL_GREEN,        2) |>
+      add_pts_layer(ocved_pts,    "ocved-pts",    COL_AMBER,        1) |>
+      add_pts_layer(ged_pts,      "ged-pts",      COL_LIGHT_BLUE,   1)
+
+    m
+  })
+
+  # --- Observers ----------------------------------------------------------------
+
+  # Lazy N7: load grid_nivel7 and add its layers to the map the first time
+  # the user selects N7, avoiding a 5+ minute block in renderMaplibre.
+  observeEvent(input$grid_nivel, {
+    req(input$grid_nivel == "7", !grid7_loaded(), !is.null(con))
+    grid7_sf <<- tryCatch({
+      DBI::dbGetQuery(con, web_sql_grid_unified(7, has_fosas_tbl)) |>
+        sf::st_as_sf(wkt = "wkt", crs = 4326) |>
+        dplyr::select(-wkt)
+    }, error = function(e) { message("N7 lazy load: ", e$message); NULL })
+    if (!is.null(grid7_sf)) {
+      maplibre_proxy("map") |> add_typed_grid_layers(grid7_sf, "7")
+      grid7_loaded(TRUE)
+    }
+  }, ignoreNULL = TRUE, ignoreInit = TRUE)
+
+  observeEvent(input$clear_btn, {
+    clear_drawn_features(maplibre_proxy("map"))
+    load_national_totals()
+  })
+
+  if (!is.null(con)) {
+    load_national_totals()
+    # Populate state filter at startup — avoids renderUI lifecycle issues
+    tbl_cols <- tryCatch(
+      DBI::dbGetQuery(con, "DESCRIBE state_polygons")$column_name,
+      error = function(e) character(0)
+    )
+    label_col <- if ("desc_entidad" %in% tbl_cols) "desc_entidad"
+                 else if ("entidad"  %in% tbl_cols) "entidad"
+                 else if ("nombre"   %in% tbl_cols) "nombre"
+                 else "CVE_ENT"
+    state_ch <- tryCatch(
+      DBI::dbGetQuery(con, web_sql("state_choices", label_col = label_col)) |>
+        (\(d) setNames(d$CVE_ENT, d$label))(),
+      error = function(e) { message("state_polygons: ", e$message); character(0) }
+    )
+    updateSelectInput(session, "state_select",
+                      choices = c("Choose a state..." = "", state_ch))
+  }
+
+  observeEvent(input$grid_icon_click, {
+    new_on <- !is_grid_on()
+    is_grid_on(new_on)
+  }, ignoreNULL = TRUE, ignoreInit = TRUE)
+
+  observeEvent(
+    eventExpr = list(
+      input$active_layers, is_grid_on(),
+      input$crime_type, input$grid_nivel, input$envipe_type, input$fosas_type
+    ),
+    handlerExpr = {
+      apply_visibility(
+        active      = input$active_layers %||% character(0),
+        grid_on     = is_grid_on(),
+        crime_type  = input$crime_type  %||% "Homicide rate",
+        nivel       = input$grid_nivel  %||% "6",
+        envipe_type = input$envipe_type %||% "insecurity",
+        fosas_type  = input$fosas_type  %||% "fosas"
+      )
+    },
+    ignoreInit = TRUE
+  )
+
+  observeEvent(input$map_style, {
+    req(input$map_style)
+    style <- switch(input$map_style,
+      "dark-matter" = carto_style("dark-matter"),
+      "positron"    = carto_style("positron"),
+      "voyager"     = carto_style("voyager"),
+      "osm"         = "https://tiles.openfreemap.org/styles/liberty"
+    )
+    if (!is.null(style))
+      maplibre_proxy("map") |> set_style(style, preserve_layers = TRUE)
+  }, ignoreNULL = TRUE, ignoreInit = TRUE)
+
+  observeEvent(input$home_btn, {
+    is_3d(FALSE)
+    maplibre_proxy("map") |>
+      ease_to(c(-102.5, 23.6), zoom = 4.5, pitch = 0, bearing = 0, duration = 1200)
+  })
+
+  observeEvent(input$toggle_3d, {
+    new_3d  <- !is_3d()
+    is_3d(new_3d)
+    pitch   <- if (new_3d) 60  else 0
+    bearing <- if (new_3d) -15 else 0
+    maplibre_proxy("map") |>
+      ease_to(c(-102.5, 23.6), pitch = pitch, bearing = bearing, duration = 1500)
+  })
+
+  observeEvent(input$map_drawn_features, {
+    feats <- input$map_drawn_features[["features"]]
+    if (is.null(feats) || length(feats) == 0) { load_national_totals(); return() }
+    drawn <- tryCatch({
+      gj  <- jsonlite::toJSON(input$map_drawn_features, auto_unbox = TRUE)
+      tmp <- tempfile(fileext = ".geojson")
+      writeLines(as.character(gj), tmp)
+      result <- sf::read_sf(tmp, quiet = TRUE)
+      unlink(tmp)
+      result
+    }, error = function(e) { message("GeoJSON parse: ", e$message); NULL })
+    if (is.null(drawn) || nrow(drawn) == 0) return()
+    poly      <- sf::st_union(drawn)
+    poly      <- tryCatch(sf::st_make_valid(poly), error = function(e) poly)
+    geom_type <- as.character(sf::st_geometry_type(poly, by_geometry = FALSE))
+    if (!grepl("POLYGON", toupper(geom_type))) {
+      poly <- sf::st_convex_hull(sf::st_buffer(poly, dist = 0.1))
+    }
+    poly_wkt <- sf::st_as_text(poly)
+    bb       <- sf::st_bbox(poly)
+    run_analysis(poly_wkt, bb)
+  }, ignoreNULL = FALSE)
+
+  observeEvent(input$map_click, {
+    req(isTRUE(input$select_mode == "click"), con)
+    click <- input$map_click
+    req(!is.null(click$lng), !is.null(click$lat))
+    lon <- click$lng; lat <- click$lat
+    mun_click <- tryCatch(
+      DBI::dbGetQuery(con, web_sql("click_mun",
+        lon_lo = lon - 2, lon_hi = lon + 2,
+        lat_lo = lat - 2, lat_hi = lat + 2, lon = lon, lat = lat)),
+      error = function(e) data.frame()
+    )
+    if (nrow(mun_click) == 0) return()
+    poly_wkt <- mun_click$wkt[1]
+    sf_mun   <- sf::st_as_sf(data.frame(wkt = poly_wkt), wkt = "wkt", crs = 4326)
+    bb       <- sf::st_bbox(sf_mun)
+    run_analysis(poly_wkt, bb)
+  })
+
+  # --- State filter ------------------------------------------------------------
+
+  observeEvent(input$state_select, {
+    req(con, input$state_select, nchar(input$state_select) > 0)
+    state_row <- tryCatch(
+      DBI::dbGetQuery(con, web_sql("state_wkt", cve_ent = input$state_select)),
+      error = function(e) data.frame()
+    )
+    req(nrow(state_row) > 0)
+    poly_wkt <- state_row$wkt[1]
+    sf_state <- sf::st_as_sf(data.frame(wkt = poly_wkt), wkt = "wkt", crs = 4326)
+    bb     <- sf::st_bbox(sf_state)
+    center <- as.numeric(c((bb["xmin"] + bb["xmax"]) / 2,
+                           (bb["ymin"] + bb["ymax"]) / 2))
+    run_analysis(poly_wkt, bb)
+    maplibre_proxy("map") |> fly_to(center = center, zoom = 7, duration = 1200)
+    session$sendCustomMessage("hideStatePanel", list())
+  }, ignoreNULL = TRUE, ignoreInit = TRUE)
+
+  observeEvent(input$state_filter_clear, {
+    clear_drawn_features(maplibre_proxy("map"))
+    load_national_totals()
+    session$sendCustomMessage("hideStatePanel", list())
+  }, ignoreNULL = TRUE, ignoreInit = TRUE)
+
+  # --- Outputs ------------------------------------------------------------------
+
+  output$panel_subtitle <- renderText({
+    if (isTRUE(rv$is_national)) "All Mexico" else "Selection active"
+  })
+
+  output$n_incidents    <- renderText(rv$n_incidents)
+  output$n_fatalities   <- renderText(rv$n_fatalities)
+  output$n_graves       <- renderText(rv$n_graves)
+  output$n_facilities   <- renderText(rv$n_facilities)
+  output$n_events       <- renderText(rv$n_events)
+  output$ocved_n        <- renderText(rv$ocved_n)
+  output$n_ged          <- renderText(rv$n_ged)
+  output$n_mun          <- renderText(rv$n_mun)
+  output$n_desap        <- renderText(rv$n_desap)
+  output$n_pam          <- renderText(rv$n_pam)
+  output$sub_incidents  <- renderText(rv$sub_incidents)
+  output$sub_fatalities <- renderText(rv$sub_fatalities)
+
+  output$mun_section_lbl <- renderText({
+    lbl <- tolower(input$crime_type %||% "homicide rate")
+    if (isTRUE(rv$is_national)) {
+      glue("Top 5 municipalities -- {lbl} (all Mexico)")
+    } else {
+      n <- if (!is.null(rv$mun_df)) nrow(rv$mun_df) else 0
+      glue("Top 5 municipalities -- {lbl} ({n} in selection)")
+    }
+  })
+
+  output$mun_list <- renderUI({
+    df <- rv$mun_df
+    if (is.null(df) || nrow(df) == 0)
+      return(div(class = "dp-empty", "Draw a polygon or click a municipality to filter."))
+    col_name <- CRIME_COLS[[input$crime_type]]$col
+    if (!col_name %in% names(df)) col_name <- "homicidio"
+    df_sorted <- df[order(df[[col_name]], decreasing = TRUE, na.last = TRUE), ]
+    top <- head(df_sorted, 5L)
+    mx  <- max(top[[col_name]], na.rm = TRUE)
+    if (is.na(mx) || mx <= 0) mx <- 1
+    items <- lapply(seq_len(nrow(top)), function(i) {
+      r     <- top[i, ]
+      rate  <- round(r[[col_name]], 1L)
+      pct   <- max(4L, round(100 * rate / mx))
+      color <- BAR_RAMP[min(i, length(BAR_RAMP))]
+      rank_row(i, r$municipio, r$entidad, glue("{rate} /100k"), pct, color)
+    })
+    extras <- nrow(df) - 5L
+    tagList(
+      tags$ul(class = "rank-list", items),
+      if (extras > 0)
+        div(class = "dp-more", glue("+ {extras} more municipalities in selection"))
+    )
+  })
+
+  output$temporal_plot <- renderPlot({
+    req(con)
+    # Try incident_date_ts (DATE, from parquet) then fall back to incident_date
+    yr_expr_ts   <- "CAST(date_part('year', incident_date_ts) AS INTEGER)"
+    yr_expr_raw  <- "CAST(date_part('year', CAST(incident_date AS TIMESTAMP)) AS INTEGER)"
+    df_all <- tryCatch(
+      DBI::dbGetQuery(con, web_sql("temporal_mig_all", yr_expr = yr_expr_ts)),
+      error = function(e) tryCatch(
+        DBI::dbGetQuery(con, web_sql("temporal_mig_all", yr_expr = yr_expr_raw)),
+        error = function(e2) { message("temporal: ", e2$message); NULL }
+      )
+    )
+    if (is.null(df_all) || nrow(df_all) == 0) return(NULL)
+
+    filter_wkt <- rv$temporal_filter_wkt
+    df_sel <- if (!is.null(filter_wkt)) {
+      tryCatch(DBI::dbGetQuery(con, web_sql("temporal_mig_sel",
+        yr_expr = yr_expr_ts, poly_wkt = filter_wkt)), error = function(e) NULL)
+    } else NULL
+
+    COL_LINE <- "#b45309"
+    p <- ggplot(df_all, aes(x = yr, y = n)) +
+      geom_area(fill = COL_LINE, alpha = 0.08, color = NA) +
+      geom_line(color = COL_LINE, linewidth = 0.7, alpha = 0.45)
+    if (!is.null(df_sel) && nrow(df_sel) > 0) {
+      p <- p +
+        geom_line(data  = df_sel, aes(x = yr, y = n),
+                  color = COL_LINE, linewidth = 1.1) +
+        geom_point(data = df_sel, aes(x = yr, y = n),
+                   color = COL_LINE, size = 1.6, shape = 21,
+                   fill = "white", stroke = 0.7)
+    }
+    p + theme_minimal(base_size = 8) +
+      theme(
+        plot.background    = element_rect(fill = "transparent", color = NA),
+        panel.background   = element_rect(fill = "transparent", color = NA),
+        panel.grid         = element_blank(),
+        panel.grid.major.y = element_line(color = "#e2e8f0", linewidth = 0.3),
+        axis.title         = element_blank(),
+        axis.text.x        = element_text(size = 7, color = "#64748b"),
+        axis.text.y        = element_blank(),
+        axis.ticks         = element_blank(),
+        plot.margin        = margin(1, 4, 1, 4)
+      )
+  }, bg = "transparent", res = 96)
+
+  # Shared helper: temporal bar chart by year for point event tables
+  make_temporal_yr <- function(tbl, yr_col, line_color) {
+    renderPlot({
+      req(con)
+      yr_expr <- glue("CAST({yr_col} AS INTEGER)")
+      df_all <- tryCatch(DBI::dbGetQuery(con, web_sql("temporal_yr_all",
+        yr_expr = yr_expr, tbl = tbl, yr_col = yr_col)),
+        error = function(e) NULL)
+      if (is.null(df_all) || nrow(df_all) == 0) return(NULL)
+      fw     <- rv$temporal_filter_wkt
+      df_sel <- if (!is.null(fw)) tryCatch(DBI::dbGetQuery(con, web_sql("temporal_yr_sel",
+        yr_expr = yr_expr, tbl = tbl, yr_col = yr_col, poly_wkt = fw)),
+        error = function(e) NULL) else NULL
+      p <- ggplot(df_all, aes(x = yr, y = n)) +
+        geom_area(fill = line_color, alpha = 0.08, color = NA) +
+        geom_line(color = line_color, linewidth = 0.7, alpha = 0.45)
+      if (!is.null(df_sel) && nrow(df_sel) > 0)
+        p <- p +
+          geom_line(data = df_sel, aes(x = yr, y = n),
+                    color = line_color, linewidth = 1.1) +
+          geom_point(data = df_sel, aes(x = yr, y = n),
+                     color = line_color, size = 1.6, shape = 21,
+                     fill = "white", stroke = 0.7)
+      p + theme_minimal(base_size = 8) +
+        theme(
+          plot.background    = element_rect(fill = "transparent", color = NA),
+          panel.background   = element_rect(fill = "transparent", color = NA),
+          panel.grid         = element_blank(),
+          panel.grid.major.y = element_line(color = "#e2e8f0", linewidth = 0.3),
+          axis.title         = element_blank(),
+          axis.text.x        = element_text(size = 7, color = "#64748b"),
+          axis.text.y        = element_blank(),
+          axis.ticks         = element_blank(),
+          plot.margin        = margin(1, 4, 1, 4)
+        )
+    }, bg = "transparent", res = 96)
+  }
+
+  output$temporal_ocved <- make_temporal_yr("ocved_events", "year",   "#d97706")
+  output$temporal_ged   <- make_temporal_yr("ged_events",   "year",   "#2563eb")
+
+  output$dl_xlsx <- downloadHandler(
+    filename = function()
+      glue("depth_selection_{format(Sys.time(), '%Y%m%d_%H%M%S')}.xlsx"),
+    content  = function(file) {
+      if (is.null(rv$dl_list)) {
+        writexl::write_xlsx(list(note = data.frame(note = "No selection made.")),
+                            path = file)
+        return()
+      }
+      dl   <- rv$dl_list
+      keep <- list(
+        migrants             = dl$migrants,
+        graves               = dl$graves,
+        support_infra        = dl$infra,
+        violence_ocved       = dl$ocved,
+        conflict_ged         = dl$ged,
+        municipalities_crime = dl$mun
+      )
+      sheets <- Filter(function(x) !is.null(x) && nrow(x) > 0, keep)
+      if (length(sheets) == 0)
+        sheets <- list(note = data.frame(note = "No features in selection."))
+      writexl::write_xlsx(sheets, path = file)
+    }
+  )
+}
+
+# Extract mode: source() defines ui/server/WEB_SQL/WEB_SPEC without launching.
+# The docs converter (10.13_build_docs.R) sets this option, reads the objects.
+# Deployment edit (v10_HF): bind 0.0.0.0:$PORT so the HF Docker Space can
+# reach the app (HF expects the container to listen on app_port, default 7860).
+if (!isTRUE(getOption("depth.extract_mode", FALSE))) {
+  shiny::runApp(
+    shinyApp(ui, server),
+    host = "0.0.0.0",
+    port = as.integer(Sys.getenv("PORT", "7860"))
+  )
+}

Dockerfile

@@ -1,19 +1,32 @@
-FROM rocker/shiny:latest
+# DEPTH Risk Map -- Hugging Face Docker Space
+# Base ships R + sf/GDAL/GEOS/PROJ (the slowest deps to build).
+FROM rocker/geospatial:4.4
 
-WORKDIR /code
+# DuckDB lives on the edgarodriguez/depth_alpha dataset; baked in at build.
+# Override with: docker build --build-arg DDB_URL=... -t depth-hf .
+ARG DDB_URL=https://huggingface.co/datasets/edgarodriguez/depth_alpha/resolve/main/depth_mexico.duckdb
+# For a PRIVATE dataset, also pass --build-arg HF_TOKEN=hf_xxx
+ARG HF_TOKEN=
 
-RUN apt-get update && apt-get install -y \
-    build-essential \
-    libcurl4-openssl-dev \
-    libssl-dev \
-    libxml2-dev
+RUN install2.r --error --skipinstalled \
+      shiny bslib DBI duckdb dplyr jsonlite htmltools glue writexl ggplot2 stringr \
+ && R -e "install.packages('mapgl', repos = c('https://walkerke.r-universe.dev', 'https://cloud.r-project.org'))" \
+ && R -e "library(mapgl); library(duckdb); library(sf); library(shiny)"
 
-RUN install2.r --error \
-    dplyr \
-    ggplot2 \
-    readr \
-    ggExtra
+WORKDIR /app
+COPY 10.11_draw_query_indicators_v10_HF.R helpers.R 10.08_styles.css ./
 
-COPY . .
+# Bake the DuckDB into the image (build-time download).
+RUN if [ -n "$HF_TOKEN" ]; then AUTH="Authorization: Bearer $HF_TOKEN"; else AUTH=""; fi \
+ && curl -fL ${AUTH:+-H "$AUTH"} "${DDB_URL}" -o /app/depth_mexico.duckdb \
+ && test -s /app/depth_mexico.duckdb \
+ && ls -lh /app/depth_mexico.duckdb
 
-CMD ["R", "--quiet", "-e", "shiny::runApp('/code', host='0.0.0.0', port=7860)"]
+# HF Spaces runs the container as a non-root user -- make /app world-readable.
+RUN chmod -R a+rX /app
+
+ENV DEPTH_DDB_PATH=/app/depth_mexico.duckdb \
+    PORT=7860
+
+EXPOSE 7860
+CMD ["Rscript", "10.11_draw_query_indicators_v10_HF.R"]

README.md

@@ -1,14 +1,40 @@
 ---
-title: Depth Map App
-emoji: 🌍
-colorFrom: gray
-colorTo: blue
+title: DEPTH Risk Map
+emoji: 🗺️
+colorFrom: blue
+colorTo: indigo
 sdk: docker
+app_port: 7860
 pinned: false
-license: cc-by-nc-4.0
-short_description: prototype for map
 ---
 
-EARLY-ALPHA-ALPHA VERSION FOR TRANSIT MIGRATION RISK ASSESSMENT
+# DEPTH Risk Map
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Interactive migration-risk map for Mexico, developed by the University of
+Nottingham's Rights Lab. Humanitarian, violence and infrastructure indicators
+overlaid on a rHEALPix hierarchical spatial grid.
+
+## How this Space works
+
+- `Dockerfile` builds an R image (`rocker/geospatial`), installs the app
+  packages, and downloads `depth_mexico.duckdb` from the
+  [`edgarodriguez/depth_alpha`](https://huggingface.co/datasets/edgarodriguez/depth_alpha)
+  dataset at build time (baked into the image).
+- The Shiny app (`10.11_draw_query_indicators_v10_HF.R`) opens that DuckDB
+  read-only and serves on `0.0.0.0:7860`.
+
+## Files
+
+| File | Role |
+|---|---|
+| `10.11_draw_query_indicators_v10_HF.R` | Shiny app (HF build of v9) |
+| `helpers.R` | DuckDB connection + formatting helpers |
+| `10.08_styles.css` | App stylesheet |
+| `Dockerfile` | Image build + DuckDB bake-in |
+
+## Updating
+
+The app database is not stored in this Space. To refresh data, update
+`depth_mexico.duckdb` in the `edgarodriguez/depth_alpha` dataset and rebuild
+(Factory rebuild). App-logic changes are made upstream in `v9`, then this file
+is regenerated from it.

helpers.R

@@ -0,0 +1,84 @@
+# ── Shared helpers ─────────────────────────────────────────────────────────────
+
+library(sf)
+library(dplyr)
+library(stringr)
+
+# Hierarchy codes from nivel8 via str_sub truncation (one char per level up)
+add_nivel_codes <- function(sf_obj) {
+  st_join(sf_obj, nivel8_all |> select(codigo_n4:codigo_n8), join = st_within)
+}
+
+# Safe column name from category string
+safe_cat <- function(x) {
+  x |>
+    tolower() |>
+    str_replace_all("[^a-z0-9]+", "_") |>
+    str_replace_all("^_|_$", "")
+}
+
+# Formatted number for UI display
+fmt_n <- function(x, digits = 0) {
+  if (all(is.na(x))) return("—")
+  format(round(sum(x, na.rm = TRUE), digits), big.mark = ",", scientific = FALSE)
+}
+
+fmt_avg <- function(x, digits = 1) {
+  if (all(is.na(x))) return("—")
+  format(round(mean(x, na.rm = TRUE), digits), big.mark = ",", scientific = FALSE)
+}
+
+# DuckDB connection helper with spatial + httpfs extensions loaded.
+# Uses duckdb(dbdir = path) so the driver object is created with the correct path
+# upfront (avoids a class of GC-related "Invalid connection" errors).
+# Tries LOAD first (no network); falls back to INSTALL + LOAD on version mismatch.
+ddb_connect <- function(path = ":memory:", remote = FALSE, read_only = FALSE) {
+  drv <- duckdb::duckdb(dbdir = path, read_only = read_only)
+  # Keep driver in globalenv so R's GC never collects it before the connection
+  # is closed. parent.frame() is unreliable when called through source()/eval()
+  # chains (returns a temporary env that is GC'd immediately).
+  assign(".ddb_drv", drv, envir = globalenv())
+  con <- DBI::dbConnect(drv)
+  tryCatch(
+    DBI::dbExecute(con, "LOAD spatial"),
+    error = function(e) {
+      DBI::dbExecute(con, "INSTALL spatial")
+      DBI::dbExecute(con, "LOAD spatial")
+    }
+  )
+  if (remote) {
+    tryCatch(
+      DBI::dbExecute(con, "LOAD httpfs"),
+      error = function(e) {
+        DBI::dbExecute(con, "INSTALL httpfs")
+        DBI::dbExecute(con, "LOAD httpfs")
+      }
+    )
+  }
+  con
+}
+
+# Convert sf geometry column to WKB blob for DuckDB insert
+sf_to_wkb_df <- function(sf_obj) {
+  wkt <- sf::st_as_text(sf::st_geometry(sf_obj))
+  df  <- sf::st_drop_geometry(sf_obj)
+  df$geom_wkt <- wkt
+  df
+}
+
+# Read WKB blob column back to sf
+# DuckDB returns ST_AsWKB as a list of raw vectors — st_as_sfc accepts it directly
+wkb_to_sf <- function(df, geom_col = "geom", crs = 4326) {
+  geoms <- sf::st_as_sfc(df[[geom_col]], crs = crs)
+  df[[geom_col]] <- NULL
+  sf::st_as_sf(df, geometry = geoms)
+}
+
+# Stat display helper for Shiny summary panel
+stat_row <- function(label, value) {
+  htmltools::tags$div(
+    class = "d-flex justify-content-between small py-1 border-bottom border-secondary",
+    htmltools::tags$span(class = "text-muted", label),
+    htmltools::tags$span(class = "fw-semibold", value)
+  )
+}