/* ═══════════════════════════════════════════════════
   Sticky TOC v7 — WritingLaw
   Google Fonts removed — loaded via PHP wp_enqueue_style (conditional)
   ═══════════════════════════════════════════════════ */

/* ── Pre-paint dark mode background ──────────────────
   The Smart Dark Mode plugin sets data-sdm="dark" on
   <html> via an inline <script> in <head> BEFORE paint.
   This rule applies the dark background immediately so
   the TOC never flashes white on page load in dark mode.
   The dark mode JS scanner is separately told to skip
   #stoc-root entirely, so no inline styles fight this.
   ──────────────────────────────────────────────────── */
html[data-sdm="dark"] #stoc-root .stoc-panel,
html[data-sdm="dark"] #stoc-root .stoc-mob-drawer,
html[data-sdm="dark"] #stoc-root .stoc-head,
html[data-sdm="dark"] #stoc-root .stoc-mob-bar {
    background-color: #1a1a1a !important;
    background-image: none !important;
}

/* ── CSS variables & font ── */
#stoc-root {
    --bg:          #fafaf8;
    --accent:      #008080;
    --accent-bg:   #e0f2f2;
    --border:      #ddddd8;
    --muted:       #9a9a94;
    --h1c:         #333333;
    --h2c:         #ff6600;
    --h3c:         #333333;
    --h4c:         #333333;
    --sz:          14px;
    --panel-width: 306px;
    --radius:      8px;
    --mob-bottom:  70px;  /* overridden by JS — kept as safe fallback */
    font-family: 'Source Sans 3', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
