:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f3f5f2;
    color: #17251d;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.25rem;
}

.auth-card {
    width: min(100%, 30rem);
    padding: clamp(1.5rem, 5vw, 2.5rem);
    border: 1px solid #cad4cc;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.75rem 2.5rem rgb(20 45 28 / 8%);
}

.auth-kicker {
    margin: 0 0 0.5rem;
    color: #356244;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auth-title {
    margin: 0;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    line-height: 1.1;
}

.auth-intro,
.auth-status,
.auth-help {
    line-height: 1.55;
}

.auth-status {
    padding: 0.8rem;
    border-left: 0.25rem solid #356244;
    background: #eef6f0;
}

.auth-form,
.auth-field {
    display: grid;
    gap: 0.6rem;
}

.auth-form {
    margin-top: 1.5rem;
    gap: 1.25rem;
}

.auth-label {
    font-weight: 700;
}

.auth-help {
    margin: 0;
    color: #4e5b52;
}

.auth-input {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    border: 2px solid #66766a;
    border-radius: 0.4rem;
    font: inherit;
}

.auth-code-input {
    letter-spacing: 0.18em;
}

.auth-input:focus,
.auth-button:focus,
.auth-secondary-action:focus {
    outline: 0.2rem solid #f2ae30;
    outline-offset: 0.15rem;
}

.auth-button {
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.4rem;
    background: #245638;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.auth-field-error,
.auth-error-summary {
    color: #9b1c1c;
    font-weight: 650;
}

.auth-error-summary:empty,
.auth-field-error:empty {
    display: none;
}

.auth-secondary-action {
    display: inline-block;
    margin-top: 1.25rem;
    color: #245638;
    font-weight: 650;
}