/* Login + Sign Up (templates/login.html, sign_in.html). Scoped to .auth-* ; colours follow design.md */

.auth-page { background: #FAF7EF; /* homepage ivory: a quieter surround so the white card reads as neutral */ padding: 56px 0 72px; min-height: 60vh; }

.auth-card {
    max-width: 440px; margin: 0 auto; background: #FFFFFF; border: 1px solid #EAE6DA;
    border-radius: 16px; padding: 2rem; box-shadow: 0 2px 8px -2px rgba(36, 36, 36, .04), 0 8px 24px -8px rgba(36, 36, 36, .08);
}
.auth-card-wide { max-width: 600px; }

.auth-card h1 { font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif; letter-spacing: -.02em; color: #242424; font-weight: 700; font-size: 1.6rem; margin: 0 0 .4rem; }
.auth-sub { color: #4b5563; margin: 0 0 1.5rem; font-size: .95rem; }

.auth-field label { display: block; font-weight: 500; font-size: .9rem; color: #333; margin-bottom: .3rem; }
form > .auth-field { margin-bottom: 1rem; }
.auth-card .form-control { min-height: 46px; border-radius: 10px; border: 1px solid #ced4da; font-size: 16px; }
.auth-card .form-control:focus { border-color: #FACC15; box-shadow: 0 0 0 .2rem rgba(250, 204, 21, .35); }

.auth-password { position: relative; }
.auth-password .form-control { padding-right: 3rem; }
.auth-toggle {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; background: transparent; color: #6b7280; border-radius: 8px; cursor: pointer;
}
.auth-toggle:hover { color: #0a0a0a; }
.auth-toggle:focus-visible { outline: 2px solid #FACC15; outline-offset: 0; }

/* primary button: brand yellow, near-black text, #E6B800 hover (design.md) */
.auth-submit {
    display: block; width: 100%; margin-top: .5rem; padding: .75rem 1.25rem;
    background: #FACC15; color: #0a0a0a; border: 0; border-radius: 999px; font-weight: 600;
    transition: background-color .2s;
}
.auth-submit:hover, .auth-submit:focus { background: #E6B800; color: #0a0a0a; }
.auth-submit:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; box-shadow: none; }

.auth-switch { margin: 1.5rem 0 0; text-align: center; color: #4b5563; font-size: .95rem; }
.auth-switch a { color: #242424; font-weight: 600; text-decoration: underline; }
.auth-switch a:hover { color: #0a0a0a; }

.auth-card .alert { font-size: .92rem; padding: .7rem .9rem; }

@media (max-width: 575.98px) {
    .auth-page { padding: 28px 0 48px; }
    .auth-card { padding: 1.35rem; }
}