.docRoot {
    display: flex;
    width: 100%;
}

.docsWrapper,
.courseDocsWrapper {
    display: flex;
    flex: 1 0 auto;
    min-width: 0;
}

.docsWrapper {
    flex-direction: column;
}

.docsWithDomainNav {
    --docs-global-navbar-height: var(--navbar-next-height, 64px);
    --docs-domain-nav-height: 60px;
    --docs-navigation-offset: calc(
        var(--home-next-banner-height, 0px) +
        var(--docs-global-navbar-height) +
        var(--docs-domain-nav-height)
    );
    --doc-sidebar-width: 18rem !important;
}

@media (min-width: 997px) {
    .docsWithDomainNav :global(.theme-doc-sidebar-container) {
        margin-top: 0;
    }

    /* Keep the stock `height: 100%` on the sticky sidebar viewport: the inner
     * `.sidebar` is `height: 100%` and the `.menu` is a flex child that only
     * scrolls when its container has a resolved height. `height: auto` here
     * made the menu grow to its full content height, so long sections were
     * cut off at the bottom of the screen with no way to scroll them. */
    .docsWithDomainNav :global(.theme-doc-sidebar-container) > div {
        top: var(--docs-navigation-offset);
        max-height: calc(100vh - var(--docs-navigation-offset));
    }
}

@media (max-width: 996px) {
    .docsWithDomainNav {
        --docs-domain-nav-height: 56px;
    }
}

/* Phones stack the domain strip into two rows (section picker, then
   a full-width search box): 8px padding + 38px row + 6px gap + 42px search
   box + 8px padding + 1px border. Keep in step with DocsDomainNav.module.scss. */
@media (max-width: 768px) {
    .docsWithDomainNav {
        --docs-domain-nav-height: 103px;
    }
}


.courseMain {
    width: 100%;
    min-width: 0;
}