/* Standalone stylesheet for html/apiDocs.html - deliberately NOT part of style.css (which is
   already huge and mostly irrelevant to a docs page). Relies only on the CSS custom properties
   theme.js sets on :root (--bg-primary, --accent-primary, etc.) for light/dark theming - nothing
   else here depends on style.css being loaded. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.docs-body {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.docs-topbar {
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 50;
}
.docs-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1520px;
    margin: 0 auto;
    padding: 14px 24px;
}
.docs-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
}
.docs-brand img { height: 30px; width: auto; }
/* Trademark-style badge: small, tucked at the top-right corner of the logo, like a "TM" mark
   next to the last letter - not centered over the whole wordmark. */
.docs-brand .api-text {
    position: absolute;
    top: 5px;
    right: -17px;
    transform: translateY(-50%);
    font-weight: 800;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    white-space: nowrap;
}
.docs-topbar-links { display: flex; gap: 18px; align-items: center; }
.docs-topbar-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
}
.docs-topbar-links a:hover { color: var(--accent-primary); }

.docs-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 820px);
    gap: 48px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 96px;
    justify-content: center;
}
@media (max-width: 900px) {
    /* .docs-layout { grid-template-columns: 1fr; } */
    /* .docs-nav { display: none; } */
    .docs-layout{
        grid-template-columns: 128px minmax(0, 820px);
        gap: 20px;
    }
}
/* A real third grid column for the playground sidebar, not an overlay - reserves its own width
   so it can never overlap .docs-main regardless of scroll position. This breakpoint (1300px)
   MUST stay in sync with .playground-fixed-mount's own media query below - they used to be two
   separate, mismatched values (1000px here, 1300px there), which left the grid reserving a
   third column's worth of space for a hundreds-of-pixels stretch where the sidebar itself was
   still display:none, squeezing .docs-main into a narrower column for a phantom empty column
   nobody could see (confirmed live). One shared breakpoint, defined once. */
@media (min-width: 1300px) {
    .docs-layout {
        grid-template-columns: 240px minmax(0, 820px) 360px;
        max-width: 1520px;
    }
}

.docs-nav {
    position: sticky;
    top: 70px;
    align-self: start;
    font-size: 0.85rem;
}
.docs-nav-group { margin-bottom: 20px; }
.docs-nav-group h4 {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0 0 8px;
}
.docs-nav-group a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 2px;
}
.docs-nav-group a:hover { color: var(--text-primary); background: var(--bg-hover); }
.docs-nav-group a.active { color: var(--accent-primary); background: var(--bg-hover); font-weight: 600; }
/* Every #anchor link here becomes :visited after one click - without this the browser's default
   visited-link purple wins over the theme colors above for that link from then on. */
.docs-nav-group a:visited { color: var(--text-secondary); }
.docs-nav-group a:visited:hover { color: var(--text-primary); }
.docs-nav-group a.active:visited { color: var(--accent-primary); }

.docs-main h1 { font-size: 2rem; margin: 0 0 12px; }
.docs-main > p.lead { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin-bottom: 24px; }

/* Inline cross-reference links (e.g. "see Providers" inside a param table) - otherwise just
   the browser's default blue/purple link colors against this dark theme. */
.docs-main a { color: var(--accent-primary); }
.docs-main a:visited { color: var(--accent-primary); }
.docs-main a:hover { color: var(--text-primary); }

section.docs-section { margin-bottom: 56px; scroll-margin-top: 84px; }
section.docs-section h2 { font-size: 1.4rem; margin: 0 0 8px; border-top: 1px solid var(--border-color); padding-top: 40px; }
section.docs-section h2:first-of-type { border-top: none; padding-top: 0; }
section.docs-section > p { color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }

.callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.callout .icon { flex-shrink: 0; display: flex; align-items: center; color: var(--accent-primary); }
.callout .icon svg { width: 20px; height: 20px; }

.status-live { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-primary); font-weight: 600; }
.status-live svg { width: 15px; height: 15px; flex-shrink: 0; }
.callout.planned { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-card)); }
.callout.planned strong { color: var(--accent-primary); }

/* Server Status - folded directly into each #providers card (one dot per card) instead of a
   separate grid below. Green/red/gray dot mirrors the live/down/pending states render() in the
   inline script assigns via provider-status-up/-down/-pending, put on .provider-status-inline. */
