/* ======================================================================
   docs.css - Technical reference layout for ScriptDocsPage.
   Same docs-style language as guide/leaderboard/market: hairline rows,
   no heavy cards, eyebrow + title pattern. Adds a sticky sidebar TOC
   on desktop and a chip-based TOC on mobile so a long reference page
   is actually navigable.
   ====================================================================== */

.doc-page {
    --doc-max: 1200px;
    --doc-read: 70ch;
    --doc-sidebar: 220px;
    --doc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --doc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --doc-code-bg: color-mix(in srgb, var(--text) 5%, transparent);
    --doc-code-border: color-mix(in srgb, var(--text) 12%, transparent);

    font-family: var(--doc-font);
    color: var(--text);
    line-height: 1.6;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    overflow-x: clip;
    padding: 0 0 64px;
}

.doc-page *,
.doc-page *::before,
.doc-page *::after {
    box-sizing: border-box;
}

.doc-page a { color: inherit; text-decoration: none; }

.doc-shell {
    max-width: var(--doc-max);
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 720px) {
    .doc-shell { padding: 0 20px; }
}

/* ======================================================================
   Header
   ====================================================================== */

.doc-header {
    padding: clamp(40px, 5vw, 56px) 0 clamp(20px, 3vw, 28px);
    border-bottom: 1px solid var(--border);
    max-width: 720px;
}

.doc-eyebrow {
    display: inline-block;
    font-family: var(--doc-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
    line-height: 1;
}

.doc-header h1 {
    font-family: var(--doc-font);
    font-weight: 700;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 14px;
    text-wrap: balance;
}

.doc-lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 38em;
}

.doc-meta {
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--doc-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
}

