body{
    background:var(--background);
    color:var(--text);
}

.app-shell{
    display:grid;
    grid-template-columns:
        var(--sidebar-width)
        minmax(0,1fr);
    min-height:100vh;
    max-width:100%;
}

.app-sidebar{
    position:sticky;
    top:0;
    align-self:start;
    min-width:0;
    height:100vh;
    overflow-y:auto;
    background:var(--surface);
    border-right:1px solid var(--border);
}

.app-sidebar-content{
    display:flex;
    flex-direction:column;
    min-height:100%;
    padding:clamp(1rem,2.5vw,1.75rem);
}

.app-nav{
    display:flex;
    flex-direction:column;
    gap:0.35rem;
}

.app-main{
    min-width:0;
    padding:clamp(1rem,3vw,1.875rem);
}

.app-nav-link{
    display:block;
    padding:0.75rem 0.875rem;
    color:var(--text);
    border-left:0.25rem solid transparent;
    border-radius:0.35rem;
    text-decoration:none;
    font-weight:600;
}

.app-nav-link:hover{
    background:color-mix(
        in srgb,
        var(--primary) 8%,
        transparent
    );
}

.app-nav-link[aria-current="page"]{
    background:color-mix(
        in srgb,
        var(--primary) 12%,
        transparent
    );
    border-left-color:var(--primary);
    color:var(--primary);
    font-weight:700;
}

.app-nav-link:focus-visible{
    outline:3px solid var(--focus);
    outline-offset:2px;
}

@media (max-width:800px){
    .app-shell{
        grid-template-columns:minmax(0,1fr);
    }

    .app-sidebar{
        position:static;
        height:auto;
        overflow:visible;
        border-right:0;
        border-bottom:1px solid var(--border);
    }

    .app-sidebar-content{
        min-height:0;
        min-width:0;
        max-width:100%;
    }

    .app-sidebar-content,
    .app-main{
        padding:0.75rem;
    }

    .app-brand{
        margin-bottom:0.5rem;
    }

    .app-nav{
        flex-direction:row;
        gap:0.25rem;
        min-width:0;
        max-width:100%;
        padding:0.25rem;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-width:thin;
    }

    .app-nav-link{
        display:inline-flex;
        flex:0 0 auto;
        align-items:center;
        min-height:2.75rem;
        padding:0.6rem 0.75rem;
        white-space:nowrap;
        border-left:0;
        border-bottom:0.25rem solid transparent;
    }

    .app-nav-link[aria-current="page"]{
        border-bottom-color:var(--primary);
    }
}