/* Native modal top layer stays above the navigation loading overlay. */
.sp-reconnect {
    width: min(32rem, calc(100vw - 2rem));
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 1.25rem;
    border: 1px solid var(--ds-border);
    color: var(--ds-text-primary);
    background: var(--ds-surface);
    font-family: var(--sp-font-family);
    text-align: center;
}
.sp-reconnect::backdrop { background: var(--ds-overlay); }
/* Keep navigation state intact and restore its presentation when reconnect closes. */
body:has(.sp-reconnect[open]) .navigation-loading-overlay {
    visibility: hidden;
    transition: none;
}
.sp-reconnect h2 { color: inherit; font-size: 1.25rem; }
.sp-reconnect p { margin-block: 1rem; }
.sp-reconnect p, .sp-reconnect button, .sp-reconnect-spinner { display: none; }
.components-reconnect-show .sp-reconnect-connecting,
.components-reconnect-retrying .sp-reconnect-waiting,
.components-reconnect-failed .sp-reconnect-failed,
.components-reconnect-rejected .sp-reconnect-rejected,
.components-reconnect-paused .sp-reconnect-paused,
.components-reconnect-resume-failed .sp-reconnect-failed { display: block; }
.components-reconnect-failed .sp-reconnect-retry,
.components-reconnect-rejected .sp-reconnect-reload,
.components-reconnect-paused .sp-reconnect-resume,
.components-reconnect-resume-failed .sp-reconnect-resume { display: inline-block; }
.components-reconnect-show .sp-reconnect-spinner,
.components-reconnect-retrying .sp-reconnect-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: .2rem solid var(--ds-border);
    border-top-color: var(--ds-primary);
    border-radius: 50%;
    animation: sp-reconnect-spin 1s linear infinite;
}
@keyframes sp-reconnect-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sp-reconnect-spinner { animation: none !important; }
}