/* Documentation pages: side navigation, article, "on this page". */
.docs {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 200px;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    padding-block: 40px 0;
}

docs-sidebar, docs-toc {
    position: sticky;
    top: calc(var(--header-height) + 76px);
    max-height: calc(100vh - var(--header-height) - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.side-details > summary { display: none; }
.side-title, .toc-title {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.side-nav ul { margin: 0 0 26px; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.side-nav a {
    display: block;
    margin-left: -1px;
    padding: 6px 14px;
    border-left: 1px solid transparent;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.side-nav a:hover { color: var(--text); text-decoration: none; }
.side-nav a.is-active { border-left-color: var(--ember-500); color: var(--text); font-weight: 600; }

.toc ul { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 4px 0; color: var(--text-dim); font-size: 0.86rem; line-height: 1.4; }
.toc a:hover, .toc a.is-active { color: var(--text); text-decoration: none; }

/* The article */
.docs-body { min-width: 0; max-width: 780px; }
.docs-body > h1 { font-size: clamp(2rem, 4vw, 2.7rem); margin-bottom: 14px; }
.docs-body > .lead { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.docs-body h2 { margin: 2.2em 0 0.6em; font-size: 1.55rem; }
.docs-body h3 { margin: 1.8em 0 0.5em; font-size: 1.12rem; }
.docs-body p, .docs-body li { color: #c3cbdd; }
.docs-body li { margin-bottom: 6px; }
.docs-body strong { color: var(--text); font-weight: 600; }
.docs-body .table-wrap { margin-bottom: 1.4em; }
.docs-body .table td:first-child { color: var(--text); }
.docs-body .table code { white-space: normal; overflow-wrap: anywhere; }

.note {
    margin: 0 0 1.4em;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue-500);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.note.warn { border-left-color: var(--ember-500); }
.note p { margin: 0; }
.note p + p { margin-top: 8px; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.pager a {
    display: block;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 600;
}
.pager a:hover { border-color: var(--line-strong); text-decoration: none; }
.pager small { display: block; margin-bottom: 2px; color: var(--text-dim); font-size: 0.78rem; font-weight: 600; }
.pager-next { text-align: right; }

@media (max-width: 1180px) {
    .docs { grid-template-columns: 220px minmax(0, 1fr); }
    docs-toc { display: none; }
}
@media (max-width: 959px) {
    .docs { grid-template-columns: 1fr; padding-top: 20px; }
    docs-sidebar { position: static; max-height: none; }
    .side-details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
    .side-details > summary { display: block; padding: 12px 16px; font-weight: 600; cursor: pointer; }
    .side-details .side-nav { padding: 6px 16px 0; }
}