Draw the timepicker without Tailwind

Plan step 36 (inputs group, last of the "not started" pair): <x-timepicker>
renders data-md-timepicker-* throughout (data-md-mode, data-md-cycle,
data-md-view, data-md-inner, data-md-dragging, data-md-disabled,
data-md-error and data-md-value replace their unprefixed hooks), and
timepicker.css moves into material.components, importing field.css,
icon.css and button.css. The dialog's Tailwind utility class (position,
the scrim, the spatial-fast pop and its @starting-style) becomes plain
declarations under data-md-timepicker-dialog, matching the datepicker's
modal dialog. The landscape rule stays keyed on orientation and viewport
height, in px (560/364/346), never a breakpoint, as M3 asks.

The hour and minute boxes and the period buttons swap their Tailwind
`state-layer focus-ring` utilities for `md-state-layer md-focus-ring`:
same declarations, so nothing else in the stylesheet changes for them.
The dial swaps in `md-focus-ring` for its own hand-rolled, byte-identical
outline-on-:focus-visible rule, which timepicker.css no longer carries.
The period selector was already the radio-in-a-list M3's labelling table
asks for (role="radio" in a role="radiogroup", moved by the arrow keys),
and Shift+M/Y already reached the date picker's dropdowns — both
predate this rewrite.

field.css's data-md-field-button note is tidied now that every component
that selects it (input, password, datepicker, timepicker) is rewritten.

Browser tests written but not run (the inputs group's Chromium run
follows this stream): the period radios moving with the arrow keys, and
the dial lying on its side below the landscape height threshold.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/field.css

@@ -165,11 +165,12 @@
         pointer-events: none;
     }
 
-    /* A trailing button — clear, copy, reveal — is an icon button: the icon in a state layer that
-       scales with the field's own icon size (40px at `md`, smaller at `sm`/`xs`), which the
-       foundation's fixed-size classes cannot draw; the layer doubles as the touch target, since it
-       already reaches 40px+ without a second pseudo. The hook stays `data-md-field-button` rather
-       than a class because datepicker and timepicker, not yet rewritten, still select it. */
+    /* A trailing button — clear, copy, reveal, the datepicker's calendar and the timepicker's clock —
+       is an icon button: the icon in a state layer that scales with the field's own icon size (40px
+       at `md`, smaller at `sm`/`xs`), which the foundation's fixed-size classes cannot draw; the
+       layer doubles as the touch target, since it already reaches 40px+ without a second pseudo. The
+       hook stays `data-md-field-button` rather than a class for that reason alone now: every other
+       component that draws one — input, password, datepicker, timepicker — selects it from here. */
     [data-md-field-button] {
         position: relative;
         display: grid;