:root {
    /* Sidebar design tokens */
    --sidebar-primary-width: 200px;
    --sidebar-secondary-width: 280px;
    --sidebar-primary-bg: #f8f9fa;
    --sidebar-secondary-bg: #ffffff;
    --nav-transition: 200ms ease-in-out;
    --nav-active-bg: rgba(0, 104, 74, 0.08);
    --nav-hover-bg: rgba(0, 0, 0, 0.04);

    /* Colors */
    --color-primary: #00684a;
    --color-text: #1a1a1a;
    --color-text-secondary: #666;
    --color-border: #e0e0e0;

    /* Set for linter; defined in SidebarSubsection.svelte */
    --nest-level: 0;
    --cumulative-offset: 0;
}

.doc-nav {
    font-size: var(--font-size-sm);
}

/* Global reset - ensure no list markers anywhere in sidebar */
.sidebar-container,
.sidebar-container * {
    list-style: none;
}

.sidebar-container *::marker {
    content: none;
    display: none;
}

.top-doc-nav.container {
    padding: var(--s-5) var(--s-3);
}

.doc-nav .with-icon {
    margin-bottom: var(--s0, 1rem);
}

.doc-nav .search-container input {
    flex: 1;
    min-width: 0;
}

.doc-nav:has(.top-doc-nav) {
    border-bottom: 1px solid var(--color-grey);
}

.doc-nav .sidebar-container {
    box-sizing: border-box;
}

.searchform {
    display: flex;
    position: relative;
}

.searchbar-wrapper-parent {
    display: block;
}

.searchbar-wrapper {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    position: relative;
    min-inline-size: 0 !important; /* Needed to override sidebar styling */
    max-width: var(--xl-content-size);
}

.searchbar {
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    border-radius: 0.375rem;
    padding-left: 2.25rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #111827; /* gray-900 */
    background-color: white;
    outline: 1px solid #d1d3db; /* gray-300 */
    outline-offset: -1px;
    border: none;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    z-index: 1;
}

.searchbar::placeholder {
    color: #9ca3af; /* gray-400 */
}

.searchbar:focus {
    outline: 2px solid #4f46e5; /* indigo-600 */
    outline-offset: -2px;
}

.docs-home-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.docs-home-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    cursor: pointer;
    transition: opacity 150ms ease;
    min-width: 0;
}

.docs-home-link:hover {
    opacity: 0.8;
}

.docs-home-link svg {
    flex-shrink: 0;
}

.docs-home-link .text {
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docs-home-link a {
    color: inherit;
    text-decoration: none;
}

.docs-home-chevron {
    display: none;
    transition: transform 200ms ease;
    color: currentColor;
    flex-shrink: 0;
}

#docs-home-toggle {
    cursor: pointer;
}

.docs-home-mobile-wrapper {
    display: none;
}

.docs-home-chevron-mobile {
    display: block;
    transition: transform 200ms ease;
    color: currentColor;
    flex-shrink: 0;
    border-left: none;
    transform: rotate(90deg);
}

.searchbar-mobile-wrapper {
    display: none;
}

.sidebar-container {
    display: flex;
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    overflow: hidden;
}

/* Docs sidebar */
#docs-nav-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
}