#stoc-root *, #stoc-root *::before, #stoc-root *::after {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP ≥ 1200px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {

    /* Hide mobile elements */
    #stoc-root .stoc-mob-bar    { display: none !important; }
    #stoc-root .stoc-mob-drawer { display: none !important; }

    /* Root container — fixed, vertically centred, 75vh tall */
    #stoc-root {
        position: fixed !important;
        left: max(12px, calc(50vw - 700px - var(--panel-width) - 20px - var(--scrollbar-w, 0px))) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 99999 !important;
        width: var(--panel-width) !important;
        height: 80vh !important;
        max-height: 80vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Right-positioned variant */
    #stoc-root.stoc-right {
        left: auto !important;
        right: max(12px, calc(50vw - 700px - var(--panel-width) - 20px - var(--scrollbar-w, 0px))) !important;
    }

    /* Panel */
    #stoc-root .stoc-panel {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--bg) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
        overflow: hidden !important;
        position: relative !important;
    }
    #stoc-root .stoc-panel.stoc-hidden { display: none !important; }

    /* Reading progress bar — absolutely pinned to top of panel */
    #stoc-root .stoc-progress {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: rgba(0,0,0,0.07) !important;
        z-index: 2 !important;
    }
    #stoc-root .stoc-progress-fill {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        background: var(--accent) !important;
        transform: scaleX(0) !important;
        transform-origin: left center !important;
        transition: transform .1s linear !important;
    }
    /* Header — margin-top:4px reserves space for the absolute progress bar */
    #stoc-root .stoc-head {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 12px 14px 18px !important;
        border-bottom: 1px solid var(--border) !important;
        background: var(--bg) !important;
        min-height: 52px !important;
        margin-top: 4px !important;
    }
    #stoc-root .stoc-title-text {
        font-family: 'Lora', Georgia, serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--h1c) !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #stoc-root .stoc-hide {
        flex-shrink: 0 !important;
        background: none !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        color: var(--muted) !important;
        font-family: 'Source Sans 3', sans-serif !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        padding: 5px 10px !important;
        margin-right: 4px !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        transition: color .15s, border-color .15s, background .15s;
    }
    #stoc-root .stoc-hide:hover {
        color: var(--accent) !important;
        border-color: var(--accent) !important;
        background: var(--accent-bg) !important;
    }

    /* Expand/collapse controls */
    #stoc-root .stoc-expand-bar {
        display: flex !important;
        gap: 8px !important;
        padding: 6px 10px 4px 10px !important;
        border-bottom: 1px solid var(--border) !important;
        flex-shrink: 0 !important;
    }
    #stoc-root .stoc-expand-all {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        font-size: 11px !important;
        font-family: 'Source Sans 3', sans-serif !important;
        color: var(--muted) !important;
        cursor: pointer !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
        transition: color .13s;
    }
    #stoc-root .stoc-expand-all:hover { color: var(--accent) !important; }

    /* Section count in expand bar */
    #stoc-root .stoc-expand-bar .stoc-bar-count {
        font-size: 11px !important;
        color: var(--muted) !important;
        font-weight: 400 !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
    }

    /* Scrollable list area */
    #stoc-root .stoc-list-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: #ccc transparent !important;
        overscroll-behavior: contain !important;
    }
    #stoc-root .stoc-list-wrap::-webkit-scrollbar { width: 4px; }
    #stoc-root .stoc-list-wrap::-webkit-scrollbar-thumb { background: #d0d0ca; border-radius: 4px; }
    #stoc-root .stoc-list-wrap::-webkit-scrollbar-track { background: transparent; }

    /* The UL */
    #stoc-root .stoc-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 6px 10px 12px 10px !important;
    }
    /* Nested lists inside collapsed containers must have no top padding/margin
       so they cannot bleed past max-height:0 */
    #stoc-root .stoc-kids > .stoc-list {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Items */
    #stoc-root .stoc-item       { display: none !important; flex-direction: column !important; }
    #stoc-root .stoc-item.on   { display: flex !important; flex-direction: column !important; }

    /* Row */
    #stoc-root .stoc-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        min-height: 28px !important;
        border-radius: 3px !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: background .12s;
    }
    #stoc-root .stoc-row:hover     { background: rgba(29,48,184,.05) !important; }
    #stoc-root .stoc-row.is-active { background: var(--accent-bg) !important; }
    #stoc-root .stoc-row.is-active::before {
        content: '';
        position: absolute !important;
        left: -10px !important; top: 0 !important; bottom: 0 !important;
        width: 2px !important;
        background: var(--accent) !important;
        border-radius: 0 1px 1px 0 !important;
    }

    /* Dot */
    #stoc-root .stoc-dot {
        flex: 0 0 18px !important;
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #stoc-root .stoc-dot::after { content: '' !important; display: block !important; border-radius: 50% !important; }
    #stoc-root .stoc-item[data-lv="1"] > .stoc-row .stoc-dot::after { width: 5px !important; height: 5px !important; background: var(--h1c) !important; opacity: .5; }
    #stoc-root .stoc-item[data-lv="2"] > .stoc-row .stoc-dot::after { width: 4px !important; height: 4px !important; background: var(--h2c) !important; opacity: .45; }
    #stoc-root .stoc-item[data-lv="3"] > .stoc-row .stoc-dot::after { width: 3px !important; height: 3px !important; background: var(--h3c) !important; opacity: .4; }
    #stoc-root .stoc-item[data-lv="4"] > .stoc-row .stoc-dot::after { width: 3px !important; height: 3px !important; background: var(--h4c) !important; opacity: .35; }

    /* Link */
    #stoc-root .stoc-a {
        flex: 1 1 auto !important;
        order: 2 !important;
        display: block !important;
        text-decoration: none !important;
        font-size: var(--sz) !important;
        font-weight: 400 !important;
        line-height: 1.48 !important;
        padding: 5px 4px 5px 2px !important;
        margin: 0 !important;
        word-break: break-word !important;
        white-space: normal !important;
        transition: color .13s;
    }
    #stoc-root .stoc-item[data-lv="1"] > .stoc-row .stoc-a { color: var(--h1c) !important; font-weight: 500 !important; }
    #stoc-root .stoc-item[data-lv="2"] > .stoc-row .stoc-a { color: var(--h2c) !important; }
    #stoc-root .stoc-item[data-lv="3"] > .stoc-row .stoc-a { color: var(--h3c) !important; font-size: calc(var(--sz) - 0.5px) !important; }
    #stoc-root .stoc-item[data-lv="4"] > .stoc-row .stoc-a { color: var(--h4c) !important; font-size: calc(var(--sz) - 1px) !important; }
    #stoc-root .stoc-a:hover  { color: var(--accent) !important; }
    #stoc-root .stoc-a.active { color: var(--accent) !important; font-weight: 600 !important; }

    /* +/- toggle */
    #stoc-root .stoc-tog {
        flex: 0 0 28px !important;
        order: 10 !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        color: var(--muted) !important;
        font-size: var(--sz) !important;
        font-weight: 600 !important;
        font-family: 'Source Sans 3', sans-serif !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 4px 0 2px !important;
        border-radius: 3px !important;
        transition: color .15s, background .15s;
    }
    #stoc-root .stoc-tog:hover { color: var(--accent) !important; background: rgba(29,48,184,.08) !important; }

    /* Collapsible children — overflow:hidden always, even when open, to prevent bleed */
    #stoc-root .stoc-kids {
        overflow: hidden !important;
        transition: max-height .22s ease;
        will-change: max-height;
        padding: 0 !important;
        margin: 0 !important;
    }
    #stoc-root .stoc-kids.shut { max-height: 0 !important; overflow: hidden !important; }

    /* Show-tab (when panel is hidden) */
    #stoc-root .stoc-showtab {
        display: none !important;
        position: fixed !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 99999 !important;
        background: var(--accent) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 2px 0 14px rgba(29,48,184,.28) !important;
        padding: 20px 9px !important;
        font-family: 'Source Sans 3', sans-serif !important;
        font-size: 9.5px !important;
        font-weight: 600 !important;
        letter-spacing: .15em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        writing-mode: vertical-rl !important;
        transition: background .15s;
    }
    /* Position-aware show-tab */
    #stoc-root:not(.stoc-right) .stoc-showtab {
        left: 0 !important;
        border-radius: 0 var(--radius) var(--radius) 0 !important;
    }
    #stoc-root.stoc-right .stoc-showtab {
        right: 0 !important;
        left: auto !important;
        border-radius: var(--radius) 0 0 var(--radius) !important;
        writing-mode: vertical-lr !important;
    }
    #stoc-root .stoc-showtab:hover { background: var(--tab-hover, #1025a0) !important; }
    #stoc-root .stoc-showtab.on    { display: block !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE ≤ 1199px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

    /* Hide desktop elements */
    #stoc-root .stoc-panel   { display: none !important; }
    #stoc-root .stoc-showtab { display: none !important; }

    /* Root — fixed, positioned by JS via --mob-bottom */
    #stoc-root {
        position: fixed !important;
        bottom: var(--mob-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
    }

    /* On a desktop browser narrowed to 761px–1199px the bottom menu bar is
       not present, so remove the gap. But at ≤760px the bottom menu IS shown
       (tablets and narrow browser windows where the site shows the mobile menu),
       so keep the full --mob-bottom gap there.
       hover:hover targets mouse/trackpad devices (not touchscreens). */
    @media (hover: hover) and (min-width: 768px) {
        #stoc-root { --mob-bottom: 0px !important; }
    }

    /* When the "My Membership" plugin (wl-membership) is active and the
       visitor has personally turned their Bottom Menu Bar off, it adds
       body.wlm-bottomnav-hidden — see that plugin's account-ui.php,
       wlm_body_class(). There's no longer a bottom bar to clear, so the
       configured "Distance from Bottom" gap (--mob-bottom, from
       MOBILE SETTINGS in this plugin's admin) should be ignored and the
       TOC bar should sit flush at the very bottom instead of floating
       above empty space. Purely additive: if wl-membership isn't
       installed/active this class is simply never present and this rule
       never matches, so nothing else here is affected. wl-membership's
       floating profile orb (shown in the same off state) is shifted
       above this bar in that plugin's own CSS to avoid overlapping it. */
    body.wlm-bottomnav-hidden #stoc-root { --mob-bottom: 0px !important; }

    /* Drawer */
    #stoc-root .stoc-mob-drawer {
        background: var(--bg) !important;
        border: none !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,.10) !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height .3s cubic-bezier(.4,0,.2,1);
        will-change: max-height;
    }
    #stoc-root .stoc-mob-drawer.open { max-height: 45vh !important; }

    /* Scrollable area inside drawer — sits below the sticky expand bar */
    #stoc-root .stoc-list-wrap {
        overflow-y: auto !important;
        max-height: calc(45vh - 38px) !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        overscroll-behavior: contain !important;
    }
    #stoc-root .stoc-list-wrap::-webkit-scrollbar { display: none; }

    /* Expand/collapse bar in mobile drawer — sticky so it stays
       visible when the visitor scrolls the TOC list */
    #stoc-root .stoc-expand-bar {
        display: flex !important;
        gap: 8px !important;
        padding: 8px 10px 6px 10px !important;
        border-bottom: 1px solid var(--border) !important;
        background: var(--bg) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        flex-shrink: 0 !important;
    }
    #stoc-root .stoc-expand-all {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        font-size: 11px !important;
        font-family: 'Source Sans 3', sans-serif !important;
        color: var(--muted) !important;
        cursor: pointer !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
    }

    /* List */
    #stoc-root .stoc-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 4px 10px 8px 10px !important;
    }
    #stoc-root .stoc-kids > .stoc-list {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Items */
    #stoc-root .stoc-item     { display: none !important; flex-direction: column !important; }
    #stoc-root .stoc-item.on { display: flex !important; flex-direction: column !important; }

    /* Row */
    #stoc-root .stoc-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        min-height: 28px !important;
        border-radius: 3px !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: background .12s;
    }
    #stoc-root .stoc-row:hover     { background: rgba(29,48,184,.05) !important; }
    #stoc-root .stoc-row.is-active { background: var(--accent-bg) !important; }

    /* Dot */
    #stoc-root .stoc-dot {
        flex: 0 0 18px !important;
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #stoc-root .stoc-dot::after { content: '' !important; display: block !important; border-radius: 50% !important; }
    #stoc-root .stoc-item[data-lv="1"] > .stoc-row .stoc-dot::after { width: 5px !important; height: 5px !important; background: var(--h1c) !important; opacity: .5; }
    #stoc-root .stoc-item[data-lv="2"] > .stoc-row .stoc-dot::after { width: 4px !important; height: 4px !important; background: var(--h2c) !important; opacity: .45; }
    #stoc-root .stoc-item[data-lv="3"] > .stoc-row .stoc-dot::after { width: 3px !important; height: 3px !important; background: var(--h3c) !important; opacity: .4; }
    #stoc-root .stoc-item[data-lv="4"] > .stoc-row .stoc-dot::after { width: 3px !important; height: 3px !important; background: var(--h4c) !important; opacity: .35; }

    /* Link */
    #stoc-root .stoc-a {
        flex: 1 1 auto !important;
        order: 2 !important;
        display: block !important;
        text-decoration: none !important;
        font-size: var(--sz) !important;
        font-weight: 400 !important;
        line-height: 1.48 !important;
        padding: 4px 4px 4px 2px !important;
        margin: 0 !important;
        word-break: break-word !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color .13s;
    }
    #stoc-root .stoc-item[data-lv="1"] > .stoc-row .stoc-a { color: var(--h1c) !important; font-weight: 500 !important; }
    #stoc-root .stoc-item[data-lv="2"] > .stoc-row .stoc-a { color: var(--h2c) !important; }
    #stoc-root .stoc-item[data-lv="3"] > .stoc-row .stoc-a { color: var(--h3c) !important; font-size: calc(var(--sz) - 0.5px) !important; }
    #stoc-root .stoc-item[data-lv="4"] > .stoc-row .stoc-a { color: var(--h4c) !important; font-size: calc(var(--sz) - 1px) !important; }
    #stoc-root .stoc-a.active { color: var(--accent) !important; font-weight: 600 !important; }

    /* +/- toggle */
    #stoc-root .stoc-tog {
        flex: 0 0 32px !important;
        order: 10 !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        color: var(--muted) !important;
        font-size: var(--sz) !important;
        font-weight: 600 !important;
        font-family: 'Source Sans 3', sans-serif !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: var(--radius) !important;
    }

    /* Kids */
    #stoc-root .stoc-kids {
        overflow: hidden !important;
        transition: max-height .22s ease;
        will-change: max-height;
        padding: 0 !important;
        margin: 0 !important;
    }
    #stoc-root .stoc-kids.shut { max-height: 0 !important; overflow: hidden !important; }

    /* Bottom bar — now a <button> */
    #stoc-root .stoc-mob-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        height: 48px !important;
        background: var(--bg) !important;
        border: none !important;
        border-left: 3px solid var(--accent) !important;
        position: relative !important;
        padding: 0 18px !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        box-shadow: 0 -2px 12px rgba(0,0,0,.07) !important;
        text-align: left !important;
        /* Reset <button> browser defaults */
        appearance: none !important;
        -webkit-appearance: none !important;
        border-radius: 0 !important;
        font: inherit !important;
    }

    #stoc-root .stoc-bar-label {
        flex: 1 !important;
        font-family: 'Lora', Georgia, serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--h1c) !important;
        letter-spacing: .01em !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #stoc-root .stoc-bar-count {
        font-size: 13px !important;
        color: var(--muted) !important;
        font-weight: 400 !important;
        margin: 0 12px 0 0 !important;
        padding: 0 !important;
    }
    #stoc-root .stoc-bar-close {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--accent) !important;
        color: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: background .15s;
        pointer-events: none !important; /* bar itself handles click */
    }
    #stoc-root .stoc-mob-bar.open .stoc-bar-close {
        background: rgba(0,0,0,.12) !important;
        color: var(--h1c) !important;
    }
}

