/* =============================================================================
   API reference — the site's current brand surface, applied to the reference
   page and to the embedded Scalar document.

   Scalar exposes its whole theme as --scalar-* custom properties set on
   body.light-mode, so the document is restyled by repointing those rather than
   by overriding its rules. The values below are the site's literal token values
   rather than var(--color-*), because that token layer is not loaded here.
   ========================================================================== */

:root {
    --mr-canvas: #ffffff;
    --mr-tint: #f6f7f8;
    /* One step below --mr-tint, for the third surface Scalar asks for. */
    --mr-tint-2: #eceef0;
    --mr-ink: #09090d;
    --mr-ink-body: #14141c;
    --mr-ink-muted: #3a3a44;
    --mr-ink-faint: #6b6b74;
    --mr-hair: rgb(12 12 18 / 0.10);
    --mr-rule: rgb(12 12 18 / 0.18);
    --mr-strong: rgb(12 12 18 / 0.28);
    --mr-brand-red: #d9281a;
    --mr-red: var(--mr-brand-red);
    --mr-red-hover: #c71d11;
    --mr-red-wash: rgb(217 40 26 / 0.08);
    --mr-radius-sm: 3px;
    --mr-radius-md: 6px;
    --mr-radius-lg: 10px;
    --mr-sans: 'Mixrank Monaco Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mr-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --mr-header-h: 52px;
}

body.dark-mode {
    --mr-canvas: var(--scalar-background-1);
    --mr-tint: var(--scalar-background-2);
    --mr-tint-2: var(--scalar-background-3);
    --mr-ink: var(--scalar-color-1);
    --mr-ink-body: var(--scalar-color-1);
    --mr-ink-muted: var(--scalar-color-2);
    --mr-ink-faint: var(--scalar-color-3);
    --mr-hair: var(--scalar-border-color);
    --mr-rule: var(--scalar-border-color);
    --mr-strong: var(--scalar-color-3);
    --mr-red: #ff877c;
    --mr-red-hover: #ffa79f;
    --mr-red-wash: rgb(255 135 124 / 0.08);
}

/* The site face, self-hosted beside the other webfonts in static/. Only the
   weights this page sets are listed. */
@font-face {
    font-family: 'Mixrank Monaco Grotesk';
    src: url('../fonts/monaco/MixrankMonaco-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mixrank Monaco Grotesk';
    src: url('../fonts/monaco/MixrankMonaco-RegularItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Mixrank Monaco Grotesk';
    src: url('../fonts/monaco/MixrankMonaco-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mixrank Monaco Grotesk';
    src: url('../fonts/monaco/MixrankMonaco-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mixrank Monaco Grotesk';
    src: url('../fonts/monaco/MixrankMonaco-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.mr-docs-page {
    margin: 0;
    background: var(--mr-canvas);
    color: var(--mr-ink-body);
    font-family: var(--mr-sans);
    -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   Brand bar
   ========================================================================== */

.mr-docs-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--mr-header-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    background: var(--mr-canvas);
    border-bottom: 1px solid var(--mr-hair);
}

.mr-docs-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--mr-ink);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.015em;
}

.mr-docs-brand:hover,
.mr-docs-brand:focus {
    color: var(--mr-ink);
    text-decoration: none;
}

.mr-docs-mark {
    display: block;
    color: var(--mr-brand-red);
}

.mr-docs-eyebrow {
    font-family: var(--mr-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mr-ink-faint);
    padding-left: 14px;
    border-left: 1px solid var(--mr-hair);
}

.mr-docs-auth {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--mr-ink-muted);
}

.mr-docs-auth-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mr-ink-faint);
}

.mr-docs-auth[data-state='in'] .mr-docs-auth-dot { background: #1c8a4a; }
.mr-docs-auth[data-state='out'] .mr-docs-auth-dot { background: var(--mr-red); }

.mr-docs-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 13px;
    text-decoration: none;
    color: var(--mr-ink-muted);
    border: 1px solid var(--mr-rule);
    border-radius: var(--mr-radius-sm);
    transition: color 0.12s ease, border-color 0.12s ease;
}

.mr-docs-back:hover,
.mr-docs-back:focus {
    color: var(--mr-red);
    border-color: var(--mr-red);
    text-decoration: none;
}

.mr-docs-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .mr-docs-eyebrow,
    .mr-docs-auth { display: none; }
    .mr-docs-back { margin-left: auto; }
}

/* =============================================================================
   Authentication — the part of the prose written for the reader, on the site's measure
   ========================================================================== */

.mr-docs-intro {
    padding: 56px 20px 8px;
}

.mr-docs-key-button {
    margin-left: 6px;
    padding: 2px 9px;
    font-family: var(--mr-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--mr-ink-muted);
    background: var(--mr-canvas);
    border: 1px solid var(--mr-rule);
    border-radius: var(--mr-radius-sm);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.mr-docs-key-button:hover,
.mr-docs-key-button:focus-visible {
    color: var(--mr-red);
    border-color: var(--mr-red);
    outline: none;
}

.mr-docs-measure {
    max-width: 760px;
    margin: 0 auto;
}

.mr-docs-intro .page-section {
    padding: 0 0 36px;
}

.mr-docs-intro h2 {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--mr-mono);
    color: var(--mr-ink-faint);
}

