Rewrite the card without Tailwind

Plan step 36 (containment group): <x-card>'s class lists move into
resources/css/components/card.css, keyed on data-md-card (per variant),
data-md-card-figure/-body/-header/-heading/-title/-subtitle/-menu/
-content/-actions. A row (data-md-list-row) renders the shared
md-state-layer and md-focus-ring classes for its tint and ring
(foundation/interaction.css) instead of copying their rules; card.css
adds only the per-state elevation the shared class has no opinion on
(ElevatedCardTokens.kt/FilledCardTokens.kt/OutlinedCardTokens.kt), the
press/hover exclusion for a card's own nested buttons, and the ring for
a non-actionable row whose focus lands on its opener rather than the
card. data-md-dragged is read automatically by the shared class's own
16% tint; card.css only adds its elevation levels 3/4.

Hooks renamed data-list-row -> data-md-list-row, data-list-open ->
data-md-list-open, data-list-actionable -> data-md-list-actionable,
data-dragged -> data-md-dragged, updated in the same commit:
resources/js/search.js and list-rows.js's consumers, table.css's
comment, the showcase (index, data and containment sections),
tests/Browser/ContainmentTest.php, and the development skill's card
and table examples.

Imported from the Containment block of components.css.

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

resources/views/showcase/sections/containment.blade.php

@@ -18,8 +18,8 @@
             </div>
             BLADE,
         'A card that opens from anywhere on it' => <<<'BLADE'
-            <x-card variant="outlined" data-list-row class="w-full max-w-sm">
-                <a href="#containment" data-list-open class="type-title-md">holiday-photos.zip</a>
+            <x-card variant="outlined" data-md-list-row class="w-full max-w-sm">
+                <a href="#containment" data-md-list-open class="type-title-md">holiday-photos.zip</a>
                 <p class="mt-1 text-on-surface-variant">248 MB · expires in 3 days</p>
                 <x-slot:actions>
                     <x-button label="Copy link" icon="content_copy" x-on:click="materialToast('Link copied', { type: 'success' })" />
@@ -28,7 +28,7 @@
             BLADE,
         'A directly actionable card: the card is the tab stop' => <<<'BLADE'
             <x-card variant="elevated" actionable role="link" title="contract.pdf" class="w-full max-w-sm">
-                <a href="#containment" data-list-open tabindex="-1" class="type-title-md">contract.pdf</a>
+                <a href="#containment" data-md-list-open tabindex="-1" class="type-title-md">contract.pdf</a>
                 <p class="mt-1 text-on-surface-variant">1.2 MB · downloaded twice</p>
                 <x-slot:actions>
                     <x-button label="Copy link" icon="content_copy" x-on:click="materialToast('Link copied', { type: 'success' })" />
@@ -38,7 +38,7 @@
         'A card being dragged' => <<<'BLADE'
             <div x-data="{ dragged: false }" class="w-full max-w-sm space-y-4">
                 <x-button label="Pick it up or put it down" variant="tonal" x-on:click="dragged = ! dragged" />
-                <x-card variant="elevated" title="holiday-photos.zip" subtitle="248 MB" x-bind:data-dragged="dragged || null">
+                <x-card variant="elevated" title="holiday-photos.zip" subtitle="248 MB" x-bind:data-md-dragged="dragged || null">
                     Elevation 4 and the 16% state layer, for as long as the application says the card is being carried.
                 </x-card>
             </div>