/**
 * Phone sign-in and sign-up card (/m/login, /m/signup).
 *
 * Loaded by pocket/login.html and pocket/signup.html through
 * {% block page_css %}, right after pocket.css. Form inputs and alerts
 * stay in pocket.css.
 */

.pocket-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 128px);
    padding: var(--pocket-space-xl);
}

.pocket-login-card {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    padding: var(--pocket-space-2xl) var(--pocket-space-xl);
    width: 100%;
    max-width: 340px;
    box-shadow: var(--pocket-card-shadow);
}

.pocket-login-title {
    font-size: var(--pocket-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--pocket-space-sm) 0;
    text-align: center;
}

.pocket-login-subtitle {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
    margin: 0 0 var(--pocket-space-xl) 0;
    text-align: center;
}

.pocket-input-code {
    text-align: center;
    font-size: var(--pocket-font-size-xl);
    letter-spacing: 4px;
    font-weight: 600;
}

.pocket-dev-note {
    font-size: var(--pocket-font-size-sm);
    color: var(--note);
    text-align: center;
    margin: var(--pocket-space-md) 0;
    padding: var(--pocket-space-sm);
    background: var(--note-bg);
    border-radius: var(--pocket-radius-sm);
}

.pocket-login-retry {
    font-size: var(--pocket-font-size-sm);
    text-align: center;
    margin-top: var(--pocket-space-lg);
}

.pocket-login-retry a {
    color: var(--pocket-active);
}

.pocket-login-guest {
    margin-top: var(--pocket-space-xl);
    padding-top: var(--pocket-space-lg);
    border-top: 1px solid var(--pocket-border);
    text-align: center;
    font-size: var(--pocket-font-size-sm);
}

.pocket-login-guest a {
    color: var(--pocket-active);
    font-weight: 500;
}

.pocket-login-guest-note {
    display: block;
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    margin-top: var(--pocket-space-xs);
}