.mr-docs-intro p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.62;
    color: var(--mr-ink-muted);
}

.mr-docs-intro p:last-child { margin-bottom: 0; }

.mr-docs-intro a {
    color: var(--mr-red);
    text-decoration: none;
    border-bottom: 1px solid rgb(217 40 26 / 0.3);
}

.mr-docs-intro a:hover,
.mr-docs-intro a:focus {
    color: var(--mr-red-hover);
    border-bottom-color: var(--mr-red-hover);
}

.mr-docs-intro code {
    font-family: var(--mr-mono);
    font-size: 13px;
    padding: 2px 5px;
    color: var(--mr-ink);
    background: var(--mr-tint);
    border: 1px solid var(--mr-hair);
    border-radius: var(--mr-radius-sm);
    word-break: break-word;
}

@media (max-width: 600px) {
    .mr-docs-intro { padding-top: 36px; }
}

/* =============================================================================
   Embedded Scalar document
   ========================================================================== */

.mr-docs-endpoints {
    border-top: 1px solid var(--mr-hair);
    margin-top: 48px;
}

.scalar-app {
    --scalar-font: var(--mr-sans);
    --scalar-font-code: var(--mr-mono);
    --scalar-radius: var(--mr-radius-sm);
    --scalar-radius-lg: var(--mr-radius-md);
    --scalar-radius-xl: var(--mr-radius-lg);
}

body.light-mode {
    --scalar-background-1: var(--mr-canvas);
    --scalar-background-2: var(--mr-tint);
    --scalar-background-3: var(--mr-tint-2);
    --scalar-border-color: var(--mr-rule);

    --scalar-color-1: var(--mr-ink);
    --scalar-color-2: var(--mr-ink-muted);
    --scalar-color-3: var(--mr-ink-faint);

    --scalar-color-accent: var(--mr-red);
    --scalar-background-accent: var(--mr-red-wash);

    --scalar-sidebar-background-1: var(--mr-canvas);
    --scalar-sidebar-color-1: var(--mr-ink-body);
    --scalar-sidebar-color-2: var(--mr-ink-faint);
    --scalar-sidebar-border-color: var(--mr-hair);
    --scalar-sidebar-item-hover-background: var(--mr-tint);
    --scalar-sidebar-item-hover-color: var(--mr-ink);
    --scalar-sidebar-item-active-background: var(--mr-red-wash);
    --scalar-sidebar-color-active: var(--mr-red);
    --scalar-sidebar-search-background: var(--mr-canvas);
    --scalar-sidebar-search-border-color: var(--mr-strong);
    --scalar-sidebar-search-color: var(--mr-ink-body);

    /* Send / Test Request */
    --scalar-button-1: var(--mr-red);
    --scalar-button-1-color: #ffffff;
    --scalar-button-1-hover: var(--mr-red-hover);

    --scalar-color-green: #1c8a4a;
    --scalar-color-red: var(--mr-red);
    --scalar-color-blue: #2563eb;
    --scalar-color-orange: #c2660a;
    --scalar-color-purple: #7c3aed;
}

/* Scalar's hook for a page header above it: its sidebar, mobile menu bar and
   section links all offset by this, so none of them land under the brand bar. */
.mr-docs-endpoints {
    --scalar-custom-header-height: var(--mr-header-h);
}

/* Scalar prints "Powered by Scalar" under its sidebar, and again in the client's empty
   response panel, both pointing at its home page. The package is MIT, which asks that the
   notice travel with copies of the software rather than sit in the page, so the credit goes.
   The home page exactly, so their terms and privacy links and the button that opens their
   client are untouched. */
.mr-docs-endpoints a[href="https://www.scalar.com"] {
    display: none;
}

#mr-scalar .scalar-mcp-layer {
    display: none;
}

body:has(#mr-docs-theme button) .darklight-reference {
    display: none;
}

/* Guides are tags with no operations. Drop their empty endpoints column, undo the clamp Scalar puts on a
   collapsed tag's description, keep the prose at a readable measure and let tables use the full width. */
.mr-docs-endpoints .section-column:empty {
    display: none;
}

.mr-docs-endpoints .section-columns:has(> .section-column:empty) > .section-column {
    container-type: inline-size;
}

.mr-docs-endpoints .section-columns:has(> .section-column:empty) .markdown {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    max-width: 46rem;
}

.mr-docs-endpoints .section-columns:has(> .section-column:empty) .markdown table {
    width: max-content;
    max-width: min(100cqi, 72rem);
}

.mr-docs-endpoints .section-columns:has(> .section-column:empty) .markdown td:first-child {
    white-space: nowrap;
}