Improve help modal navigation with keyboard and search support

Refactor help navigation to support keyboard arrow keys, content pane
focus
toggling, and enhanced search filtering that hides non-matching
sections.
Improve mobile toggle behavior and accessibility with proper focus
management.

frontend/style.css

@@ -2287,6 +2287,9 @@ select {
 .help-nav-link.hidden {
   display: none;
 }
+.help-section.help-hidden {
+  display: none;
+}
 
 .help-content {
   flex: 1;
@@ -6410,29 +6413,49 @@ body.popup-mode .content-area {
     border-right: none;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;
+    transition: max-height 0.25s ease;
+    overflow: hidden;
   }
   .help-nav-header {
-    padding: 12px 16px 8px;
+    padding: 10px 16px 6px;
+    cursor: pointer;
   }
   .help-nav-toggle {
-    display: inline-flex;  /* visible on mobile */
+    display: inline-flex;
+    transition: transform 0.2s;
+  }
+  .help-nav:not(.collapsed) .help-nav-toggle {
+    transform: rotate(180deg);
   }
   .help-nav.collapsed .help-nav-search-wrap,
   .help-nav.collapsed .help-nav-list {
     display: none;
   }
+  .help-nav-search-wrap {
+    padding: 0 12px 6px;
+  }
   .help-nav-list {
-    max-height: 40vh;
+    max-height: 45vh;
     flex: none;
-    padding-bottom: 12px;
+    padding-bottom: 14px;
   }
   .help-content {
-    padding: 16px 12px 40px;
+    padding: 14px 12px 40px;
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .help-content:focus {
+    outline: none;
   }
   .help-hero {
     flex-direction: column;
     gap: 16px;
   }
   .help-hero-visual { display: none; }
-  .help-section { padding: 24px 0 20px; }
+  .help-section { padding: 20px 0 16px; }
+  .help-nav-link {
+    padding: 10px 12px;
+    font-size: 0.88rem;
+  }
 }