:root { --brand: #00a9a5; }
.toc-item {
    display: flex; align-items: flex-start; gap: .5rem;padding: .45rem .75rem; margin-bottom: .3rem; cursor: pointer;border-left: 3px solid transparent; border-radius: 0 6px 6px 0;transition: all .15s;
}
.toc-item:hover  { background: rgba(11,39,107,.08); }
.toc-item.active {
    border-left-color: var(--brand);background: rgba(11,39,107,.06);
}
.toc-label { font-family: 'Poppins';font-size: 16px; line-height: 1.45; color: #212529; transition: color .15s; }
.toc-item.active .toc-label { color: var(--brand); font-weight: 700; }

/* -toc for desktop- */
#offcanvasScrolling {
    width: 280px;top: 90px;height: calc(100% - 90px);border-right: 1px solid #e0e0e0;box-shadow: 2px 0 12px rgba(0,0,0,0.06);
}

.offcanvas-header {
    padding: 16px 20px 12px;border-bottom: none;
}

.offcanvas-title {
    font-family: 'Poppins';font-size: 12px;font-weight: 700;color: #58595b !important;text-transform: uppercase;letter-spacing: 0.6px;
}

.toc-tab {
    position: fixed;left: 0;top: 50%;transform: translateY(-50%);z-index: 1045;display: flex;flex-direction: column;align-items: center;cursor: pointer;transition: left 0.3s ease;
}

.toc-tab-inner {
    background: #fff;border: 1px solid #ddd;border-left: none;border-radius: 0 8px 8px 0;padding: 14px 8px;display: flex;flex-direction: column;align-items: center;box-shadow: 2px 2px 8px rgba(0,0,0,0.08);
}

.toc-tab-arrow {
    font-family: 'Poppins';font-size: 35px;color: #555;font-weight: 500;line-height: 1;
}

.toc-tab-text {
    writing-mode: vertical-rl;text-orientation: mixed;transform: rotate(180deg);font-family: 'Poppins';font-size: 16px;color: #4687f4;font-weight: 600;letter-spacing: 0.5px;white-space: nowrap;
}

/* ── mobile TOC bar ── */
#toc-mobile {
    display: none;position: fixed;transition: 0.5s;left: 0; right: 0;background: #fff;border-bottom: 1px solid #e9ecef;box-shadow: 0 1px 4px rgba(0,0,0,.08);transition: box-shadow .2s;
}
#toc-mobile.open { box-shadow: 0 4px 24px rgba(0,0,0,.15); }

.toc-bar {
    display: flex; align-items: center; gap: .9rem;padding: .5rem 1rem; cursor: pointer; user-select: none;
}

/* progress ring */
.toc-ring {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;display: flex; align-items: center; justify-content: center; position: relative;
}
.toc-ring-inner {
    width: 28px; height: 28px; border-radius: 50%; background: #fff;display: flex; align-items: center; justify-content: center;
}
.toc-ring-inner span { font-family: 'Poppins';font-size: 11px; font-weight: 700; color: var(--brand); line-height: 1; }

.toc-bar-label { flex: 1; min-width: 0; }
.toc-bar-label .in-article { font-family: 'Poppins';font-size: 10px; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .05rem; }
.toc-bar-label .active-section { font-family: 'Poppins';font-size: .8rem; font-weight: 700; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.toc-chevron {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;background: #f1f3f5;display: flex; align-items: center; justify-content: center;transition: transform .2s;
}
#toc-mobile.open .toc-chevron { transform: rotate(180deg); }

.toc-drawer {
    max-height: 0; overflow: hidden;transition: max-height .3s ease;border-top: 1px solid #f1f3f5;
}
#toc-mobile.open .toc-drawer { max-height: 60vh; overflow-y: auto; }
.toc-drawer-inner { padding: .5rem .5rem 1rem; }

/* ── responsive show/hide ── */
@media (max-width: 767.98px) {
    .toc-desktop {
        display: none !important;
    }
    #toc-mobile {
        display: block;
		z-index: 999;
    }
}

@media (min-width: 768px) {
    #toc-mobile {
        display: none !important;
    }
}