DocsLayout.razor.css

.docs-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--foreground);
}

.docs-shell[data-mobile-open="True"] { overflow: hidden; }

.docs-body {
    display: grid;
    grid-template-columns: 1fr;
    flex: 1;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.25rem;
    position: relative;
}

@media (min-width: 1024px) {
    .docs-body {
        grid-template-columns: var(--sidebar-width) 1fr;
        padding: 0 1.5rem;
    }
}

@media (min-width: 1280px) {
    .docs-body {
        grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
    }
}

.docs-sidebar-slot {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: min(18rem, 85vw);
    height: calc(100vh - var(--header-height));
    background: var(--background);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 45;
    display: flex;
    flex-direction: column;
}
.docs-sidebar-slot.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px -8px rgb(0 0 0 / 0.25);
}

@media (min-width: 1024px) {
    .docs-sidebar-slot {
        position: sticky;
        top: var(--header-height);
        left: auto;
        width: auto;
        border-right: 1px solid var(--border);
        margin-right: 1.5rem;
        transform: none;
        box-shadow: none;
        z-index: auto;
        transition: none;
    }
}

.docs-sidebar-backdrop {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: rgb(0 0 0 / 0.4);
    border: 0;
    padding: 0;
    z-index: 40;
    cursor: pointer;
    animation: docs-backdrop-in 200ms ease;
}
@keyframes docs-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (min-width: 1024px) {
    .docs-sidebar-backdrop { display: none; }
}

.docs-main {
    min-width: 0;
    padding: 2rem 0 4rem;
}

@media (min-width: 1024px) {
    .docs-main { padding: 2.5rem 0 4rem; }
}

.docs-content {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.docs-toc-slot {
    display: none;
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    padding: 0 1rem 2rem 1.5rem;
    margin-left: 1rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.docs-toc-slot::-webkit-scrollbar { width: 6px; }
.docs-toc-slot::-webkit-scrollbar-track { background: transparent; }
.docs-toc-slot::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}

@media (min-width: 1280px) {
    .docs-toc-slot { display: block; }
}

/* ───────────────────────────────────────────────────────────────────
   Sidebar variant — no top nav, sidebar is the ONLY floating card,
   content sits flush against the page bg. shadcn sidebar-04 vibe.
   ─────────────────────────────────────────────────────────────────── */

.docs-shell-sidebar { background: var(--background); }

@media (min-width: 1024px) {
    .docs-shell-sidebar .docs-body {
        padding: 0.85rem 1rem 1rem 0.85rem;
        gap: 1rem;
        max-width: 1500px;
        grid-template-columns: var(--sidebar-width) 1fr;
    }
    /* Sidebar = the floating card. `display: flex; flex-direction: column`
       already comes from the base .docs-sidebar-slot rule — we only override
       the card chrome + positioning here. */
    .docs-shell-sidebar .docs-sidebar-slot {
        position: sticky;
        top: 0.85rem;
        height: calc(100vh - 1.85rem);
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: calc(var(--radius) + 2px);
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
        margin-right: 0;
        overflow: hidden;
    }
    /* nav `flex: 1; min-height: 0` moved to the base .docs-sidebar rule so it
       applies in every layout context, not just desktop Sidebar variant. */
    /* Content = flush to page bg, no border, no shadow */
    .docs-shell-sidebar .docs-main {
        padding: 1.5rem 0 4rem;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .docs-shell-sidebar .docs-toc-slot {
        top: 0.85rem;
        height: calc(100vh - 1.85rem);
        margin-left: 0;
        padding: 0 1rem 1rem 1.25rem;
    }

    /* Collapsed — sidebar column disappears, grid expands to single column */
    .docs-shell-sidebar.docs-sidebar-collapsed .docs-sidebar-slot { display: none; }
    .docs-shell-sidebar.docs-sidebar-collapsed .docs-body {
        grid-template-columns: 1fr;
    }
    .docs-shell-sidebar.docs-sidebar-collapsed .docs-main {
        padding-left: 3rem;
    }
}

@media (min-width: 1280px) {
    .docs-shell-sidebar .docs-body {
        grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
    }
    .docs-shell-sidebar.docs-sidebar-collapsed .docs-body {
        grid-template-columns: 1fr var(--toc-width);
    }
}

/* Floating reopen toolbar — appears at top-left when collapsed */
.docs-collapsed-toolbar {
    position: fixed;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 30;
    display: flex;
    gap: 0.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    padding: 0.2rem;
}
.docs-collapsed-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius) - 3px);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 150ms, background 150ms;
}
.docs-collapsed-tool:hover { color: var(--foreground); background: var(--muted); }
.docs-collapsed-tool svg { width: 1rem; height: 1rem; }