fix(ui): neighborhood sidebar fix; polish control sidebar indicators; keep demographic overlays in neighborhood mode

- Fix neighborhood "All" and city average showing Unavailable
- Add View/Heatmap column headers, icon-only heatmap buttons, and heatmap deselect on re-click
- Hide View controls at neighborhood scale; animate control sidebar expand/collapse and button presses
- Keep Pop. Kids and SES Clusters toggles visible in neighborhood mode
- Remove explainer sidebar blinking dot and category row accent border

Author: Tuvudel

docs/control-sidebar.css

@@ -122,6 +122,7 @@
   border-radius: 8px;
   padding: 2px;
   gap: 2px;
+  transition: background 0.15s ease;
 }
 
 .radio-option {
@@ -133,28 +134,33 @@
   padding: 6px 10px;
   border-radius: 6px;
   border: 1px solid #e5e7eb;
-  transition: all 0.2s;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
   flex: 1;
   justify-content: center;
 }
 
+.radio-option:active {
+  transform: scale(0.96);
+}
+
 .segmented-options > label {
   border: none;
   background: transparent;
   border-radius: 6px;
   color: #6b7280;
   box-shadow: none;
-}
-
-.radio-option:hover {
-  border-color: #93c5fd;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
 }
 
 .segmented-options > label:hover {
   border-color: transparent;
   color: #374151;
 }
 
+.segmented-options > label:active {
+  transform: scale(0.96);
+}
+
 .radio-option input {
   display: none;
 }
@@ -185,11 +191,15 @@
   padding: 6px 10px;
   border-radius: 6px;
   border: 1px solid #e5e7eb;
-  transition: all 0.2s;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
   flex: 1;
   justify-content: center;
 }
 
+.radio-option:hover {
+  border-color: #93c5fd;
+}
+
 .segmented-options > label input {
   display: none;
 }
