/* ---------------------------------------------------------------------------
   Application chrome: the startup splash and the Blazor error bar. Everything to do with
   the Hansell design language lives in tokens.css / typography.css / components.css.
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--primary); }

/* --- Startup splash (shown by index.html until Blazor takes over) --------- */
.startup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 100dvh;
    background-color: var(--background);
    color: var(--on-background);
}

.startup__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--outline-variant);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: startup-spin 900ms linear infinite;
}

.startup__text { font-size: 0.875rem; color: var(--on-surface-variant); }

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

@media (prefers-reduced-motion: reduce) {
    .startup__spinner { animation-duration: 3s; }
}

/* --- Blazor error bar ----------------------------------------------------- */
/* Hidden until Blazor unhandles an exception, at which point it sets display:block inline. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: 12px 16px 12px 20px;
    background: var(--error-container);
    color: var(--on-error-container);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 8px;
    right: 12px;
    cursor: pointer;
}