Draw the stat card without Tailwind

Plan step 36 (actions). <x-stat> renders data-md-stat with
data-md-stat-header/-value/-description/-extra; no class list.
stat.css draws the surface-container panel, the label-large header,
the value as an emphasized-headline-md hero with tabular figures, and
the body-small description. StatTest 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.css

@@ -30,6 +30,7 @@
 @import './components/toast.css';
 @import './components/progress.css';
 @import './components/alert.css';
+@import './components/stat.css';
 
 /* Inputs, selection and data */
 @import './components/form.css';

resources/css/components/stat.css

@@ -0,0 +1,50 @@
+/*
+ * <x-stat>: a figure and what it counts — not an M3 component; drawn in M3's terms, a panel that
+ * separates from the page in surface-container, a label-large title beside its icon, the value as
+ * an emphasized-headline-md hero with tabular figures (so the panel never reflows as it counts),
+ * and a body-small description. resources/js/figure.js counts the value up on first appearance
+ * and on every change after, and rests under reduced motion.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './icon.css';
+
+@layer material.components {
+    [data-md-stat] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--md-sys-measurement-space50);
+        border-radius: var(--md-sys-shape-corner-lg);
+        background-color: var(--md-sys-color-surface-container);
+        padding: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-stat-header] {
+        display: flex;
+        align-items: center;
+        gap: var(--md-sys-measurement-space100);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-label-lg);
+        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-stat-value] {
+        font: var(--md-sys-typescale-emphasized-headline-md);
+        letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
+        font-variation-settings: "ROND" 100;
+        font-variant-numeric: tabular-nums;
+    }
+
+    [data-md-stat-description] {
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-stat-extra] {
+        padding-top: var(--md-sys-measurement-space100);
+    }
+}