/* login.css - the staff sign-in page only.

   Linked from App.razor with the other page sheets (REDESIGN-PLAN 1.6), and
   every selector is under .login so no other page is touched. One centered
   card on a sage ground with the brand wash, the logo mark over the title,
   full-width fields and one full-width primary action. Tokens only. */

.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    min-height: min(46rem, 78vh);
    padding-block: var(--space-7);
    padding-inline: 1.25rem;
    background-color: var(--bg-sage);
    background-image:
        radial-gradient(40rem 30rem at 85% 10%, color-mix(in srgb, var(--violet-soft) 18%, transparent), transparent 70%),
        radial-gradient(40rem 34rem at 10% 100%, color-mix(in srgb, var(--sage-soft) 30%, transparent), transparent 70%);
}

.login__card {
    width: min(100%, 26rem);
    padding: var(--space-6) var(--space-5) var(--space-5);
    background-color: var(--bg-raised);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--teal);
    border-radius: var(--radius-card);
    text-align: center;
}

.login__mark {
    width: 64px;
    height: auto;
    margin: 0 auto var(--space-4);
}

.login__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-display);
}

.login__lede {
    margin: var(--space-2) auto 0;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.login__error {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--error);
    border-radius: 0 var(--radius) var(--radius) 0;
    background-color: color-mix(in srgb, var(--error) 7%, var(--bg-raised));
    color: var(--error);
    font-size: var(--fs-small);
    font-weight: 600;
    text-align: left;
    max-width: none;
}

.login-form {
    margin-top: var(--space-5);
    text-align: left;
}

.login-form__field + .login-form__field {
    margin-top: var(--space-4);
}

.login-form__field .input {
    width: 100%;
}

.login-form__remember {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin: var(--space-3) 0 0;
    font-weight: 500;
    cursor: pointer;
}

.login-form__remember input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--teal-deep);
}

.login-form__submit {
    width: 100%;
    margin-top: var(--space-4);
}

.login__aside {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    text-align: center;
}

@media (min-width: 560px) {
    .login__card {
        padding: var(--space-6);
    }
}