Feature: AuthShell and log-in screen conform to the design spec

  As the maintainer of RenewCMS
  I want AuthShell and LoginView built from the exact primitives docs/design/components.md
    specifies — AppLogo, UPageCard's own title/description styling, the muted page background,
    UForm with "Forgot password?" in the Password field's #hint slot, and the neutral-by-default,
    red-on-error input border
  So that the log-in screen (and every other AuthShell-based screen) matches the visual spec of
    record instead of ad hoc markup that happens to look similar

  Background:
    Given AuthShell is the layout for every public route, per docs/design/routes.md
    And AuthShell composes a UPageCard variant="outline" as the centered card, with AppLogo
      rendered as the card's first element — left-aligned above the title/description block,
      sharing the card's own 24px gap — not as a separate element centered outside/above the
      card, per docs/design/components.md's AuthShell section and
      docs/design/source/AuthCard.dc.html
    And AppLogo is a reusable component (props include size) rendering the brand mark from
      docs/design/source/brand/favicon.svg as inline SVG, not an <img>
    And UPageCard's title renders through its own title slot as an h1 (tabindex="-1", so route
      changes can move focus to it, per AuthShell's a11y spec), and its description renders
      through UPageCard's description prop — neither is freeform markup in the default slot
    And from the sm breakpoint up, the centered <main> sits on the muted page background
      (--ui-bg-muted), the same canvas the rest of the app uses; below sm it sits on --ui-bg
      instead, per docs/design/components.md's AuthShell "Responsive" line
    And LoginView's form is a UForm wrapping the Username and Password UFormFields and the
      submit button
    And the Password UFormField's "Forgot password?" link renders through the field's #hint
      slot, in the position the Auth board draws it — right-aligned on the label row — per
      docs/design/source/RenewCMS Screens Auth.dc.html, group "Log in"
    And every UInput on the page uses the neutral control-edge border (--ui-border-accented) by
      default, and turns to the error edge (--ui-error) only when its field has an error, per
      docs/design/components.md's Input section (":highlight bound to the field error") and
      foundations.md's Borders and elevation

  Scenario: AppLogo renders the brand mark as inline SVG, and theme-switches
    Given a public screen renders inside AuthShell
    When AuthShell mounts
    Then an AppLogo renders as UPageCard's first element, inside the card, left-aligned, sharing
      the card's 24px gap with the title/description block below it — not centered above the card
    And the logo is inline SVG sourced from docs/design/source/brand/favicon.svg, at 32px, not as
      an <img> tag
    And the logo carries alt="RenewCMS" (role="img" aria-label="RenewCMS" on the SVG)
    And the logo is not wrapped in a link, since there is nothing public to go back to
    And the black square has no edge stroke in light mode or in dark mode, per
      docs/design/source/AuthCard.dc.html's renderVals(), which computes the logo's edge as the
      literal, non-theme-branched value "transparent"

  Scenario: UPageCard's title is the page h1, and its description uses UPageCard's own styling
    Given AuthShell renders with title "Log in" and description
      "Welcome back. Log in to manage your articles."
    When AuthShell mounts
    Then the card is a UPageCard with variant="outline"
    And UPageCard's title slot renders an h1 with tabindex="-1" containing "Log in"
    And UPageCard's description prop is "Welcome back. Log in to manage your articles."
    And neither the title nor the description is rendered as separate freeform markup inside
      UPageCard's default slot

  Scenario: The page sits on the muted background from sm up, and on the default background below sm
    Given AuthShell renders any public screen at a viewport of sm or wider
    When AuthShell mounts
    Then the centered <main> uses the muted background token (--ui-bg-muted)
    And the card keeps its border, is capped at 400px, and its top sits 12vh from the top

  Scenario: Below sm, AuthShell drops the muted background, the card border and the card padding
    Given AuthShell renders any public screen at a viewport below sm
    When AuthShell mounts
    Then the centered <main> uses the default background token (--ui-bg), not the muted one
    And the card has no border and fills the screen with 20px padding
    And the fields and buttons on the page render at the xl size

  Scenario: The login form is a UForm
    Given the user is on /login
    When the login form renders
    Then the form is a UForm, not a plain HTML <form>, wrapping the Username UFormField, the
      Password UFormField and the submit button

  Scenario: "Forgot password?" renders in the Password field's hint slot
    Given the user is on /login
    When the login form renders
    Then the Password UFormField's "Forgot password?" link is rendered through the field's
      #hint slot
    And the Password field's label reads only "Password", with no link inside it

  Scenario: Inputs are neutral by default and turn to the error edge only when their field has an error
    Given the user is on /login with no validation errors yet
    When the Username and Password UInput fields render
    Then both use the neutral control-edge border (--ui-border-accented), with :highlight false
    When the user submits with Username "ma" and Password empty (the Validation errors state,
      per docs/design/screens/log-in.md)
    Then the Username UInput's edge turns to the error color (--ui-error), with :highlight true,
      alongside the message "Use at least 3 characters."
    And the Password UInput's edge turns to the error color (--ui-error), with :highlight true,
      alongside the message "Enter your password."