Ask breakpoints.js, not Tailwind's screens, for a window class

Plan step 16. `navigation.js` takes its standard-rail threshold from
`from('expanded')` (840px) instead of the 64rem it had, and `navigation.css`'s
three 64rem queries follow, so the whole expanded class gets the in-layout
collapsible rail M3 asks for rather than one that opens over a scrim (N-06);
its two 40rem queries become 37.5rem, the compact/medium boundary the bar's own
container query already used (N-07). `search.js` and `datepicker.js` swap their
39.99rem media strings for `upTo('medium')`, so the full-screen search view and
the modal date picker end at 600px, not 640px.

The time picker's landscape layout stops keying on width at all: M3 swaps it on
orientation and viewport height, so it is now landscape plus a window too short
for the upright dial (35rem, the dialog's own height), and the two dial-shrink
rules key on height alone.

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

resources/js/navigation.js

@@ -13,7 +13,7 @@
  * `materialNavigationRail` is one rail's view of the store for its `mode` — see
  * resources/views/components/navigation-rail.blade.php.
  */
-const WIDE = '(min-width: 64rem)'
+import { from } from './breakpoints.js'
 
 /*
  * The active indicator grows out of its centre when a page arrives through wire:navigate. The
@@ -86,7 +86,7 @@ document.addEventListener('alpine:init', () => {
     document.addEventListener('livewire:navigating', () => window.Alpine.store('rail').hide())
 
     window.Alpine.data('materialNavigationRail', (mode) => ({
-        wide: mode === 'adaptive' ? window.matchMedia(WIDE).matches : false,
+        wide: mode === 'adaptive' ? from('expanded').matches : false,
         query: null,
         onWidth: null,
 
@@ -95,9 +95,10 @@ document.addEventListener('alpine:init', () => {
                 return
             }
 
-            // From lg the adaptive rail is a standard, collapsible rail: a modal left open while
-            // the window widens is shut, or its focus trap would hold a page that has no scrim.
-            this.query = window.matchMedia(WIDE)
+            // From `expanded` (840px) the adaptive rail is a standard, collapsible rail — what M3
+            // asks for at expanded and above. A modal left open while the window widens is shut,
+            // or its focus trap would hold a page that has no scrim.
+            this.query = from('expanded')
             this.onWidth = (event) => {
                 this.wide = event.matches