.provider-status-legend { margin: 12px 0 16px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.provider-status-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.provider-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    background: var(--text-muted);
}
.provider-status-up .provider-status-dot { background: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, 0.6); }
.provider-status-down .provider-status-dot { background: #e74c3c; box-shadow: 0 0 6px rgba(231, 76, 60, 0.6); }
.provider-status-pending .provider-status-dot { background: var(--text-muted); }
.provider-status-state { display: block; font-size: 0.78rem; color: var(--text-secondary); }
.provider-status-up .provider-status-state { color: #2ecc71; }
.provider-status-down .provider-status-state { color: #e74c3c; }
.provider-status-detail { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; word-break: break-word; }

.method-badge {
    display: inline-block;
    background: var(--accent-primary);
    color: #000;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 5px;
    margin-right: 8px;
}
.endpoint-path {
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.endpoint-header { margin-bottom: 6px; }

.code-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    margin: 12px 0;
}
.code-block-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}
.code-block-tab {
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.code-block-tab.active { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-hover)); }
.code-block-tab[data-tab] { cursor: pointer; border: none; font-family: inherit; }
.code-block-tab[data-tab]:hover:not(.active) { color: var(--text-secondary); }

/* URL tab: each example is a real, clickable link that opens the live embed in a new tab. */
.url-example { display: block; margin-bottom: 14px; }
.url-example:last-child { margin-bottom: 0; }
.url-example-note { display: block; color: var(--text-muted); font-style: italic; margin-bottom: 2px; }
.url-example a { color: var(--accent-primary); text-decoration: none; }
.url-example a:visited { color: var(--accent-primary); }
.url-example a:hover { text-decoration: underline; }
.code-block pre {
    margin: 0;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-x: auto;
    color: var(--text-secondary);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-hover);
}
.code-block pre::-webkit-scrollbar { height: 8px; }
.code-block pre::-webkit-scrollbar-track { background: var(--bg-hover); }
.code-block pre::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 4px; }
.code-block pre::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-primary) 80%, white); }
.code-block pre.placeholder {
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px dashed var(--border-color);
}

table.param-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    font-size: 0.85rem;
}
table.param-table th {
    text-align: left;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}
table.param-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    vertical-align: top;
}
table.param-table td code {
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    background: var(--bg-hover);
    padding: 1px 6px;
    border-radius: 4px;
}
td.tbd, pre.placeholder-inline {
    color: var(--text-muted);
    font-style: italic;
}

.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0 24px;
}
.provider-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}
.provider-card h4 { margin: 0 0 4px; font-size: 0.95rem; color: var(--text-primary); }
.provider-card p { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.provider-card .server-value {
    display: inline-block;
    margin-top: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-hover));
    padding: 2px 7px;
    border-radius: 5px;
}

/* Questions & Support form (#support) */
.support-form {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.support-form-row { display: flex; flex-direction: column; gap: 6px; }
.support-form-row label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; }
.support-form-row input,
.support-form-row select,
.support-form-row textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 9px 11px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}
.support-form-row input:focus,
.support-form-row select:focus,
.support-form-row textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.support-form-id-group { display: flex; gap: 8px; margin-top: 4px; }
.support-form-id-group input { flex: 1; min-width: 0; }
/* Honeypot - off-screen rather than display:none/visibility:hidden, which some spam bots
   specifically detect and skip filling; kept in the tab order out via tabindex="-1" above. */
