/* ==========================================================================
   Sign-in screen (/login)
   A single centred card on the paper background. Deliberately quiet: this is
   a doorway, not a landing page — the marketing argument lives on / and the
   product lives behind it.
   ========================================================================== */

.login {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8, 32px) var(--space-4, 16px);
}

.login__card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--gray-200, #E7E5E4);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.06));
    padding: var(--space-8, 32px);
}

.login__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    text-decoration: none;
    color: var(--phase-learn-dark, #C73E3E);
    font-family: var(--font-headline, 'Fraunces', serif);
    font-size: var(--text-h4, 18px);
    margin-bottom: var(--space-6, 24px);
}

.login__title {
    font-family: var(--font-headline, 'Fraunces', serif);
    font-size: var(--text-h2, 28px);
    color: var(--color-ink, #2C2416);
    margin: 0 0 var(--space-2, 8px);
}

.login__sub {
    font-size: var(--text-small, 14px);
    color: var(--color-ink-secondary, #5C5242);
    margin: 0 0 var(--space-6, 24px);
}

/* Sign-in failures are the one thing on this page a user must not miss, so
   the message sits above the form rather than under the button. */
.login__error {
    background: var(--phase-learn-very-light, #FDF0F0);
    border: 1px solid var(--phase-learn-light, #F5B5B5);
    color: var(--phase-learn-dark, #C73E3E);
    border-radius: var(--radius-md, 10px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-size: var(--text-small, 14px);
    margin-bottom: var(--space-4, 16px);
}

/* The Google mark as a background image keeps this a ws_button instead of the
   raw markup the platform's other OAuth buttons use. Data URI so the strict
   CSP and the offline shell both still resolve it. */
.login__google.ws-btn {
    justify-content: center;
    gap: var(--space-2, 8px);
    padding-left: var(--space-10, 40px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--space-4, 16px) center;
    background-size: 20px 20px;
}

.login__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin: var(--space-5, 20px) 0;
    color: var(--gray-500, #78716C);
    font-size: var(--text-meta, 13px);
}

.login__divider::before,
.login__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray-200, #E7E5E4);
}

.login__row {
    margin-bottom: var(--space-4, 16px);
}

.login__submit.ws-btn {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-2, 8px);
}

.login__alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 4px);
    flex-wrap: wrap;
    margin: var(--space-5, 20px) 0 0;
    font-size: var(--text-small, 14px);
    color: var(--color-ink-secondary, #5C5242);
}

.login__link.ws-btn {
    padding: 0;
    min-height: 0;
    color: var(--phase-learn-dark, #C73E3E);
    text-decoration: underline;
}

.login__forgot {
    text-align: center;
    margin: var(--space-3, 12px) 0 0;
    font-size: var(--text-meta, 13px);
}

.login__forgot a {
    color: var(--gray-500, #78716C);
}

@media (max-width: 480px) {
    .login__card {
        padding: var(--space-6, 24px);
        border: none;
        box-shadow: none;
    }
}