Draw the account menu without Tailwind

Plan step 36 (navigation group, third batch): <x-account-menu>'s class
lists move into resources/css/components/account-menu.css, keyed on
data-md-account-menu (the avatar trigger), data-md-account-menu-avatar
and data-md-account-menu-header. The trigger already carried the
target-extension and state-layer fixes from an earlier pass (N-01,
N-15); this rewrite only moves them onto the shared md-state-layer/
md-touch-target/md-focus-ring classes and their z-index-ordering
comment into the stylesheet. The header's name and email keep their
type and ink as the fixed text classes on the view
(md-type-title-sm/md-ink, md-type-body-sm/md-ink-variant), since they
are the caller's own prose.

Hooks renamed: data-account-menu to data-md-account-menu,
data-account-theme to data-md-account-menu-theme, updated in
AppBarTest.php, which carries account-menu's render tests.

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

tests/Feature/Components/AppBarTest.php

@@ -268,17 +268,27 @@ it('opens an account menu from the initials of a name', function () {
 
     expect($html)
         ->toContain('aria-label="Account"')
-        ->toContain('data-account-menu')
+        ->toContain('data-md-account-menu')
         // The 40px avatar reaches 48px, and nothing clips the pseudo-target (N-01); the trigger
         // has a hover and a pressed state like every other trigger in the library (N-15).
-        ->toContain('state-layer touch-target focus-ring')
+        ->toContain('md-state-layer md-touch-target md-focus-ring')
         ->not->toContain('overflow-hidden')
         ->toMatch('/>\s*AM\s*<\/button>/')
         ->toContain('anna@example.com')
         ->toContain('Settings')
-        ->toContain('data-account-theme')
+        ->toContain('data-md-account-menu-theme')
         ->toContain('Sign out')
         ->and((string) $this->blade('<x-account-menu avatar="/anna.jpg" :theme="false" />'))
-        ->toContain('<img src="/anna.jpg" alt="" class="relative -z-20 size-full rounded-corner-full object-cover" />')
-        ->not->toContain('data-account-theme');
+        ->toContain('<img src="/anna.jpg" alt="" data-md-account-menu-avatar />')
+        ->not->toContain('data-md-account-menu-theme');
+
+    $css = ComponentStylesheet::read('account-menu');
+
+    expect($css->declarations('[data-md-account-menu]'))
+        ->toHaveKey('inline-size', 'var(--md-sys-measurement-space500)')
+        ->toHaveKey('border-radius', 'var(--md-sys-shape-corner-full)')
+        ->and($css->declarations('[data-md-account-menu-avatar]'))
+        // Behind the state layer's ::before (z-index -1), so a hover or a press still washes over
+        // the picture instead of under it (N-15).
+        ->toHaveKey('z-index', '-2');
 });

tests/Feature/Components/NavigationStylesheetsTest.php

@@ -33,6 +33,7 @@ dataset('navigation components', [
     'navigation-rail-item',
     'navigation-rail-section',
     'section-nav',
+    'account-menu',
 ]);
 
 /**