/* ============================================
   CHANGE PASSWORD (/change-password, MainLayout): the last page on the old auth card. The sign-in pages moved to the
   front door's auth kit (Docs/LRPG_FRONT_DOOR.md, section 10.6), so only the rules ChangePassword.razor uses stay
   here. Cinzel arrives with App.razor's one font request (the @import that used to chain a second one is gone).
   ============================================ */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 2rem;
    box-sizing: border-box;
}

.login-paper {
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 450px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.login-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #ffd700;
    text-align: center;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label {
    font-size: 0.9rem;
    color: #e2e8f0;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #ffd700;
    background: rgba(30, 41, 59, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-input::placeholder {
    color: #64748b;
}

.field-error {
    font-size: 0.85rem;
    color: #fca5a5;
}

.login-button {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1e293b;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.login-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(30, 41, 59, 0.3);
    border-top-color: #1e293b;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.login-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.2);
    margin: 2rem 0;
}

/* Alerts */
.alert {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert .material-icons {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #86efac;
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

/* Responsive (the canonical 768, was an off-list 640) */
@media (max-width: 768px) {
    .login-paper {
        padding: 1.5rem;
    }

    .login-title {
        font-size: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-input,
    .login-button {
        transition: none;
    }

    .login-button:hover:not(:disabled) {
        transform: none;
    }

}

/* ============================================
   FRONT DOOR AUTH: the sign-in pages' adjustments to the shared auth kit (Pages/Auth, Docs/LRPG_FRONT_DOOR.md 10.6)

   The kit (FdAuthShell, FdAuthCard, ...) is shared and frozen; the pages pass these au- classes through its CssClass
   parameters, and the rules below (one class more specific than the kit's scoped rules) carry what the comps draw
   for the auth pages alone. Tokens only (no hex, no rgba), canonical breakpoints only; AuthPagesWiringTests reads
   everything below this banner.
   ============================================ */

/* From 1280px the form column (the comps' "ledger") is a fixed 780px and the art side takes the rest: 500px at 1280,
   586 at 1366, 1140 at 1920 (A-Signup-1920). The kit's 600px art column is right at 1366 only. */
@media (min-width: 1280px) {
    .fd-root .fd-auth.au-shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, 780px);
    }
}

/* From 1024 to 1279px the kit's art column is 480px; the comps narrow it to 384px (A-Signup-1024) so the form keeps
   its steps strip on one line and its password pair readable. */
@media (min-width: 1024px) {
    @media not all and (min-width: 1280px) {
        .fd-root .fd-auth.au-shell {
            grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
        }

        /* Sign-up at this tier (A-Signup-1024): Garrick over the doorway beside the form, and "Why Join Lourdin RPG?"
           out of the art column into a full-width row under both. The kit draws the art as one column, so its
           wrappers (and the preview's) step aside with display: contents: Garrick, the doorway and the reasons become
           the shell's own grid items, the scene and its shade span the art rows. The DOM order (form, Garrick, the
           doorway, the reasons) is unchanged, so the keyboard and a screen reader read what they read on every tier. */
        .fd-root .fd-auth.au-shell--signup {
            position: relative;
            isolation: isolate;
            min-height: 0;
            grid-template-rows: auto minmax(0, 1fr) auto;
            grid-template-areas:
                "voice panel"
                "door panel"
                "why why";
        }

        .fd-root .au-shell--signup .fd-auth__art,
        .fd-root .au-shell--signup .fd-auth__art-in,
        .fd-root .au-shell--signup .ahp,
        .fd-root .au-shell--signup .ahp__row,
        .fd-root .au-shell--signup .ahp__extra {
            display: contents;
        }

        .fd-root .au-shell--signup .fd-auth__bg,
        .fd-root .au-shell--signup .fd-auth__shade {
            grid-column: 1;
            grid-row: 1 / 3;
        }

        .fd-root .au-shell--signup .ahp__voice {
            grid-area: voice;
            margin: 0;
            padding: 28px 28px 0;
        }

        .fd-root .au-shell--signup .ahp__door {
            grid-area: door;
            align-self: end;
            margin: 24px 28px 32px;
        }

        .fd-root .au-shell--signup .ahp__door--one {
            justify-self: center;
            width: min(100% - 56px, 300px);
        }

        .fd-root .au-shell--signup .su-why {
            grid-area: why;
            margin: 8px 28px 40px;
        }
    }
}

/* Touch screens: the footer row's link gets the 44px target (Login Here, Create your free account, Return to login). */
@media (pointer: coarse) {
    .fd-root .au-card .fd-auth-card__foot a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Login, forgot, reset and confirm draw a 460px card; sign-up keeps the kit's 540 (A-Login, A-Forgot, A-Signup). */
.fd-root .fd-auth-card.au-card--narrow {
    max-width: 460px;
}

/* A finished step (sign-up's "Check Your Email!"): the steps strip and the green panel take the card's place. The h1
   stays in the outline for screen readers and the router's focus, out of sight. */
.fd-root .au-card--done .fd-auth-card__hd {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A card whose state has no footer row (a sent or done state: its own button goes on). */
.fd-root .au-card--nofoot .fd-auth-card__divider,
.fd-root .au-card--nofoot .fd-auth-card__foot {
    display: none;
}

/* At 480px and below the form sits on the page, not in a card (A-*-390). */
@media (max-width: 480px) {
    .fd-root .au-card .fd-auth-card__box {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
}

/* The resend's one line (D7): what "Send it again" says, the same whatever the service did. */
.au-sent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fd-good-ink);
}

.au-sent .material-icons {
    flex: none;
    margin-top: 1px;
    font-size: 18px;
    color: var(--fd-good);
}

/* A page's own buttons under a message (Go to Login + Send it again; Send it again + Back to Login). */
.au-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.au-actions--stack {
    flex-direction: column;
    align-items: stretch;
}

@media (pointer: coarse) {
    .au-actions .fd-btn {
        min-height: 44px;
    }
}