{{-- Header auth modal — wraps the shared auth form. Guests only. --}}
<div x-cloak x-show="$store.authModal.open"
     class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-[10vh]"
     @keydown.escape.window="$store.authModal.hide()">
    <div class="w-full max-w-sm rounded-[var(--radius-xl)] bg-white p-6 shadow-[var(--shadow-frame)] sm:p-8"
         @click.outside="$store.authModal.hide()"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0">
        <div class="mb-2 flex justify-end">
            <button type="button" @click="$store.authModal.hide()" class="text-[var(--color-muted)] hover:text-[var(--color-ink)]" aria-label="Закрыть">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        @include('partials.auth-form')
    </div>
</div>