/* ── Table of contents ─────────────────────────────────────────
   One shared component for every long-form page (Project, Article,
   About/Philosophy/Brand Strategy) - see design_system/_toc.html and
   components/toc.js. A native <details open> is the collapse
   mechanism - always rendered `open` server-side (a browser's
   collapsed-<details> content uses `content-visibility: hidden`
   internally, which no amount of `display` on a descendant can
   override, so forcing it open via CSS alone is not reliable). The
   summary toggle itself is hidden on desktop (nothing to collapse
   there - see the media query below) and left visible on mobile so a
   reader can still collapse it out of the way.
*/
.toc {
    margin-bottom: var(--space-6);
    font-size: var(--type-small-size);
}

.toc-summary {
    cursor: pointer;
    list-style: none;
    font-weight: var(--type-label-weight);
    color: var(--color-heading);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.toc-summary::-webkit-details-marker {
    display: none;
}

.toc-summary::before {
    content: '+ Contents';
}

.toc[open] > .toc-summary::before {
    content: '- Contents';
}

.toc-body {
    padding-top: var(--space-3);
}

.toc-sublist {
    padding-left: var(--space-4);
    margin-top: var(--space-1);
}

.toc-link {
    display: block;
    padding: var(--space-1) var(--space-3);
    color: var(--color-text-muted);
    border-left: 2px solid transparent;
}

.toc-link:hover {
    color: var(--color-interactive);
    text-decoration: none;
}

/* Never colour alone - weight + a left accent bar mark the active entry.
   The Interactive token (now Brand red, blue retired) - in-page
   navigation is Interactive's role, not a CTA's. */
.toc-link[aria-current="true"] {
    color: var(--color-interactive);
    font-weight: var(--type-label-weight);
    border-left-color: var(--color-interactive);
}

/* ── Desktop: sticky sidebar beside the content column ───────────
   .detail-layout (layouts/article.css) is the two-column grid; the
   TOC's own disclosure chrome disappears there since there's nothing
   to toggle - it's always visible and permanently open. */
@media (min-width: 641px) {
    .toc {
        position: sticky;
        /* Clear the sticky site header, not just the viewport top - same
           --header-height variable used for anchor scroll-margin-top
           (layouts/page.css, layouts/article.css), kept in sync by
           components/site-header.js. */
        top: calc(var(--header-height, var(--space-6)) + var(--space-3));
        align-self: start;
        margin-bottom: 0;
    }

    .toc-summary {
        display: none;
    }

    .toc-body {
        padding-top: 0;
    }
}