Give the app shell one shape per M3 window size class

Plan step 17, on N-06, N-07 and C-07. The shell now changes at 600, 840 and
1200 and nowhere else: a compact window keeps the navigation bar and the modal
rail; `medium` (600-839) gets the collapsed rail in the layout and no bar;
`expanded` (840-1199) gets a standard rail, collapsed, whose menu button
expands it in place rather than over a scrim; `large` and above start it
expanded, which is what M3 prefers once there is room.

`data-rail` alone could not say "collapsed at expanded, expanded at large",
since it carries `rail.default` for a visitor who never chose. <x-theme-script>
now also writes `data-rail-auto` while nothing is stored, the `rail-collapsed:`
variant reads it in the 840-1199 band, and `$store.rail.auto` mirrors it for
Alpine; the first press of the menu button drops it, so a remembered choice
still wins in both bands. `rail.default` and the rest of `$store.rail` are
unchanged, and the attribute rides through `wire:navigate` with the others.

`--material-margin` carries M3's window margin on the shell -- 16px compact,
24px from `medium` -- and the content region is padded with it, so the showcase
pages drop their own gutters.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/section.blade.php

@@ -11,7 +11,7 @@
 @endphp
 
 @section('content')
-    <div class="mx-auto w-full max-w-6xl px-4 pt-4 pb-16 sm:px-6">
+    <div class="mx-auto w-full max-w-6xl pt-4 pb-16">
         <header class="mb-6 space-y-1">
             <p class="type-label-lg text-on-surface-variant">{{ $sections[$section]['group'] }}</p>
             <h1 class="type-headline-lg">{{ $sections[$section]['title'] }}</h1>