Rewrite the showcase's Type section without Tailwind

Plan step 38: the typescale listing moves onto <x-surface> for its
container and a bespoke data-md-showcase-type-row (a fixed label
column beside two flexible samples from 840px, one column below it,
a rule between rows) since no layout component draws an asymmetric
grid track; the sample text itself is styled by the very md-type-*
class names the row's own label prints, so the code sample and the
rendered specimen are the same string.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/showcase.css

@@ -142,4 +142,24 @@
     [data-md-showcase-swatch-label] {
         min-width: 0;
     }
+
+    /* Type: one typescale style beside its label and its emphasized twin, a row of the surface
+       they share. A single column below `expanded` (840px), where the label, the regular sample
+       and the emphasized one no longer fit a line each. */
+    [data-md-showcase-type-row] {
+        display: grid;
+        gap: var(--md-sys-measurement-space100);
+        padding: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-showcase-type-row] + [data-md-showcase-type-row] {
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    @media (width >= 840px) {
+        [data-md-showcase-type-row] {
+            grid-template-columns: 192px 1fr 1fr;
+            align-items: baseline;
+        }
+    }
 }