/*
 * Article table of contents. Two views of one list:
 *   .dstoc-side  the list in the layout's left column (.ds-toc-slot)
 *   .dstoc-bar   the slim bar fixed to the top of the screen, with a dropdown
 * Styled like the audio player (same UI font, mono numbers, radius, teal for
 * the current item), but from the page's tokens rather than the player's
 * always-dark ones, so it follows the page. Avada's .post-content list and
 * link rules reach the sidebar, hence the scoped !important on resets.
 */

.dstoc-side,
.dstoc-bar {
    --dstoc-band: var(--ds-band, #181A1E);
    --dstoc-card: var(--ds-card, #23262D);
    --dstoc-t1: var(--ds-text-1, #F2F2F2);
    --dstoc-t2: var(--ds-text-2, #E0E0E0);
    --dstoc-t3: var(--ds-text-3, #A0A0A0);
    --dstoc-t4: var(--ds-text-4, #6B6B6B);
    --dstoc-border: var(--ds-border, rgba(255,255,255,.11));
    --dstoc-border-emph: var(--ds-border-emph, rgba(255,255,255,.16));
    --dstoc-accent: var(--ds-tw-teal-300, #5EEAD4);
    --dstoc-progress: var(--ds-tw-teal-400, #2DD4BF);
    --dstoc-ui-font: var(--ds-ui-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    --dstoc-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --dstoc-radius: var(--ds-radius, 9px);
    --dstoc-h: 52px;
    font-family: var(--dstoc-ui-font);
}

/* ---- shared list ---- */
ol.dstoc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
ol.dstoc-list > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
ol.dstoc-list > li::before,
ol.dstoc-list > li::marker {
    content: none !important;
}
button.dstoc-item {
    display: flex;
    gap: 12px;
    align-items: baseline;
    width: 100%;
    min-height: 0;
    margin: 0;
    border: 0 !important;
    background: transparent;
    text-align: left;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    box-shadow: none !important;
    font-family: var(--dstoc-ui-font) !important;
    font-weight: 400;
    cursor: pointer;
}
.dstoc-num {
    flex: 0 0 auto;
    min-width: 20px;
    font-family: var(--dstoc-mono);
    font-size: 12px;
    color: var(--dstoc-t4);
    font-variant-numeric: tabular-nums;
}
.dstoc-ttl {
    min-width: 0;
}
button.dstoc-item[aria-current="true"] .dstoc-num {
    color: var(--dstoc-accent);
}
button.dstoc-item[aria-current="true"] .dstoc-ttl {
    font-weight: 600;
}

/* ---- sidebar ---- */
.dstoc-side {
    padding-top: 6px;
}
.dstoc-head {
    padding: 0 10px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dstoc-t3);
}
.dstoc-side button.dstoc-item {
    padding: 9px 10px;
    border-radius: var(--dstoc-radius);
    font-size: 15px !important;
    line-height: 1.4;
    color: var(--dstoc-t3) !important;
    transition: background .15s, color .15s;
}
.dstoc-side button.dstoc-item:hover,
.dstoc-side button.dstoc-item[aria-current="true"] {
    color: var(--dstoc-t1) !important;
}
.dstoc-side button.dstoc-item:hover {
    background: rgba(255,255,255,.06);
}

/* ---- top bar ---- */
.dstoc-bar {
    position: fixed;
    top: var(--dstoc-top, 0px);
    left: 0;
    right: 0;
    z-index: 8000; /* under the audio player (9000) */
    transform: translateY(calc(-100% - var(--dstoc-top, 0px) - 2px));
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
}
.dstoc-bar.is-shown {
    transform: none;
    visibility: visible;
}
.dstoc-toggle {
    position: relative;
    display: block;
    width: 100%;
    height: var(--dstoc-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--dstoc-border);
    border-radius: 0;
    background: rgba(24,26,30,.9);
    background: color-mix(in srgb, var(--dstoc-band) 90%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.dstoc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1180px; /* the audio player's row, so the two bars line up */
    height: 100%;
    margin: 0 auto;
    padding: 0 18px;
}
.dstoc-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 7px;
    align-items: baseline;
    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
}
.dstoc-text.is-swapping {
    animation: dstoc-swap .28s ease both;
}
@keyframes dstoc-swap {
    from { opacity: 0; transform: translateY(calc(var(--dstoc-from, 1) * 55%)); }
    to { opacity: 1; transform: none; }
}
.dstoc-lbl {
    flex: 0 0 auto;
    color: var(--dstoc-t1);
    font-weight: 600;
}
.dstoc-lbl .dstoc-n {
    font-family: var(--dstoc-mono);
    font-weight: 400;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.dstoc-cur {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dstoc-t3);
}
.dstoc-cur.is-solo {
    color: var(--dstoc-t1);
    font-weight: 600;
}
.dstoc-chev {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--dstoc-radius);
    color: var(--dstoc-t3);
    transition: transform .2s, background .15s;
}
.dstoc-chev svg {
    width: 15px;
    height: 15px;
}
.dstoc-toggle:hover .dstoc-chev {
    background: rgba(255,255,255,.06);
    color: var(--dstoc-t1);
}
.dstoc-bar.is-open .dstoc-chev {
    transform: rotate(180deg);
}
.dstoc-toggle:focus-visible,
button.dstoc-item:focus-visible {
    outline: 2px solid var(--dstoc-accent);
    outline-offset: -2px;
}
.dstoc-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: calc(var(--dstoc-p, 0) * 100%);
    height: 2px;
    background: var(--dstoc-progress);
    pointer-events: none;
}

/* ---- dropdown ---- */
.dstoc-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--dstoc-h) - var(--dstoc-top, 0px) - var(--dstoc-dock, 0px) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--dstoc-card);
    border-bottom: 1px solid var(--dstoc-border-emph);
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.dstoc-panel[hidden] {
    display: none !important;
}
.dstoc-panel ol.dstoc-list {
    max-width: 1180px;
    margin: 0 auto !important;
    padding: 6px 18px 10px !important;
}
.dstoc-panel ol.dstoc-list > li + li {
    border-top: 1px solid var(--dstoc-border);
}
.dstoc-panel button.dstoc-item {
    gap: 14px;
    padding: 14px 4px;
    font-size: 15.5px !important;
    line-height: 1.4;
    color: var(--dstoc-t2) !important;
}
.dstoc-panel button.dstoc-item[aria-current="true"],
.dstoc-panel button.dstoc-item:hover {
    color: var(--dstoc-t1) !important;
}
.dstoc-panel .dstoc-num {
    min-width: 22px;
    font-size: 13px;
}

.dstoc-plain .dstoc-num {
    display: none;
}

/* ---- note shown when the page and the audio move each other ---- */
.dstoc-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--dstoc-dock, 0px) + 18px + env(safe-area-inset-bottom, 0px));
    z-index: 9100;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    border: 1px solid var(--ds-border-emph, rgba(255,255,255,.16));
    border-radius: var(--ds-radius, 9px);
    background: var(--ds-card, #23262D);
    color: var(--ds-text-1, #F2F2F2);
    font-family: var(--ds-ui-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.dstoc-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 700px) {
    .dstoc-row,
    .dstoc-panel ol.dstoc-list {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dstoc-bar,
    .dstoc-chev,
    .dstoc-toast {
        transition: none;
    }
    .dstoc-text.is-swapping {
        animation: none;
    }
}

@media print {
    .dstoc-bar,
    .dstoc-side,
    .dstoc-toast {
        display: none !important;
    }
}