Help: mobile slide-over TOC with overlay, search content highlighting

frontend/style.css

@@ -2178,6 +2178,24 @@ select {
 }
 
 /* Help Navigation Menu */
+.help-hamburger {
+  display: none;
+  width: 36px; height: 36px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+.help-hamburger:hover { color: var(--accent); border-color: var(--accent); }
+.help-nav-overlay {
+  display: none;
+}
 .help-nav {
   width: 260px;
   min-width: 260px;
@@ -2209,7 +2227,7 @@ select {
   letter-spacing: 0.05em;
   color: var(--text-muted);
 }
-.help-nav-toggle {
+.help-nav-close {
   display: none;
   width: 32px; height: 32px;
   padding: 0;
@@ -2221,7 +2239,7 @@ select {
   align-items: center;
   justify-content: center;
 }
-.help-nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
+.help-nav-close:hover { color: var(--accent); border-color: var(--accent); }
 .help-nav-search-wrap {
   padding: 0 12px 8px;
   flex-shrink: 0;
@@ -2290,6 +2308,12 @@ select {
 .help-section.help-hidden {
   display: none;
 }
+.help-search-highlight {
+  background: rgba(250, 204, 21, 0.35);
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}
 
 .help-content {
   flex: 1;
@@ -6393,61 +6417,71 @@ body.popup-mode .content-area {
 
 /* ── Help Modal: Mobile responsive ── */
 @media (max-width: 768px) {
-  .help-container { max-width: 100%; height: 100vh; }
-  .help-container .editor-container {
+  .help-container {
     max-width: 100%;
+    height: 100vh;
     max-height: 100vh;
     border-radius: 0;
   }
+
+  /* Hamburger visible on mobile */
+  .help-hamburger {
+    display: inline-flex;
+  }
+
+  /* TOC: slide-over from left */
+  .help-nav-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 1100;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+  }
+  .help-nav-overlay.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .help-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    min-width: 280px;
+    max-height: 100vh;
+    height: 100vh;
+    z-index: 1200;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    border-right: 1px solid var(--border);
+    box-shadow: 2px 0 16px rgba(0,0,0,0.3);
+    flex-shrink: 0;
+  }
+  .help-nav.open {
+    transform: translateX(0);
+  }
+
+  .help-nav-close {
+    display: inline-flex;
+  }
+
+  /* Content full-width */
   .help-body {
     flex-direction: column;
     overflow-y: auto;
-  }
-  .help-nav {
-    width: 100%;
-    min-width: 100%;
-    max-height: none;
-    height: auto;
-    position: relative;
-    top: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    transition: max-height 0.25s ease;
-    overflow: hidden;
-  }
-  .help-nav-header {
-    padding: 10px 16px 6px;
-    cursor: pointer;
-  }
-  .help-nav-toggle {
-    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: 45vh;
-    flex: none;
-    padding-bottom: 14px;
+    padding: 0;
   }
   .help-content {
-    padding: 14px 12px 40px;
+    padding: 14px 16px 40px;
     flex: 1;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
-  .help-content:focus {
-    outline: none;
-  }
+  .help-content:focus { outline: none; }
   .help-hero {
     flex-direction: column;
     gap: 16px;