html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    width: 100%;
    height: 100%;
}

/* Blazor loading spinner — replaces #app content while WASM downloads */
#app {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* --primaryfull, matching the iOS LaunchScreen and the WebXR enter gate, so the whole
       boot chain is one unbroken teal instead of black → black → teal.  Blazor mounts into
       #app, so this stays behind #splashScreen too.  html/body keeps #000 on purpose: it is
       the backdrop behind the transparent GL canvas during AR, not a boot surface. */
    background: #00CCBC;
}

/* Boot loader (index.html) and splash (Index.razor) share this markup so they read as one screen:
   the icon is drawn as a single clockwise stroke, the wordmark fades in, and it holds. The splash
   has no .boot-anim, so it is simply the finished frame. Time-based on purpose: Blazor does not
   always report --blazor-load-percentage. */
#bootLoader {
    position: fixed;
    inset: 0;
    z-index: 999;           /* under #blazor-error-ui (1000) so a failed boot still shows its error */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00CCBC;
    transition: opacity 0.8s ease;
}

#bootLoader.boot-loader-out {
    opacity: 0;
    pointer-events: none;
}

.brand-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.brand-logo {
    display: block;
    width: min(70vw, 16rem);
    height: auto;
    overflow: visible;
}

.brand-icon {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linejoin: round;
    /* Dash a hair longer than the path so the closing seam at the tip has no gap. */
    stroke-dasharray: 1.01 3;
    stroke-dashoffset: 0;
}

.brand-letters { fill: #fff; }

/* "BETA" under the splash logo on the beta host (Index.razor). */
.splash-beta {
    display: inline-block;
    margin: 0.9rem 0 0;
    padding: 0.2rem 0.8rem;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    /* The boot loader cannot know this is a beta run, so the pill fades in rather than popping. */
    animation: brand-fade-in 0.8s ease-out both;
}

@keyframes brand-fade-in { from { opacity: 0; } to { opacity: 1; } }

.brand-status {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
}

.brand-status.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, 'Loading...');
}

.boot-anim .brand-icon {
    stroke-dashoffset: 1.01;
    animation: brand-draw 1.8s ease-in-out 0.2s forwards;
}

.boot-anim .brand-letters,
.boot-anim .brand-status {
    opacity: 0;
    animation: brand-fade 0.8s ease-out 2.1s forwards;
}

@keyframes brand-draw { to { stroke-dashoffset: 0; } }
@keyframes brand-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .boot-anim .brand-icon { animation: none; stroke-dashoffset: 0; }
    .boot-anim .brand-letters, .boot-anim .brand-status { animation: none; opacity: 1; }
}

#blazor-error-ui {
    background: #1a1a1a;
    color: #f44;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.5);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
}

#blazor-error-ui .reload {
    color: #fa0;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: #888;
}

