/* Shared auth layout, fields and buttons come from design.put.io/components.css. */

:root { color-scheme: light; }
.dark { color-scheme: dark; }

.auth-page { font-family: var(--font-sans); }

.auth-logo-dark { display: none; }
.dark .auth-logo-light { display: none; }
.dark .auth-logo-dark { display: block; }

.auth-context { margin: -16px 0 28px; }

.auth-status .auth-title { margin-bottom: 16px; }

.auth-subtitle,
.auth-text {
    margin: 0;
    font-size: var(--fs-ui);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.auth-subtitle-spaced { margin-bottom: 28px; }

/* Confirm is a link; the button recipe gives only <button> a flex box. */
.auth-status a.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-weight: var(--fw-medium);
    font-size: var(--button-label-size);
    text-decoration: none;
}

.auth-code {
    margin: 0 0 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--yellow-text-secondary);
}

.auth-code-danger { color: var(--red-text-secondary); }

.auth-text p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.auth-text p + p { margin-top: 8px; }

.auth-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--yellow-component-bg);
    color: var(--yellow-text-secondary);
}

.auth-mark svg {
    width: 22px;
    height: 22px;
}

.auth-text a {
    color: var(--text);
    font-weight: var(--fw-medium);
    text-underline-offset: 3px;
}

.auth-text a:hover { color: var(--yellow-text-secondary); }