.login-shell {
    background: radial-gradient(ellipse at 15% 12%, #d9ebe2, transparent 55%), #f3f7f5;
    color: #172c25;
}

.login-shell main {
    display: grid;
    align-content: center;
    gap: 1rem;
    min-height: 100dvh;
    max-width: 74rem;
    padding: clamp(1rem, 4vw, 3.5rem);
}

.login-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d3e0da;
    border-radius: 1.5rem;
    box-shadow: 0 1.5rem 4rem #183d2c1c;
}

.login-brand, .login-access { padding: clamp(2rem, 5vw, 4rem); }

.login-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    background: linear-gradient(145deg, #0a3027, #155744);
    color: #fff;
}

.login-brand::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 28% -32% -55% 20%;
    border-radius: 50%;
    background: repeating-radial-gradient(ellipse, transparent 0 21px, #b0dec41c 22px 23px);
    transform: rotate(-28deg);
    mask-image: linear-gradient(135deg, transparent 12%, #000 65%);
}

.login-government, .login-brand-caption { display: flex; align-items: center; gap: .85rem; }
.login-government { font-size: .9rem; color: #d4e9df; line-height: 1.35; }
.login-government strong { color: #fff; }
.login-emblem { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; flex: none; border-radius: .9rem; background: #fff; }
.login-emblem img { object-fit: contain; }
.login-kicker { color: #176049; font-size: .73rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.login-brand .login-kicker { color: #cae9ae; }
.login-brand h1 { margin-block: .65rem 1rem; max-width: 15ch; font-size: clamp(2rem, 3.6vw, 3.4rem); text-wrap: balance; }
.login-brand-copy > p:last-child { max-width: 33ch; color: #ddede5; }
.login-brand-caption { width: fit-content; padding: .55rem .8rem; border: 1px solid #ffffff47; border-radius: 2rem; background: #0a3027; font-size: .8rem; }
.login-brand-caption .icon { width: 1rem; height: 1rem; }

.login-access { align-self: center; min-width: 0; }
.login-access h2 { margin-block: .35rem; font-size: clamp(2rem, 3vw, 2.65rem); line-height: 1.15; letter-spacing: -.04em; }
.login-access-heading > p:last-child { color: #50635a; }
.login-form { display: grid; align-items: stretch; gap: 1.1rem; margin-top: 1.6rem; }
.login-form .validation-summary-valid { display: none; }
.login-form .validation-summary-errors { padding: .65rem .85rem; border: 1px solid #efc3bc; border-radius: .6rem; background: #fff3f0; color: #832719; }
.login-form .validation-summary-errors ul { margin: 0; padding-inline-start: 1.2rem; }
.login-field label { margin-bottom: .4rem; color: #233d33; font-size: .9rem; }
.login-field input { min-height: 3.2rem; padding-inline: .85rem; border-color: #aebfb6; border-radius: .65rem; }
.login-field input:focus { border-color: #1b7557; }
.login-shell :focus-visible { outline-color: #1b7557; }
.login-password { position: relative; }
.login-password input.has-toggle { padding-inline-end: 8.5rem; }
.login-password-toggle { position: absolute; inset: .25rem .25rem .25rem auto; min-height: 0; background: transparent; border-color: transparent; color: #185740; font-size: .84rem; }
.login-password-toggle[hidden] { display: none; }
.login-password-toggle:hover { background: #e5f2ea; }
.login-submit { justify-content: space-between; min-height: 3.25rem; margin-top: .25rem; padding-inline: 1rem; border-color: #155740; border-radius: .65rem; background: #155740; }
.login-submit:hover { background: #0c4432; }
.login-submit:active { background: #082f23; }
.login-recovery { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid #dce7e0; font-size: .9rem; }
.login-recovery h3 { margin-bottom: .2rem; font-size: inherit; }
.login-recovery a { color: #155740; }
.login-recovery a:hover { text-decoration-thickness: .14em; }

@media (max-width: 48rem) {
    .login-card { grid-template-columns: minmax(0, 1fr); max-width: 33rem; width: 100%; margin-inline: auto; }
    .login-brand { gap: 1.35rem; }
    .login-brand, .login-access { padding: clamp(1.25rem, 5vw, 2rem); }
    .login-brand h1 { max-width: 21ch; }
    .login-brand-caption { display: none; }
}