/* Maps the Scalar API reference onto the site's tokens. Only documented Scalar variables are overridden. */
:root {
    --scalar-font: var(--sans);
    --scalar-font-code: var(--mono);
    --scalar-radius: 0;
    --scalar-radius-lg: 0;
    --scalar-radius-xl: 0;
}

.light-mode,
.dark-mode {
    --scalar-background-1: var(--panel);
    --scalar-background-2: var(--recessed);
    --scalar-background-3: var(--surface);
    --scalar-background-accent: var(--accent-fill);
    --scalar-color-1: var(--text);
    --scalar-color-2: var(--muted-inset);
    --scalar-color-3: var(--quiet-inset);
    --scalar-color-accent: var(--accent-inset);
    --scalar-border-color: var(--line);
    --scalar-button-1: var(--button);
    --scalar-button-1-hover: var(--button-hover);
    --scalar-button-1-color: var(--button-ink);
}

/* HTTP method and status colours, adjusted to meet 4.5:1 on the site's panel and inset surfaces. */
.light-mode {
    --scalar-color-green: #0f4a28;
    --scalar-color-blue: #143f78;
    --scalar-color-orange: #6b3500;
    --scalar-color-red: #861414;
    --scalar-color-yellow: #4f3d00;
    --scalar-color-purple: #432780;
}

.dark-mode {
    --scalar-color-green: #7be5ab;
    --scalar-color-blue: #9ad9f7;
    --scalar-color-orange: #ffbd8c;
    --scalar-color-red: #ffb9b5;
    --scalar-color-yellow: #ffd54a;
    --scalar-color-purple: #d3c5ff;
}

.light-mode .sidebar,
.dark-mode .sidebar {
    --scalar-sidebar-background-1: var(--recessed);
    --scalar-sidebar-color-1: var(--text);
    --scalar-sidebar-color-2: var(--muted-inset);
    --scalar-sidebar-color-active: var(--text);
    --scalar-sidebar-border-color: var(--line);
    --scalar-sidebar-item-hover-color: var(--text);
    --scalar-sidebar-item-hover-background: var(--inset-hover);
    --scalar-sidebar-item-active-background: var(--accent-fill);
    --scalar-sidebar-search-background: var(--panel);
    --scalar-sidebar-search-border-color: var(--line);
    --scalar-sidebar-search-color: var(--muted-inset);
}

/* Scalar relies on sticky and fixed positioning, so the frame must not use filter or overflow. */
/*
 * The reference is dense, so its frame spans the page width, up to the width at which Scalar's own content stops
 * growing; beyond that the frame stays centred. The header keeps the site column at the top of the page and widens to
 * the frame once it docks, so both frames then share their edges; width has to be a length to transition.
 * --docs-max-width is the sidebar (288px, --scalar-sidebar-width), the content padding on both sides (2 x 60px,
 * .section-container) and the content maximum (1540px, --refs-content-max-width) of Scalar 1.75.1's modern layout,
 * plus the two 12px frame borders. Scalar defines these variables inside the frame, out of reach of the header, so
 * the values are repeated here and must be revisited when Scalar is updated.
 */
body:has(.docs-frame) {
    --docs-max-width: calc(288px + 2 * 60px + 1540px + 2 * 12px);
}
body:has(.docs-frame) .document-main {
    width: auto;
    max-width: var(--docs-max-width);
}
body:has(.docs-frame) .nav-inner {
    transition:
        filter 150ms ease-out,
        width 200ms ease-out;
}
body:has(.docs-frame) .nav[data-docked] .nav-inner {
    width: min(var(--docs-max-width), 100%);
}

.docs-frame {
    background: var(--panel);
    background-clip: padding-box;
    border: 12px solid transparent;
    border-image: var(--frame) 6 / 12px stretch;
}

/*
 * Scalar lays markdown tables out with a fixed layout sized from the header cells and breaks words anywhere, which
 * cuts words in narrow columns. An automatic layout keeps words whole, the first column stays on one line and the
 * last column (the description) aims for most of the width. A table that cannot fit even so scrolls inside its
 * description instead of widening the page; the table keeps its table display so assistive technology still sees it.
 */
.docs-frame .markdown:has(> table) {
    overflow-x: auto;
}
.docs-frame .markdown table {
    table-layout: auto;
    width: 100%;
}
.docs-frame .markdown :is(th, td) {
    word-break: normal;
    overflow-wrap: break-word;
}
.docs-frame .markdown :is(th, td:first-child) {
    white-space: nowrap;
}
.docs-frame .markdown :is(th, td):last-child {
    width: 60%;
}

/* States where the API lives, above the reference; it shares the frame's panel and separates from Scalar with a rule. */
.docs-notice {
    padding: 16px 24px;
    background: var(--recessed);
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.docs-notice h2 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.4;
}
.docs-notice p {
    margin: 0;
    max-width: 90ch;
    overflow-wrap: anywhere;
}
.docs-notice a {
    color: var(--accent-inset);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .docs-notice {
        padding: 14px 16px;
    }
}

.docs-error {
    margin: 0;
    padding: 24px;
}

/* Scalar hardcodes a "v" before the version in the introduction badge; hiding the first letter shows the bare version. */
.docs-frame .introduction-section .badge:first-child::first-letter {
    font-size: 0;
}