.support-form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.support-form-submit {
    align-self: flex-start;
    background: var(--accent-primary);
    color: #000;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    border-radius: 7px;
    padding: 10px 22px;
    cursor: pointer;
}
.support-form-submit:disabled { opacity: 0.6; cursor: default; }
.support-form-submit:hover:not(:disabled) { filter: brightness(1.08); }
.support-form-status { margin: 0; font-size: 0.85rem; min-height: 1.2em; }
.support-form-status.success { color: #3ecf6c; }
.support-form-status.error { color: #e35d5d; }

/* ── Embed Playground ──────────────────────────────────────────────────────────────────────
   Uses the page's own theme tokens (--bg-card, --border-color, --text-primary/secondary,
   --accent-primary) the same way the rest of apiDocs.css does (.code-block, .method-badge,
   .callout, etc.) so this reads as part of the site rather than a separately-themed panel. */
.playground-card {
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px 22px 24px;
}
/* The 420px cap exists for the sidebar copy, which lives in a fixed ~320-360px grid column and
   needs it. Below 1300px this is the ONLY copy shown (see #embed-playground's own media query
   further down) and .docs-main gives it real room (up to 820px) - staying capped at 420px there
   just wasted the rest of that width for no reason. */
#embed-playground .playground-card { max-width: none; }
.playground-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.playground-card-icon { display: inline-flex; color: var(--accent-primary); }
.playground-card-icon svg { width: 20px; height: 20px; }
.playground-card-head h3 { margin: 0; font-size: 1.15rem; color: var(--text-primary); font-weight: 700; }
.playground-card-sub { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; margin: 0 0 20px; }

.playground-field { margin-bottom: 16px; }
.playground-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.playground-row .playground-field { margin-bottom: 0; }
.playground-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.playground-input,
.playground-select-wrap select {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: inherit;
}
.playground-select-wrap { position: relative; }
.playground-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    cursor: pointer;
}
.playground-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.playground-input:focus,
.playground-select-wrap select:focus { outline: none; border-color: var(--accent-primary); }
.playground-input::placeholder { color: var(--text-muted); }

.playground-actions { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.playground-btn-primary,
.playground-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.playground-btn-primary {
    background: var(--accent-primary);
    color: #000;
}
.playground-btn-primary:hover { filter: brightness(1.1); }
.playground-btn-secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.playground-btn-secondary:hover { filter: brightness(1.15); }

.playground-status { min-height: 1.2em; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 4px; }
.playground-status.error { color: #f87171; }
.playground-status.success { color: #4ade80; }

.playground-output { margin-top: 14px; }
.playground-code-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
/* Grows in height with its content instead of forcing a single nowrap line with its own
   horizontal scrollbar - a Sub+Dub embed's code is two full iframe tags, and side-scrolling to
   read one was worse than just letting the row get taller. */
.playground-code-row code {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--accent-primary);
    font-size: 0.78rem;
    font-family: 'Consolas', 'Monaco', monospace;
}
.playground-copy-btn {
    flex-shrink: 0;
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 0.78rem;
    cursor: pointer;
}
.playground-copy-btn:hover { filter: brightness(1.15); }
.playground-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.playground-preview-grid.dual { grid-template-columns: 1fr 1fr; }
.playground-preview-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #000;
}
.playground-preview-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
@media (max-width: 560px) {
    .playground-preview-grid.dual { grid-template-columns: 1fr; }
}
/* The sidebar copy's card is only ~320-360px wide regardless of viewport width (it's a fixed
   grid column, not the whole screen) - the viewport-width media query above never fires there
   even though the CARD itself is plenty narrow enough to need it, which squeezed the two SUB/DUB
   preview iframes into slivers (confirmed live). Force single-column any time the grid is inside
   the sidebar specifically, independent of viewport width. */
.playground-fixed-mount .playground-preview-grid.dual { grid-template-columns: 1fr; }
/* Tighter sizing for the narrow (~320-360px) sidebar card specifically - the base sizes were
   tuned for the wider inline copy and read as cramped/wrapping oddly here (e.g. the ID field's
   label wrapping mid-word - confirmed live). */
.playground-fixed-mount { padding: 18px 16px 20px; }
.playground-fixed-mount .playground-label { font-size: 0.66rem; letter-spacing: 0.03em; }
.playground-fixed-mount .playground-input,
.playground-fixed-mount .playground-select-wrap select { padding: 9px 12px; font-size: 0.85rem; }
.playground-fixed-mount .playground-field { margin-bottom: 12px; }
.playground-fixed-mount .playground-row { gap: 8px; margin-bottom: 12px; }
.playground-fixed-mount .playground-actions { gap: 8px; }
.playground-fixed-mount .playground-btn-primary,
.playground-fixed-mount .playground-btn-secondary { padding: 9px 14px; font-size: 0.82rem; }

/* Same orange-on-dark scrollbar as .code-block pre, on the same theme tokens. */
.playground-fixed-mount {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-hover);
}
.playground-fixed-mount::-webkit-scrollbar { width: 8px; }
.playground-fixed-mount::-webkit-scrollbar-track { background: var(--bg-hover); }
.playground-fixed-mount::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 4px; }

/* Two copies of the same playground exist in the DOM at once (see renderPlaygroundCard) -
   exactly one is ever displayed, switched purely by viewport width, at the SAME 1300px
   breakpoint .docs-layout's own third-column media query above uses (kept in sync deliberately
   - see that rule's comment for what happens when they drift apart). Below 1300px the inline
   #embed-playground section (normal document flow, between Advanced and Info) is the one
   that's visible; the sidebar copy only turns on at 1300px+, where .docs-layout has already
   given it a real third grid column to live in - position:sticky here just keeps it in view
   within THAT reserved column as the page scrolls, the same way .docs-nav already does on the
   left. It can never overlap .docs-main because grid, not an absolute/fixed overlay, is what's
   placing it - there's no shared space left to overlap. */
.playground-fixed-mount { display: none; }
@media (min-width: 1300px) {
    #embed-playground { display: none; }
    .playground-fixed-mount {
        display: block;
        position: sticky;
        top: 70px;
        align-self: start;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        max-width: none;
    }
}