/* Pages outside the app: the home page, login and password screens. */

.public__main {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--space-5);
}

.hero {
    display: grid;
    justify-items: center;
    gap: var(--space-6);
    text-align: center;
}

.hero__title {
    font-size: clamp(var(--text-2xl), 12vw, 7rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.04em;
    line-height: 1;
}

.hero__title--small {
    max-width: 20ch;
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
    line-height: var(--line-tight);
}

.hero__eyebrow {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-light);
    line-height: 1;
}

.auth {
    display: grid;
    gap: var(--space-5);
    width: 100%;
    max-width: 24rem;
}

.auth__brand {
    justify-self: center;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    text-decoration: none;
}

.auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: var(--border);
    border-radius: var(--radius);
}

.auth__title {
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
}

.auth__intro {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.auth__link {
    align-self: center;
    font-size: var(--text-sm);
}

/* A verification code: one box per digit. */

.code {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.code__digit {
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: var(--border);
    border-radius: var(--radius-small);
    background: none;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    transition: opacity var(--transition);
}

.code__digit:disabled {
    opacity: 0.4;
}

/* A wrong code: all the boxes shake their head together. */
.code.is-shaking {
    animation: code-shake 420ms ease-in-out;
}

@keyframes code-shake {
    15%,
    45%,
    75% {
        transform: translateX(-0.5rem);
    }

    30%,
    60%,
    90% {
        transform: translateX(0.5rem);
    }
}

/* Space is kept for the status line so the form doesn't jump as it comes and goes. */
.code__status {
    min-height: calc(var(--text-sm) * var(--line-normal));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.code__status--checking {
    color: var(--color-muted);
    font-weight: var(--font-weight-regular);
}

.code__status--checking .bi {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@media (max-width: 30rem) {
    .auth__form {
        padding: var(--space-5);
    }
}