/* ══════════════════════════════════════════════════════════
   DARK MODE COMPATIBILITY
   Overrides the Smart Dark Mode plugin's auto-conversions.
   When html[data-sdm="dark"] is active, we set all TOC colours
   explicitly so nothing is left to the scanner's guesswork.
   ══════════════════════════════════════════════════════════ */
html[data-sdm="dark"] #stoc-root {
    --bg:     #1a1a1a !important;
    --border: #333333 !important;
    --muted:  #888884 !important;
}

/* Panel & drawer backgrounds */
html[data-sdm="dark"] #stoc-root .stoc-panel,
html[data-sdm="dark"] #stoc-root .stoc-mob-drawer,
html[data-sdm="dark"] #stoc-root .stoc-head,
html[data-sdm="dark"] #stoc-root .stoc-mob-bar {
    background-color: #1a1a1a !important;
    background-image: none !important;
}

/* Active row highlight — soften for dark bg */
html[data-sdm="dark"] #stoc-root .stoc-row.is-active {
    background: rgba(255,255,255,0.07) !important;
}
html[data-sdm="dark"] #stoc-root .stoc-row:hover {
    background: rgba(255,255,255,0.05) !important;
}

/* Heading link text — use light colours matching dark bg */
html[data-sdm="dark"] #stoc-root .stoc-item[data-lv="1"] > .stoc-row .stoc-a { color: #e8e6e3 !important; }
html[data-sdm="dark"] #stoc-root .stoc-item[data-lv="2"] > .stoc-row .stoc-a { color: #e8e6e3 !important; }
html[data-sdm="dark"] #stoc-root .stoc-item[data-lv="3"] > .stoc-row .stoc-a { color: #b0aea8 !important; }
html[data-sdm="dark"] #stoc-root .stoc-item[data-lv="4"] > .stoc-row .stoc-a { color: #888884 !important; }

