docs: mobile responsiveness design spec

Captures the decisions from the brainstorm: phones-only (≤480px),
all views in scope, right-side hamburger drawer, per-file @media
blocks, hide secondary indicator columns. User opted to iterate on
the coded product rather than running through writing-plans; spec
exists so the rationale survives the session.

docs/superpowers/specs/2026-05-28-mobile-responsiveness-design.md

@@ -0,0 +1,88 @@
+# Mobile responsiveness — design
+
+**Status:** approved 2026-05-28 (user opted to skip the implementation-plan
+ceremony and iterate on the coded product instead).
+**Scope:** all views, single ≤480px breakpoint, incremental media-query approach.
+
+## Decisions captured
+
+1. **Target device:** phones only. Single `@media (max-width: 480px)` breakpoint.
+   Tablets and small laptops keep the existing desktop layout.
+2. **Scope:** every template (auth, public, app, dashboard, log, news, settings).
+3. **Mobile topbar pattern:** hamburger drawer, **side-slide from the right**.
+4. **Indicator table:** hide secondary columns on phones (`ccy`, `1y`, `anchor`,
+   `as_of`); keep symbol, price, 1d, 1m.
+5. **CSS organisation:** per-file `@media` block at the bottom of each CSS file —
+   extends the pattern already in `layout.css`, `log-chat.css`, `news.css`,
+   `portfolio.css`, `public.css`. No central `mobile.css`.
+
+## Architecture
+
+```
+tokens.css     — no mobile rules
+layout.css     — drawer geometry + topbar mobile layout
+panels.css     — header padding tightens
+dashboard.css  — group tabs scroll, indicator table column-hiding
+portfolio.css  — overall grid 2-col, composer textarea full-width, action wrap
+log-chat.css   — body padding, bubble width
+auth.css       — card padding
+settings.css   — form rows stack
+news.css       — pill wrap, source under headline
+public.css     — tighten existing 520/560 rules, hero typography clamp
+```
+
+Two small additions to `base.html`:
+- A hamburger button in `.app-header` (hidden on desktop via `display: none`,
+  shown at ≤480px).
+- ~20 lines of vanilla JS to toggle `body.drawer-open` plus a backdrop element.
+  Tap-backdrop, ESC, and swipe-right-on-drawer all close.
+
+## Hamburger drawer (right-side)
+
+- `position: fixed; top: 0; right: 0; height: 100vh; width: min(82vw, 320px)`
+- Transform animation: `translateX(100%) → translateX(0)`, `180ms ease-out`
+- Backdrop: `rgba(0,0,0,0.4)`, fades in over `120ms`
+- Existing nav + `.header-right` widgets get wrapped in `.mobile-drawer` which
+  is `display: contents` on desktop (zero layout effect) and the fixed slide-out
+  panel on mobile.
+- The existing `.user-menu` dropdown chip hides on mobile; its links surface
+  flat inside the drawer.
+
+## Per-view rules
+
+**Dashboard.** Group-tabs `overflow-x: auto`, no-wrap. Indicator table hides
+`Ccy / 1y / anchor / as_of` columns. Aggregate-read summary header tightens.
+
+**Portfolio.** `.pf-overall__grid` collapses to 2 columns. Composer textarea
+becomes full-width. `.pf-actions` buttons wrap to two rows instead of squishing.
+
+**Log + chat.** Body padding `16px → 10px`. Chat bubbles `max-width: 100%`,
+user bubble loses right margin so it reaches the screen edge.
+
+**News.** Tag pills flex-wrap. Source + timestamp move under headline.
+Shift-click hint hides (touch users get long-press equivalent).
+
+**Settings.** Form rows stack — label above input. Two-column import picker
+becomes single column. Digest preferences keep their layout.
+
+**Auth.** Card padding `28px 26px → 20px 18px`. Width already fluid.
+
+**Public pages.** Audit existing 520/560 breakpoints; tighten hero typography
+with `clamp()` so it scales down for small phones.
+
+## Testing
+
+- No Python tests affected — this is pure CSS + a single template tweak.
+  Existing 336-pass suite stays green.
+- Manual verification on the user's phone post-deploy. (User cannot reach
+  localhost on the dev host, so visual companion was abandoned mid-brainstorm
+  in favour of ASCII previews; same constraint means no local browser smoke
+  test from the assistant side either — user iterates on the deployed site.)
+
+## Out of scope
+
+- Tablet / small-laptop breakpoints. Single ≤480 only.
+- Touch gestures beyond drawer swipe-right-to-close.
+- Mobile-specific reordering of dashboard panels (existing collapse order
+  is preserved).
+- Visual companion server work (host unreachable from user's browser).