/* === Product documentation (/docs). Uses the site's design tokens from styles.css. === */
.docs-body { background: var(--bg-primary); color: var(--text-primary); }
.docs-body .nav-logo img { height: 64px; }

.docs-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 120px 24px 64px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 200px;
    gap: 40px;
    align-items: start;
}

.docs-sidebar, .docs-toc { position: sticky; top: 112px; max-height: calc(100vh - 128px); overflow-y: auto; }
.docs-sidebar summary { display: none; }
.docs-nav-group { margin-bottom: 1.5rem; }
.docs-nav-group h4, .docs-toc h4 {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary); margin-bottom: 0.5rem; font-weight: 600;
}
.docs-nav-group a, .docs-toc a {
    display: block; padding: 0.3rem 0.6rem; border-radius: 6px;
    font-size: 0.875rem; color: var(--text-secondary); text-decoration: none;
    border-left: 2px solid transparent;
}
.docs-nav-group a:hover, .docs-toc a:hover { color: var(--text-primary); background: var(--glass-bg-light); }
.docs-nav-group a[aria-current="page"] { color: var(--accent-green); border-left-color: var(--accent-green); background: var(--glass-bg-light); }

.docs-article { max-width: 760px; font-size: 1rem; line-height: 1.7; }
.docs-article h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 1.25rem; font-weight: 700; }
.docs-article h2 { font-size: 1.4rem; margin: 2.5rem 0 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--glass-border); scroll-margin-top: 120px; }
.docs-article h3 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; scroll-margin-top: 120px; }
.docs-article p, .docs-article ul, .docs-article ol, .docs-article blockquote, .docs-article pre, .docs-table { margin: 0 0 1rem; }
.docs-article ul, .docs-article ol { padding-left: 1.4rem; }
.docs-article li { margin: 0.3rem 0; }
.docs-article li > ul, .docs-article li > ol { margin: 0.3rem 0 0; }
.docs-article a { color: var(--accent-green); text-decoration: underline; text-underline-offset: 2px; }
.docs-article strong { color: var(--text-primary); font-weight: 600; }
.docs-article code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em;
    background: var(--bg-tertiary); padding: 0.1em 0.35em; border-radius: 4px;
}
.docs-article pre { background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: 8px; padding: 1rem; overflow-x: auto; }
.docs-article pre code { background: none; padding: 0; }
.docs-article blockquote { border-left: 3px solid var(--accent-green); background: var(--glass-bg-light); padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; }
.docs-article blockquote p:last-child { margin-bottom: 0; }

.docs-table { overflow-x: auto; border: 1px solid var(--glass-border); border-radius: 8px; }
.docs-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.docs-table th, .docs-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.docs-table th { background: var(--bg-secondary); font-weight: 600; }
.docs-table tr:last-child td { border-bottom: none; }

.docs-status {
    display: inline-block; margin-bottom: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    border: 1px solid var(--border-color); color: var(--text-secondary);
}
.docs-reviewed { margin-top: 3rem; font-size: 0.8rem; color: var(--text-secondary); }

@media (max-width: 1100px) {
    .docs-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .docs-toc { display: none; }
}
@media (max-width: 900px) {
    .docs-shell { grid-template-columns: minmax(0, 1fr); padding: 104px 16px 48px; gap: 16px; }
    .docs-sidebar { position: static; max-height: none; border: 1px solid var(--glass-border); border-radius: 8px; padding: 0.5rem 0.75rem; }
    .docs-sidebar summary { display: block; cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
    .docs-sidebar[open] summary { margin-bottom: 0.75rem; }
    .docs-article h1 { font-size: 1.7rem; }
}