/* ═════════════════════════════════════════════════════════════════
   Docs sidebar — sticky section navigation

   Card-wrapped nav with grouped anchor links. Fixed-height sticky
   box; the nav contents scroll inside the card when the mouse is
   over it. Collapses to a skinny toggle rail below 1000px.
   ═════════════════════════════════════════════════════════════════ */

:root {
    /* Predetermined sidebar height (clamped to the viewport) */
    --docs-sidebar-height: 600px;

    /* Scrollbar: thumb rides inside the card's padding so it
       never touches the rounded corners. Tune width/colour here. */
    --docs-scrollbar-width: 6px;
    --docs-scrollbar-thumb: var(--purple-light);
    --docs-scrollbar-track: transparent;
}

.docs-sidebar {
    position: sticky;
    top: calc(var(--nav-top-gap) + var(--nav-height) + 20px);
    /* Bumps into the footer at the end of the page */
    bottom: var(--footer-overlap);
    width: 180px;
    flex-shrink: 0;
    height: min(
        var(--docs-sidebar-height),
        calc(100vh - var(--nav-top-gap) - var(--nav-height) - 40px)
    );
}

.docs-sidebar__card {
    background: #fff;
    border: 2px solid var(--purple-light);
    border-radius: 12px;
    padding: 0.75rem;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The 0.75rem padding insets the scrollbar gutter from the
       border, so the thumb's travel limits sit inside the card's
       rounded corners instead of poking through them. */
    scrollbar-width: thin;
    scrollbar-color: var(--docs-scrollbar-thumb) var(--docs-scrollbar-track);
    scrollbar-gutter: stable;
}

.docs-sidebar__card::-webkit-scrollbar {
    width: var(--docs-scrollbar-width);
}

.docs-sidebar__card::-webkit-scrollbar-track {
    background: var(--docs-scrollbar-track);
}

.docs-sidebar__card::-webkit-scrollbar-thumb {
    background: var(--docs-scrollbar-thumb);
    /* Pill shape: the rounded caps keep the thumb clear of the
       corner curves at the top/bottom extremes of travel. */
    border-radius: 999px;
}

.docs-sidebar__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Section group labels */
.docs-sidebar__group {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--purple-dark);
    margin: 0.75rem 0 0.25rem;
    padding: 0 0.4rem;
}

.docs-sidebar__group:first-child {
    margin-top: 0;
}

.docs-sidebar__nav li {
    margin-bottom: 0.15rem;
}

.docs-sidebar__nav a {
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    color: var(--purple-mid);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.docs-sidebar__nav a:hover,
.docs-sidebar__nav a:focus {
    color: var(--purple-dark);
    border-left-color: var(--purple-light);
}

/* ── Side rail (≤1000px) ────────────────────────────
   Below the main breakpoint the sidebar collapses to a
   skinny rail that takes up a narrow slot beside the
   content, showing only a symbol. Clicking it grows
   it over the content with a dark scrim behind it.
   Above the breakpoint the sidebar is fully open.     */

.docs-sidebar-toggle {
    display: none;
}

.docs-sidebar-overlay {
    display: none;
}

@media (max-width: 1000px) {
    /* Collapsed: in-flow, sticky, taking a narrow slot beside the
       content.  Height is capped to the viewport (minus the nav bar)
       so the rail stays fully on screen while the page scrolls; the
       nav inside the card scrolls when needed. */
    .docs-sidebar {
        position: sticky;
        top: calc(var(--nav-top-gap) + var(--nav-height) + 16px);
        bottom: auto;
        width: 48px;
        height: min(
            480px,
            calc(100vh - var(--nav-top-gap) - var(--nav-height) - 48px)
        );
        transition: width 0.25s ease;
    }

    /* Wide: floats over the content at the rail's spot.
       Truss columns are gone at this breakpoint, so the
       overlay anchors just off the viewport edge. */
    .docs-sidebar.is-open {
        position: fixed;
        top: calc(var(--nav-top-gap) + var(--nav-height) + 16px);
        left: var(--docs-mobile-gutter);
        width: 180px;
        height: min(
            480px,
            calc(100vh - var(--nav-top-gap) - var(--nav-height) - 48px)
        );
        bottom: auto;
        z-index: 250;
    }

    /* The toggle IS the collapsed rail: it fills the whole
       sidebar, matching the menu's height. */
    .docs-sidebar-toggle {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        padding: 0;
        border: 2px solid var(--purple-light);
        border-radius: 12px;
        background: #fff;
        cursor: pointer;
    }

    .docs-sidebar-toggle::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 2px;
        background: var(--purple-dark);
        transform: translate(-50%, -50%);
        box-shadow: 0 -4px 0 var(--purple-dark), 0 4px 0 var(--purple-dark);
    }

    /* Wide: the symbol disappears — just the menu */
    .docs-sidebar.is-open .docs-sidebar-toggle {
        display: none;
    }

    .docs-sidebar__card {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .docs-sidebar.is-open .docs-sidebar__card {
        opacity: 1;
        visibility: visible;
    }

    /* Dark scrim over the rest of the page while wide */
    .docs-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 240;
        background: rgba(33, 52, 72, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .docs-sidebar-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .docs-sidebar,
    .docs-sidebar__card,
    .docs-sidebar-overlay {
        transition: none;
    }
}