/* ================================================================
   pages/login.css  —  Login Page
   Project T.A.H.I.T.I. Account Portal — Refactored CSS System

   The login page uses the .auth-layout centering from layout.css.
   This file adds only login-specific details.
   ================================================================ */

/* Subtle brand gradient behind the auth card */
.auth-layout {
    background: radial-gradient(ellipse at 60% 10%, rgba(79, 142, 247, 0.09), transparent 55%),
                var(--bg-page);
}

/* Verification / email step (forgot password re-uses this page) */
.code-sent {
    background: var(--clr-success-faint);
    border: 1px solid var(--clr-success);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    color: var(--clr-success);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--sp-5);
}

.info-text {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-5);
}

/* "Forgot password" / "Create account" footer links */
.auth-foot {
    text-align: center;
    margin-top: var(--sp-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.auth-foot a  { color: var(--clr-accent); }

/* Multi-step: hide inactive steps */
.step         { display: none; }
.step.active  { display: block; }