/*
 * "Loading…" while the server sends the app's first screen (App.razor). Prerendering is off, so before the circuit's
 * first render the body holds only this, the Routes marker and the reconnect modal. While the modal still follows this
 * directly, nothing of the app is on the page yet; once the app's first element lands between them, this hides.
 * Hidden by default, so a browser without :has() never shows it (and never shows it over the app).
 */
.app-loading { display: none; }

@supports selector(:has(+ *)) {
    .app-loading:has(+ #components-reconnect-modal) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 32vh 16px 0;
        font: 500 14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
        color: #5f6672;
    }
}

.app-loading-spin {
    width: 14px;
    height: 14px;
    border: 2px solid #d5d8de;
    border-top-color: #5f6672;
    border-radius: 50%;
    animation: app-loading-spin .9s linear infinite;
}

@keyframes app-loading-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .app-loading-spin { animation: none; }
}