/* =====================================================
   API DOCS PAGE - developers.css

   This page uses a dark code-block design that works in
   both light and dark themes. Overrides from main.css are
   documented inline with the global rule they counteract.
   ===================================================== */

/* ==========================================================
   GLOBAL LEAK OVERRIDES
   main.css has aggressive resets that break API doc layout.
   Each override here exists to counteract a specific rule.
   ========================================================== */

/* main.css: * { user-select: none } (line ~495)
   API docs must be selectable for copying code samples */
.developers-page,
.developers-page *,
.developers-page *::before,
.developers-page *::after {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/* main.css: section { padding: 96px 0 } (line ~614)
   API sections are dense - no padding between them */
.developers-page section {
    padding: 0;
    margin: 0;
}

/* main.css: p { margin-bottom: 16px } (line ~582)
   Tighter spacing for API prose */
.developers-page p {
    margin: 0 0 0.5em 0;
}

/* main.css: h1-h6 use Helvetica Neue, uppercase, giant sizes (line ~545)
   API docs use Inter/Barlow, sentence case, smaller sizes */
.developers-page :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-primary);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* main.css: pre/table/code have default margins
   Zero them out for precise control */
.developers-page pre,
.developers-page table,
.developers-page code {
    margin: 0;
}

/* main.css: button { background: none; border: none } resets
   Restore font inheritance for API page buttons */
.developers-page button {
    font-family: inherit;
}

/* Hero actions use the shared .btn system. Copy controls inside code
   blocks stay page-specific because they are positioned overlays. */

/* main.css: .footer { margin-top: 96px } (line ~2586)
   Eliminate the giant gap between last section and footer */
body[data-page="developers"] .footer {
    margin-top: 0;
}

/* ==========================================================
   PAGE LAYOUT
   ========================================================== */

.developers-page {
    --api-text-muted: var(--color-text-secondary);
    --api-action-text: var(--color-text-secondary);
    --api-accent: var(--color-success);
    --api-accent-rgb: var(--color-success-rgb);
    --api-accent-soft: rgba(var(--api-accent-rgb), 0.08);
    --api-accent-border: rgba(var(--api-accent-rgb), 0.35);
    --api-accent-border-strong: rgba(var(--api-accent-rgb), 0.55);
    --api-code-bg: #0d1117;
    --api-code-surface: #161b22;
    --api-code-text: #d4d4d4;
    --api-code-muted: #8b949e;
    --api-code-comment: #8b949e;
    --api-code-string: #e3b341;
    --api-code-url: #79c0ff;
    --api-code-flag: #9ca3af;
    --api-code-key: #7ee787;
    --api-code-number: #ff7b72;
    --api-get-text: var(--color-success);
    --api-get-rgb: var(--color-success-rgb);
    --api-post-text: #1d4ed8;
    --api-post-rgb: 29, 78, 216;
    --api-row-hover-bg: var(--color-bg-surface-hover);
    --api-detail-bg: var(--color-bg-surface);
    --api-inline-code-bg: var(--color-bg-surface-hover);

    padding: calc(72px + var(--spacing-md)) 0 var(--spacing-lg);
    min-height: 100vh;
    max-width: var(--container-lg);
    margin: 0 auto;
}

[data-theme="dark"] .developers-page {
    --api-accent: var(--color-success);
    --api-post-text: #60a5fa;
    --api-post-rgb: 96, 165, 250;
    --api-row-hover-bg: rgba(255, 255, 255, 0.03);
    --api-detail-bg: rgba(255, 255, 255, 0.02);
    --api-inline-code-bg: rgba(255, 255, 255, 0.06);
}

/* Anchored sections: offset for the fixed header so clicking
   TOC links doesn't hide the section title behind the navbar */
.developers-page .api-section {
    scroll-margin-top: calc(88px + var(--spacing-md));
}

/* ==========================================================
   HERO
   ========================================================== */

