/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* The framework toggles components-reconnect-show / -retrying / -failed / -paused / -resume-failed
   on the dialog. Every state shows the same card; only "failed" adds the refresh button. */

#components-reconnect-modal[b-lid7lu024t] {
    width: min(23rem, calc(100vw - 2rem));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--cab-radius-lg);
    background: var(--cab-surface);
    color: var(--cab-ink);
    font-family: var(--cab-font-body);
    box-shadow: var(--cab-shadow-3);
    overflow: hidden;
    opacity: 0;
    transition: display .3s allow-discrete, overlay .3s allow-discrete;
    animation: reconnect-fade-out-b-lid7lu024t .3s both;
}

    #components-reconnect-modal[open][b-lid7lu024t] {
        animation: reconnect-rise-b-lid7lu024t .6s var(--cab-ease) .2s both;
    }

    #components-reconnect-modal[b-lid7lu024t]::backdrop {
        background: rgba(12, 24, 46, .55);
        backdrop-filter: blur(4px);
        animation: reconnect-fade-in-b-lid7lu024t .4s ease-out both;
    }

.components-reconnect-container[b-lid7lu024t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.25rem 2rem 2rem;
    text-align: center;
    background: radial-gradient(120% 60% at 50% 0%, var(--cab-ice-soft) 0%, rgba(230, 245, 251, 0) 70%);
}

/* ---------- logo with a slow sonar pulse ---------- */
.reconnect-mark[b-lid7lu024t] {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
}

.reconnect-disc[b-lid7lu024t] {
    position: relative;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--cab-surface);
    box-shadow: var(--cab-shadow-2), inset 0 0 0 1px var(--cab-line);
}

    .reconnect-disc img[b-lid7lu024t] {
        width: auto;
        height: 56px;
        animation: reconnect-breathe-b-lid7lu024t 2.4s ease-in-out infinite;
    }

.reconnect-ring[b-lid7lu024t] {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid var(--cab-cyan);
    opacity: 0;
    animation: reconnect-pulse-b-lid7lu024t 2.4s cubic-bezier(.2, .6, .4, 1) infinite;
}

    .reconnect-ring + .reconnect-ring[b-lid7lu024t] {
        animation-delay: 1.2s;
    }

/* ---------- wordmark, same lockup as the header ---------- */
.reconnect-brand[b-lid7lu024t] {
    margin-top: .9rem;
    font-family: var(--cab-font-display);
    line-height: 1.1;
}

    .reconnect-brand strong[b-lid7lu024t] {
        display: block;
        font-weight: 600;
        font-size: 1.1rem;
        letter-spacing: .02em;
    }

    .reconnect-brand span[b-lid7lu024t] {
        font-size: .66rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--cab-muted);
    }

#components-reconnect-message[b-lid7lu024t] {
    margin: 1.4rem 0 0;
    font-size: .95rem;
    color: var(--cab-body);
}

/* ---------- indeterminate progress ---------- */
.reconnect-progress[b-lid7lu024t] {
    position: relative;
    width: 100%;
    max-width: 13rem;
    height: 4px;
    margin-top: 1.1rem;
    border-radius: 999px;
    background: var(--cab-line);
    overflow: hidden;
}

    .reconnect-progress span[b-lid7lu024t] {
        position: absolute;
        inset: 0 auto 0 0;
        width: 40%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--cab-sky), var(--cab-cyan) 45%, var(--cab-navy));
        animation: reconnect-slide-b-lid7lu024t 1.6s ease-in-out infinite;
    }

/* ---------- fallback, only once the framework has given up ---------- */
#components-reconnect-button[b-lid7lu024t] {
    display: none;
    margin-top: 1.5rem;
    padding: .55rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--cab-navy);
    color: #fff;
    font: 600 .85rem var(--cab-font-body);
    cursor: pointer;
    transition: background-color .15s ease;
}

#components-reconnect-modal.components-reconnect-failed #components-reconnect-button[b-lid7lu024t] {
    display: inline-block;
}

#components-reconnect-button:hover[b-lid7lu024t] {
    background: var(--cab-navy-deep);
}

#components-reconnect-button:focus-visible[b-lid7lu024t] {
    outline: 0;
    box-shadow: var(--cab-focus);
}

@keyframes reconnect-rise-b-lid7lu024t {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes reconnect-fade-in-b-lid7lu024t {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes reconnect-fade-out-b-lid7lu024t {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes reconnect-pulse-b-lid7lu024t {
    0% {
        transform: scale(1);
        opacity: .55;
    }

    100% {
        transform: scale(1.32);
        opacity: 0;
    }
}

@keyframes reconnect-breathe-b-lid7lu024t {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes reconnect-slide-b-lid7lu024t {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(260%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[open][b-lid7lu024t] {
        animation: reconnect-fade-in-b-lid7lu024t .2s ease-out both;
    }

    .reconnect-ring[b-lid7lu024t],
    .reconnect-disc img[b-lid7lu024t] {
        animation: none;
    }

    /* app.css stops all motion here, so show a full, still bar rather than a stranded stub. */
    .reconnect-progress span[b-lid7lu024t] {
        animation: none;
        width: 100%;
        opacity: .7;
    }
}