/* =============================================================
   DOCS SIDEBAR LAYOUT
   Shared across every page inside /documentation/.
   Relies on the color variables (--green, --panel, --muted, etc)
   already defined in each page's own <style> block.
============================================================= */

.docs-shell {

    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 220px;
    gap: 60px;
    align-items: start;

    max-width: 1500px;
    margin: 0 auto;
    padding: 90px 4vw 120px;

}

.docs-shell.no-toc {

    grid-template-columns: 260px minmax(0, 1fr);

}


/* ---------- MOBILE MENU TOGGLE ---------- */

.docs-menu-toggle {

    display: none;
    align-items: center;
    gap: 8px;

    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--white);

    font-family: inherit;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;

    padding: 11px 16px;
    margin: 0 4vw;
    cursor: pointer;

}

.docs-menu-toggle:hover {

    border-color: rgba(145, 184, 63, .4);

}


/* ---------- SIDEBAR ---------- */

.docs-sidebar {

    position: sticky;
    top: 92px;
    align-self: start;

}

.docs-search {

    position: relative;
    margin-bottom: 26px;

}

.docs-search input {

    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--white);

    font-family: inherit;
    font-size: .82rem;

    padding: 11px 14px 11px 36px;
    outline: none;

    transition: border-color .2s ease;

}

.docs-search input::placeholder {

    color: var(--muted);

}

.docs-search input:focus {

    border-color: var(--green);

}

.docs-search svg {

    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    width: 14px;
    height: 14px;
    stroke: var(--muted);

    pointer-events: none;

}


/* ---------- SEARCH RESULTS DROPDOWN ---------- */

.docs-search-results {

    display: none;

    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;

    max-height: 60vh;
    overflow-y: auto;

    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);

    scrollbar-width: thin;
    scrollbar-color: var(--green-dark) var(--panel);

}

.docs-search-results::-webkit-scrollbar {

    width: 6px;

}

.docs-search-results::-webkit-scrollbar-track {

    background: var(--panel);

}

.docs-search-results::-webkit-scrollbar-thumb {

    background: var(--green-dark);

}

.docs-search-results.open {

    display: block;

}

.docs-search-result {

    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);

}

.docs-search-result:last-child {

    border-bottom: none;

}

.docs-search-result:hover {

    background: var(--panel-light);

}

.docs-search-result-cat {

    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--green-light);

    margin-bottom: 5px;

}

.docs-search-result-title {

    font-size: .88rem;
    font-weight: 600;
    color: var(--white);

    margin-bottom: 4px;

}

.docs-search-result-snippet {

    font-size: .78rem;
    line-height: 1.5;
    color: var(--muted);

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}

.docs-search-result mark {

    background: transparent;
    color: var(--green-light);
    font-weight: 700;

}

.docs-search-no-results {

    padding: 16px;
    font-size: .82rem;
    color: var(--muted);
    font-style: italic;

}

.docs-nav-label {

    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--muted);

    margin: 22px 0 10px;

}

.docs-nav-label:first-of-type {

    margin-top: 0;

}

.docs-nav {

    list-style: none;
    display: flex;
    flex-direction: column;

}

.docs-nav-scroll {

    max-height: calc(100vh - 260px);
    overflow-y: auto;
    padding-right: 8px;

    scrollbar-width: thin;
    scrollbar-color: var(--green-dark) var(--panel);

}

.docs-nav-scroll::-webkit-scrollbar {

    width: 6px;

}

.docs-nav-scroll::-webkit-scrollbar-track {

    background: var(--panel);

}

.docs-nav-scroll::-webkit-scrollbar-thumb {

    background: var(--green-dark);

}

.docs-nav-link {

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 12px;
    font-size: .85rem;
    color: var(--muted);

    border-left: 2px solid transparent;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;

}

.docs-nav-link:hover {

    color: var(--white);
    background: var(--panel);

}

.docs-nav-link.active {

    color: var(--green-light);
    border-left-color: var(--green);
    background: var(--panel);
    font-weight: 600;

}

.docs-nav-link .num {

    font-family: monospace;
    font-size: .68rem;
    color: var(--green);
    opacity: .8;

}

.docs-nav-empty {

    display: none;
    font-size: .78rem;
    color: var(--muted);
    font-style: italic;

    padding: 10px 12px;

}


/* ---------- MAIN CONTENT COLUMN ---------- */

.docs-content {

    min-width: 0;

}


/* ---------- TABLE OF CONTENTS (right column) ---------- */

.docs-toc {

    position: sticky;
    top: 92px;
    align-self: start;

    border-left: 1px solid var(--line);
    padding-left: 20px;

}

.docs-toc-label {

    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--muted);

    margin-bottom: 14px;

}

.docs-toc ul {

    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.docs-toc a {

    display: block;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--muted);

    border-left: 2px solid transparent;
    padding-left: 12px;

    transition: color .2s ease, border-color .2s ease;

}

.docs-toc a:hover,
.docs-toc a.active {

    color: var(--green-light);
    border-left-color: var(--green);

}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1180px) {

    .docs-shell,
    .docs-shell.no-toc {

        grid-template-columns: 240px minmax(0, 1fr);

    }

    .docs-toc {

        display: none;

    }

}

@media (max-width: 900px) {

    .docs-shell,
    .docs-shell.no-toc {

        grid-template-columns: 1fr;
        gap: 0;
        padding: 20px 20px 85px;

    }

    .docs-menu-toggle {

        display: flex;
        margin: 65px 20px 0;

    }

    .docs-sidebar {

        position: static;
        display: none;

        border: 1px solid var(--line);
        background: var(--panel);
        padding: 20px;
        margin: 16px 0 30px;

    }

    .docs-sidebar.open {

        display: block;

    }

    .docs-nav-scroll {

        max-height: 50vh;

    }

}