:root {
    --ci-toc-w: 280px
}

.ci-toc {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    bottom: 0;
    left: 0;
    width: var(--ci-toc-w);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    font-size: .875rem
}

.ci-toc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y
}

/* ---------- mobile / tablet (<1200px): overlay drawer, compositor-only ---------- */
@media (max-width: 1199.98px) {
    .ci-toc {
        max-width: 85vw;
        transform: translate3d(-100%, 0, 0);
        transition: transform .25s cubic-bezier(.2, .7, .3, 1)
    }

    html.ci-toc-open .ci-toc {
        transform: none
    }

    .ci-toc-head {
        touch-action: none
    }

    .ci-toc-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, .4);
        opacity: 0;
        pointer-events: none;
        touch-action: none;
        transition: opacity .25s ease
    }

    html.ci-toc-open .ci-toc-backdrop {
        opacity: 1;
        pointer-events: auto
    }
}

/* ---------- desktop (>=1200px): push layout ---------- */
@media (min-width: 1200px) {
    .ci-toc {
        left: calc(-1 * var(--ci-toc-w))
    }

    html.ci-toc-open .ci-toc {
        left: 0
    }

    .ci-toc-backdrop {
        display: none
    }

    html.ci-toc-open body {
        padding-left: var(--ci-toc-w)
    }

    html.ci-toc-open .yuki-is-sticky {
        left: var(--ci-toc-w) !important;
        width: calc(100% - var(--ci-toc-w)) !important
    }

    /* one shared timing; only while opening/closing */
    html.ci-toc-anim .ci-toc {
        transition: left .25s ease
    }

    html.ci-toc-anim body {
        transition: padding-left .25s ease
    }

    html.ci-toc-anim .yuki-is-sticky {
        transition: left .25s ease, width .25s ease
    }
}

/* ---------- list ---------- */
.ci-toc-list {
    line-height: 1.35
}

.ci-toc-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start
}

.ci-toc .ci-toc-list .ci-toc-children {
    grid-column: 1/-1;
    list-style: none;
    margin: 0 0 .25rem 9px;
    padding: 0 0 0 .75rem;
    border-left: 1px solid var(--bs-border-color)
}

.ci-toc .ci-toc-children .ci-toc-link {
    font-size: .8125rem
}

.ci-toc .ci-toc-close {
    border: 0;
    background: none;
    padding: .125rem .25rem;
    font-size: .8125rem;
    color: var(--bs-link-color);
    cursor: pointer;
    border-radius: .25rem
}

.ci-toc .ci-toc-close:hover {
    background: var(--bs-tertiary-bg)
}

.ci-toc-sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    cursor: pointer
}

.ci-toc-sub svg {
    transition: transform .15s
}

.ci-toc-sub[aria-expanded="true"] svg {
    transform: rotate(90deg)
}

.ci-toc-link {
    display: block;
    padding: .25rem .3rem;
    color: var(--bs-link-color);
    text-decoration: none;
    border-radius: .25rem;
    word-break: break-word
}

.ci-toc-link:hover {
    text-decoration: underline
}

.ci-toc-link.active {
    color: var(--bs-emphasis-color);
    font-weight: 600;
    background: var(--bs-tertiary-bg)
}

/* ---------- toggler ---------- */
.ci-toc-fab {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 9998;
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    background-color: var(--bs-body-bg)
}

html.ci-toc-open .ci-toc-fab {
    display: none !important
}