/* ============================================================
   LITEWOO LABS — AUTH PAGES STYLESHEET (v1.0)
   ============================================================

   Scope: shared layout for login/signup/password-reset pages —
   anywhere that renders a centered single-card form on top of
   core.css. Extends core.css; does not redefine any tokens.

   Extracted from a page-scoped <style> block that originally lived
   only in login/index.php, per R&D review — signup pages need this
   exact same layout, so it belongs in its own file rather than being
   duplicated inline a second time.
   ============================================================ */

.lw-auth-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: var(--lw-space-lg);
}

/* Brand mark above the card (Aug 2026) — every signup/login page was
   dropping straight into a bare form with zero LiteWoo Labs branding
   and no link back to the main site. Reuses core.css's .lw-logo class
   verbatim so it matches the main nav instead of inventing a new
   treatment. */
.lw-auth-brand {
    text-decoration: none;
}

.lw-auth-card {
    width: 100%;
    max-width: 420px;
    position: relative;
}

/* Same ambient-glow motif as the landing page's founder banner and
   hero card — small dose of brand presence behind an otherwise plain
   black-and-white form, without competing with the fields themselves. */
.lw-auth-card::before {
    content: '';
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(79, 140, 255, 0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}

.lw-auth-header {
    margin-bottom: var(--lw-space-xl);
}

.lw-auth-header h1 {
    font-size: var(--lw-h3);
    margin-bottom: var(--lw-space-xs);
}

.lw-auth-alert {
    display: flex;
    margin-bottom: var(--lw-space-md);
}

.lw-auth-footer {
    margin-top: var(--lw-space-lg);
    text-align: center;
}

.lw-auth-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lw-space-md);
    margin-top: var(--lw-space-sm);
}

.lw-auth-actions a {
    font-size: var(--lw-text-sm);
}

.lw-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--lw-text-sm);
    color: var(--lw-text-soft);
}

.lw-auth-card form button[type="submit"] {
    width: 100%;
    margin-top: var(--lw-space-lg);
}

/* ============================================================
   FIELD ROW — side-by-side fields (e.g. country code + phone
   number) inside a signup form. Added for the signup flow;
   login/password-reset have no multi-field rows, so this didn't
   exist yet (D-022: added only when a real usability need arose).
   ============================================================ */
.lw-field-row {
    display: flex;
    gap: var(--lw-space-md);
    align-items: flex-start;
}

.lw-field-row .lw-field {
    flex: 1;
}

.lw-field-country-code {
    flex: 0 0 110px;
}

/* ============================================================
   ONBOARDING STEP LIST — shared by the signup funnel's status
   pages (success.php today; plan-selection/payment later reuse
   the same component). Reuses .lw-icon / .lw-icon-active (D-004)
   for step-state color; only the list layout is new.
   ============================================================ */
.lw-onboarding-steps ul {
    display: flex;
    flex-direction: column;
}

.lw-onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--lw-space-md);
    padding: var(--lw-space-md) 0;
    border-bottom: 1px solid var(--lw-border);
    font-size: var(--lw-text-sm);
    font-weight: 500;
    color: var(--lw-text-muted);
}

.lw-onboarding-step:last-child {
    border-bottom: none;
}

.lw-onboarding-step-completed,
.lw-onboarding-step-current {
    color: var(--lw-text);
}

.lw-onboarding-step-current {
    font-weight: 700;
}

/* ============================================================
   RESPONSIVE (design review: signup's country-code + phone-number
   row was never checked below ~360px — the fixed 110px code select
   left the phone number field cramped into ~80px of usable width on
   small phones. Stacks vertically instead once space is genuinely
   tight, matching how .lw-grid-2 already collapses in dashboard.css.)
   ============================================================ */
@media (max-width: 420px) {
    .lw-field-row {
        flex-direction: column;
        gap: var(--lw-space-md);
    }
    .lw-field-row .lw-field {
        flex: 1 1 auto;
        width: 100%;
    }
}