/*
 * Present versioned API references as a single workspace: the DIDWW header
 * remains for global navigation, while Scalar owns everything below it.
 */
html:has(body[data-pagename^="api3/"][data-pagename$="/api-reference"]) {
    height: 100%;
    overflow: hidden;
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] > #pst-header {
    flex: 0 0 auto;
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] > .bd-container {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    overflow: hidden !important;
}

/*
 * Keep the normal DIDWW header—including its search control—in exactly the
 * same place as every other page. The route-scoped JavaScript bridge changes
 * only what that control opens. Scalar supplies the endpoint navigation below.
 */
body[data-pagename^="api3/"][data-pagename$="/api-reference"] #pst-search-dialog,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] #pst-back-to-top,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-sidebar-secondary,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-header-article,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .prev-next-footer,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-footer-content,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] > .bd-footer {
    display: none !important;
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-container__inner,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-main,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-content,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-article-container,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-article,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-article > section {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-container__inner {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Match the standard documentation canvas at the site's wide breakpoints. */
@media screen and (min-width: 1920px) {
    body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-container__inner {
        max-width: 1920px !important;
    }
}

@media screen and (min-width: 2560px) {
    body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-container__inner {
        max-width: 2100px !important;
    }
}

/* The normal docs sidebar remains available through the mobile menu only. */
@media screen and (min-width: 992px) {
    body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-sidebar-primary {
        display: none !important;
    }
}

/* Beat the site's wide-screen article cap without changing ordinary pages. */
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-main .bd-content .bd-article-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-container::before,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-article-container::before {
    content: none !important;
    display: none !important;
}

/* Keep the RST title for the document metadata, but render only Scalar. */
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .bd-article > section > :not(.scalar-api-frame) {
    display: none !important;
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-api-frame {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    color-scheme: light dark;
    background: var(--pst-color-background, #fff);
}

html[data-theme="dark"] body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-api-frame {
    background: #041225;
}

/*
 * Scalar's dialog is isolated inside the iframe, so extend its search backdrop
 * across the DIDWW header to reproduce DocSearch's full-viewport treatment.
 */
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop {
    --scalar-api-canvas-width: 100vw;
    position: fixed;
    inset: 0 0 auto;
    z-index: 1050;
    display: block;
    height: var(--pst-header-height, 7rem);
    background-color: var(--docsearch-container-background, rgba(7, 27, 58, 0.56));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

/* Cover only the space outside Scalar; overlapping blurred layers leave seams. */
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop::before,
body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop::after {
    position: absolute;
    top: 100%;
    width: max(0px, calc((100vw - var(--scalar-api-canvas-width)) / 2 + 1px));
    height: calc(100vh - var(--pst-header-height, 7rem));
    height: calc(100dvh - var(--pst-header-height, 7rem));
    /* The opaque composite also covers the browser's one-pixel iframe seam. */
    background-color: rgb(116, 127, 145);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    content: "";
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop::before {
    left: 0;
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop::after {
    right: 0;
}

html[data-theme="dark"] body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop::before,
html[data-theme="dark"] body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop::after {
    background-color: rgb(1, 5, 10);
}

@media screen and (min-width: 1920px) {
    body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop {
        --scalar-api-canvas-width: 1920px;
    }
}

@media screen and (min-width: 2560px) {
    body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop {
        --scalar-api-canvas-width: 2100px;
    }
}

body[data-pagename^="api3/"][data-pagename$="/api-reference"] .scalar-search-header-backdrop[hidden] {
    display: none !important;
}