@@ -210,7 +220,11 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  transition: all 0.2s;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
+}
+
+.filter-btn:active {
+  transform: scale(0.98);
 }
 
 .filter-btn-label-wrap {
@@ -372,7 +386,7 @@
   background: transparent;
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
 }
 
 .radius-opt {
@@ -393,10 +407,9 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.hint {
-  font-size: var(--control-sidebar-font-micro);
-  color: #9ca3af;
-  margin-top: 6px;
+.radius-opt:active,
+.mode-opt:active {
+  transform: scale(0.96);
 }
 
 .mode-toggle {
@@ -405,6 +418,7 @@
   background: #f3f4f6;
   border-radius: 10px;
   padding: 3px;
+  transition: background 0.15s ease;
 }
 
 .mode-opt {
@@ -420,6 +434,17 @@
 
 .mode-opt svg {
   flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.mode-opt.active svg {
+  transform: scale(1.05);
+}
+
+.hint {
+  font-size: var(--control-sidebar-font-micro);
+  color: #9ca3af;
+  margin-top: 6px;
 }
 
 #indicators-section.is-basemap-only .indicator-row--aux {
@@ -432,6 +457,38 @@
   gap: 2px;
 }
 
+.indicator-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.indicator-subs {
+  display: grid;
+  grid-template-rows: 0fr;
+  width: 100%;
+  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.indicator-subs.is-open {
+  grid-template-rows: 1fr;
+}
+
+.indicator-subs-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 0;
+  overflow: hidden;
+  padding-top: 0;
+  transition: padding-top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.indicator-subs.is-open .indicator-subs-inner {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
 .indicator-row {
   display: flex;
   align-items: center;
@@ -441,6 +498,7 @@
   border-radius: 8px;
   background: #fff;
   border: 1px solid rgba(15, 23, 42, 0.06);
+  transition: background 0.15s ease;
 }
 
 .indicator-row--sub {
@@ -455,7 +513,10 @@
 
 .indicator-row--category {
   background: #fcfcfb;
-  border-left: 3px solid var(--indicator-accent, transparent);
+}
+
+.indicator-row--category:hover {
+  background: #f8fafc;
 }
 
 .indicator-row--category .indicator-label-wrap {
@@ -467,12 +528,17 @@
   padding: 4px;
   background: #f6f8fb;
   border-style: dashed;
+  transition: background 0.15s ease;
 }
 
 .indicator-row--aux .segmented-options {
   width: 100%;
 }
 
+.indicator-row--aux .segmented-options > label:hover {
+  color: #2563eb;
+}
+
 .indicator-label-wrap {
   display: flex;
   align-items: center;
@@ -518,32 +584,103 @@
   color: #6b7280;
   cursor: pointer;
   flex-shrink: 0;
-  transition: transform 0.15s ease, color 0.15s ease;
+  transition: transform 0.28s ease, color 0.15s ease, background 0.15s ease;
 }
 
 .indicator-collapse-btn:hover {
   color: #2563eb;
   background: rgba(37, 99, 235, 0.08);
 }
 
+.indicator-collapse-btn:active {
+  transform: scale(0.92);
+}
+
 .indicator-collapse-btn.is-expanded {
   transform: rotate(90deg);
 }
 
+.indicator-collapse-btn.is-expanded:active {
+  transform: rotate(90deg) scale(0.92);
+}
+
 .indicator-label {
   flex: 1;
   min-width: 0;
   color: #1f2937;
   line-height: 1.3;
 }
 
+.indicators-weighted-block {
+  margin-bottom: 4px;
+}
+
+.indicators-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px 6px;
+}
+
+.indicators-section-head .section-title {
+  margin-bottom: 0;
+}
+
 .indicator-actions {
   display: flex;
   align-items: center;
-  gap: 4px;
   flex-shrink: 0;
 }
 
+.indicator-actions-cols {
+  display: grid;
+  grid-template-columns: 34px 40px;
+  gap: 10px;
+  align-items: center;
+  justify-items: center;
+}
+
+.indicator-actions-cols--titles {
+  flex-shrink: 0;
+}
+
+.indicator-action-title {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: var(--control-sidebar-font-micro);
+  font-weight: 700;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+#indicators-section.is-neighborhood-scale .indicator-action-title--view,
+#indicators-section.is-neighborhood-scale .indicator-show-btn {
+  display: none;
+}
+
+#indicators-section.is-neighborhood-scale .indicator-actions-cols,
+#indicators-section.is-neighborhood-scale .indicator-actions-cols--titles {
+  grid-template-columns: 40px;
+}
+
+.indicator-show-btn,
+.indicator-heat-btn {
+  width: 100%;
+  justify-content: center;
+}
+
+.indicator-btn--icon-only {
+  padding: 4px 6px;
+  gap: 0;
+}
+
 .indicator-btn {
   display: inline-flex;
   align-items: center;
@@ -556,14 +693,18 @@
   font-size: var(--control-sidebar-font-label);
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
 }
 
 .indicator-btn:hover:not(:disabled) {
   border-color: #93c5fd;
   color: #2563eb;
 }
 
+.indicator-btn:active:not(:disabled) {
+  transform: scale(0.96);
+}
+
 .indicator-btn.is-active {
   border-color: #2563eb;
   background: #eff6ff;
@@ -883,3 +1024,20 @@
     -webkit-tap-highlight-color: transparent;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .indicator-subs,
+  .indicator-subs-inner,
+  .indicator-collapse-btn,
+  .indicator-btn,
+  .indicator-row,
+  .mode-opt,
+  .mode-opt svg,
+  .radius-opt,
+  .segmented-options > label,
+  .filter-btn,
+  .metric-options.segmented-options,
+  .radius-toggle {
+    transition: none;
+  }
+}

docs/index.html

@@ -101,7 +101,6 @@ <h2>Cities for Children</h2>
           <div class="score-explain-hero-metrics" id="score-explain-sidebar-hero"></div>
           <div class="score-explain-header-meta" id="score-explain-header-meta">
             <div class="score-explain-building-ctx" id="score-explain-building-ctx" hidden>
-              <span class="building-ctx-dot" aria-hidden="true"></span>
               <div class="building-ctx-text">
                 <span class="building-ctx-id" id="score-explain-building-ctx-id"></span>
                 <span class="building-ctx-coords" id="score-explain-building-ctx-coords" hidden></span>

docs/js/core/appState.js

@@ -48,7 +48,9 @@
       getLayerVisibility: function () { return copyLayerVisibility(layerVisibility); },
       setLayerVisibility: function (value) { layerVisibility = copyLayerVisibility(value); },
       getActiveHeatmapId: function () { return activeHeatmapId; },
-      setActiveHeatmapId: function (value) { activeHeatmapId = value || "u95.overall"; },
+      setActiveHeatmapId: function (value) {
+        activeHeatmapId = value == null || value === "" ? null : value;
+      },
 
       getSelectedAmenityTypes: function () { return new Set(selectedAmenityTypes); },
       setSelectedAmenityTypes: function (value) { selectedAmenityTypes = copySet(value); },

docs/js/map/mapRenderers.js

@@ -1401,6 +1401,14 @@
       var isWeighted = d.getScoreMode() === "weighted";
       var selectedAmenityTypes = d.getSelectedAmenityTypes();
       var hasExpandedSelection = selectedAmenityTypes.size > 0;
+      var activeMetric = getActiveMetricFromDeps(d);
+
+      if (isWeighted && !activeMetric) {
+        if (d.map.getLayer(d.buildingsFillLayerId)) {
+          d.map.setPaintProperty(d.buildingsFillLayerId, "fill-color", "#cbd5e1");
+        }
+        return;
+      }
 
       if (isWeighted || hasExpandedSelection) {
         var scores = d.collectBuildingScores();