html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/* Header logo (top-left of main app). The mark sits directly on the canvas with nothing behind it,
   so it is drawn rather than placed: two masks stacked on the pseudo-elements, the letterforms
   painted from the text role and the mark's accent strokes from the accent role. That is what
   makes it track light/dark and every accent preset with no second ink of its own.

   Load-bearing: the two files carry the SAME viewBox. Each layer scales its own file to `contain`
   independently, so tightening either one to its own content bounds knocks the accent strokes out
   of register. The mask on a parent also clips its children, which is why neither layer sits on
   .header-logo itself. */
.header-logo {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 32px;
}

.header-logo::before,
.header-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: left center / contain no-repeat;
    mask: left center / contain no-repeat;
}

.header-logo::before {
    background: var(--vl-text);
    -webkit-mask-image: url('../images/logo-word.svg');
    mask-image: url('../images/logo-word.svg');
}

.header-logo::after {
    background: var(--vl-accent);
    -webkit-mask-image: url('../images/logo-accent.svg');
    mask-image: url('../images/logo-accent.svg');
}

/* Login page logo circle. Placed rather than drawn — a background image cannot be split into two
   painted layers the way the header's masks are — so it takes the letterform file as-is, dark ink,
   and the disc is brand-fixed white in both modes to keep that ink readable, so it shows the mark
   without its accent strokes. The splash below has the same constraint — XAF renders it as an
   <img>, a replaced element no stylesheet of ours can recolour — so it takes the combined file
   with the accent strokes baked in as fixed gold. */
.logo-container {
    background-image: url('../images/logo-word.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #fff;
}

/* Splash screen circle: same brand-fixed fill, same reason. !important is required here and only
   here — the theme fills this disc with the accent colour through its own !important declaration,
   which would put the dark mark on an arbitrary preset colour. */
.loading-image-wrapper {
    background-color: #fff !important;
}

.loading-image {
    width: 90px !important;
    height: auto !important;
}

/* The ring segment DX spins around the splash/login disc (.loading-floated-circle) otherwise
   tracks the theme accent via its own !important border-color. Brand-fixed to the same gold as
   logo-accent.svg so it reads as part of the mark instead of an arbitrary preset colour. */
.loading-floated-circle {
    border-color: #c09a54 !important;
}

/* The wordmark logo already says Bittern; no caption under it. */
.loading-caption {
    display: none;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}