/* =========================================================
   APP SHELL
========================================================= */

.app {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main {
    margin-left: var(--sidebar);
    min-height: 100vh;
    position: relative;
    isolation: isolate;
}

/* Brand mark watermarks: decorative, behind content, never interactive.
   The mark is geometric, so it is only ever lightly cropped — bleed much
   more than this and the bars stop reading as a mark and start reading as
   stray rectangles. */
.sidebar::after,
.main::before {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    background: var(--primary);
    pointer-events: none;
    z-index: -1;
    -webkit-mask: var(--emblem-mask-image) center / contain no-repeat;
    mask: var(--emblem-mask-image) center / contain no-repeat;
}

.sidebar::after {
    width: 162px;
    right: -30px;
    bottom: -20px;
    opacity: .055;
}

.main::before {
    position: fixed;
    width: 430px;
    right: -84px;
    bottom: -92px;
    opacity: .035;
}