/* ============================================================================
   Docs template shell — two-column article + sticky in-page TOC
   ----------------------------------------------------------------------------
   Reproduces docs/design-reference/docs-template/DocsApp.jsx (DocsPage) as
   reusable classes. Every color / type / spacing / radius / shadow value below
   resolves to a token from styles/design-tokens.css.

   The three docs-shell structural values are tokenized in design-tokens.css
   (site-authored additions, approved 2026-07-03):
     • --max-width-docs     (980px) — docs shell max-width
     • --docs-toc-width     (200px) — sidebar TOC rail column
     • --border-width-active (2px)  — TOC rail / active border
   TOC eyebrow tracking uses --tracking-eyebrow (0.08em) per decision.

   The article card itself is NOT restyled here — it reuses the existing
   .section-container rule (bg-secondary + border-color-strong + shadow-lifted
   + radius-lg + padding-2xl), which already matches the template's article.
   In-article heading sizes are scoped to the template's smaller scale below.
   ============================================================================ */

.docs-layout {
    max-width: var(--max-width-docs);
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--docs-toc-width) 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

/* --- Sidebar in-page TOC --- */
.docs-toc {
    position: sticky;
    top: calc(var(--nav-height) + var(--spacing-lg));
}

.docs-toc-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);   /* token 0.08em (kept per decision) */
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md);
}

.docs-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-left: var(--border-width-active) solid var(--border-color);
}

.docs-toc-list a {
    display: block;
    padding-left: var(--spacing-md);
    margin-left: calc(-1 * var(--border-width-active));
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-left: var(--border-width-active) solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.docs-toc-list a:hover {
    color: var(--color-text-primary);
}

.docs-toc-list a.active {
    color: var(--color-accent-cyan);
    border-left-color: var(--color-accent-cyan);
}

/* --- Article: reuse .section-container card; only add anchor scroll offset so
       the sticky nav doesn't cover a heading jumped to from the TOC. --- */
.docs-article h2[id],
.docs-article h3[id] {
    scroll-margin-top: calc(var(--nav-height) + var(--spacing-lg));
}

/* Template's smaller in-article heading sizes (H2 2xl / H3 xl), scoped to the
   docs article so the site's global h2/h3 scale is unaffected. */
.docs-article h2 {
    font-size: var(--font-size-2xl);
}

.docs-article h3 {
    font-size: var(--font-size-xl);
}

/* --- Responsive: the token system's only breakpoint. Collapse to a single
       column and drop the sticky rail on narrow viewports. --- */
@media (max-width: 768px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }
    .docs-toc {
        display: none;
    }
}