/*
 * toc.css — right-rail "On this page" section index. Visible only on
 * wide viewports (≥ xl breakpoint, 1280px). Sticky just below the
 * header so it scrolls independently from the article. Active item
 * highlight comes from static/js/toc.js + IntersectionObserver.
 */

.layout-toc {
    display: none;
}
@media (min-width: 1280px) {
    .layout-toc {
        display: block;
        position: sticky;
        top: var(--header-height);
        align-self: flex-start;
        height: calc(100vh - var(--header-height));
        width: 12.5rem;
        flex-shrink: 0;
        overflow-y: auto;
        padding: var(--space-7) var(--space-4) var(--space-7) var(--space-2);
    }
}

.toc {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.toc-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}

.toc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid hsl(var(--border));
}

.toc-item {
    display: block;
    padding: var(--space-1_5) var(--space-3);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: hsl(var(--muted-foreground));
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    transition: color 150ms ease, border-color 150ms ease;
}
.toc-item:hover {
    color: hsl(var(--foreground));
}
.toc-item.is-active {
    color: hsl(var(--foreground));
    border-left-color: hsl(var(--foreground));
}

/* Indent h3 entries under their parent h2. */
.toc-item--h3 {
    padding-left: var(--space-6);
}