/* The page is only the canvas host: everything visible is Avalonia. The one thing CSS owns is the gap before the
   first frame, so it paints the shell's own chrome colour instead of flashing white.
   #0C111D is DpmBarBrush (Theme/Semantic.axaml) — deliberately variant-invariant there, which is why this needs no
   prefers-color-scheme branch: the top bar is that colour in both themes. */

html,
body,
#out {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* The session layer is absolute inside this, so it has to be the positioning context or it resolves to the viewport. */
#out {
    position: relative;
}

body {
    background: #0C111D;
    color: #FFFFFF;
    font-family: "Open Sans", system-ui, sans-serif;
}

/* ---- Boot splash ------------------------------------------------------------------------------------------ */
/* The standard modern splash: centred product mark, wordmark, a thin indeterminate progress line. Painted before
   any runtime arrives and faded out by main.js when Avalonia's canvas exists; ~14 MB of wasm means this is the
   first impression, so it carries the app's own chrome colour and type instead of a sentence of plain text. */

#splash {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    opacity: 1;
    transition: opacity 320ms ease;
    width: 100%;
}

#splash.splash-out {
    opacity: 0;
    pointer-events: none;
}

.splash-logo {
    animation: splash-breathe 2.4s ease-in-out infinite;
    border-radius: 16px;
    height: 72px;
    width: 72px;
}

.splash-name {
    color: #E8EAED;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-top: 20px;
}

.splash-name span {
    color: #9AA3B5;
    font-weight: 400;
}

.splash-track {
    background: #232838;
    border-radius: 999px;
    height: 3px;
    margin-top: 24px;
    overflow: hidden;
    position: relative;
    width: 200px;
}

.splash-bar {
    animation: splash-slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    background: linear-gradient(90deg, transparent, #3AA3FF, transparent);
    height: 100%;
    /* The travel is a transform, so the resting offset is the START of it and lives here rather than in the
       keyframes — see splash-slide for the arithmetic. */
    left: -40%;
    position: absolute;
    width: 40%;
    /* Promotes the bar to its own compositor layer for the whole boot. It is a 3px sliver, so the memory is
       nothing, and it guarantees the animation cannot be dragged back onto the main thread. */
    will-change: transform;
}

/* Empty in the happy path; the boot-failure message from main.js lands here instead of wiping the layout. */
.splash-status {
    color: #B9C0D4;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 18px;
    max-width: 360px;
    min-height: 20px;
    text-align: center;
}

/* transform, NOT left. `left` is a layout property, so the old version forced the browser to lay out and paint the
   page on every frame — for the entire runtime download and instantiation, which is the one stretch of this app's
   life where the main thread has real work to do and nothing to spare. A transform is composited and touches
   neither. The sibling .splash-logo has always animated transform/opacity; this is the same treatment.

   The arithmetic, since the units differ: translateX percentages are relative to the ELEMENT's own width, and the
   bar is 40% of the track. The old animation moved its left edge from -40% to 100% of the track, i.e. 140% of the
   track = 140/40 = 350% of the bar. So `left: -40%` above is the start, and 350% here is the same finish. */
@keyframes splash-slide {
    from { transform: translateX(0); }
    to { transform: translateX(350%); }
}

@keyframes splash-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.82; transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
    .splash-logo { animation: none; }
    .splash-bar { animation-duration: 2.8s; }
}

.boot {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

/* Divergence #12: this is a desktop-browser product, not mobile web — the mobile app is the answer on a phone. Done in
   CSS rather than in the app so it does not need 8 MB of runtime to say so, and it is reversible: a desktop window
   dragged narrow shows this and gets the app back when widened. main.js additionally skips booting on a device that is
   actually a phone (narrow AND a coarse pointer), which is the case where the download is pure waste.
   Not localized, and it cannot be: the app's string table is generated into C# and lives inside the payload this very
   screen exists to avoid downloading. */
#too-narrow {
    display: none;
}

@media (max-width: 700px) {
    #out {
        display: none;
    }

    /* position: fixed, not a normal block. The document stays wider than the viewport even with the canvas host hidden,
       so an in-flow centred box centres on THAT width and runs off the right edge — observed twice, including with
       width: 100vw, which is why this is anchored to the viewport instead. */
    #too-narrow {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        inset: 0;
        justify-content: center;
        padding: 24px;
        position: fixed;
        text-align: center;
    }

    #too-narrow > div {
        max-width: 320px;
    }

    #too-narrow h1 {
        font-size: 20px;
        font-weight: 600;
    }

    #too-narrow p {
        color: #B9C0D4;
        font-size: 14px;
        line-height: 1.5;
    }
}