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/components/navigation-rail.blade.php

@@ -1,4 +1,4 @@
-{{-- M3 Expressive's navigation rail: destinations down the start edge of a medium or wider
+{{-- M3 Expressive's navigation rail: destinations down the start edge of a `medium` or wider
      window, collapsed (96px, icon over label) or expanded (icon beside label in a full-width pill).
 
          <div class="flex min-h-dvh">
@@ -29,8 +29,12 @@
      - `modal` — collapsed in the layout; the menu button (or `$store.rail.show()` from anywhere)
        opens it expanded over a scrim, holding focus until Escape, the scrim, the menu button or
        leaving the page closes it (Compose's ModalWideNavigationRail).
-     - `adaptive` — what `<x-app-shell>` uses: below `sm` nothing until `$store.rail.show()` slides
-       it in as a modal; from `sm` collapsed, opening as a modal; from `lg` collapsible.
+     - `adaptive` — what `<x-app-shell>` uses, one rail per M3 window size class: on a compact
+       window (below `medium`, 600px) nothing until `$store.rail.show()` slides it in as a modal;
+       at `medium` (600–839) collapsed in the layout, opening as a modal; at `expanded` (840–1199)
+       a standard rail, collapsed until its menu button expands it in place; from `large` (1200)
+       the same standard rail, expanded to begin with. A visitor who has used the menu button keeps
+       that choice in both standard bands.
 
      Slots: `brand` beside the menu button, only while expanded; `header` under it — a FAB, drawn
      as an extended FAB when expanded (`rail-collapsed:` below); the destinations in the default