docs(ST-1139): mobile-shell sync in functional spec + architectuur (T-334/T-335/T-336)

- docs/specs/functional.md: nieuwe sectie "Mobile shell" met routestructuur,
  acceptance-criteria, bekende iOS-limiet; desktop-first-clausule herzien naar
  "desktop-first hoofdpad + mobile-shell voor /m/*"
- docs/architecture/project-structure.md: route-tree onder app/(mobile)/,
  components/mobile/ in tree, vier nieuwe sleutelbeslissingen (route group,
  UA-redirect, gedeelde dialog-classes, gescheiden cookie-key)
- docs/INDEX.md regenerated, doc-links 86/86 valid
- T-336 E2E: lint/test/build groen; manuele DevTools/PWA-checks gelogd

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/specs/functional.md

@@ -27,7 +27,7 @@ v1 is een desktop-first fullstack webapplicatie waarmee een solo developer of kl
 - Integratie met externe tools (GitHub Issues, Linear, Jira) — v2
 - Notificaties en reminders — v2
 - Native mobiele app — web-first; een toekomstige mobiele variant richt zich uitsluitend op taken afvinken
-- Responsive layout voor schermen smaller dan 1024px — desktop-first in v1
+- Responsive layout voor schermen smaller dan 1024px — desktop-first hoofdpad. Voor telefoons (UA met `Mobi`) is er een aparte mobile-shell onder `/m/*` met drie schermen — zie sectie *Mobile shell* hieronder.
 
 ---
 
@@ -534,10 +534,44 @@ De app is deployable op Vercel + Neon PostgreSQL en lokaal draaibaar met een Neo
 /todos                              (todo-lijst)
 /settings                           (profiel, account, product backlogs, rollen, API-tokens)
 /settings/tokens                    (API-tokenbeheer)
+
+# Mobile-shell (telefoon-UA)
+/m/settings                         (account + product-selector + QR-instructie + logout)
+/m/products/:id                     (Product Backlog — tab-mode op <1024px)
+/m/products/:id/solo                (Solo Paneel — 3-koloms-kanban met horizontal scroll)
+/m/pair                             (QR-pairing bevestiging — verhuisd uit (app)/ naar (mobile)/)
 ```
 
 ---
 
+## Mobile shell
+
+**Prioriteit:** v1 — voor on-the-go gebruik (PBI-11)
+**Persona:** Lars onderweg / tussendoor
+
+**Omschrijving:**
+Telefoon-gebruikers (UA met `Mobi`-substring) krijgen een minimale mobile-shell met drie schermen onder `/m/*`. Tablets (iPad, Android-tablet zonder `Mobi`) en desktop blijven het bestaande `/dashboard`-pad volgen. De mobile-shell hergebruikt zoveel mogelijk content-componenten van de desktop-app (PbiList, StoryPanel, TaskPanel, SoloBoard, alle entity-dialogen) — er is geen aparte mobile-implementatie van de business-logica.
+
+**Architectuur in één regel:** eigen route group `app/(mobile)/` met eigen `layout.tsx` (zonder NavBar/StatusBar/MinWidthBanner) — een nested layout in `(app)/m/*` zou de NavBar erven. Auth via gedeelde `lib/auth-guard.ts` `requireSession()`. Zie [`docs/architecture/project-structure.md`](../architecture/project-structure.md) voor de volledige architectuur.
+
+**Acceptatiecriteria:**
+- [ ] Phone-UA bij login → `/m/products/[active]/solo` (zonder actief product → `/m/settings`)
+- [ ] Tablet-UA en desktop-UA blijven naar `/dashboard`
+- [ ] `/m/*` rendert geen NavBar, AppIcon, MinWidthBanner of StatusBar — alleen tab-bar onderaan
+- [ ] Portrait-modus toont rotate-overlay; landscape verbergt overlay
+- [ ] PWA-manifest verzoekt `landscape`-orientatie (iOS Safari kan dit niet 100% afdwingen — CSS-overlay als fallback)
+- [ ] Tab-bar onderaan: Backlog (ListTree), Solo (Activity), Settings — alleen iconen, geen labels, tap-target ≥44×44px
+- [ ] Backlog op `<1024px` rendert in tab-mode (tabs: PBI's | Stories | Taken) met click-cascade auto-switch
+- [ ] Entity-dialogen (PBI, Story, Task, Task-detail) renderen full-screen op `<640px` via gedeelde `entityDialogContentClasses`
+- [ ] Solo-paneel behoudt 3-koloms-kanban met horizontal scroll (geen 1-koloms-mode)
+- [ ] Settings: account-info read-only, product-selector activeert + redirect, QR-instructie naar desktop, logout met bevestiging
+- [ ] `/m/pair` (QR-pairing-bevestiging) blijft werken — alleen filesystem-locatie verhuisd, URL onveranderd
+- [ ] Demo-user op mobile: read-only werkt; logout staat toe
+
+**Bekende limiet:** iOS Safari respecteert `manifest.orientation` niet altijd in PWA-modus — de CSS-overlay (`<LandscapeGuard>`) is de feitelijke afdwinging.
+
+---
+
 ## Datamodel (schets)
 
 | Entiteit | Sleutelvelden | Relaties / opmerkingen |