/* ==========================================================================
   Public developer documentation page (/developers)

   Renders docs/EXTERNAL_API_GUIDE.md. Uses the design tokens from main.css so
   it reads as part of NEXUS, but carries its own layout because the page is
   served unauthenticated and has none of the app chrome.
   ========================================================================== */

.docs-page {
    background: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
}

/* -- header ------------------------------------------------------------- */

.docs-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 12px clamp(16px, 4vw, 40px);
    padding-top: max(12px, env(safe-area-inset-top));
    background: rgba(10, 12, 16, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}

.docs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.docs-brand__icon { width: 34px; height: 34px; object-fit: contain; }
.docs-brand__lockup { display: flex; flex-direction: column; line-height: 1.05; }
.docs-brand__name {
    font-weight: 800;
    letter-spacing: 0.12em;
    font-size: 1rem;
    color: var(--text-primary);
}
/* Sized to match the NEXUS character width above it. */
.docs-brand__by {
    font-size: 0.5rem;
    letter-spacing: 0.055em;
    color: var(--text-muted);
    text-transform: none;
}

.docs-header__actions { display: flex; align-items: center; gap: 10px; }
.docs-header__link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 7px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.docs-header__link:hover { color: var(--text-primary); border-color: var(--accent-primary); }

.docs-toc-toggle {
    display: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 7px 14px;
    font-size: 0.875rem;
    cursor: pointer;
}

/* -- layout ------------------------------------------------------------- */

.docs-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.docs-toc { position: relative; }
.docs-toc__inner {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: var(--space-lg) 0;
}
.docs-toc__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc ul ul { margin-left: 12px; }
/* The guide nests four levels deep; past h3 the sidebar becomes noise. */
.docs-toc ul ul ul { display: none; }
.docs-toc a {
    display: block;
    padding: 4px 10px;
    margin: 1px 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.docs-toc a:hover { color: var(--text-primary); background: var(--bg-secondary); }
.docs-toc a.is-active {
    color: var(--accent-primary);
    border-left-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.06);
}

.docs-content { min-width: 0; padding: var(--space-lg) 0 80px; }

/* The article is wide enough for tables and code; the measure is constrained
   on the text elements themselves so prose stays readable. */
.docs-article { max-width: 1100px; }
.docs-article > p,
.docs-article > ul,
.docs-article > ol,
.docs-article > blockquote,
.docs-article > h1,
.docs-article > h3,
.docs-article > h4 { max-width: 76ch; }

/* -- prose -------------------------------------------------------------- */

.docs-article h1,
.docs-article h2,
.docs-article h3,
.docs-article h4 {
    color: var(--text-primary);
    line-height: 1.25;
    /* Offset the sticky header so an anchor jump does not hide the heading. */
    scroll-margin-top: 84px;
}
.docs-article h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; margin: 8px 0 16px; letter-spacing: -0.02em; }
.docs-article h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 48px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}
.docs-article h3 { font-size: 1.0625rem; font-weight: 700; margin: 30px 0 10px; }
.docs-article h4 { font-size: 0.9375rem; font-weight: 700; margin: 22px 0 8px; color: var(--text-secondary); }

.docs-article p,
.docs-article li { color: var(--text-secondary); line-height: 1.7; font-size: 0.9375rem; }
.docs-article p { margin: 0 0 14px; }
.docs-article ul, .docs-article ol { margin: 0 0 16px; padding-left: 22px; }
.docs-article li { margin: 5px 0; }
.docs-article li > ul, .docs-article li > ol { margin: 5px 0 0; }
.docs-article strong { color: var(--text-primary); font-weight: 650; }
.docs-article hr { border: none; border-top: 1px solid var(--border-subtle); margin: 32px 0; }

.docs-article a { color: var(--accent-primary); text-decoration: none; }
.docs-article a:hover { text-decoration: underline; }

.docs-article blockquote {
    margin: 0 0 16px;
    padding: 12px 18px;
    border-left: 3px solid var(--accent-primary);
    background: var(--bg-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.docs-article blockquote p:last-child { margin-bottom: 0; }

/* -- code --------------------------------------------------------------- */

.docs-article code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 1px 5px;
    color: #e2e8f0;
    word-break: break-word;
}

.docs-article pre {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    /* Long curl lines and JSON must scroll inside the block, never widen
       the page — the body must not scroll horizontally. */
    overflow-x: auto;
    margin: 0 0 18px;
}
.docs-article pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #cbd5e1;
    white-space: pre;
}

.docs-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.6875rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.docs-article pre:hover .docs-copy,
.docs-copy:focus-visible { opacity: 1; }
.docs-copy:hover { color: var(--text-primary); border-color: var(--accent-primary); }

/* -- tables ------------------------------------------------------------- */

/* The guide carries 40+ tables, most of them prose-heavy, so cells wrap
   rather than forcing a scroll. The scroll container stays as the fallback
   for the genuinely wide ones, so the article column is never widened. */
.docs-article .docs-table-wrap {
    overflow-x: auto;
    margin: 0 0 20px;
}
.docs-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.8438rem;
    /* min-width keeps a wide table readable and lets the wrapper scroll it
       instead of squeezing columns into unreadable slivers. */
    min-width: 480px;
}
.docs-article td code,
.docs-article th code { white-space: nowrap; }
.docs-article th,
.docs-article td {
    text-align: left;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}
.docs-article th {
    color: var(--text-primary);
    font-weight: 650;
    background: var(--bg-secondary);
    border-bottom-color: var(--border-default);
}
.docs-article td { color: var(--text-secondary); }
.docs-article tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* -- footer ------------------------------------------------------------- */

.docs-footer {
    margin-top: 56px;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
    max-width: 76ch;
}
.docs-content > .docs-footer { max-width: 76ch; }
.docs-footer p { color: var(--text-secondary); font-size: 0.875rem; margin: 0 0 8px; }
.docs-footer__meta { color: var(--text-muted); font-size: 0.8125rem; }
.docs-footer a { color: var(--accent-primary); text-decoration: none; }

/* -- responsive --------------------------------------------------------- */

@media (max-width: 900px) {
    .docs-shell { grid-template-columns: minmax(0, 1fr); }
    .docs-toc-toggle { display: inline-block; }

    .docs-toc {
        position: fixed;
        inset: 0;
        top: 61px;
        z-index: 25;
        background: var(--bg-primary);
        border-right: 1px solid var(--border-subtle);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        overflow-y: auto;
    }
    .docs-toc.is-open { transform: translateX(0); }
    .docs-toc__inner {
        position: static;
        max-height: none;
        padding: var(--space-lg) clamp(16px, 4vw, 40px);
        padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
    }
    .docs-toc ul ul ul { display: block; }
}

@media (max-width: 768px) {
    .docs-article { max-width: none; }
    .docs-article h2 { margin-top: 36px; }
    .docs-brand__by { display: none; }
    .docs-content { padding-bottom: max(56px, env(safe-area-inset-bottom)); }
}