/* ── Design tokens (from Figma styleguide) ───────────────────────────────── */
:root {
    /* The top inset the HUD and screens clear: the notch / status bar (env(), live with
       viewport-fit=cover) or, in the browser's fullscreen mode, a status-bar-sized gap. Android
       Chrome reports no inset there although the camera cut-out and the swipe-down area remain.
       ui.js (tsUpdateFullscreenTopGap) sets --ts-fullscreen-top-gap. */
    --ts-safe-top: max(env(safe-area-inset-top, 0px), var(--ts-fullscreen-top-gap, 0px));
    --primaryfull:          rgba(0, 204, 188, 1);
    --primaryshade-1:       rgba(46, 155, 140, 1);
    --primaryshade-2:       rgba(33, 130, 116, 1);
    --secondaryfull:        rgba(31, 55, 103, 1);
    --alert-warning:        rgba(255, 210, 12, 1);
    --alert-success:        rgba(114, 214, 42, 1);
    --alert-error:          rgba(250, 72, 86, 1);
    --backgroundlight:      rgba(255, 255, 255, 1);
    --background-dark:      rgba(4, 11, 23, 1);
    --sheet-light:          rgba(255, 255, 255, 1);
    --sheetdark:            rgba(0, 4, 12, 1);
    --texton-lightregular:  rgba(37, 39, 41, 1);
    --texton-lightsecondary:rgba(95, 100, 108, 1);
    --text-on-light-tertiary:rgba(163, 167, 174, 1);
    --texton-dark-regular:  rgba(250, 250, 250, 1);
    --texton-darksecondary: rgba(188, 188, 188, 1);
    --texton-darktertiary:  rgba(119, 121, 125, 1);
    --texton-primary-regular:rgba(255, 255, 255, 1);
    --greys-line:           rgba(198, 198, 200, 1);
    --greysinactive:        rgba(128, 133, 159, 1);
    --header-shadow:        0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    --text-over-image:      0px 1px 8px 0px rgba(0, 0, 0, 0.33), 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
    --drop-shadow:          0px 1px 2px 0px rgba(0, 0, 0, 0.15);

    /* Colour aliases */
    --texton-light-regular: rgba(37, 39, 41, 1);     /* same as --texton-lightregular */

    /* Typography tokens */
    --large-title-font-family: "SF Pro Display", Helvetica;
    --large-title-font-weight: 400;
    --large-title-font-size:   34px;
    --large-title-letter-spacing: 0px;
    --large-title-line-height: 41px;
    --large-title-font-style:  normal;

    --title-1-font-family: "SF Pro Display", Helvetica;
    --title-1-font-weight: 500;
    --title-1-font-size:   28px;
    --title-1-letter-spacing: 0px;
    --title-1-line-height: 34px;
    --title-1-font-style:  normal;

    --title-2-font-family: "SF Pro Display", Helvetica;
    --title-2-font-weight: 500;
    --title-2-font-size:   22px;
    --title-2-letter-spacing: 0px;
    --title-2-line-height: 28px;
    --title-2-font-style:  normal;

    --title-3-font-family: "SF Pro Display", Helvetica;
    --title-3-font-weight: 500;
    --title-3-font-size:   20px;
    --title-3-letter-spacing: 0px;
    --title-3-line-height: 24px;
    --title-3-font-style:  normal;

    --body-font-family: "SF Pro Text", Helvetica;
    --body-font-weight: 400;
    --body-font-size:   17px;
    --body-letter-spacing: 0px;
    --body-line-height: 22px;
    --body-font-style:  normal;

    --body-medium-font-family: "SF Pro Text", Helvetica;
    --body-medium-font-weight: 500;
    --body-medium-font-size:   17px;
    --body-medium-letter-spacing: 0px;
    --body-medium-line-height: 22px;
    --body-medium-font-style:  normal;

    --body-bold-font-family: "SF Pro Text", Helvetica;
    --body-bold-font-weight: 400;
    --body-bold-font-size:   17px;
    --body-bold-letter-spacing: -0.408px;
    --body-bold-line-height: 22px;
    --body-bold-font-style:  normal;

    --subheadline-medium-font-family: "SF Pro Text", Helvetica;
    --subheadline-medium-font-weight: 500;
    --subheadline-medium-font-size:   15px;
    --subheadline-medium-letter-spacing: 0px;
    --subheadline-medium-line-height:  20px;
    --subheadline-medium-font-style:   normal;

    --caption-semibold-font-family: "SF Pro Text", Helvetica;
    --caption-semibold-font-weight: 500;
    --caption-semibold-font-size:   11px;
    --caption-semibold-letter-spacing: 0px;
    --caption-semibold-line-height: 13px;
    --caption-semibold-font-style:  normal;

    --navigation-label-font-family: "SF Pro Text", Helvetica;
    --navigation-label-font-weight: 400;
    --navigation-label-font-size:   10px;
    --navigation-label-letter-spacing: -0.24px;
    --navigation-label-line-height: 12px;
    --navigation-label-font-style:  normal;

    --footnote-font-family: "SF Pro Text", Helvetica;
    --footnote-font-weight: 400;
    --footnote-font-size:   13px;
    --footnote-letter-spacing: 0px;
    --footnote-line-height: 18px;
    --footnote-font-style:  normal;

    --callout-font-family:  "SF Pro Text", Helvetica;
    --callout-font-weight:  400;
    --callout-font-size:    16px;
    --callout-letter-spacing: 0px;
    --callout-line-height:  21px;
    --callout-font-style:   normal;

    --headline-font-family: "SF Pro Text", Helvetica;
    --headline-font-weight: 500;
    --headline-font-size:   17px;
    --headline-letter-spacing: 0px;
    --headline-line-height: 22px;
    --headline-font-style:  normal;

    --subheadline-font-family: "SF Pro Text", Helvetica;
    --subheadline-font-weight: 300;
    --subheadline-font-size:   15px;
    --subheadline-letter-spacing: 0px;
    --subheadline-line-height:  20px;
    --subheadline-font-style:   normal;

    --caption-font-family:  "SF Pro Text", Helvetica;
    --caption-font-weight:  400;
    --caption-font-size:    11px;
    --caption-letter-spacing: 0px;
    --caption-line-height:  13px;
    --caption-font-style:   normal;
}