.recovery-shell {
    --recovery-ink: var(--mc-ink, #082d4d);
    --recovery-cobalt: var(--mc-cobalt, #1262ff);
    --recovery-paper: var(--mc-paper, #f7f4ed);
    position: relative;
    z-index: 1200;
}

.recovery-network-band {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 42rem;
    min-height: 3rem;
    margin-inline: auto;
    padding: .75rem 1rem;
    color: var(--recovery-paper);
    background: var(--recovery-ink);
    border: 1px solid currentColor;
    box-shadow: 0 .5rem 2rem rgba(8, 45, 77, .16);
    pointer-events: none;
}

.recovery-network-band[hidden],
.recovery-session[hidden] {
    display: none;
}

.recovery-network-band > span {
    width: .625rem;
    height: .625rem;
    flex: 0 0 auto;
    background: #f1b24a;
    border-radius: 50%;
}

.recovery-network-band p {
    margin: 0;
    font: 600 .9rem/1.35 var(--mc-font-sans, Cabin, sans-serif);
}

.recovery-session {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(8, 45, 77, .38);
    pointer-events: auto;
}

.recovery-session__surface {
    width: min(100%, 32rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--recovery-ink);
    background: var(--recovery-paper);
    border: 1px solid rgba(8, 45, 77, .2);
    box-shadow: 0 1rem 3rem rgba(8, 45, 77, .18);
}

.recovery-session__eyebrow {
    margin: 0 0 .75rem;
    color: var(--recovery-cobalt);
    font: 700 .75rem/1.2 var(--mc-font-sans, Outfit, sans-serif);
    letter-spacing: .12em;
}

.recovery-session h2 {
    margin: 0;
    font: 600 clamp(1.75rem, 5vw, 2.6rem)/1 var(--mc-font-sans, Outfit, sans-serif);
}

.recovery-session h2 + p {
    margin: 1rem 0 0;
    font: 400 1rem/1.55 var(--mc-font-sans, Cabin, sans-serif);
}

.recovery-session__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.recovery-session__actions > * {
    min-height: 44px;
}

.recovery-session :focus-visible,
.recovery-network-band :focus-visible {
    outline: 3px solid var(--recovery-cobalt);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .recovery-network-band,
    .recovery-session__surface {
        animation: none !important;
        transition: none !important;
    }
}