/* ═══════════════════════════════════════════════════
   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: 245px;
    --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; }
    }

    /* 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;
}
