refactor: update legend panel title for better clarity and enhance responsive styling

Author: noamjgal

css/styles.css

@@ -247,6 +247,15 @@ body {
     line-height: 1.3;
 }
 
+/* Legend title variants - short for mobile, full for desktop */
+.legend-title-short {
+    display: inline;
+}
+
+.legend-title-full {
+    display: none;
+}
+
 .panel-content {
     padding: 0 var(--space-lg) var(--space-lg);
 }
@@ -1887,7 +1896,7 @@ body.modal-open {
     }
 
     .legend-controls-section {
-        padding: 2px 4px 4px;
+        display: none;
     }
 
     .legend-controls {
@@ -2283,6 +2292,19 @@ body.modal-open {
     .panel-header {
         cursor: default;
     }
+    
+    /* Legend panel: hide number and show full title on desktop */
+    .legend-number {
+        display: none !important;
+    }
+    
+    .legend-title-short {
+        display: none;
+    }
+    
+    .legend-title-full {
+        display: inline;
+    }
 }
 
 /* Large screens - ensure max widths */

index.html

@@ -208,9 +208,9 @@ <h3>Add New Shelters</h3>
         <!-- Panel 4: Legend & Layer Controls -->
         <div class="control-panel map-legend-panel" id="mapLegendPanel">
           <div class="panel-header legend-panel-header">
-            <div class="panel-number">4</div>
+            <div class="panel-number legend-number">4</div>
             <div class="panel-title">
-              <h3>Legend</h3>
+              <h3><span class="legend-title-short">Legend</span><span class="legend-title-full">Legend & Layer Controls</span></h3>
             </div>
           </div>
           <div class="panel-content">