.nav-item.nav-item--transparent {
    padding: 0.5rem 1rem 0.375rem;
    cursor: default;
    pointer-events: none;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Collapsible transparent labels - extend to full width using negative margin */
.nav-item.nav-item--transparent.nav-item--collapsible {
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    text-align: left;

    width: 100%;

    padding-right: 1rem;
}

.nav-item.nav-item--transparent.nav-item--collapsible:hover {
    background-color: var(--nav-hover-bg, rgba(0, 0, 0, 0.04));
}

.nav-item.nav-item--transparent.nav-item--collapsible:focus-visible {
    outline: 2px solid var(--color-primary, #00684a);
    outline-offset: -2px;
}

.nav-item.nav-item--transparent .nav-item__label {
    flex: 1;
}

.nav-item.nav-item--transparent .nav-item__arrow {
    flex-shrink: 0;
    margin-left: 0.5rem;
    margin-right: 0;
}

.nav-item--transparent:hover {
    background-color: transparent;
}

/* Nested transparent labels: lighter treatment, threading line handles hierarchy */
.nav-item--transparent.nav-item--nested-subsection {
    padding: 0.375rem 1rem 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #888);
    margin-top: 0.375rem;
}

/* Nested collapsible transparent labels - ensure consistent right padding */
.nav-item--transparent.nav-item--nested-subsection.nav-item--collapsible {
    padding: 0.375rem 1rem 0.25rem 0.5rem;
}

/* First nested transparent label doesn't need top margin */
.nav-subsection__nested > .nav-subsection:first-child > .nav-item--transparent.nav-item--nested-subsection {
    margin-top: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.sidebar-nav--primary {
    display: grid;
    grid-auto-rows: auto;
    align-content: start;
    min-width: 200px;
    background-color: var(--sidebar-primary-bg, #f8f9fa);
    border-right: 1px solid var(--color-border, #e0e0e0);
    gap: 0.125rem;
    align-items: flex-start;
    list-style: none;
}

.sidebar-nav--secondary {
    width: 280px;
    min-width: 280px;
    background-color: var(--sidebar-secondary-bg, #ffffff);
    border-right: 1px solid var(--color-border, #e0e0e0);
    gap: 0.25rem;
}

.sidebar-nav--secondary:empty {
    display: none;
}

.sidebar-nav:empty::after {
    content: "Loading navigation...";
    display: block;
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.sidebar-nav__section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #666);
    padding: 0.75rem 1rem 0.5rem;
    margin: 0;
}

.nav-section__header {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text, #1a1a1a);
    width: 100%;
    box-sizing: border-box;
    transition: background-color 100ms ease;
    flex-shrink: 0;
    text-decoration: none;
    min-height: 36px;
    line-height: 1.4;
    list-style: none;
}

.nav-section__header::marker {
    content: none;
}

.nav-section__header:hover:not(.nav-section__header--active) {
    background-color: var(--nav-hover-bg, rgba(0, 0, 0, 0.04));
}

.nav-section__header:focus-visible {
    outline: 2px solid var(--color-primary, #00684a);
    outline-offset: -2px;
}

.nav-section__header--active {
    background-color: var(--nav-active-bg, rgba(0, 104, 74, 0.08));
    font-weight: 600;
    color: var(--color-primary, #00684a);
}

/* Ensure no bullets/markers appear */
.nav-section__header--active::before,
.nav-section__header--active::marker {
    content: none;
    display: none;
}

.nav-section__title {
    flex: 1;
    text-align: left;
}

.nav-section__content {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0 0.375rem 1rem;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: var(--color-text, #1a1a1a);
    font-size: 0.875rem;
    transition: background-color 100ms ease;
    width: 100%;
    box-sizing: border-box;
    min-height: 28px;
    line-height: 1.4;
    padding: 0.375rem 1rem;
}

.nav-item:hover:not(.nav-item--active) {
    background-color: var(--nav-hover-bg, rgba(0, 0, 0, 0.04));
}

.nav-item:focus-visible {
    outline: 2px solid var(--color-primary, #00684a);
    outline-offset: -2px;
}

.nav-item--active {
    background-color: var(--nav-active-bg, rgba(0, 104, 74, 0.08));
    font-weight: 600;
    color: var(--color-primary, #00684a);
}

/* Ensure no bullets/markers appear on active items (except nested items which need horizontal connectors) */
.nav-item--active:not(.nav-item--nested)::before,
.nav-item--active::marker {
    content: none;
    display: none;
}

.nav-item--overview {
    margin-bottom: 0.25rem;
}

.nav-item--subsection {
    margin-top: 0;
    padding-top: 0.875rem;
    padding-right: 1rem;

    width: 100%;
}

.nav-item--subsection:first-child {
    margin-top: 0;
    padding-top: 0;
}

.nav-item--nested-subsection {
    font-size: 0.8125rem;
}

.nav-item--nested {
    font-size: 0.8125rem;
    padding: 0.375rem 1rem;
    margin-left: 0.375rem;

    width: 100%;
}

/* Nested items inherit base padding, nesting comes from parent .nav-subsection margin */

.nav-item--accordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 1rem;
    cursor: pointer;
    color: var(--color-text, #1a1a1a);
    font-size: 0.875rem;
    transition: background-color 100ms ease;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.375rem;
    text-decoration: none;
}

.nav-item--accordion:hover {
    background-color: var(--nav-hover-bg, rgba(0, 0, 0, 0.04));
}

.nav-item--accordion.nav-item--active {
    background-color: var(--nav-active-bg, rgba(0, 104, 74, 0.08));
    font-weight: 600;
    color: var(--color-primary, #00684a);
}

/* New accordion wrapper styles */
.nav-item--accordion-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    transition: background-color 100ms ease;
    box-sizing: border-box;
    margin-top: 0.375rem;
    padding: 0;
    padding-right: 0.25rem;

    width: 100%;
}

.nav-item--accordion-wrapper:hover {
    background-color: var(--nav-hover-bg, rgba(0, 0, 0, 0.04));
}

.nav-item--accordion-wrapper.nav-item--active {
    background-color: var(--nav-active-bg, rgba(0, 104, 74, 0.08));
}

/* Ensure no bullets/markers appear on accordion wrappers */
.nav-item--accordion-wrapper.nav-item--active::before,
.nav-item--accordion-wrapper.nav-item--active::marker,
.nav-item--accordion-wrapper.nav-item--active .nav-item__link::before {
    content: none;
    display: none;
}

.nav-item__link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    color: var(--color-text, #1a1a1a);
    text-decoration: none;
    min-height: 28px;
    line-height: 1.4;
}

.nav-item__link:hover {
    text-decoration: none;
}

.nav-item--active .nav-item__link {
    font-weight: 600;
    color: var(--color-primary, #00684a);
}

.nav-item__chevron-button {
    background: none;
    border: none;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    min-width: 32px;
    min-height: 28px;
}

.nav-item__chevron-button:focus-visible {
    outline: 2px solid var(--color-primary, #00684a);
    outline-offset: -2px;
}

.nav-item__arrow {
    flex-shrink: 0;
    color: var(--color-text-secondary, #666);
    margin-left: 0.5rem;
    transition: transform 200ms ease;
    transform: rotate(-90deg);
}

.nav-item__arrow--expanded {
    transform: rotate(0deg);
}

.nav-subsection {
    display: flex;
    flex-direction: column;
    position: relative;
    width: auto;
    box-sizing: border-box;
}

.nav-subsection + .nav-subsection {
    /*margin-top: 0.25rem;*/
}

/* Reddit-style continuous threading lines */
.nav-subsection[data-level]:not([data-level="0"]) {
    padding-left: 0.625rem;
    margin-left: 0.375rem;
}

.nav-subsection[data-level]:not([data-level="0"])::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--tree-connector-color);
    border-radius: 1px;
}

/* Hover state highlights the thread line (only when no child subsection is hovered) */
.nav-subsection[data-level]:not([data-level="0"]):hover:not(:has(.nav-subsection:hover))::before {
    background-color: rgba(147, 157, 168, 0.4);
}

/* When subsection contains active item, highlight the thread line (unless directly hovered) */
.nav-subsection[data-level]:not([data-level="0"]):has(.nav-item--active):not(:hover)::before,
.nav-subsection[data-level]:not([data-level="0"]):has(.nav-item--active):has(.nav-subsection:hover)::before,
.nav-subsection[data-level]:not([data-level="0"]).has-active-child:not(:hover)::before,
.nav-subsection[data-level]:not([data-level="0"]).has-active-child:has(.nav-subsection:hover)::before {
    background-color: var(--color-primary, #00684a);
    opacity: 0.2;
}

.nav-subsection__pages {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/*
 * ===========================================
 * Tree-style horizontal connectors (├─ └─)
 * ===========================================
 * Creates visual hierarchy similar to Unix `tree` command.
 * Connectors branch from the vertical threading line to each item.
 */

/* Custom property for offset calculation */
.nav-subsection__pages {
    /*
     * Total offset from .nav-item--nested to threading line:
     * - Parent .nav-subsection padding-left: 0.625rem
     * - Item .nav-item--nested margin-left: 0.375rem
     * = 1rem total
     */
    --tree-offset: -1rem;
    /* --tree-connector-color is inherited from parent .nav-subsection[data-level] */
}

/*
 * Depth-based threading colors
 * Darkest at level 0, progressively lighter at deeper levels
 * Colors defined in settings.css
 */
.nav-subsection[data-level="0"] {
    --tree-connector-color: var(--color-tree-depth-0);
}
.nav-subsection[data-level="1"] {
    --tree-connector-color: var(--color-tree-depth-1);
}
.nav-subsection[data-level="2"] {
    --tree-connector-color: var(--color-tree-depth-2);
}
.nav-subsection[data-level="3"] {
    --tree-connector-color: var(--color-tree-depth-3);
}

/* Items need positioning context for pseudo-elements */
.nav-subsection__pages .nav-item--nested {
    position: relative;
}

/*
 * Horizontal connector (the "─" branch)
 * Overlaps the vertical threading line and extends to the item's border-box.
 * Overlapping (rather than precise alignment) avoids sub-pixel rendering gaps.
 */
.nav-subsection__pages .nav-item--nested::before {
    content: '';
    position: absolute;
    left: var(--tree-offset); /* -1rem: overlaps threading line */
    top: 50%;
    transform: translateY(-50%);
    width: calc(-1 * var(--tree-offset)); /* 1rem: reaches item border-box */
    height: 2px;
    background-color: var(--tree-connector-color);
    border-radius: 1px;
    pointer-events: none;
    z-index: 1; /* Above the mask */
}

/*
 * Note: We intentionally don't draw per-item vertical segments (::after).
 * The parent subsection's ::before handles the continuous threading line.
 * This avoids visual conflicts from overlapping elements.
 */

/*
 * Last item terminator: mask the threading line below the last item.
 * Creates the └── effect. Starts at 50%; the horizontal connector
 * renders above this due to z-index.
 */
.nav-subsection__pages .nav-item--nested:last-child::after {
    content: '';
    position: absolute;
    left: var(--tree-offset);
    top: 50%;
    bottom: 0;
    width: 2px;
    background-color: var(--sidebar-secondary-bg, #ffffff);
    pointer-events: none;
}

/*
 * When more content follows (nested subsections visible),
 * don't mask - the line should continue.
 */
.nav-subsection__pages[data-continues] .nav-item--nested:last-child::after {
    display: none;
}

/*
 * Hover state: highlight connectors when hovering the subsection
 * Only applies when no child subsection is being hovered (prevents bubbling)
 * Excludes active items so their connector stays green
 */
.nav-subsection:hover:not(:has(.nav-subsection:hover)) > .nav-subsection__pages .nav-item--nested:not(.nav-item--active)::before {
    background-color: rgba(147, 157, 168, 0.4);
}

/*
 * Active state: highlight the connector path to the active item
 * Must explicitly set content/display to override any hiding rules
 * Opacity matches the vertical threading line (0.2) for visual consistency
 */
.nav-subsection__pages .nav-item--nested.nav-item--active::before {
    content: '' !important;
    display: block !important;
    background-color: var(--color-primary, #00684a);
    opacity: 0.2;
}

/*
 * Level 0 transparent subsections: add threading
 * These grouping labels need visual containment of their children,
 * matching the threading style of deeper nesting levels.
 *
 * Note: :has() requires Safari 15.4+, Chrome 105+, Firefox 121+
 * Gracefully degrades (no line) in older browsers.
 */
.nav-subsection[data-level="0"]:has(> .nav-item--transparent) {
    padding-left: 0.625rem;
    margin-left: 0.375rem;
}

.nav-subsection[data-level="0"]:has(> .nav-item--transparent)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--tree-connector-color);
    border-radius: 1px;
}

.nav-subsection[data-level="0"]:has(> .nav-item--transparent):hover:not(:has(.nav-subsection:hover))::before {
    background-color: rgba(147, 157, 168, 0.4);
}

.nav-subsection[data-level="0"]:has(> .nav-item--transparent):has(.nav-item--active):not(:hover)::before,
.nav-subsection[data-level="0"]:has(> .nav-item--transparent):has(.nav-item--active):has(.nav-subsection:hover)::before {
    background-color: var(--color-primary, #00684a);
    opacity: 0.2;
}

.nav-subsection__nested {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
}

@media (min-width: 479px) {
    .top-doc-nav.container {
        padding: var(--s1);
    }
}

@media (min-width: 640px) {
    .searchbar {
        font-size: 0.875rem;
        line-height: 1.5rem;
    }
}

@media (min-width: 767px) {
    .top-doc-nav.container {
        margin: 0;
        padding: var(--s-1) var(--s1);
    }

    .top-doc-nav {
        /*max-width: 720px;*/
    }

    .top-doc-nav .search-container {
        /*max-width: 50%;*/
    }
}

@media (max-width: 768px) {
    .nav-section__header {
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }

    .nav-item {
        font-size: 0.8125rem;
        padding: 0.3rem 0.75rem;
    }

    .sidebar-nav__section-title {
        font-size: 0.6875rem;
        padding: 0.375rem 0.5rem 0.375rem 1rem;
    }
}

@media (max-width: 768px) and (hover: none) {
    .nav-section__header,
    .nav-item {
        min-height: 44px;
    }
}

@media (min-width: 991px) {
}

@media (max-width: 1024px) {

    /* Prevent horizontal overflow on mobile */
    .top-doc-nav.container {
        overflow-x: hidden;
        background-color: var(--sidebar-primary-bg, #f8f9fa);
    }

    .doc-nav:has(.top-doc-nav) {
        background-color: var(--sidebar-primary-bg, #f8f9fa);
        transition: background-color 150ms ease;
    }

    .doc-nav:has(.top-doc-nav):hover {
        background-color: var(--nav-hover-bg, rgba(0, 0, 0, 0.04));
    }

    .doc-nav:has(.top-doc-nav):active {
        background-color: var(--nav-active-bg, rgba(0, 104, 74, 0.08));
    }

    .searchbar-wrapper, .searchbar-wrapper-parent {
        display: none;
    }

    .docs-header-controls {
        flex-basis: 100% !important;
        /* Contain horizontal overflow from negative margins */
        overflow: hidden;
    }

    .docs-home-wrapper {
        cursor: pointer;
        padding: 0.5rem 0.75rem;
        /* Restore original margin for proper alignment with nav-bg */
        margin: -0.5rem -0.75rem;
        background: var(--sidebar-primary-bg, #f8f9fa);
        transition: all 150ms ease;
        /* Fill available width so entire bar is clickable */
        flex: 1;
        justify-content: space-between;
    }

    .docs-home-wrapper .docs-home-link-interactive {
        /* Home link should not expand - just take its natural size */
        flex-shrink: 0;
    }

    /* Toggle area fills remaining space for larger click target */
    .docs-home-wrapper #docs-home-toggle {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 100%;
        margin-left: 0;
    }

    .docs-home-wrapper .docs-home-link {
        flex: 0 0 auto;
        min-width: 0;
        border-right: 1px solid var(--color-border, #e0e0e0);
        padding-right: 0.75rem;
        margin-right: 0.5rem;
    }

    .docs-home-chevron {
        display: block;
        width: 20px;
        height: 20px;
        padding: 0.25rem;
    }

    .docs-home--expanded .docs-home-chevron {
        display: none;
    }

    .docs-home-mobile-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        padding: 1rem;
        border-left: 1px solid var(--color-border, #e0e0e0);
        border-bottom: 1px solid var(--color-border, #e0e0e0);
        margin-bottom: 0;
        transition: all 150ms ease;
    }

    .docs-home-mobile-wrapper:hover {
        background-color: var(--nav-hover-bg, rgba(0, 0, 0, 0.04));
    }

    .docs-home-mobile-wrapper:active {
        background-color: var(--nav-active-bg, rgba(0, 104, 74, 0.08));
    }

    .docs-home-mobile {
        display: flex;
        border-right: 1px solid var(--color-border, #e0e0e0);
        padding-right: 0.75rem;
    }

    .docs-home-chevron-mobile {
        width: 20px;
        height: 20px;
        padding: 0.25rem;
        border-left: none;
        margin-left: auto;
        padding-left: 0.75rem;
    }

    .searchbar-mobile-wrapper {
        display: flex;
        align-items: center;
        padding: 1rem 0.75rem 1rem 0.5rem;
        border-bottom: 1px solid var(--color-border, #e0e0e0);
        position: relative;
    }

    .searchbar-mobile-wrapper .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        pointer-events: none;
        width: 20px;
        height: 20px;
        opacity: 0.5;
    }

    .searchbar-mobile-wrapper .searchbar {
        flex: 1;
        border: 1px solid var(--color-border, #e0e0e0);
        border-radius: 6px;
        /* Add left padding to make space for the icon */
        padding: 0.5rem 0.75rem 0.5rem 2.5rem;
        font-size: 1rem;
    }

    .docs-nav-wrapper {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        overflow: hidden;
    }

    .docs-nav-wrapper.docs-nav--open {
        display: block;
        animation: fadeIn 200ms ease-out;
    }

    .docs-nav-drawer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: white;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: auto;
        animation: slideInFromLeft 200ms ease-out;
    }

    .docs-nav-wrapper .sidebar-container {
        flex-direction: column;
        height: auto;
        position: static;
    }

    .sidebar-container {
        flex-direction: column;
        height: auto;
        position: static;
    }

    #docs-nav-sidebar {
        position: static;
        height: auto;
        flex-direction: column;
    }

    .sidebar-nav--primary,
    .sidebar-nav--secondary {
        width: 100% !important;
        min-width: 100% !important;
        max-height: none;
    }

    .sidebar-nav--secondary {
        border-right: none !important;
        border-top: 1px solid var(--color-border);
    }
}

@media (min-width: 1025px) {
    .docs-nav-wrapper {
        display: block;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: visible;
        align-self: flex-start;
        z-index: 10;
        /* Override sidebar-l's flex-basis: 28ch to allow expansion for secondary panel */
        flex-basis: auto !important;
        flex-shrink: 0;
        width: max-content;
    }

    .docs-nav-drawer {
        position: static;
        width: auto;
        height: 100%;
        box-shadow: none;
        animation: none;
    }

    .sidebar-container {
        overflow: visible;
        width: auto;
    }

    /* Ensure secondary panel renders above adjacent content */
    .sidebar-nav--secondary {
        position: relative;
        z-index: 5;
    }
}

@media (min-width: 1280px) {
    .doc-nav .container {
    }

    .top-doc-nav .search-container {
        max-width: 500px;
    }
}

@media (min-width: 1281px) {
    .doc-nav .container {
    }

    .top-doc-nav .search-container {
        max-width: 600px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .nav-section__header,
    .nav-item {
        transition: background-color 100ms ease, border-color 100ms ease;
    }

    .nav-item__arrow {
        transition: transform 200ms ease;
    }

    .sidebar-nav--secondary {
        animation: slideInFromRight 200ms ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .docs-nav-wrapper.docs-nav--open {
        animation: none;
    }

    .docs-home-chevron,
    .docs-home-chevron-mobile {
        transition: none;
    }

    .docs-nav-drawer {
        animation: none;
    }

    .sidebar-nav--secondary {
        animation: none;
    }

    .nav-section__header,
    .nav-item,
    .nav-item__arrow {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .nav-section__header,
    .nav-item {
        border: 1px solid currentColor;
    }

    .nav-item--active,
    .nav-section__header--active {
        border-left-width: 4px;
    }
}

@media print {
    #docs-nav-sidebar,
    .sidebar-container {
        display: none;
    }
}