/**
 * Table-of-contents — mobile accordion style.
 *
 * Used by article/topic pages. Historically indented 8-spaces deep
 * (was inlined from a blade); de-indented here and fully tokenized
 * (hardcoded hex/px replaced with DS tokens), with explicit
 * mobile + reduced-motion breakpoints.
 */

.toc-modern {
    background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--bg-muted) 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.toc-modern .accordion-item {
    background: transparent;
    border: none;
}

.toc-modern .accordion-header {
    margin: 0;
}

.toc-modern .accordion-button {
    background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy-deep) 100%);
    color: var(--text-on-navy);
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-5);
    border: none;
    box-shadow: none;
    letter-spacing: 0.5px;
    min-block-size: 44px;
}

.toc-modern .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy-deep) 100%);
    color: var(--text-on-navy);
    box-shadow: none;
}

.toc-modern .accordion-button::after {
    display: none;
}

.toc-modern .accordion-button .toc-main-arrow {
    width: 20px;
    height: 20px;
    color: var(--text-on-navy);
    transition: transform 0.3s ease;
    margin-inline-start: var(--space-2);
}

.toc-modern .accordion-button .arrow-down { display: inline-block; }
.toc-modern .accordion-button .arrow-up   { display: none; }

.toc-modern .accordion-button:not(.collapsed) .arrow-down { display: none; }
.toc-modern .accordion-button:not(.collapsed) .arrow-up   { display: inline-block; }

.toc-modern .accordion-button:focus { box-shadow: none; border: none; }
.toc-modern .accordion-button:focus-visible {
    outline: 2px solid var(--teal-light);
    outline-offset: -2px;
}

.toc-modern .accordion-body {
    padding: var(--space-5) var(--space-6);
    background: color-mix(in oklch, var(--bg-card) 70%, transparent);
    backdrop-filter: blur(10px);
}

.toc-modern .link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-modern .link-list > li {
    padding: var(--space-1) 1px;
    background: color-mix(in oklch, var(--bg-card) 80%, transparent);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.toc-modern .link-list > li:hover {
    background: var(--bg-card);
    border-color: color-mix(in oklch, var(--teal) 20%, transparent);
    transform: translateX(-4px);
    box-shadow: var(--shadow-sm);
}

.toc-modern .link-list > li:last-child { margin-bottom: 0; }

.toc-modern .link-list a {
    color: var(--text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: color 0.2s ease;
    display: inline-block;
}

.toc-modern .link-list a:hover,
.toc-modern .link-list a:focus-visible { color: var(--teal); }
.toc-modern .link-list a:focus-visible {
    outline: 2px solid var(--teal-light);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.toc-modern .toc-toggle-sub {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-1);
}

.toc-modern .toc-arrow {
    color: var(--teal);
    flex-shrink: 0;
}

.toc-modern .toc-toggle-sub:hover .toc-arrow { color: var(--gold); }

.toc-modern ul[id^="sub-list-"] {
    margin-top: var(--space-3) !important;
    padding-inline-start: var(--space-8) !important;
    border-inline-start: 2px solid color-mix(in oklch, var(--teal) 30%, transparent);
    margin-inline-start: var(--space-2);
}

.toc-modern ul[id^="sub-list-"] li {
    margin-bottom: var(--space-2);
    padding: var(--space-1) 0;
}

.toc-modern ul[id^="sub-list-"] a {
    color: var(--text-mid);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
}

.toc-modern ul[id^="sub-list-"] a:hover { color: var(--teal); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .toc-modern .accordion-button {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
    .toc-modern .accordion-body {
        padding: var(--space-4) var(--space-5);
    }
    .toc-modern ul[id^="sub-list-"] {
        padding-inline-start: var(--space-6) !important;
    }
}

@media (max-width: 480px) {
    .toc-modern .accordion-button { padding: var(--space-3); }
    .toc-modern .accordion-body { padding: var(--space-3) var(--space-4); }
    .toc-modern .link-list > li:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .toc-modern .accordion-button .toc-main-arrow,
    .toc-modern .link-list > li,
    .toc-modern .link-list a,
    .toc-modern .toc-toggle-sub .toc-arrow {
        transition: none;
    }
    .toc-modern .link-list > li:hover { transform: none; }
}