/* Bootstrap UI is removed by Blazor as soon as the application renders. */
.app-loading {
    --loading-background: #F6F8FB;
    --loading-text: #142033;
    --loading-muted: #5E6B7D;
    --loading-accent: #0F766E;
    --loading-highlight: #036A91;
    --loading-track: #DCE6EC;
    position: fixed;
    inset: 0;
    display: grid;
    place-items: safe center;
    overflow: auto;
    box-sizing: border-box;
    padding: max(2rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
             max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
    background: var(--loading-background);
    color: var(--loading-text);
    font-family: Roboto, system-ui, sans-serif;
    text-align: center;
}

.app-loading-content {
    width: min(100%, 28rem);
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-loading-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: min(9rem, 100%);
    aspect-ratio: 1;
    margin: 0 auto 2rem;
}

/* The fine outer arc conveys activity; the inner ring shows real WASM progress. */
.app-loading-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-top-color: var(--loading-highlight);
    border-radius: 50%;
    animation: loading-orbit 2.4s linear infinite;
}

.app-loading-mark img {
    position: absolute;
    width: 44.444%;
    height: auto;
    border-radius: 0.75rem;
}

.loading-progress {
    display: block;
    width: 88.889%;
    height: auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--loading-track);
    stroke-width: 3;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

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

.app-loading-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--loading-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.app-loading h1 {
    margin: 0;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.app-loading-message {
    margin: 0.75rem 0 0;
    color: var(--loading-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.loading-progress-text {
    min-height: 1.5rem;
    margin: 1.5rem 0 0;
    color: var(--loading-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

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

/* Blazor Hybrid does not supply a download percentage. */
.app-loading--native .loading-progress circle:last-child {
    stroke-dasharray: 32%, 500%;
}

.app-loading--native .loading-progress-text::after {
    content: "Getting ready";
}

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

@media (prefers-color-scheme: dark) {
    .app-loading {
        --loading-background: #07111F;
        --loading-text: #EEF4FF;
        --loading-muted: #A7B5C9;
        --loading-accent: #6EE7C8;
        --loading-highlight: #63D8FF;
        --loading-track: #20364D;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-mark::before { animation: none; }
    .loading-progress circle:last-child { transition: none; }
}

#blazor-error-ui { display: none; box-sizing: border-box; background: #fff3cd; color: #3d3210; bottom: 0; padding: 1rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }