:root {
    color-scheme: light;
    --recovery-ink: #243128;
    --recovery-muted: #667064;
    --recovery-green: #405336;
    --recovery-border: #d9ded4;
    --recovery-paper: #fbfaf6;
    --recovery-white: #fffefa;
}

* { box-sizing: border-box; }

body.password-recovery {
    min-height: 100vh;
    margin: 0;
    background: var(--recovery-paper);
    color: var(--recovery-ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

.recovery-skip {
    position: absolute;
    top: -4rem;
    left: 1rem;
    z-index: 2;
    padding: .7rem 1rem;
    background: var(--recovery-white);
}

.recovery-skip:focus { top: 1rem; }

.recovery-header {
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    padding: .8rem clamp(1rem, 5vw, 4rem);
    border-bottom: 1px solid var(--recovery-border);
    background: var(--recovery-white);
}

.recovery-brand {
    color: var(--recovery-ink);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.55rem;
    letter-spacing: .18em;
    line-height: 1.1;
    text-decoration: none;
}

.recovery-brand span {
    display: block;
    margin-top: .3rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .58rem;
    letter-spacing: .12em;
}

.recovery-main {
    width: min(100% - 2rem, 38rem);
    margin: clamp(2.5rem, 9vh, 6rem) auto 3rem;
}

.recovery-card {
    padding: clamp(1.35rem, 5vw, 2.75rem);
    border: 1px solid var(--recovery-border);
    background: var(--recovery-white);
    box-shadow: 0 1rem 3rem rgb(36 49 40 / 5%);
}

.recovery-card h1 {
    margin: .2rem 0 .8rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
}

.recovery-card p { margin: .75rem 0; }

.recovery-eyebrow {
    color: var(--recovery-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.recovery-note, .recovery-status { color: var(--recovery-muted); }
.recovery-card a:not(.recovery-primary) { color: var(--recovery-green); }

.recovery-form { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
.recovery-field { display: grid; gap: .4rem; }
.recovery-field label { font-weight: 700; }
.recovery-field input {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .8rem;
    border: 1px solid #aeb8aa;
    border-radius: 0;
    background: #fff;
    color: var(--recovery-ink);
    font: inherit;
}

.recovery-field input:focus-visible, .recovery-card a:focus-visible, .recovery-card button:focus-visible {
    outline: 3px solid #80946c;
    outline-offset: 2px;
}

.recovery-primary {
    display: inline-flex;
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.15rem;
    border: 1px solid var(--recovery-green);
    background: var(--recovery-green);
    color: #fff !important;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.recovery-primary:hover { background: #33432b; }
.recovery-primary:disabled { cursor: not-allowed; opacity: .55; }
.recovery-link-button { margin-top: 1rem; }
.recovery-back { display: inline-block; margin-bottom: 1rem; }
.recovery-alert { padding: .8rem 1rem; border-left: 4px solid #9b654b; background: #faf1e9; }
.recovery-alert ul { margin: .25rem 0; padding-left: 1.25rem; }
.recovery-footer { padding: 0 1rem 2rem; color: var(--recovery-muted); font-size: .85rem; text-align: center; }
[hidden] { display: none !important; }

@media (max-width: 36rem) {
    .recovery-header { min-height: 4.75rem; }
    .recovery-main { width: min(100% - 1.25rem, 38rem); margin-top: 1.5rem; }
    .recovery-card { padding: 1.2rem; }
}