/* 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; z-index: var(--z-command); overflow: hidden; background: #0b0c11; transition: opacity .25s ease-out; }
.ld.ld--out { opacity: 0; pointer-events: none; }
.ld[hidden] { display: none; }
.ld-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ld-brand {
    position: absolute; left: 0; right: 0; bottom: 17%; display: flex; flex-direction: column; align-items: center; gap: .8em;
    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; text-transform: none; }
/* The phase for screen readers; the percentage above is for the eye. */
.ld-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Unhandled error bar: an inverse toast pinned to the bottom. */
#blazor-error-ui {
    display: none; position: fixed; left: 16px; bottom: 16px; z-index: calc(var(--z-command) + 1); 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; }
}

/* Read by screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }