/* ==========================================================================
   Wick Journal — Auth pages (Sprint 07 CP16a, MZW-6234)
   login · forgot-password · reset-password · verify-email

   LOAD ORDER (required):
     design-system-v2.css   → tokens + base components
     forms.css              → the full form layer, overrides v2's minimal one
     auth.css               → this file, page-specific only

   v2 and forms.css are both READ-ONLY. Only page-specific styling lives here.

   Token remap follows backend/docs/_misc/v1-v2-token-map.md.
   ========================================================================== */

/* ==========================================================================
   Landing-layer tokens — sample-landing.css § 1, matching register.css.
   Rhythm and measure only; the form tokens come from forms.css.
   ========================================================================== */

:root{
  --l-max:1180px;
  --l-gutter:20px;
  --l-gutter-lg:40px;
  --l-nav-h:64px;
}

/* ==========================================================================
   Page rhythm — sample-landing.css § 2 (only the rules these pages use)
   ========================================================================== */

.l-wrap{max-width:var(--l-max);margin:0 auto;padding:0 var(--l-gutter)}
@media(min-width:1024px){ .l-wrap{padding:0 var(--l-gutter-lg)} }

/* ==========================================================================
   Top nav — sample-landing.css § 3 (verbatim, identical to register.css)
   ========================================================================== */

.l-topnav{position:sticky;top:0;z-index:var(--z-nav);
          border-bottom:1px solid transparent;transition:background var(--d-base),
          border-color var(--d-base),backdrop-filter var(--d-base)}
.l-topnav.is-stuck{background:color-mix(in srgb,var(--canvas) 86%,transparent);
                   backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
                   border-bottom-color:var(--rule)}
.l-topnav-in{display:flex;align-items:center;gap:var(--s-6);height:var(--l-nav-h)}
.l-topnav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}

/* Brand slot holds the real logo lockup instead of the sample's text wordmark
   — same substitution register.css and the signed-off footer made. */
.l-topnav .brand{display:inline-flex;align-items:center;font-size:24px}
.l-topnav .brand img{height:2.75rem;width:auto;display:block}

/* ==========================================================================
   Auth shell — a single centred card. The nav is sticky and 64px tall, so the
   shell subtracts it to stay optically centred rather than pushed low.
   ========================================================================== */

.auth-shell{display:flex;align-items:center;justify-content:center;
            min-height:calc(100vh - var(--l-nav-h));padding:var(--s-10) 0}

.auth-card{width:100%;max-width:440px;margin:0 auto;padding:var(--s-8)}

.auth-card > h3{text-align:center}
.auth-card > .sub{text-align:center;margin-bottom:var(--s-6)}

/* forgot-password swaps the card into a "check your email" state and drops the
   stale prompt. An author rule on .sub would outrank the UA's [hidden], so the
   guard is explicit. */
.auth-card > .sub[hidden]{display:none}

@media(max-width:480px){ .auth-card{padding:var(--s-6)} }

/* ==========================================================================
   Form-layer additions

   Everything else comes from forms.css. Only the deltas live here.
   ========================================================================== */

/* forms.css positions a leading `.ic` absolutely inside .input-wrap. Inside the
   reveal button the icon is centred by that button's own grid instead, so the
   absolute positioning has to be undone. */
.input-wrap .in-btn .ic{position:static;width:auto;height:auto;pointer-events:none}

/* The auth forms have one full-width primary button, not a .form-actions row. */
.auth-btn{width:100%;margin-top:var(--s-2)}

/* ==========================================================================
   Messages

   showMessage() (js/auth.js) toggles .is-error / .is-success rather than
   setting an inline colour, so the palette lives here. Follows the forms
   system's own § 16 Validation convention: --loss for failure, --win for
   success. min-height reserves the line so the card does not jump.
   ========================================================================== */

.auth-message{text-align:center;font-size:var(--t-xs);line-height:1.4;
              min-height:1.25rem;margin-top:var(--s-2)}
.auth-message.is-error{color:var(--loss)}
.auth-message.is-success{color:var(--win)}

/* The resend-verification link is promoted to a real button by
   styleResendLink(), which adds .btn .btn-secondary .btn-sm from v2. */
.auth-message .btn{margin-top:var(--s-2)}

/* ==========================================================================
   Footer links below the form — mirrors register.css .reg-form-foot
   ========================================================================== */

.auth-link{text-align:center;margin-top:var(--s-5);
           color:var(--muted);font-size:var(--t-sm)}
.auth-link a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   verify-email status icon

   Result state, not P&L. Confirmed by Marcos (2026-09-21): this is the same
   success/failure axis the forms system templates in § 16 Validation
   (.field-msg.is-success / .is-error), so it reuses --win / --loss rather than
   introducing a new colour. Not a Signal Colors exception — it IS the
   sanctioned validation palette.
   ========================================================================== */

.auth-status-icon{text-align:center;font-size:2.5rem;margin-bottom:var(--s-4)}
.auth-status-icon.success{color:var(--win)}
.auth-status-icon.error{color:var(--loss)}