.api-hero {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.api-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.api-hero-sub {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.api-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

/* Base URL badge in hero */
.api-base-url {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--api-code-key);
    background: var(--api-code-bg);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

[data-theme="dark"] .api-base-url {
    background: var(--color-bg-surface);
    color: var(--api-code-key);
}

.api-base-label {
    color: var(--api-code-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[data-theme="dark"] .api-base-label {
    color: var(--api-code-muted);
}

.api-spec-action.copied {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #ffffff;
}

/* ==========================================================
   QUICK START CODE BLOCK
   ========================================================== */

.api-quick-wrap {
    position: relative;
    margin-bottom: var(--spacing-md);
    background: var(--api-code-bg);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.api-quick {
    background: var(--api-code-bg);
    padding: var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--api-code-text);
    overflow-x: auto;
    white-space: pre;
}

[data-theme="dark"] .api-quick {
    background: var(--api-code-bg);
}

/* ==========================================================
   SYNTAX HIGHLIGHTING
   Consistent colors in both light and dark theme.
   Code blocks always have dark backgrounds, so the same
   colors work in both modes.
   ========================================================== */

.cm { color: var(--api-code-comment); } /* comments */
.s  { color: var(--api-code-string); }  /* strings */
.u  { color: var(--api-code-url); }     /* URLs */
.fl { color: var(--api-code-flag); }    /* flags */
.k  { color: var(--api-code-key); }     /* keys */
.n  { color: var(--api-code-number); }  /* numbers/booleans */

/* ==========================================================
   TABLE OF CONTENTS
   ========================================================== */

.api-toc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.api-toc a {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--api-action-text);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.api-toc a:hover {
    background: var(--color-bg-surface-hover);
    color: var(--api-accent);
}

/* ==========================================================
   SECTIONS
   ========================================================== */

.api-section {
    margin-bottom: var(--spacing-md);
}

.api-section-head {
    font-size: var(--font-size-sm);
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--api-text-muted);
    margin-bottom: var(--spacing-sm);
}

.api-section > p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.api-sub {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

/* ==========================================================
   ENDPOINT ROWS
   Accordion-style collapsible endpoint details
   ========================================================== */

.api-ep {
    margin-bottom: var(--spacing-xs);
    background: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.api-ep:hover {
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

.api-ep[data-open="true"] {
    border-color: var(--color-border-heavy);
}

[data-theme="dark"] .api-ep {
    border-color: var(--color-border-medium);
}

/* Endpoint bar - the clickable header row.
   Uses button semantics for keyboard accessibility. */
.api-ep-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.875rem var(--spacing-sm);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
    background: var(--color-bg-secondary);
    border: none;
    text-align: left;
    font: inherit;
    color: inherit;
}

.api-ep-bar:hover {
    background: var(--api-row-hover-bg);
}

[data-theme="dark"] .api-ep-bar:hover {
    background: var(--api-row-hover-bg);
}

.api-ep-bar:focus-visible {
    outline: 2px solid var(--api-accent);
    outline-offset: -2px;
}

/* HTTP method badges */
.api-badge {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    min-width: 3rem;
    text-align: center;
    line-height: 1.4;
    border-radius: var(--radius-md);
}

.api-badge-get {
    background: rgba(var(--api-get-rgb), 0.12);
    color: var(--api-get-text);
    border: 1px solid rgba(var(--api-get-rgb), 0.25);
}

[data-theme="dark"] .api-badge-get {
    background: rgba(var(--api-get-rgb), 0.12);
    color: var(--api-get-text);
    border-color: rgba(var(--api-get-rgb), 0.25);
}

.api-badge-post {
    background: rgba(var(--api-post-rgb), 0.1);
    color: var(--api-post-text);
    border: 1px solid rgba(var(--api-post-rgb), 0.22);
}

[data-theme="dark"] .api-badge-post {
    background: rgba(var(--api-post-rgb), 0.12);
    color: var(--api-post-text);
    border-color: rgba(var(--api-post-rgb), 0.25);
}

/* Endpoint path */
.api-ep-path {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    word-break: break-all;
}

/* Endpoint label - right-aligned short name */
.api-ep-label {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--api-text-muted);
    white-space: nowrap;
}

/* Arrow indicator */
.api-ep-arrow {
    font-size: var(--font-size-xs);
    color: var(--api-text-muted);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.api-ep[data-open="true"] .api-ep-arrow {
    transform: rotate(90deg);
}

/* Endpoint detail panel */
.api-ep-detail {
    display: none;
    padding: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
    background: var(--api-detail-bg);
}

[data-theme="dark"] .api-ep-detail {
    border-top-color: var(--color-border-light);
    background: var(--api-detail-bg);
}

.api-ep[data-open="true"] .api-ep-detail {
    display: block;
}

.api-ep-detail > p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================
   CODE BLOCKS
   Always dark-background regardless of site theme.
   ========================================================== */

.api-pre-wrap {
    position: relative;
    margin: var(--spacing-xs) 0 var(--spacing-sm);
    background: var(--api-code-bg);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Label above code block (Request/Response/curl/etc) */
.api-pre-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--api-code-muted);
    background: var(--api-code-surface);
    padding: 0.5rem 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}

[data-theme="dark"] .api-pre-label {
    background: var(--api-code-surface);
    color: var(--api-code-muted);
}

/* Code block body */
.api-pre {
    background: var(--api-code-bg);
    color: var(--api-code-text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    padding: 0.75rem var(--spacing-sm);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

[data-theme="dark"] .api-pre {
    background: var(--api-code-bg);
    color: var(--api-code-text);
}

/* Copy button - positioned top-right inside code block.
   Offset accounts for label row height. */
.api-copy-action {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: var(--api-code-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    line-height: 1.6;
    z-index: 1;
}

.api-copy-action:hover {
    color: var(--api-code-text);
}

.api-copy-action:focus-visible {
    outline: 2px solid var(--api-accent);
    outline-offset: -2px;
}

/* When label is present, push copy button below the label row */
.api-pre-label + .api-pre + .api-copy-action,
.api-pre-label ~ .api-copy-action {
    top: 0;
}

/* ==========================================================
   TABLES
   ========================================================== */

.api-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin: var(--spacing-sm) 0;
}

.api-tbl th {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--api-text-muted);
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border-medium);
}

.api-tbl td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
    line-height: 1.5;
    color: var(--color-text-primary);
}

/* Inline code inside tables and detail panels */
.api-tbl code,
.api-ep-detail code,
.api-section > p code {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    background: var(--api-inline-code-bg);
    padding: 1px 4px;
}

[data-theme="dark"] .api-tbl code,
[data-theme="dark"] .api-ep-detail code,
[data-theme="dark"] .api-section > p code {
    background: var(--api-inline-code-bg);
}

/* Required marker */
.req {
    color: var(--color-error);
    font-weight: 600;
    font-size: var(--font-size-xs);
}

/* ==========================================================
   NOTES / CALLOUTS
   ========================================================== */

.api-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: 0.75rem var(--spacing-sm);
    border-left: 2px solid var(--api-accent);
    background: var(--api-accent-soft);
    margin: var(--spacing-xs) 0 var(--spacing-sm);
    line-height: 1.5;
}

[data-theme="dark"] .api-note {
    background: var(--api-accent-soft);
    border-left-color: var(--api-accent);
    color: var(--color-text-secondary);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 600px) {
    .api-toc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--spacing-xs);
    }

    .api-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .api-base-url,
    .api-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .api-hero h1 {
        font-size: 1.6rem;
    }

    .developers-page {
        padding-top: calc(64px + var(--spacing-sm));
        padding-bottom: var(--spacing-md);
    }

    .api-ep-bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        padding: 0.75rem;
    }

    .api-ep-label {
        display: none;
    }
}