/* Offseason brand: vector mark + sport-morph loader (see docs/DESIGN_SYSTEM.md, section 3.2).
 *
 * The mark's kit (stripes and shield) is drawn in currentColor, so its tone lives here:
 * navy #1B2D4F on light surfaces, #B4BDD0 (the dark theme's Ink 2) on dark ones. The coral 0
 * is fixed in the SVG and never changes. The vector replaces the old light plate, so any
 * plate, ring, padding, or glow a legacy class adds is cancelled on .os-mark.
 */
:root { --os-mark-kit: #1B2D4F; }
[data-theme="dark"] { --os-mark-kit: #B4BDD0; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --os-mark-kit: #B4BDD0; }
}

.os-mark {
    color: var(--os-mark-kit);
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    /* the vector needs no plate in any theme */
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
}
.os-mark--light { color: #1B2D4F; }
.os-mark--dark { color: #B4BDD0; }

/* ---- loader: boot and full-page loading only (never inline spinners or skeletons) ---- */
.os-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 40vh;
    padding: 32px 16px;
    text-align: center;
}
.os-loader--fill { min-height: 100vh; min-height: 100dvh; }
.os-loader-mark { animation: osb-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.os-loader-mark .osb-static { display: none; }
.os-loader-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--os-ink-3, #646E89);
}
[data-theme="dark"] .os-loader-label { color: var(--os-ink-3, #76819C); }

@keyframes osb-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes osb-pulse {
    from { opacity: 1; }
    to { opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce) {
    .os-loader-mark { animation: osb-pulse 1.4s ease-in-out 0.4s infinite alternate; }
    .os-loader-mark .osb-static { display: inline; }
    .os-loader-mark .osb-anim { display: none; }
}

/* Auth-to-app handoff: the loader covers the page while the app loads behind it. */
.os-handoff {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--os-paper, #FAFAFA);
}
[data-theme="dark"] .os-handoff { background: var(--os-paper, #0A0E1A); }
.os-handoff .os-loader { min-height: 0; }

/* Full-page loads: reveal the loader only if the wait passes 300ms. */
.os-load-late { animation: os-load-late .2s ease-out .3s both; }
@keyframes os-load-late { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .os-load-late { animation: none; } }