/* The host page's own styles (ADO 795): what the WEB page draws before Blazor exists. The boot palette
   (--startup-*, also read by the boot-error screen in index.html), html/body/#app, Blazor's hidden error bar, and
   the loading ring. Everything the UI draws is src/UI's css/app.css, served as _content/UI/css/app.css, which a
   second host (the Android app, ADO 797) loads as it is and pairs with its own page's styles. */

:root {
    --startup-bg: #FAFAFA;
    --startup-surface: #FFFFFF;
    --startup-text: #212121;
    --startup-muted: #5F6368;
    --startup-ring: #E0E0E0;
    /* A copy of PaletteLight.Primary in UI/Theme/SkyfleTheme.cs: this paints the WASM loading ring
       before Blazor exists, so it cannot read a --mud-palette-* variable. The dark value below is
       PaletteDark.Primary. SkyfleThemeTests.StartupAccent_InHostCss_IsEachPalettesPrimary fails when
       either copy drifts (ADO 360). */
    --startup-accent: #00798A;
    /* The text ON --startup-accent: the boot page's retry button in index.html. A copy of PaletteLight's
       PrimaryContrastText, and the dark value below of PaletteDark's. SkyfleThemeTests.
       StartupOnAccent_InHostCss_IsEachPalettesPrimaryContrastText fails when either copy drifts (ADO 719). */
    --startup-on-accent: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
    :root {
        --startup-bg: #121212;
        --startup-surface: #1E1E1E;
        --startup-text: #E0E0E0;
        --startup-muted: #B0B0B0;
        --startup-ring: #2C2C2C;
        --startup-accent: #26C6DA;
        --startup-on-accent: #102027;
    }
}

html {
    color-scheme: light dark;
}

body {
    background-color: var(--mud-palette-background, var(--startup-bg));
    color: var(--mud-palette-text-primary, var(--startup-text));
}

#app {
    min-height: 100vh;
    background-color: var(--mud-palette-background, var(--startup-bg));
    color: var(--mud-palette-text-primary, var(--startup-text));
}

/* The default full-width error banner stays hidden: the offline bar (ADO 898) says when the
   connection is gone, and the error boundary in MainLayout says when a page broke.
   ADO 792: and the root boundary in App.razor catches what MainLayout's cannot (the landing pages,
   the layouts), in Skyfle's own words and language, with Retry. App's own start-up catches its
   failures. So nothing is left for this bar to say, and it would say it in English only. */
#blazor-error-ui {
    display: none !important;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--startup-ring);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--startup-accent);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: var(--startup-muted);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }