/* ################################################# */
/* JavaScript documentation */
/* ################################################# */

.javascript-docs {
    font-family: Roboto, sans-serif;
}

.javascript-docs .main,
.javascript-docs .primary-navigation,
.javascript-docs .secondary-navigation,
.javascript-docs .api-main {
    font-family: Roboto, sans-serif;
}

.javascript-docs p,
.javascript-docs li,
.javascript-docs a,
.javascript-docs h1,
.javascript-docs h2,
.javascript-docs h3,
.javascript-docs h4,
.javascript-docs th,
.javascript-docs td {
    font-family: Roboto, sans-serif;
}

.javascript-docs .api-main {
    opacity: 1;
    transform: none;
}

.javascript-docs .api-main main {
    min-width: 0;
}

/* Section headings and prose. */
.javascript-docs .docs-section {
    margin-bottom: 64px;
}

.javascript-docs .docs-section h2 {
    margin: 0 0 24px;
    line-height: 1.08;
}

.javascript-docs .docs-section h3 {
    line-height: 1.25;
}

.javascript-docs .docs-section p,
.javascript-docs .docs-section li {
    font-size: 16px;
    line-height: 1.65;
    color: #41454a;
}

.javascript-docs .docs-section p {
    margin: 0 0 18px;
}

.javascript-docs .docs-section ul {
    padding-left: 22px;
    margin: 0 0 24px;
}

.javascript-docs .docs-section li {
    margin-bottom: 10px;
}

.javascript-docs .docs-option {
    padding: 24px 0 8px;
    border-top: 1px solid #e4e5e7;
}

.javascript-docs .docs-option h3 {
    margin: 0 0 10px;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.javascript-docs .docs-option .docs-meta {
    font-size: 13px;
    color: #707070;
    margin-bottom: 12px;
}

.javascript-docs .docs-section [id] {
    scroll-margin-top: 100px;
}

/* Code samples. */
.javascript-docs main code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

.javascript-docs main .highlight {
    max-width: 100%;
    margin: 20px 0 28px;
    overflow: hidden;
    border: 1px solid #e4e5e7;
    border-radius: 8px;
}

.javascript-docs main pre {
    padding: 0;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    tab-size: 4;
}

.javascript-docs main pre code {
    display: block;
    padding: 20px;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre;
    overflow-wrap: normal;
}

/* Tables and links. */
.javascript-docs .docs-table-scroll {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0 28px;
}

.javascript-docs table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.6;
}

.javascript-docs th,
.javascript-docs td {
    padding: 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e4e5e7;
    overflow-wrap: anywhere;
}

.javascript-docs th {
    font-weight: 700;
    color: #111;
    background: #f5f5f6;
}

.javascript-docs td:first-child {
    min-width: 150px;
}

.javascript-docs main a {
    color: #b82042;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.javascript-docs .docs-example-link {
    display: inline-block;
    font-weight: 700;
}

.javascript-docs .docs-footer {
    margin: 48px 0;
    padding-top: 24px;
    border-top: 1px solid #e4e5e7;
    color: #707070;
    font-size: 14px;
}

/* Contents and small screens. */
.javascript-docs aside h4 {
    margin: 20px 0 8px;
    font-size: 14px;
}

.javascript-docs aside ul a {
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .javascript-docs .docs-section {
        margin-bottom: 44px;
    }

    .javascript-docs .docs-section p,
    .javascript-docs .docs-section li {
        font-size: 15px;
    }

    .javascript-docs main pre code {
        padding: 14px;
        font-size: 12px;
    }

    .javascript-docs .docs-option h3 {
        font-size: 17px;
    }

    .javascript-docs th,
    .javascript-docs td {
        padding: 10px;
    }
}


/* ################################################# */
/* Documentation typography and navigation */
/* ################################################# */

/* Clip decorative backgrounds without creating a sticky scroll container. */
.javascript-docs > .main {
    overflow: clip;
}

/* Reading hierarchy. */
.javascript-docs .api-main {
    transform: none !important;
}

.javascript-docs .docs-section h2 {
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 700 !important;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: #17191c;
}

.javascript-docs .docs-section h3 {
    font-size: 21px;
    font-weight: 600 !important;
    line-height: 1.4;
    color: #24272b;
}

.javascript-docs .docs-section h4 {
    font-weight: 600 !important;
    line-height: 1.4;
    color: #24272b;
}

/* Content links use one underline with a clear hover and keyboard state. */
.javascript-docs main a {
    border: 0;
    background-image: none !important;
    text-decoration-thickness: 1px;
    text-decoration-color: #b8204266;
    text-underline-offset: 4px;
    transition: color 180ms ease, text-decoration-color 180ms ease;
}

.javascript-docs main a:hover,
.javascript-docs main a:focus-visible {
    color: #111;
    text-decoration-color: currentColor;
}

.javascript-docs a:focus-visible {
    outline: 2px solid #b82042;
    outline-offset: 4px;
    border-radius: 3px;
}

/* Contents headings, groups and individual options. */
.javascript-docs .api-main aside {
    padding-right: 16px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c6c6ca transparent;
}

.javascript-docs .api-main aside h3,
.javascript-docs .api-main aside h3:first-child,
.javascript-docs .api-main aside ul + h3 {
    margin: 8px 0;
    padding: 0;
    border: 0;
    line-height: 1.4;
}

.javascript-docs .api-main aside h4 {
    margin: 18px 0 6px;
    line-height: 1.4;
}

.javascript-docs .api-main aside a {
    display: block;
    width: auto;
    padding: 8px 12px;
    border: 0;
    border-radius: 5px;
    color: #555b63 !important;
    background-image: none !important;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.javascript-docs .api-main aside h3 a {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #22262b !important;
}

.javascript-docs .api-main aside h4 a {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.javascript-docs .api-main aside ul,
.javascript-docs .api-main aside h3 + ul {
    padding: 0 0 0 12px;
    margin: 0 0 16px 12px;
    border-left: 1px solid #e6e7e9;
}

.javascript-docs .api-main aside ul a {
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.javascript-docs .api-main aside a::before {
    display: none;
}

.javascript-docs .api-main aside a:hover,
.javascript-docs .api-main aside a:focus-visible {
    color: #111 !important;
    background-color: #f2f2f4;
}

.javascript-docs .api-main aside a.active {
    color: #9e1836 !important;
    background-color: #fbf0f2;
    box-shadow: inset 2px 0 #b82042;
}

@media (min-width: 1101px) {
    .javascript-docs .api-main {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 56px;
        align-items: start;
    }

    .javascript-docs .api-main aside {
        position: sticky;
        top: 96px;
        width: 100%;
        height: calc(100vh - 120px);
        max-width: none;
        overflow-y: auto;
    }

    .javascript-docs .api-main main {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .javascript-docs .api-main a {
        transition: none;
    }
}


/* ################################################# */
/* Documentation vertical spacing */
/* ################################################# */

/* One spacing scale for content, independent of the legacy page styles. */
.javascript-docs .api-main main {
    --docs-paragraph-gap: 18px;
    --docs-block-gap: 24px;
    --docs-heading-gap: 32px;
    --docs-group-gap: 48px;
    --docs-section-gap: 64px;
}

/* Contain margins so the final child cannot change the next section's gap. */
.javascript-docs .api-main main .docs-section,
.javascript-docs .api-main main .docs-section > section,
.javascript-docs .api-main main .docs-option {
    display: flow-root;
    margin-top: 0;
    margin-bottom: 0;
}

/* Each following block owns its top gap. Remove competing bottom margins. */
.javascript-docs .api-main main :is(.docs-section, .docs-section > section, .docs-option) > * {
    margin-top: 0;
    margin-bottom: 0;
}

.javascript-docs .api-main main :is(.docs-section, .docs-section > section, .docs-option) > * + * {
    margin-top: var(--docs-paragraph-gap);
}

/* Code samples and tables have the same breathing room on both sides. */
.javascript-docs .api-main main :is(.docs-section, .docs-section > section, .docs-option) > * + :is(.highlight, .docs-table-scroll),
.javascript-docs .api-main main :is(.docs-section, .docs-section > section, .docs-option) > :is(.highlight, .docs-table-scroll) + * {
    margin-top: var(--docs-block-gap);
}

/* Separate headings from the preceding topic and keep their content close. */
.javascript-docs .api-main main :is(.docs-section, .docs-section > section) > * + :is(h3, h4) {
    margin-top: var(--docs-heading-gap);
}

.javascript-docs .api-main main :is(.docs-section, .docs-section > section) > :is(h2, h3, h4) + * {
    margin-top: var(--docs-block-gap);
}

.javascript-docs .api-main main .docs-section > * + section {
    margin-top: var(--docs-group-gap);
}

.javascript-docs .api-main main > .docs-section + .docs-section {
    margin-top: var(--docs-section-gap);
}

/* Option rows use padding at the divider and smaller metadata gaps. */
.javascript-docs .api-main main .docs-option {
    padding: var(--docs-block-gap) 0;
}

.javascript-docs .api-main main .docs-option + .docs-option {
    margin-top: 0;
}

.javascript-docs .api-main main .docs-option > h3 + .docs-meta {
    margin-top: 10px;
}

.javascript-docs .api-main main .docs-option > .docs-meta + * {
    margin-top: 12px;
}

/* List indentation and item rhythm do not inherit the old paragraph rules. */
.javascript-docs .api-main main .docs-section ul {
    margin-left: 0;
    margin-right: 0;
    padding-left: 22px;
}

.javascript-docs .api-main main .docs-section li {
    margin-top: 0;
    margin-bottom: 0;
}

.javascript-docs .api-main main .docs-section li + li {
    margin-top: 8px;
}

@media (max-width: 600px) {
    .javascript-docs .api-main main {
        --docs-paragraph-gap: 16px;
        --docs-block-gap: 20px;
        --docs-heading-gap: 28px;
        --docs-group-gap: 36px;
        --docs-section-gap: 44px;
    }
}


/* Setting values in descriptions, examples and label tables. */
.javascript-docs .api-main main .docs-value {
    font-weight: 700;
}


/* ################################################# */
/* Shared home page header */
/* ################################################# */

/* Reset only the old documentation styles that would override the home menu. */
.javascript-docs .site-header {
    box-sizing: border-box;
    color: var(--demo-ink);
    font: 400 16px/1.6 Roboto, sans-serif;
    z-index: 1000000;
}

.javascript-docs .site-header * {
    box-sizing: border-box;
}

.javascript-docs .site-header a {
    color: inherit;
    border: 0;
    text-decoration: none;
    background-image: none !important;
}

.javascript-docs .site-header button {
    font-family: inherit;
    cursor: pointer;
}

.javascript-docs .site-header .brand {
    white-space: nowrap;
}

.javascript-docs .site-header .site-nav > a:hover,
.javascript-docs .site-header .purchase-menu a:hover,
.javascript-docs .site-header .purchase-menu a:focus-visible {
    color: var(--demo-accent);
}

.javascript-docs .site-header :is(a, button):focus-visible {
    outline: 3px solid var(--demo-accent);
    outline-offset: 5px;
}

.javascript-docs .main.api .demos-header {
    margin-top: var(--demo-header-height);
}

/* Documentation contents stays separate from the shared site navigation. */
.javascript-docs .docs-contents-toggle {
    display: none;
}

@media (max-width: 1100px) {
    .javascript-docs .main.api .docs-contents-toggle {
        display: block !important;
        position: fixed;
        top: calc(var(--demo-header-height) + 12px);
        right: 18px;
        z-index: 1000000;
        width: auto;
        height: auto;
        padding: 8px 12px;
        border: 1px solid #dedee0 !important;
        border-radius: 20px;
        background: #fff;
        color: #111;
        font: 500 12px/1.4 Roboto, sans-serif;
        cursor: pointer;
    }

    .javascript-docs .api-main aside {
        top: calc(var(--demo-header-height) + 56px) !important;
        height: calc(100dvh - var(--demo-header-height) - 56px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .javascript-docs .site-header *,
    .javascript-docs .site-header *::before {
        transition-duration: 0.01ms !important;
    }
}

/* Keep the documentation shortcut clear of the expanded mobile site menu. */
.javascript-docs:has(.site-nav[data-open]) .docs-contents-toggle {
    visibility: hidden;
    pointer-events: none;
}

/* ################################################# */
/* Static documentation header and current menu page */
/* ################################################# */

/* Documentation headings are visible immediately, without the legacy reveal. */
.javascript-docs .site-header,
.javascript-docs .main.api .demos-header {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* The current endpoint is a label, not another navigation action. */
.javascript-docs .site-header .site-nav a[aria-disabled="true"] {
    color: #707070 !important;
    cursor: default;
    pointer-events: none;
}

.javascript-docs .site-header .site-nav a[aria-disabled="true"] .menu-link-text {
    background-image: none !important;
    transition: none;
}