/* App-level styles that are not part of the design system: the loading screen and the error bar. */

html, body { height: 100%; }
body { background: var(--canvas); }

/* Loading screen: full window, the same near-black night in both themes. */
.ld { position: fixed; inset: 0; overflow: hidden; background: #0b0c11; }
.ld-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ld-brand {
    position: absolute; left: 0; right: 0; bottom: 19%; display: flex; justify-content: center; gap: .9em;
    font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #c9b49c;
}
.ld-pct { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; color: #8f857a; min-width: 4.4em; text-align: left; text-transform: none; }
.ld-says {
    position: absolute; left: 0; right: 0; bottom: 8%; height: 26px; overflow: hidden;
    font-size: clamp(13px, 2vw, 16px); color: #f4eadf; letter-spacing: -0.01em; text-shadow: 0 0 16px #ff8a3d66;
}
.ld-line { position: absolute; inset: 0; text-align: center; transform: translateX(100%); opacity: 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s; }
.ld-line.on { transform: translateX(0); opacity: 1; }
.ld-line.out { transform: translateX(-100%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .ld-line, .ld-line.on, .ld-line.out { transform: none; transition: opacity .4s; }
}

/* Unhandled error bar: an inverse toast pinned to the bottom. */
#blazor-error-ui {
    display: none; position: fixed; left: 16px; bottom: 16px; z-index: var(--z-toast); max-width: 460px;
    align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-lg);
    background: var(--inverse-canvas); color: var(--inverse-ink); box-shadow: var(--shadow-2);
}
#blazor-error-ui .reload { color: inherit; font-weight: 500; }
#blazor-error-ui .dismiss { border: 0; background: none; color: var(--inverse-ink-muted); cursor: pointer; font-size: 18px; }

/* App shell: full window; the nav and content scroll on their own. */
.app-shell { height: 100vh; height: 100dvh; }
.app-shell { --project-accent: var(--accent-light, #a3472a); }
[data-theme="dark"] .app-shell { --project-accent: color-mix(in oklab, var(--accent-light, #a3472a) 82%, white); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .app-shell { --project-accent: color-mix(in oklab, var(--accent-light, #a3472a) 82%, white); }
}
.app-shell .tbx-ptile { background: var(--project-accent); color: var(--on-project-accent); }
.app-nav { height: 100%; }
.app-nav__username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell .tbx-main { min-height: 0; }
.app-content { flex: 1; min-height: 0; overflow-y: auto; }
.app-bottomnav { display: none; }
.app-display { font-size: 40px; line-height: 40px; font-weight: 500; letter-spacing: -2px; }

@media (max-width: 767px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-shell .app-nav { display: none; }
    .app-bottomnav { display: flex; }
    .app-pagebar { padding: 0 16px; }
    .app-pagebar .tbx-cmdk { width: auto; padding: 0 10px; }
    .app-pagebar .tbx-cmdk span, .app-pagebar .tbx-cmdk kbd { display: none; }
    .tbx-page { padding: var(--space-16); }
    .app-display { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
    input.tbx-input, select.tbx-select, textarea.tbx-textarea { font-size: 16px; }
}