Feature: Log-in card sizing, alert placement and focus behavior match the Auth board As the maintainer of RenewCMS I want AuthShell's card padding, control heights, "Forgot password?" styling, field-error presentation, theme select and h1 focus timing built exactly to the AuthCard board (docs/design/source/AuthCard.dc.html) instead of Nuxt UI's untouched defaults So that /login (and every other AuthShell-based public screen) matches the design board pixel for pixel, at desktop and mobile, in light and dark This complements features/auth_shell_login_conformance.feature, which covers AppLogo, the UPageCard title/description wiring, the muted-background breakpoint and the neutral/error input edge. This feature covers what that one doesn't: exact card/control measurements, the "Forgot password?" link's own styling, the field-error icon and halo behavior, the theme select's chevron, where the alert sits relative to the card, and when the h1 receives focus. Background: Given AuthShell is the layout for every public route, per docs/design/routes.md And the card's padding, control heights and title size come from docs/design/source/AuthCard.dc.html's renderVals(): pad "40px" and control height "40px" from the sm breakpoint up; pad "8px 20px 0" (with a separate footer padding of "0 20px 24px") and control height "44px" below sm; the title is always "font:600 20px/28px" And the Password UFormField's "Forgot password?" link is styled color var(--ui-text-toned) (muted), text-decoration underline, underline-offset 3px, per AuthCard.dc.html's f.link span And a field error renders with the i-lucide-circle-alert icon in var(--ui-error), and the field's edge/shadow is computed error-first, so an errored field that is also focused shows only the single error-colored inset ring, never a focus ring stacked under or around it And AuthShell's notice slot (the alert) renders inside the card's own layout, after the title/description block and before the form — not as a sibling element above the card And the footer's UColorModeSelect renders with no chevron/dropdown-arrow icon, as the last (right-hand) child of the footer's space-between row, per AuthCard.dc.html's theme span And on first paint, AuthShell's h1 (tabindex="-1") does not receive focus; focus moves to it only when the title changes while AuthShell stays mounted (an in-app navigation between public screens, e.g. /login to /register/reset/request), per components.md's AuthShell a11y line ("On route change, focus moves to the h1") And the h1 never shows a visible focus outline, since it is only ever focused programmatically and is not part of the visible keyboard-tab order Scenario: Card padding and control heights at sm and up Given the user is on /login at a viewport of sm or wider When AuthShell and the login form render Then the card's own padding is 40px on every side And the Username input, the Password input and the submit button are each 40px tall And input text renders at 14px Scenario: Card padding and control heights below sm Given the user is on /login at a viewport below sm When AuthShell and the login form render Then the card's own padding is 8px top, 20px left and right, 0 bottom And the footer (outside the card) has its own padding of 0 top, 20px left and right, 24px bottom And the Username input, the Password input and the submit button are each 44px tall And input text renders at 16px Scenario: "Forgot password?" is underlined and muted Given the user is on /login When the Password field renders Then the "Forgot password?" link uses the muted text color (--ui-text-toned) And the link is underlined with a 3px underline offset And the link carries no other emphasis (not bold, not the primary color) Scenario: A field error shows the circle-alert icon with no extra focus halo Given the user is on /login When the user submits with Username "ma" and Password empty (the Validation errors state) Then the Username field's error message is preceded by the i-lucide-circle-alert icon in the error color And the Password field's error message is preceded by the same icon in the same color When the user tabs into the still-errored Username field so it is both errored and focused Then the field shows exactly one inset ring, in the error color And no second, differently colored focus ring is layered under or around it Scenario: The theme select is right-aligned in the footer with no chevron Given the user is on /login When AuthShell's footer renders Then the UColorModeSelect is the last (right-most) element in the footer's row And it renders only its mode icon and label ("System", "Light" or "Dark") And it renders no trailing chevron or dropdown-arrow icon Scenario Outline: The alert renders inside the card, under the description Given the user is redirected to When /login renders with its alert Then the alert is a child of the same card element that contains the title and description, not a sibling positioned above the card And the alert sits after the title/description block and before the Username field And the alert's background uses UAlert's soft variant, which is dark-tinted automatically in dark mode Examples: | path | state | | /login?redirect=/article/12/edit&reason=expired | Session expired | | /login?reason=password-changed | Password changed | Scenario: The h1 is not focused on first load Given the user navigates directly to /login (a fresh page load) When AuthShell mounts and the h1 renders Then the h1 does not receive focus And focus remains on the document body (or wherever the browser places it on load) Scenario: Focus moves to the h1 only on an in-app navigation between public screens Given the user is on /login with AuthShell already mounted When the user follows the "Forgot password?" link to /register/reset/request without a full page reload Then AuthShell's h1 receives focus once ResetRequestPage's title renders And the h1 shows no visible outline when it receives this focus