#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.page {
    display: flex;
    flex-direction: column;
    /* One scroll model for both modes: the page itself never scrolls, `main` does.
       This used to be `min-height: 100vh` with the height/overflow pair applied to .tv-mode only,
       which made the window the scroller on desktop - and that is the whole reason the side menu
       needed position:fixed there, since an in-flow menu scrolled away with the document. Unifying
       it lets the menu stay in flow in both modes, so desktop looks and behaves like the TV. */
    height: 100vh;
    overflow: hidden;
    --app-header-height: 64px;
}

.app-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: var(--app-header-height);
    padding: 0 1.5rem;
    position: relative;
    /* ok-on-old-engines: progressive enhancement. Chromium 53 has no position:sticky and
       drops this line, keeping `relative`. Correct on the TV anyway - the page is
       overflow:hidden and the row-collapse scheme keeps scrollTop at 0, so there is
       nothing scrolling underneath for it to stick against. */
    position: sticky; /* ok-on-old-engines: enhancement, see note above */
    top: 0;
    z-index: 20;
    /*border-bottom: 1px solid rgba(255, 229, 222, 0.14);*/
    /*    background: rgba(22, 0, 0, 0.55); */
    -webkit-backdrop-filter: blur(12px) saturate(100%); /* ok-on-old-engines: blur is decoration */
    backdrop-filter: blur(12px) saturate(100%); /* ok-on-old-engines: blur is decoration */
    -webkit-mask: linear-gradient(black, black, black, gray, gray, #000000d1, transparent);
    mask: linear-gradient(black, black, black, gray, gray, #000000d1, transparent);
}

.app-logo {
    height: 34px;
    width: auto;
    /* Logo artwork is solid black; invert so it reads as a light mark against the
       dark brand surfaces used throughout the app. */
    filter: invert(1);
}

.app-brand {
    font-weight: 400;
    font-size: 2em;
    margin-left: 15px;
    color: var(--bright-color);
    text-shadow: 0px 0px 20px var(--dark-color);
}

.app-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

main {
    flex: 1 1 auto;
    padding: 1.5rem 2rem;
    min-width: 0;
    /* The scroller, in both modes now - see .page. */
    overflow-y: auto;
    min-height: 0;
}

.tv-mode main {
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
}

.app-error-toast {
    background: #b32121;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

    .app-error-toast a {
        color: white;
        text-decoration: underline;
    }

@media (max-width: 720px) {
    .page {
        --app-header-height: 52px;
    }

    .app-header {
        height: 52px;
        padding: 0 1rem;
    }

    .app-logo {
        height: 26px;
    }

    .app-brand {
        font-size: 1.5em;
        margin-left: 10px;
    }

    main {
        padding: 1rem;
    }
}


/* Chromium 53 has no flexbox gap (Chrome 84). */
.app-error-toast > * + * {
    margin-left: 1rem;
}