/* Title */
html[data-sdm="dark"] #stoc-root .stoc-title-text { color: #e8e6e3 !important; }

/* Mobile bar label */
html[data-sdm="dark"] #stoc-root .stoc-bar-label { color: #e8e6e3 !important; }

/* Hide/Expand/Collapse buttons */
html[data-sdm="dark"] #stoc-root .stoc-hide      { color: #888884 !important; border-color: #333333 !important; background: none !important; }
html[data-sdm="dark"] #stoc-root .stoc-hide:hover { color: var(--accent) !important; border-color: var(--accent) !important; background: rgba(255,255,255,0.05) !important; }
html[data-sdm="dark"] #stoc-root .stoc-expand-all { color: #888884 !important; }

/* +/- toggle buttons */
html[data-sdm="dark"] #stoc-root .stoc-tog { color: #888884 !important; background: none !important; }

/* Section count */
html[data-sdm="dark"] #stoc-root .stoc-bar-count { color: #888884 !important; }

/* Borders */
html[data-sdm="dark"] #stoc-root .stoc-head,
html[data-sdm="dark"] #stoc-root .stoc-expand-bar {
    border-color: #333333 !important;
    background-color: #1a1a1a !important;
}
html[data-sdm="dark"] #stoc-root .stoc-panel {
    border-color: #333333 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2) !important;
}

/* Progress bar track */
html[data-sdm="dark"] #stoc-root .stoc-progress {
    background: rgba(255,255,255,0.08) !important;
}

/* Scrollbar inside TOC panel */
html[data-sdm="dark"] #stoc-root .stoc-list-wrap::-webkit-scrollbar-thumb { background: #444; }
html[data-sdm="dark"] #stoc-root .stoc-list-wrap::-webkit-scrollbar-track { background: transparent; }

/* Mobile bar border accent stays as-is (uses --accent which is coloured, not touched by scanner) */
/* Mobile bar close button open state */
html[data-sdm="dark"] #stoc-root .stoc-mob-bar.open .stoc-bar-close {
    background: rgba(255,255,255,0.10) !important;
    color: #e8e6e3 !important;
}
