mobile: hamburger drawer (right-side slide-out)

≤480px gets a hamburger button in the topbar and a fixed slide-out
panel from the right edge (width min(82vw, 320px)). The topbar keeps
only brand + tone toggle + hamburger visible; nav and the
header-right widgets (theme, lang, user menu, version meta) move
into the drawer.

Markup change: nav and .header-right are now wrapped in
.mobile-drawer, which is display:contents on desktop (no layout
effect) and a fixed translateX panel on mobile. The user-menu
dropdown chip hides on mobile and its links surface flat inside the
drawer.

JS: ~50 lines of vanilla. Tap hamburger / backdrop / ESC / swipe-
right-on-drawer all close. Clicking a nav link inside the drawer
closes it after the navigation kicks off so the panel doesn't linger
on the next page.

CSS: per-file @media block at the bottom of layout.css per the
agreed-upon organisation.

app/static/css/layout.css

@@ -51,7 +51,46 @@ a:hover { text-decoration: underline; }
 .app-header nav a.active { color: var(--text); }
 .app-header .meta { color: var(--muted); font-size: 11px; }
 
+/* On desktop the mobile-drawer wrapper has no layout effect — its
+ * children (nav, header-right) flow as if it weren't there. On mobile
+ * the @media block at the bottom converts it to a fixed slide-out. */
+.mobile-drawer { display: contents; }
+
 .app-header .header-right { display: flex; align-items: center; gap: 14px; }
+
+/* Hamburger button — only visible at ≤480px (rule in the mobile block).
+ * Three thin bars; uses the same border/muted treatment as the other
+ * header buttons so the visual rhythm matches. */
+.drawer-toggle {
+  display: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  padding: 6px 8px;
+  width: 36px;
+  height: 32px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+}
+.drawer-toggle:hover { border-color: var(--accent); }
+.drawer-toggle__bar {
+  display: block;
+  height: 2px;
+  background: var(--muted);
+  width: 100%;
+}
+.drawer-toggle:hover .drawer-toggle__bar { background: var(--accent); }
+
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 90;
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+}
+body.drawer-open .drawer-backdrop { opacity: 1; }
 .theme-toggle {
   background: transparent;
   border: 1px solid var(--border);
@@ -183,3 +222,140 @@ a:hover { text-decoration: underline; }
 ::-webkit-scrollbar-track { background: var(--bg); }
 ::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 0; }
 ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+
