feat(fase-9): cap reading column at max-w-2xl on desktop detail routes

Closes 9.2 (desktop reading width).

- (app)/+layout.svelte wraps detail routes (/lists/[id], /tasks/[id],
  /notes/[id]) in a max-w-2xl mx-auto container at the md breakpoint
  and up. Mobile (<md) keeps the existing full-width layout — the
  wrapper only kicks in via md:max-w-2xl. The shopping session
  (/lists/[id]/session) is explicitly excluded so the immersive mode
  still occupies the whole viewport.
- A new readingRoutePattern lives alongside the existing
  detailRoutePattern so the two concerns stay independently testable
  (detail = hide global top bar; reading = cap width).
- RW-01..RW-03 in tests/e2e/reading-width.test.ts measure the
  bounding box of [data-testid="reading-column"] under 1280px and
  390px viewports, and confirm the wrapper is absent from /session.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/web/src/routes/(app)/+layout.svelte

@@ -25,6 +25,13 @@
 	const detailRoutePattern = /^\/(lists\/[0-9a-f-]+(?:\/session)?|tasks\/[0-9a-f-]+|notes\/[0-9a-f-]+)\/?$/;
 	const isDetailRoute = $derived(detailRoutePattern.test($page.url.pathname));
 
+	// Fase 9.2: cap the reading column at max-w-2xl on >=md viewports for
+	// content detail routes (lists/[id], tasks/[id], notes/[id]). Mobile
+	// stays full-width. Shopping session is explicitly excluded — the mode
+	// is immersive and fills the viewport.
+	const readingRoutePattern = /^\/(lists\/[0-9a-f-]+|tasks\/[0-9a-f-]+|notes\/[0-9a-f-]+)\/?$/;
+	const isReadingRoute = $derived(readingRoutePattern.test($page.url.pathname));
+
 	// When auth resolves as unauthenticated, redirect to Keycloak.
 	// This runs after onAuthStateChange fires (authLoading = false), so there
 	// is no race with Supabase's async localStorage initialisation.
@@ -82,7 +89,17 @@
 		<MobileDrawer bind:open={drawerOpen} />
 
 		<main class="flex flex-1 flex-col overflow-hidden bg-background pb-16 md:pb-0">
-			{@render children()}
+			{#if isReadingRoute}
+				<!-- Fase 9.2: cap reading column at 42rem on >=md, full-width on mobile. -->
+				<div
+					data-testid="reading-column"
+					class="flex flex-1 flex-col overflow-hidden md:mx-auto md:w-full md:max-w-2xl"
+				>
+					{@render children()}
+				</div>
+			{:else}
+				{@render children()}
+			{/if}
 		</main>
 
 		<BottomTabBar />