Draw the form without Tailwind

<x-form> renders data-md-form and data-md-form-actions, and its column
and actions row move to components/form.css in material.components, on
the spacing tokens (plan step 36). The actions slot's own attributes
still land on the row.

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

resources/css/components/form.css

@@ -0,0 +1,37 @@
+/*
+ * <x-form>: its fields in one column, and its actions at the foot
+ * (resources/views/components/form.blade.php).
+ *
+ * The column is a one-track grid whose track is `minmax(0, 1fr)`: a bare grid's implicit column
+ * floors at its content's min-content, so on a phone a wide field would push the form past its
+ * pane. Rows take their content's height. 16px (`space200`) between fields, because a text field
+ * floats its label half above its outline and any less lets the hint under one field run into the
+ * label of the next.
+ *
+ * The actions wrap, end-aligned, 8px (`space100`) apart — M3's gap between buttons in a row. A
+ * caller's class on the `actions` slot lands on the row and outranks this layer.
+ *
+ *   [data-md-form]            the <form>
+ *     [data-md-form-actions]  the row of actions, under the divider when `separator` asks for one
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+/* TODO(step 36): @import './divider.css' once <x-divider> leaves Tailwind (containment stream). */
+
+@layer material.components {
+    [data-md-form] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        grid-auto-rows: min-content;
+        gap: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-form-actions] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--md-sys-measurement-space100);
+    }
+}