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/css/components/timepicker.css

@@ -24,10 +24,18 @@
  * on by default): two toggle buttons 4px apart, round and surface-container-lowest when off, a 12px
  * corner and primary-container with a bold label when on, not the outlined pair of the tokens.
  *
- * In a landscape window the dial variant lies on its side, as Compose's HorizontalTimePicker does
- * whenever the screen is wider than it is tall: the display with the period selector (216×38, 16px
- * under it) on the start side, the dial 36px after it, the actions under both; and the dial shrinks
- * to 238 or 200px when the window is short (ClockFaceSizeModifier). The input variant always stands.
+ * In a landscape window with no room for the upright dial the dial variant lies on its side, as
+ * Compose's HorizontalTimePicker does: the display with the period selector (216×38, 16px under it)
+ * on the start side, the dial 36px after it, the actions under both; and the dial shrinks to 238 or
+ * 200px when the window is shorter still (ClockFaceSizeModifier). The input variant always stands.
+ *
+ * The switch is orientation and viewport *height*, never a width breakpoint: M3 says the picker
+ * "swaps orientation/variant based on device orientation and viewport height"
+ * (docs/reference/m3/components-navigation-selection-inputs.md § Time pickers/Behaviour), and no
+ * window size class applies. 35rem is what the upright dial needs — 33rem of surface (3 padding,
+ * 2.25 title, 7.25 display, 17.5 dial, 3 actions) inside the dialog's `100dvh - 2rem` — so a
+ * landscape phone lies the dial down and a landscape tablet or desktop, which has the height,
+ * leaves it standing.
  *
  * The selector's angle is a registered property, so a single transition turns the line, carries the
  * handle round and moves the clip that inks the number under it, on the default spatial spring. The
@@ -400,7 +408,7 @@
 
     /* ---- Landscape ---------------------------------------------------------------------------- */
 
-    @media (orientation: landscape) and (min-width: 37rem) {
+    @media (orientation: landscape) and (height < 35rem) {
         [data-timepicker-surface][data-mode="dial"] {
             grid-template-columns: 13.5rem auto;
             grid-template-areas:
@@ -446,13 +454,13 @@
         }
     }
 
-    @media (orientation: landscape) and (min-width: 37rem) and (max-height: 22.75rem) {
+    @media (orientation: landscape) and (max-height: 22.75rem) {
         [data-timepicker-surface][data-mode="dial"] [data-timepicker-dial] {
             --dial: 14.875rem;
         }
     }
 
-    @media (orientation: landscape) and (min-width: 37rem) and (max-height: 21.625rem) {
+    @media (orientation: landscape) and (max-height: 21.625rem) {
         [data-timepicker-surface][data-mode="dial"] [data-timepicker-dial] {
             --dial: 12.5rem;
         }