@layer components {
    /* Tight spacing for headings + lists in either page rail.
     * Split into two selectors (rather than :is(...)) so the
     * specificity stays at one class + one element, matching the
     * .toc ul ul override below — otherwise nav.leftnav's class
     * specificity bumps the rule above .toc ul ul, and nested TOC
     * lists render flat. */
    .content > aside h3,
    .content > nav.leftnav h3 { margin: 0 0 var(--space-3) 0; }
    .content > aside ul,
    .content > nav.leftnav ul { list-style: none; padding: 0; margin: 0 0 var(--space-5) 0; }

    /* Collapsible sidebar block. <details> + <summary> wrapping the
     * eyebrow heading; chevron rotates on open. Pair with rail.js to
     * remember per-section state in a cookie. */
    .rail-section { margin-bottom: var(--space-5); }
    .rail-section-summary {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        list-style: none;
        user-select: none;
        margin-bottom: var(--space-3);
    }
    .rail-section-summary::-webkit-details-marker,
    .rail-section-summary::marker { display: none; }
    .rail-section-summary .eyebrow { margin: 0; }
    .rail-section-summary > .icon {
        margin-left: auto;
        color: var(--fg-muted);
        transition: transform 0.15s ease;
    }
    .rail-section[open] > .rail-section-summary > .icon {
        transform: rotate(90deg);
    }
    .rail-section li a {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-sm);
        line-height: 1.35;
        padding: var(--space-1) var(--space-2);
        margin-left: calc(var(--space-2) * -1);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        color: var(--fg);
    }
    .rail-section li a:hover {
        background: var(--bg-hover);
        text-decoration: none;
    }
    /* Active item — the rail entry that matches the page being
     * viewed. The caller marks it with aria-current="page" /
     * aria-current="true"; the rule paints it with the accent
     * colour and an accent left border that doubles as the
     * "you're here" cue for the TOC's same-page scroll target.
     */
    .rail-section li a[aria-current] {
        color: var(--accent);
        background: var(--bg-hover);
    }
    .rail-section .empty {
        font-size: var(--text-sm);
        color: var(--fg-muted);
        margin: 0;
    }

    .toc ul { list-style: none; padding: 0; margin: 0; }
    .toc ul ul { padding-left: var(--space-3); margin-bottom: 0; }
    .toc-link {
        display: block;
        font-size: var(--text-sm);
        line-height: 1.35;
        color: var(--fg);
        padding: var(--space-1) var(--space-2);
        margin-left: calc(var(--space-2) * -1);
        border-left: 2px solid transparent;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    .toc-link:hover { background: var(--bg-hover); text-decoration: none; }
    .toc-link.active {
        border-left-color: var(--accent);
        color: var(--accent);
        background: var(--bg-hover);
    }

    .recent li { border-radius: var(--radius-sm); }
    .recent li:hover { background: var(--bg-hover); }
    .recent a {
        display: block;
        padding: var(--space-1) var(--space-2);
        color: var(--fg);
    }
    .recent a:hover { text-decoration: none; }
    .recent .title {
        display: block;
        font-size: var(--text-sm);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .recent .time {
        display: block;
        font-size: var(--text-xs);
        color: var(--fg-muted);
        margin-top: 1px;
    }
}