/* Public auth screens (apps.hub.views.login_page / signed_out). */

.auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--s-8) var(--s-4);
}

.auth-card {
    --auth-shadow: 0 12px 32px rgba(15, 25, 35, 0.12), 0 2px 8px rgba(15, 25, 35, 0.06);

    width: 100%;
    max-width: 26rem;
    padding: var(--s-10) var(--s-8);
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-elevated);
    box-shadow: var(--auth-shadow);
}

[data-theme="dark"] .auth-card {
    --auth-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.auth-card__icon {
    font-size: 2.5rem;
    color: var(--text-muted);
}

.auth-card__title {
    margin: var(--s-4) 0 var(--s-2);
    font-size: var(--fs-24);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}

.auth-card__text {
    margin: 0 0 var(--s-6);
    font-size: var(--fs-14);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}

.auth-card__action {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-6);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    color: var(--accent-contrast);
    background: var(--accent);
    border-radius: var(--radius-control);
    transition: background var(--motion-base);
}

.auth-card__action:hover,
.auth-card__action:focus-visible {
    color: var(--accent-contrast);
    background: color-mix(in srgb, var(--accent) 85%, black);
}

.auth-card__action:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}