Draw the empty state without Tailwind

Plan step 36 (actions, last of the batch). <x-empty-state> renders
data-md-empty-state with data-md-empty-state-illustration/-shape/
-icon/-title/-description/-actions; no class list. empty-state.css
draws the secondary-container shape behind the on-secondary-container
icon (the icon needs its own stacking context to paint above the
shape's absolute position), the title-large title and the 448px
body-medium description. The docblock's illustration example moves
from a caller class to a caller style, since the shape rule scans
the whole file. EmptyStateTest is rewritten on the hooks and
ComponentStylesheet.

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

resources/css/components/empty-state.css

@@ -0,0 +1,69 @@
+/*
+ * <x-empty-state>: "you have nothing here yet" — not an M3 component; built from M3 Expressive's
+ * parts, a shape in secondary-container behind an icon in on-secondary-container, a title-large
+ * title, body-medium description at 448px and a centred row of actions.
+ *
+ * The shape is `position: absolute`, so the icon needs its own stacking context
+ * (`position: relative`) to paint above it in DOM order rather than losing to the shape's own —
+ * an application's illustration slot replaces both and sizes itself.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './icon.css';
+@import './shape.css';
+
+@layer material.components {
+    [data-md-empty-state] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--md-sys-measurement-space200);
+        padding-inline: var(--md-sys-measurement-space200);
+        padding-block: var(--md-sys-measurement-space500);
+        text-align: center;
+    }
+
+    [data-md-empty-state-illustration] {
+        position: relative;
+        display: grid;
+        width: 112px;
+        height: 112px;
+        place-items: center;
+    }
+
+    [data-md-empty-state-shape] {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        color: var(--md-sys-color-secondary-container);
+    }
+
+    [data-md-empty-state-icon] {
+        position: relative;
+        color: var(--md-sys-color-on-secondary-container);
+    }
+
+    [data-md-empty-state-title] {
+        font: var(--md-sys-typescale-title-lg);
+        letter-spacing: var(--md-sys-typescale-title-lg-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-empty-state-description] {
+        max-width: 448px;
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-md);
+        letter-spacing: var(--md-sys-typescale-body-md-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-empty-state-actions] {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 12px;
+        padding-top: var(--md-sys-measurement-space100);
+    }
+}