/*
 * The public pages' card. On a phone it is the screen itself (no border, the shell's 16px gutter); from 480px it is a
 * 400px card in the middle of the page.
 */
.auth-card { width: 100%; max-width: 400px; display: grid; gap: 20px; }
.auth-card__header { display: grid; justify-items: center; gap: 6px; text-align: center; }
.auth-card__logo { width: 16px; height: 16px; margin-bottom: 8px; border-radius: 4px; background: var(--strong); transform: rotate(45deg); }
.auth-card__brand { color: var(--text-muted); font-size: 13px; }
.auth-card__title { font: 600 22px var(--font); letter-spacing: -.02em; }
.auth-card__subtitle { color: var(--text-muted); font-size: 14px; }
.auth-card__content { display: grid; gap: 16px; }
.auth-card__footer { color: var(--text-muted); font-size: 14px; text-align: center; }
.auth-card__footer:empty { display: none; }
.auth-card__footer a { color: var(--text); font-weight: 500; text-decoration: underline; }

@media (min-width: 480px) {
    .auth-card {
        padding: 32px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    }
}