feat: compact panel, map overlay stat+legend, 3x2 radio grid, section explore fix

- Wider panel (340px), compact spacing, no scrollbar
- Move stat card + color scale to floating map overlay (top-left)
- Radio buttons in 3x2 grid instead of vertical list
- Legend simplified to min/max only (removed confusing mid value)
- Fix section explore list: call updateExploreList after section data loads
- Remove property type filter section from panel

static/app.js

@@ -439,7 +439,11 @@ async function loadVisibleSections() {
             }
         }
         await Promise.all(loadPromises);
-        if (changed) updateSectionColors();
+        if (changed) {
+            updateSectionColors();
+            updateExploreList();
+            updateDynamicStat();
+        }
     } finally {
         _sectionLoadPending = false;
     }
@@ -561,7 +565,6 @@ function updateSectionColors() {
 
 function updateLegend(min, mid, max) {
     document.getElementById("legend-min").textContent = formatPrice(min);
-    document.getElementById("legend-mid").textContent = formatPrice(mid);
     document.getElementById("legend-max").textContent = formatPrice(max);
 }
 

static/index.html

@@ -19,16 +19,7 @@
                 <button class="theme-toggle" id="theme-toggle" title="Toggle light/dark mode">&#9790;</button>
             </div>
 
-            <!-- Dynamic average (updates per level/selection) -->
-            <div class="panel-section">
-                <div class="country-stat">
-                    <span id="stat-label" class="country-label">National Average</span>
-                    <span id="stat-price" class="country-price">&mdash;</span>
-                    <span id="stat-detail" class="stat-detail"></span>
-                </div>
-            </div>
-
-            <!-- Map level (radio buttons) -->
+            <!-- Map level (radio buttons 3x2 grid) -->
             <div class="panel-section">
                 <span class="section-label">Map Level</span>
                 <div class="level-radios">
@@ -70,7 +61,7 @@
                 </div>
             </div>
 
-            <!-- Explore: search + dynamic top 10 -->
+            <!-- Explore: search + dynamic top list -->
             <div class="panel-section explore-section">
                 <div class="explore-header">
                     <span class="section-label" id="explore-title">Top Cities</span>
@@ -91,14 +82,19 @@
 
         <!-- Map -->
         <div id="map">
-            <!-- Floating legend overlay -->
-            <div id="legend" class="map-legend">
-                <span class="legend-title">Color Scale</span>
-                <div class="legend-bar"></div>
-                <div class="legend-labels">
-                    <span id="legend-min">&mdash;</span>
-                    <span id="legend-mid">&mdash;</span>
-                    <span id="legend-max">&mdash;</span>
+            <!-- Floating overlay: stat + legend -->
+            <div id="map-overlay" class="map-overlay">
+                <div class="country-stat">
+                    <span id="stat-label" class="country-label">National Average</span>
+                    <span id="stat-price" class="country-price">&mdash;</span>
+                    <span id="stat-detail" class="stat-detail"></span>
+                </div>
+                <div id="legend">
+                    <div class="legend-bar"></div>
+                    <div class="legend-labels">
+                        <span id="legend-min">&mdash;</span>
+                        <span id="legend-max">&mdash;</span>
+                    </div>
                 </div>
             </div>
         </div>

static/style.css

@@ -30,15 +30,15 @@ body {
 
 /* ---- Left Panel ---- */
 #panel {
-    width: 300px;
-    min-width: 300px;
+    width: 340px;
+    min-width: 340px;
     height: 100vh;
     overflow-y: auto;
     background: white;
-    padding: 16px;
+    padding: 14px 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 8px;
     border-right: 1px solid #d2d2d7;
 }
 
@@ -92,19 +92,19 @@ body {
     gap: 4px;
 }
 
-/* ---- Level Radio Buttons ---- */
+/* ---- Level Radio Buttons (3x2 grid) ---- */
 .level-radios {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2px 6px;
 }
 
 .level-radio {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    border-radius: 8px;
+    gap: 6px;
+    padding: 5px 6px;
+    border-radius: 6px;
     cursor: pointer;
     font-size: 0.8rem;
     font-weight: 500;
@@ -395,8 +395,8 @@ body {
 }
 
 /* ---- Legend ---- */
-/* ---- Floating Map Legend ---- */
-.map-legend {
+/* ---- Floating Map Overlay (stat + legend) ---- */
+.map-overlay {
     position: absolute;
     top: 12px;
     left: 12px;
@@ -404,33 +404,51 @@ body {
     background: rgba(255, 255, 255, 0.92);
     backdrop-filter: blur(8px);
     border-radius: 10px;
-    padding: 10px 14px;
-    min-width: 180px;
+    padding: 12px 16px;
+    min-width: 200px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
-.legend-title {
-    font-size: 0.68rem;
-    font-weight: 700;
+.map-overlay .country-stat {
+    background: none;
+    border-radius: 0;
+    padding: 0;
+    text-align: left;
+}
+
+.map-overlay .country-label {
+    font-size: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: #86868b;
-    display: block;
-    margin-bottom: 6px;
+}
+
+.map-overlay .country-price {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: #1d1d1f;
+}
+
+.map-overlay .stat-detail {
+    font-size: 0.65rem;
+    color: #86868b;
 }
 
 .legend-bar {
-    height: 10px;
-    border-radius: 5px;
+    height: 8px;
+    border-radius: 4px;
     background: linear-gradient(to right, #028758, #FFF64E, #CC000A);
 }
 
 .legend-labels {
     display: flex;
     justify-content: space-between;
-    font-size: 0.68rem;
+    font-size: 0.65rem;
     color: #86868b;
-    margin-top: 3px;
+    margin-top: 2px;
 }
 
 /* ---- Country Stat ---- */
@@ -775,19 +793,19 @@ body.dark-mode .cb-item-price {
 
 /* Dark mode stat */
 body.dark-mode .country-stat {
-    background: #2a2a2a;
+    background: none;
 }
 
 body.dark-mode .country-label {
-    color: #888;
+    color: #999;
 }
 
-body.dark-mode #country-price {
+body.dark-mode .country-price {
     color: #ffffff;
 }
 
 body.dark-mode .stat-detail {
-    color: #888;
+    color: #999;
 }
 
 /* Dark mode price inputs */
@@ -818,18 +836,18 @@ body.dark-mode .range-container input[type="range"]::-moz-range-thumb {
     border-color: #2a2a2a;
 }
 
-/* Dark mode legend */
-body.dark-mode .map-legend {
+/* Dark mode map overlay */
+body.dark-mode .map-overlay {
     background: rgba(36, 36, 36, 0.92);
     box-shadow: 0 2px 8px rgba(0,0,0,0.4);
 }
 
-body.dark-mode .legend-title {
-    color: #888;
+body.dark-mode .map-overlay .country-price {
+    color: #ffffff;
 }
 
 body.dark-mode .legend-labels {
-    color: #888;
+    color: #999;
 }
 
 /* Dark mode count pills */