/*
    The page colors before the app exists. The defaults are static copies of Mtc.Color.SurfacePage and
    Mtc.Color.TextBody in MastersGraphite, the app's default theme, since the kit's tokens do not exist before the
    runtime starts. index.html's head script overrides them with the look this browser showed last (data-theme plus
    the exact colors); with nothing kept, the system's light or dark setting decides.
*/
:root {
    --page-background: #f4f7f8;
    --page-foreground: #1e252b;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page-background: #161b20;
        --page-foreground: #dae1e6;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --page-background: #161b20;
    --page-foreground: #dae1e6;
    color-scheme: dark;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    font-family: system-ui, sans-serif;
    background: var(--page-background);
    color: var(--page-foreground);
}

#out {
    height: 100%;
}

/* The kit's Barlow Regular (OFL, fonts/OFL.txt), the face the app's startup screen uses for the same words. */
@font-face {
    font-family: 'Barlow';
    src: url('fonts/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/*
    The loading screen shown until the app's own startup screen is drawn underneath it. Laid out exactly as
    Client/Views/Shell/StartupView.axaml lays out its copy: a 96 px badge centered in the viewport, the product name
    16 px under it, then each line of text 4 px under the one before. Change one and change the other.
*/
.app-splash {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr 96px 1fr;
    justify-items: center;
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    pointer-events: none;
    transition: opacity 200ms linear;
    background: var(--page-background);
    color: var(--page-foreground);
}

.app-splash > svg {
    grid-row: 2;
    display: block;
}

.app-splash-text {
    grid-row: 3;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    padding: 0 24px;
    text-align: center;
}

.app-splash-title {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.4px;
}

.app-splash-status {
    font-size: 13px;
    line-height: 20px;
    opacity: 0.75;
}

/* Revealed after 8 s by animation-delay, so it needs nothing running on the page beyond CSS. */
.app-splash-status-slow {
    visibility: hidden;
    animation: app-splash-reveal 0s 8s forwards;
}

@keyframes app-splash-reveal {
    to { visibility: visible; }
}

/* Set by splash.js once the app's startup screen is on the canvas underneath. */
.app-splash.splash-close {
    opacity: 0;
}