.doc-meta-pill {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.doc-meta-pill.accent {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* ======================================================================
   Two-column layout: sticky sidebar TOC + content
   ====================================================================== */

.doc-layout {
    display: grid;
    grid-template-columns: var(--doc-sidebar) minmax(0, 1fr);
    gap: 56px;
    padding-top: 32px;
    align-items: start;
}

.doc-sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 4px 0;
}

.doc-sidebar-label {
    margin: 0 0 12px;
    font-family: var(--doc-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.doc-sidebar ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: doc-toc;
    border-left: 1px solid var(--border);
}

.doc-sidebar li {
    counter-increment: doc-toc;
    margin: 0;
}

.doc-sidebar a {
    display: block;
    padding: 8px 12px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
    transition: color 0.15s ease-out, border-color 0.15s ease-out;
}

.doc-sidebar a::before {
    content: counter(doc-toc, decimal-leading-zero);
    font-family: var(--doc-mono);
    font-size: 10.5px;
    margin-right: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    letter-spacing: 0.04em;
}

.doc-sidebar a:hover {
    color: var(--text);
    border-left-color: color-mix(in srgb, var(--text) 25%, var(--border));
}

.doc-mobile-toc { display: none; }

@media (max-width: 960px) {
    .doc-layout {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .doc-sidebar { display: none; }
    .doc-mobile-toc {
        display: block;
        padding: 18px 0 6px;
    }
    .doc-mobile-toc ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .doc-mobile-toc a {
        display: inline-block;
        padding: 6px 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--text-secondary);
        font-size: 12.5px;
        font-weight: 500;
        transition: color 0.15s ease-out, border-color 0.15s ease-out, background 0.15s ease-out;
    }
    .doc-mobile-toc a:hover {
        color: var(--text);
        border-color: color-mix(in srgb, var(--text) 25%, var(--border));
        background: color-mix(in srgb, var(--text) 3%, transparent);
    }
}

/* ======================================================================
   Sections
   ====================================================================== */

.doc-content { min-width: 0; }

.doc-section {
    padding: 24px 0 0;
    scroll-margin-top: 24px;
}

.doc-section + .doc-section {
    padding-top: 48px;
    border-top: 1px solid var(--border);
    margin-top: 36px;
}

.doc-section-eyebrow {
    margin: 0;
    font-family: var(--doc-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.doc-section-title {
    font-family: var(--doc-font);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 6px 0 0;
    text-wrap: balance;
}

.doc-section-sub {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 12px 0 0;
    max-width: var(--doc-read);
}

.doc-section-sub a,
.doc-prose a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.doc-section-sub a:hover,
.doc-prose a:hover { color: var(--accent-hover); }

.doc-section-sub strong,
.doc-prose strong { color: var(--text); font-weight: 600; }

/* ======================================================================
   Subsection block (h3 + body)
   ====================================================================== */

.doc-block {
    margin: 28px 0 0;
}

.doc-block-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}

.doc-block h3 {
    font-family: var(--doc-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
    margin: 0;
}

.doc-block-tag {
    font-family: var(--doc-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.doc-block-tag.accent {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.doc-block-tag.warn {
    color: #f59e0b;
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
}

.doc-prose {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 12px;
    max-width: var(--doc-read);
}

.doc-prose:last-child { margin-bottom: 0; }

.doc-prose + .doc-prose { margin-top: 12px; }

.doc-prose-list {
    margin: 12px 0 0;
    padding: 0 0 0 20px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: var(--doc-read);
    list-style: none;
}

.doc-prose-list li {
    position: relative;
    padding: 4px 0 4px 4px;
}

.doc-prose-list li::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 14px;
    width: 6px;
    height: 1px;
    background: color-mix(in srgb, var(--text) 35%, transparent);
}

.doc-prose-list li + li { margin-top: 2px; }

.doc-prose-list a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.doc-prose-list a:hover { color: var(--accent-hover); }

.doc-prose-list strong { color: var(--text); font-weight: 600; }

.doc-prose code,
.doc-prose-list code,
.doc-section-sub code {
    font-family: var(--doc-mono);
    font-size: 0.88em;
    background: var(--doc-code-bg);
    border: 1px solid var(--doc-code-border);
    color: var(--text);
    padding: 1px 6px;
    border-radius: 4px;
}

/* ======================================================================
   Code block
   ====================================================================== */

.doc-code {
    margin: 12px 0 0;
    padding: 16px 18px;
    background: var(--doc-code-bg);
    border: 1px solid var(--doc-code-border);
    border-radius: 8px;
    overflow-x: auto;
    font-family: var(--doc-mono);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text);
    tab-size: 2;
}

.doc-code code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    white-space: pre;
}

/* ======================================================================
   Reference table (Property / Type / Description style)
   ====================================================================== */

.doc-table-wrap {
    margin: 12px 0 0;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.doc-table th {
    text-align: left;
    padding: 10px 14px;
    font-family: var(--doc-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.doc-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    line-height: 1.55;
    vertical-align: top;
}

.doc-table tbody tr:last-child td { border-bottom: 0; }

.doc-table tbody tr:hover {
    background: color-mix(in srgb, var(--text) 3%, transparent);
}

.doc-table td.mono,
.doc-table th.mono {
    font-family: var(--doc-mono);
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
}

.doc-table td.desc {
    color: var(--text-secondary);
    min-width: 200px;
}

.doc-table td code,
.doc-table th code {
    font-family: var(--doc-mono);
    font-size: 0.92em;
    background: var(--doc-code-bg);
    border: 1px solid var(--doc-code-border);
    color: var(--text);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ======================================================================
   Callout (note, warning, tip)
   ====================================================================== */

.doc-callout {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-left: 2px solid var(--border);
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border-radius: 0 6px 6px 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.doc-callout strong {
    color: var(--text);
    font-weight: 600;
    font-family: var(--doc-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 6px;
}

.doc-callout.note {
    border-left-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.doc-callout.warn {
    border-left-color: color-mix(in srgb, #f59e0b 70%, var(--border));
    background: color-mix(in srgb, #f59e0b 6%, transparent);
}

.doc-callout.warn strong { color: #f59e0b; }

.doc-callout code {
    font-family: var(--doc-mono);
    font-size: 0.9em;
    background: var(--doc-code-bg);
    border: 1px solid var(--doc-code-border);
    color: var(--text);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ======================================================================
   Footer note (last section closer)
   ====================================================================== */

.doc-outro {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 62ch;
}

.doc-outro a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.doc-outro a:hover { color: var(--accent-hover); }