/* ==========================================================================
   Component: toc — "in this article / on this page" contents box
   --------------------------------------------------------------------------
   <aside class="toc"><details class="toc__box" open data-toc>
       <summary class="toc__title">…</summary><ol class="toc__list">…</ol>
   Sticky beside the text on desktop; static above it below 992px, where
   js/modules/toc.js starts it closed. Numbered entries, sky rim on top.
   Used by blog articles and the legal pages.
   ========================================================================== */

.toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.toc__box { border: 1px solid var(--line); border-top: 4px solid var(--second); border-radius: var(--r-lg); background: var(--card); }
.toc__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    list-style: none;
    cursor: pointer;
}
.toc__title::-webkit-details-marker { display: none; }
.toc__title .icon { color: var(--second); transition: transform var(--dur) var(--ease-out); }
.toc__box[open] .toc__title .icon { transform: rotate(180deg); }
.toc .toc__list { margin: 0; padding: 0 var(--space-5) var(--space-5); counter-reset: toc; }
.toc__list li { counter-increment: toc; }
.toc__list li + li { border-top: 1px dashed var(--line); }
.toc__list a {
    display: flex;
    gap: var(--space-2);
    padding-block: var(--space-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
    text-decoration: none;
}
.toc__list a::before { content: counter(toc); min-width: 1.2em; color: var(--second-text); font-weight: 700; }
.toc__list a:hover { color: var(--second-text); }

@media (max-width: 991.98px) {
    .toc { position: static; }
}