+
+/* --- Mobile (≤480px) -------------------------------------------------- */
+
+@media (max-width: 480px) {
+  /* Tighten the topbar so the brand, tone toggle and hamburger all fit
+     on a 360px phone. Drop the letter-spacing because at 11px tracking
+     eats horizontal space the brand cannot spare. */
+  .app-header {
+    padding: 8px 12px;
+    gap: 8px;
+    letter-spacing: 0.04em;
+  }
+  .app-header .brand {
+    font-size: 12px;
+    /* Shrink the leading glyph but don't remove it — keeps brand identity. */
+  }
+  .beta-chip { display: none; }
+
+  /* Show the hamburger; the rest of the header widgets collapse into
+     the drawer (the .mobile-drawer block below). */
+  .drawer-toggle { display: flex; margin-left: auto; }
+
+  /* Keep the tone toggle visible but trim it: just N / I letters so it
+     fits next to brand + hamburger. */
+  .tone-toggle--header {
+    font-size: 9.5px;
+  }
+  .tone-toggle--header button {
+    padding: 4px 7px;
+  }
+
+  /* The drawer wrapper: full-height slide-out from the right. The
+     content inside (nav + header-right) becomes a vertical stack
+     with comfortable touch targets. */
+  .mobile-drawer {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(82vw, 320px);
+    background: var(--surface);
+    border-left: 1px solid var(--border);
+    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.18);
+    transform: translateX(100%);
+    transition: transform 180ms ease-out;
+    z-index: 100;
+    overflow-y: auto;
+    padding: 56px 18px 24px;
+    text-transform: none;
+    letter-spacing: 0.02em;
+  }
+  body.drawer-open .mobile-drawer { transform: translateX(0); }
+
+  /* Vertical nav inside the drawer — links become big-tap rows, no
+     leading margin like the desktop horizontal nav. */
+  .mobile-drawer nav { display: flex; flex-direction: column; }
+  .mobile-drawer nav a {
+    margin-left: 0;
+    padding: 12px 4px;
+    border-bottom: 1px solid var(--border);
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .mobile-drawer nav a.active {
+    color: var(--accent);
+    border-left: 2px solid var(--accent);
+    padding-left: 10px;
+  }
+
+  /* header-right widgets vertically stacked inside the drawer. */
+  .mobile-drawer .header-right {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 14px;
+    margin-top: 20px;
+  }
+  .mobile-drawer .theme-toggle,
+  .mobile-drawer .lang-toggle {
+    width: 100%;
+    justify-content: center;
+  }
+  .mobile-drawer .lang-toggle { display: inline-flex; }
+  .mobile-drawer .lang-toggle button,
+  .mobile-drawer .theme-toggle { padding: 10px; font-size: 11.5px; }
+
+  /* The user-menu's dropdown becomes redundant inside the drawer —
+     surface its links flat as a list, and hide the chip button. */
+  .mobile-drawer .user-menu { width: 100%; }
+  .mobile-drawer .user-chip { display: none; }
+  .mobile-drawer .user-menu__panel {
+    display: block !important;        /* override the hidden attribute */
+    position: static;
+    border: 0;
+    padding: 0;
+    margin-top: 4px;
+  }
+  .mobile-drawer .user-menu__panel[hidden] { display: block !important; }
+  .mobile-drawer .user-menu__item {
+    display: block;
+    padding: 10px 4px;
+    border-bottom: 1px solid var(--border);
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .mobile-drawer .meta {
+    margin-top: auto;
+    padding-top: 18px;
+    text-align: center;
+    opacity: 0.7;
+  }
+
+  /* The drawer container itself sits above the topbar in z-stacking;
+     we still want the close button accessible while it's open, so push
+     a close target into the top-right corner of the drawer via a
+     repurposed pseudo-element. (Simpler than adding new markup.) */
+  .mobile-drawer::before {
+    content: "✕";
+    position: absolute;
+    top: 14px;
+    right: 18px;
+    font-size: 18px;
+    color: var(--muted);
+    cursor: pointer;
+    pointer-events: none;   /* tap handled by the backdrop / hamburger */
+  }
+
+  /* Body-level layout: tighten main padding too — saves another 16px
+     of horizontal real estate which the indicator table and chat
+     bubbles all benefit from. */
+  .app-main { padding: 10px 8px; gap: 10px; }
+}

app/templates/base.html

@@ -207,19 +207,35 @@
   <header class="app-header">
     <a href="/" class="brand" aria-label="Dashboard">{{ BRAND_NAME }}</a>
     {% if BETA_MODE %}<span class="beta-chip" title="Beta — feedback welcome at hello@read.markets">BETA</span>{% endif %}
-    <nav>
+
-      <a href="/"     class="{% if request.url.path == '/' %}active{% endif %}">Dashboard</a>
+    {# Tone toggle is the one widget we keep visible in the mobile
-      <a href="/news" class="{% if request.url.path == '/news' %}active{% endif %}">News</a>
+       header even when the drawer is closed — it directly affects the
-      <a href="/log"  class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
+       readability of the content right next to it. #}
-    </nav>
+    <div id="tone-toggle" class="tone-toggle tone-toggle--header" data-tone="INTERMEDIATE"
-    <div class="header-right">
-      <div id="tone-toggle" class="tone-toggle" data-tone="INTERMEDIATE"
          role="group" aria-label="Explanation level">
       <button type="button" data-value="NOVICE"
               onclick="cassandraSetTone('NOVICE')">Novice</button>
       <button type="button" data-value="INTERMEDIATE"
               onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
     </div>
+
+    {# Mobile hamburger — shown only at ≤480px via CSS. #}
+    <button type="button" id="drawer-toggle" class="drawer-toggle"
+            aria-label="Open menu" aria-controls="mobile-drawer" aria-expanded="false">
+      <span class="drawer-toggle__bar"></span>
+      <span class="drawer-toggle__bar"></span>
+      <span class="drawer-toggle__bar"></span>
+    </button>
+
+    {# Wrapper: display:contents on desktop (zero layout effect), fixed
+       slide-out panel on mobile. Holds nav + header-right widgets. #}
+    <div id="mobile-drawer" class="mobile-drawer">
+      <nav>
+        <a href="/"     class="{% if request.url.path == '/' %}active{% endif %}">Dashboard</a>
+        <a href="/news" class="{% if request.url.path == '/news' %}active{% endif %}">News</a>
+        <a href="/log"  class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
+      </nav>
+      <div class="header-right">
         <button class="theme-toggle" type="button" aria-label="Toggle theme"
                 onclick="cassandraToggleTheme()">
           <span class="theme-toggle__label"></span>
@@ -256,8 +272,13 @@
         {% endif %}
         <span class="meta">v0.1 · UTC</span>
       </div>
+    </div>
   </header>
 
+  {# Drawer backdrop. Hidden by default; CSS shows it when
+     body.drawer-open is set. Click closes the drawer. #}
+  <div id="drawer-backdrop" class="drawer-backdrop" hidden></div>
+
   <script>
     (function () {
       var btn = document.getElementById('user-menu-toggle');
@@ -278,6 +299,56 @@
     })();
   </script>
 
+  <script>
+    // Mobile drawer (hamburger → right-side slide-out panel). The CSS
+    // gates visibility of #drawer-toggle to ≤480px, so on desktop this
+    // wiring is harmless — the click handler is attached but nobody
+    // can fire it.
+    (function () {
+      var btn = document.getElementById('drawer-toggle');
+      var drawer = document.getElementById('mobile-drawer');
+      var backdrop = document.getElementById('drawer-backdrop');
+      if (!btn || !drawer || !backdrop) return;
+      function open() {
+        document.body.classList.add('drawer-open');
+        backdrop.hidden = false;
+        btn.setAttribute('aria-expanded', 'true');
+      }
+      function close() {
+        document.body.classList.remove('drawer-open');
+        backdrop.hidden = true;
+        btn.setAttribute('aria-expanded', 'false');
+      }
+      btn.addEventListener('click', function () {
+        if (document.body.classList.contains('drawer-open')) close(); else open();
+      });
+      backdrop.addEventListener('click', close);
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && document.body.classList.contains('drawer-open')) close();
+      });
+      // Swipe-right inside the drawer closes — small native feel.
+      // Tracks pointer down then up; if the user moves >40px right
+      // and stays within 60° of horizontal, treat as a close gesture.
+      var startX = null, startY = null;
+      drawer.addEventListener('pointerdown', function (e) {
+        if (!document.body.classList.contains('drawer-open')) return;
+        startX = e.clientX; startY = e.clientY;
+      });
+      drawer.addEventListener('pointerup', function (e) {
+        if (startX === null) return;
+        var dx = e.clientX - startX;
+        var dy = Math.abs(e.clientY - startY);
+        startX = startY = null;
+        if (dx > 40 && dy < dx * 0.6) close();
+      });
+      // If a nav link inside the drawer is clicked, close after the
+      // navigation kicks off so the panel doesn't linger on the next page.
+      drawer.addEventListener('click', function (e) {
+        if (e.target.tagName === 'A') close();
+      });
+    })();
+  </script>
+
   <main class="app-main">
     {% block main %}{% endblock %}
   </main>