feat(header): hamburger dropdown nav on mobile (owner permission)

TODO.md L9 (owner permission 2026-08-27, roadmap A5): "The navbar on
mobile is way too squished. Make it a hamburger dropdown menu with a
nice animation." At <=640px the nav links leave the bar — a 44px
#nav-toggle opens #app-nav as an animated (180ms slide+fade)
edge-to-edge dropdown with comfortable rows and the auth visibility
contract intact inside the menu; at >640px the bar is byte-identical
to pre-phase-46 (hamburger absent, inline pills as before).

- frontend/*.html (all six pages): the shared bar gains the
  #nav-toggle button (type=button, aria-expanded=false,
  aria-controls="app-nav", aria-label="Menu", aria-hidden 3-line
  SVG icon) immediately before the nav, and the nav gains
  id="app-nav" — one <nav>, no duplicated links, so the whoami reveal
  works inside the menu unchanged (phase-34 same-bar contract intact).
- frontend/assets/styles.css: .nav-toggle is display:none outside media
  queries (desktop untouched); the <=640px block adds the 44px toggle
  (+hover in the .steering-toggle:hover family, sized 20px icon), turns
  .app-nav into the dropdown (absolute top:100% edge-to-edge under the
  sticky header, surface + hairline + --shadow-lg, z-index 21 =
  header+1, closed state invisible + non-interactive with the 180ms
  opacity/transform/visibility-delayed pair, .is-open the only
  opener), and comfortable 1rem/0.75rem menu rows — superseding the
  phase-34/35 pill-squeeze rules for .nav-link/.app-nav (the 900px
  tablet block, action pills, and 58px bar height untouched). The
  reduced-motion block stills BOTH the closed and .is-open states: the
  .is-open rule (0,2,0) out-specifies a bare .app-nav (0,1,0), so the
  override must name both — verified live in Chromium (task 03).
- frontend/assets/header.js: ONE module-owned binding (import-time,
  null-safe like the sign-out binding): click toggles .is-open +
  aria-expanded in sync, a delegated nav-link click closes, Esc closes
  and refocuses the toggle, and matchMedia("(max-width: 640px)")
  change drops the state on resize back to desktop. The binding
  touches only the container — ship-hidden whoami links stay hidden.
- tests/unit/test_hamburger_nav.py (new): the markup/CSS/JS contract
  pins (six identical toggles in the shared row, desktop byte-
  identical, dropdown + .is-open + 180ms + reduced-motion rules, the
  superseded squeeze rules gone, the one-binding behavior).
- tests/e2e/test_shared_header.py: assert_shared_bar gains mobile=True
  (at <=640px the bar shows the hamburger + the closed nav; the
  per-role menu contents are pinned by the story suite).
- tests/e2e/test_mobile_hamburger_nav.py (new, story suite, 375x812):
  toggle is a visible >=44px target, menu closed (opacity 0 /
  visibility hidden), no horizontal overflow; anonymous menu shows
  exactly "Chat" (admin-only links stay hidden inside); admin menu
  shows all four links (whoami reveal inside the menu); a link click
  navigates + the arrival page ships closed; Esc closes and refocuses
  the toggle (outside click does NOT close — accepted: the locked
  close set is Esc + link + resize, no backdrop); the 180ms
  opacity/transform pair is live and reducedMotion:reduce stills both
  states with open/close still working; 1280x800 regression — toggle
  display:none, all four inline links inside the header band.

Gates: unit+integration 773 passed; app/ coverage TOTAL 99%
(unchanged — frontend-only phase); story E2E 7 passed in isolation
(mock LLM, DB up); regression suites test_nav_consistency (6) /
test_header_consistency (3) / test_shared_header (6) /
test_responsive_polish (7) / test_tuning_nav_link (4) all pass in
isolation; ruff check + pyright clean. A11 honored: no CDN, no new
assets.

Also records the 46_mobile_hamburger_nav todo/ -> complete/ move.

frontend/assets/header.js

@@ -21,6 +21,18 @@
  *     contract on the SAME cached whoami (one fetch, no extra request);
  *   • the sign-out click binding (POST /api/logout → reload) — moved
  *     here from app.js so there is exactly one implementation;
+ *   • the mobile hamburger binding (phase 46, owner permission
+ *     2026-08-27, TODO.md L9) — at ≤640px (CSS hides the button
+ *     elsewhere) the #nav-toggle button opens the nav as an animated
+ *     dropdown (#app-nav .is-open — the 180ms slide+fade state from
+ *     task 01's CSS): a click toggles it with aria-expanded kept in
+ *     sync, a nav link click shuts it (the navigation happens anyway),
+ *     Esc shuts it and returns focus to the toggle, and resizing back
+ *     to >640px drops the open state (matchMedia change) so
+ *     aria-expanded stays honest. One binding for all six pages; a
+ *     page without either element is a no-op. The binding toggles
+ *     ONLY the container — the nav links keep their ship-hidden
+ *     whoami contract (hidden links stay hidden inside the menu);
  *   • the steering-notes controls (phase 15, moved here from app.js in
  *     phase 34) — the #steering-toggle open/close + the #steering-panel
  *     list (newest-first, textContent-rendered, per-note delete, count
@@ -181,6 +193,46 @@ if (signOutBtn) {
   });
 }
 
+/* ---------- mobile hamburger (phase 46; module-owned) ----------
+ * ≤640px only (CSS hides the button elsewhere): #nav-toggle opens the
+ * nav as a dropdown (#app-nav .is-open — the animated state, task 01
+ * CSS). One binding for all six pages; a page without either element
+ * is a no-op, like the rest of this module. The nav LINKS keep their
+ * ship-hidden whoami contract (hidden links stay hidden inside the
+ * menu) — this binding only toggles the container. */
+const navToggle = document.querySelector("#nav-toggle");
+const appNav = document.querySelector("#app-nav");
+
+function setNavMenu(open) {
+  if (!appNav || !navToggle) return;
+  appNav.classList.toggle("is-open", open);
+  navToggle.setAttribute("aria-expanded", open ? "true" : "false");
+}
+
+if (navToggle && appNav) {
+  navToggle.addEventListener("click", () =>
+    setNavMenu(!appNav.classList.contains("is-open")));
+  // A link click navigates (or closes same-page) — shut the menu.
+  appNav.addEventListener("click", (e) => {
+    if (e.target.closest("a")) setNavMenu(false);
+  });
+  // Esc closes while open (document-level; the sync failure modal's
+  // Esc acts only while IT is open — the two never fight for a key).
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && appNav.classList.contains("is-open")) {
+      setNavMenu(false);
+      navToggle.focus(); // focus returns to the opener
+    }
+  });
+  // Resize back to desktop: the inline nav reappears — no stale open
+  // state (the .is-open class is scoped by the ≤640px CSS anyway, but
+  // dropping it keeps aria-expanded honest).
+  const mq = window.matchMedia("(max-width: 640px)");
+  const onMqChange = () => { if (!mq.matches) setNavMenu(false); };
+  if (mq.addEventListener) mq.addEventListener("change", onMqChange);
+  else mq.addListener(onMqChange); // older engines, defensive
+}
+
 /* ---------- steering notes (phase 15; module-owned from phase 34) ----------
  *
  * The owner's tuning notes steer every future answer: they live in