/* Documentation pages. Loaded after styles.css, which supplies the palette,
   the nav and the type scale — this only adds what long-form reading needs:
   a measured column, a sticky table of contents, and tables that survive a
   phone. */

.docs-body { background: var(--bg, #0b1020); }

.docs-shell {
    max-width: 1140px;
    margin: 0 auto;
    padding: 108px 24px 72px;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

/* ── Table of contents ── */
.docs-toc { position: sticky; top: 92px; }
.docs-toc-inner {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.docs-toc-title {
    display: block; padding: 0 0 10px 14px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase; color: #8b8fa3;
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li a {
    display: block; padding: 5px 0 5px 14px;
    margin-left: -1px; border-left: 1px solid transparent;
    color: #8b8fa3; text-decoration: none; font-size: 13px; line-height: 1.45;
}
.docs-toc li a:hover { color: #fff; border-left-color: #38bdf8; }
.docs-toc li.lvl3 a { padding-left: 26px; font-size: 12.5px; }

/* ── Article ── */
.docs-article {
    min-width: 0;                       /* let wide tables scroll, not stretch */
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.72;
}
.docs-article h1 {
    margin: 0 0 18px; font-size: 34px; line-height: 1.2; color: #f8fafc;
    letter-spacing: -0.4px;
}
.docs-article h2 {
    margin: 44px 0 14px; padding-top: 18px; font-size: 23px; color: #f8fafc;
    border-top: 1px solid rgba(255, 255, 255, 0.08); letter-spacing: -0.2px;
}
.docs-article h3 { margin: 30px 0 10px; font-size: 17px; color: #e2e8f0; }
.docs-article h4 { margin: 22px 0 8px; font-size: 14px; color: #e2e8f0; }
.docs-article p { margin: 0 0 15px; }
.docs-article strong { color: #f1f5f9; }
.docs-article a { color: #38bdf8; }

/* The heading anchor stays invisible until the heading is hovered, so the
   page reads clean but every section is still linkable. */
.docs-article .anchor {
    margin-left: 10px; color: #38bdf8; text-decoration: none;
    opacity: 0; transition: opacity 0.12s ease; font-weight: 400;
}
.docs-article h2:hover .anchor,
.docs-article h3:hover .anchor { opacity: 0.75; }

.docs-article ul, .docs-article ol { margin: 0 0 16px; padding-left: 22px; }
.docs-article li { margin: 5px 0; }

.docs-article code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em; padding: 2px 6px; border-radius: 5px;
    background: rgba(148, 163, 184, 0.14); color: #e2e8f0;
}
.docs-article pre {
    margin: 0 0 18px; padding: 15px 17px; border-radius: 11px;
    background: #0d1424; border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}
.docs-article pre code { background: none; padding: 0; font-size: 13px; }

.docs-article blockquote {
    margin: 0 0 18px; padding: 11px 17px; border-radius: 0 10px 10px 0;
    border-left: 3px solid #2563eb; background: rgba(37, 99, 235, 0.09);
    color: #cbd5e1;
}
.docs-article blockquote p:last-child { margin-bottom: 0; }
.docs-article hr {
    margin: 34px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tables scroll inside their own box; the page never scrolls sideways. */
.docs-article table {
    display: block; width: 100%; overflow-x: auto;
    border-collapse: collapse; margin: 0 0 20px; font-size: 13.5px;
    white-space: nowrap;
}
.docs-article th, .docs-article td {
    padding: 9px 14px; text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.docs-article th {
    color: #8b8fa3; font-size: 11px; letter-spacing: 0.6px;
    text-transform: uppercase; font-weight: 700;
}

.docs-updated {
    margin-top: 44px; padding-top: 18px; font-size: 12.5px; color: #8b8fa3;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Index ── */
.docs-lede { font-size: 16.5px; color: #94a3b8; margin-bottom: 30px; max-width: 62ch; }
.docs-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.docs-card {
    display: block; padding: 22px; border-radius: 14px; text-decoration: none;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.docs-card:hover { border-color: #38bdf8; transform: translateY(-2px); }
.docs-card h2 { margin: 0 0 8px; font-size: 18px; color: #f8fafc; border: 0; padding: 0; }
.docs-card p { margin: 0 0 12px; font-size: 14px; color: #94a3b8; line-height: 1.6; }
.docs-card-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: #8b8fa3;
}
.docs-note { margin-top: 30px; font-size: 14px; color: #94a3b8; }

.docs-footer {
    max-width: 1140px; margin: 0 auto; padding: 26px 24px 40px;
    display: flex; justify-content: space-between; gap: 16px;
    font-size: 12.5px; color: #8b8fa3;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-links a.is-current { color: #fff; }

@media (max-width: 900px) {
    .docs-shell { grid-template-columns: 1fr; gap: 0; padding-top: 92px; }
    /* Unpin the TOC and let it sit above the article rather than eat a
       third of a phone screen. */
    .docs-toc { position: static; margin-bottom: 26px; }
    .docs-toc-inner { max-height: 216px; }
    .docs-article h1 { font-size: 27px; }
    .docs-article h2 { font-size: 20px; }
}