deckhearth/.convoys/unify-glass-panel-surfaces/brief-2-auth-form-cards.md

convoy	brief_number	depends_on	files
unify-glass-panel-surfaces	2		pages/login.js pages/signup.js

Brief 2: Migrate auth form cards to .glass-panel-strong

Goal (1 sentence)

Replace the handrolled rgba(var(--bg-secondary-rgb), 0.85) + backdrop-blur-sm glass imitation on the login + signup form cards with the canonical .glass-panel-strong rounded-2xl p-8 className so the auth flow shares the rest of the app's surface treatment (corner catch-lights, system blur tier, gradient border).

Files in scope (do not edit anything else)

• pages/login.js — replace the form-card container <div> (currently L82-88, look for the className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm border border-opacity-20" + inline backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.85)').
• pages/signup.js — same migration on the form-card container (currently L227-232 in the symmetric <div className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm ..."> block).

Out of scope: the surrounding layout/header on either page, the <Input> / <Button> children, error/success banners, any of the legend/divider/social-button styling below the form. Do not touch them.

Conventions to follow

• Verbatim replacement for each card container:

  // Before:
  <div
    className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm border border-opacity-20"
    style={{
      backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.85)',
      borderColor: 'var(--border)',
    }}
  >
  
  // After:
  <div className="glass-panel-strong rounded-2xl p-8">
  

  The style={{}} block is removed entirely. .glass-panel-strong already composes the background, blur, rim, elevation, and the gradient-border treatment.
• No new imports. This brief does NOT use <GlassSurface> directly — the className path is correct because (a) it's an HTML div with no compositional requirements, (b) the existing .glass-panel-strong class is the documented canonical shape per the design audit, and (c) using the class keeps the diff minimal.
• Preserve children verbatim. The <form>, every <Input>, every <Button>, the error banner, the social-sign-in divider, the "Don't have an account?" footer link — all stay byte-identical.
• Do not adjust the surrounding header block (Deck Hearth logo + greeting text); only the form-card <div> itself migrates.
• Tailwind safelist note: .glass-panel-strong is defined in styles/globals.css as a plain CSS class (not a Tailwind utility). It's already used in <Layout> and elsewhere, so the build picks it up via the @layer block. No tailwind.config.js edit needed.

Acceptance criteria

• pages/login.js form-card <div> uses className="glass-panel-strong rounded-2xl p-8" and carries no inline backgroundColor / borderColor style.
• pages/signup.js form-card <div> uses className="glass-panel-strong rounded-2xl p-8" and carries no inline backgroundColor / borderColor style.
• All form fields, labels, buttons, error banners, and footer links render identically post-migration (manual smoke; tests/smoke/auth.spec.js continues to pass without edits).
• No edits to other files (e.g. no token additions in styles/globals.css, no new components in components/ui/).
• npm run lint passes; npm run test:run is unchanged (no test additions needed for a pure className swap).
• Dark mode: card remains legible against the body background gradient (verify manually; before-shot vs after-shot screenshot attached to the PR description).

Rationale (≤3 sentences)

These two cards are the first surfaces a new user sees and they predate the .glass-panel-strong system; aligning them is both a correctness fix (the rgba(--bg-secondary-rgb, 0.85) shape doesn't compose corner lights) and a consistency win. The migration is a pure className swap with zero behavioral change — the lowest-risk brief in the convoy.