@import url("foundation.css");
@import url("controls.css");
@import url("navigation/view-switcher.css");
@import url("components/buttons.css");
@import url("components/forms.css");
@import url("components/validation.css");

.authentication-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(1rem, 4vw, 2.5rem);
}

.login-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(100%, 24rem);
    min-height: 32rem;
    margin: auto;
    padding: clamp(2rem, 7vw, 3rem);
    border: 1px solid var(--color-secondary);
    border-radius: 0;
    background: var(--color-primary);
    box-shadow: none;
    color: var(--color-secondary);
}

.login-card__title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.15;
}

.login-card__fields {
    align-self: center;
    display: grid;
    gap: 2rem;
    width: 100%;
}

.login-card__submit {
    width: 100%;
}

@media (max-width: 44rem) {
    .authentication-shell {
        padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 30rem) {
    .login-card {
        min-height: 30rem;
        padding-inline: clamp(1.5rem, 8vw, 2.25rem);
    }
}