/* Shared cutover/maintenance overlay — SINGLE SOURCE OF TRUTH.
   Used by BOTH the installed-app overlay (MainLayout.razor) and the server-rendered
   503 page served to pre-shell visitors (Services Program.cs CutoverHtmlPage).
   The server page links this file directly; do not add component-scoped copies. */

.cn-cutover-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d1f23;
    color: #f5f5f5;
    padding: 24px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.cn-cutover-card {
    max-width: 560px;
    text-align: center;
}

.cn-cutover-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 275 / 64;
    object-fit: contain;
    margin: 0 auto 20px;
}

.cn-cutover-card h1 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    /* The global h1..h6 rule applies var(--cn-ink) (#1e2530), which is nearly
       invisible against the dark #1d1f23 overlay — especially in the OS dark
       mode where the theme calls for a dark background. Force light text so
       the heading is always readable. */
    color: #f5f5f5;
}

.cn-cutover-message {
    margin: 0 0 8px;
    opacity: 0.9;
    line-height: 1.5;
}

.cn-cutover-hint {
    margin: 0 0 20px;
    font-size: 0.85rem;
    opacity: 0.6;
}

.cn-cutover-spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border: 3px solid rgba(245, 245, 245, 0.25);
    border-top-color: #f5f5f5;
    border-radius: 50%;
    animation: cn-cutover-spin 0.8s linear infinite;
}

@keyframes cn-cutover-spin {
    to {
        transform: rotate(360deg);
    }
}