/* =========================================================
   TOKENTOOLHUB SINGLE-POST LAYOUT CONTROL v4
   Canonical TOC/layout CSS for Simple CSS sitewide.

   Purpose:
   - Native CSS desktop sticky TOC
   - Mobile TOC directly below TL;DR
   - Mobile collapsed Jump to bar while reading
   - Dark-mode article perimeter correction
   - Scoped to body.single-post only
   - JS only synchronizes the header offset; no scroll-position controller
========================================================= */

/*
 * Canonical sticky offsets.
 * The custom header publishes --tth-custom-header-height. CSS consumes it
 * directly, so article load no longer needs getComputedStyle() or
 * getBoundingClientRect() just to position the TOC.
 */
body.single-post{
  --tth-toc-top:max(118px, calc(var(--tth-custom-header-height, 76px) + 16px));
  --tth-mobile-toc-top:calc(var(--tth-custom-header-height, 76px) + 8px);
}

body.admin-bar.single-post{
  --tth-toc-top:max(150px, calc(var(--tth-custom-header-height, 76px) + 48px));
  --tth-mobile-toc-top:calc(var(--tth-custom-header-height, 76px) + 54px);
}

/* Shared article safety */
body.single-post section.tth-scheme,
body.single-post section.tth-scheme *,
body.single-post section.tth-scheme *::before,
body.single-post section.tth-scheme *::after{
  box-sizing:border-box;
}

body.single-post section.tth-scheme .tth-grid,
body.single-post section.tth-scheme .tth-grid > main.tth-content,
body.single-post section.tth-scheme .tth-grid > aside.tth-toc{
  min-width:0 !important;
  max-width:100% !important;
}

body.single-post section.tth-scheme :is(h2[id],h3[id],h4[id],[id].tth-anchor){
  scroll-margin-top:var(--tth-toc-top,118px) !important;
}

body.admin-bar.single-post section.tth-scheme :is(h2[id],h3[id],h4[id],[id].tth-anchor){
  scroll-margin-top:var(--tth-toc-top,150px) !important;
}

/* Desktop sticky TOC */
@media only screen and (min-width:1025px){
  html:has(body.single-post),
  body.single-post,
  body.single-post #page,
  body.single-post .site,
  body.single-post #content,
  body.single-post .site-content,
  body.single-post .site-content > .ast-container,
  body.single-post #primary,
  body.single-post .content-area,
  body.single-post .site-main,
  body.single-post #main,
  body.single-post article,
  body.single-post .entry-content,
  body.single-post .elementor-location-single,
  body.single-post .elementor-location-single > .elementor,
  body.single-post .elementor-section-wrap,
  body.single-post .elementor-widget-html,
  body.single-post .elementor-widget-html > .elementor-widget-container,
  body.single-post section.tth-scheme,
  body.single-post section.tth-scheme .tth-wrap,
  body.single-post section.tth-scheme .tth-grid{
    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    contain:none !important;
  }

  body.single-post :is(
    .e-con:has(section.tth-scheme),
    .e-con-inner:has(section.tth-scheme),
    .elementor-element:has(section.tth-scheme),
    .elementor-widget-container:has(section.tth-scheme),
    .elementor-widget-html:has(section.tth-scheme)
  ){
    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    contain:none !important;
  }

  body.single-post section.tth-scheme .tth-grid{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 300px !important;
    gap:28px !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:1px !important;
    margin-top:16px !important;
  }

  body.single-post section.tth-scheme .tth-grid > main.tth-content{
    grid-column:1 !important;
    grid-row:1 !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  body.single-post section.tth-scheme .tth-grid > aside.tth-toc,
  body.single-post section.tth-scheme .tth-grid > aside.tth-toc.tth-toc-fixed,
  body.single-post section.tth-scheme .tth-grid > aside.tth-toc.tth-toc-ended{
    grid-column:2 !important;
    grid-row:1 !important;
    position:-webkit-sticky !important;
    position:sticky !important;
    top:var(--tth-toc-top,118px) !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    align-self:start !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:300px !important;
    min-width:0 !important;
    height:auto !important;
    max-height:calc(100vh - var(--tth-toc-top,118px) - 20px) !important;
    margin:0 !important;
    transform:none !important;
    translate:none !important;
    will-change:auto !important;
    overflow:hidden !important;
    z-index:150 !important;
  }

  body.admin-bar.single-post section.tth-scheme .tth-grid > aside.tth-toc,
  body.admin-bar.single-post section.tth-scheme .tth-grid > aside.tth-toc.tth-toc-fixed,
  body.admin-bar.single-post section.tth-scheme .tth-grid > aside.tth-toc.tth-toc-ended{
    top:var(--tth-toc-top,150px) !important;
    max-height:calc(100vh - var(--tth-toc-top,150px) - 20px) !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol,nav){
    min-height:0 !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol),
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol){
    flex:1 1 auto !important;
    max-height:calc(100vh - var(--tth-toc-top,118px) - 97px) !important;
    padding-right:6px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;
    scrollbar-width:thin !important;
    scrollbar-color:var(--tth-teal,#49d3bf) transparent !important;
  }

  body.admin-bar.single-post section.tth-scheme .tth-toc > :is(ul,ol),
  body.admin-bar.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol){
    max-height:calc(100vh - var(--tth-toc-top,150px) - 97px) !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol)::-webkit-scrollbar,
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol)::-webkit-scrollbar{
    width:5px !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol)::-webkit-scrollbar-track,
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol)::-webkit-scrollbar-track{
    background:transparent !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol)::-webkit-scrollbar-thumb,
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol)::-webkit-scrollbar-thumb{
    border-radius:999px !important;
    background:var(--tth-teal,#49d3bf) !important;
  }
}

/* Mobile/tablet TOC stays in document flow directly below TL;DR */
@media only screen and (max-width:1024px){
  body.single-post section.tth-scheme :is(h2[id],h3[id],h4[id],[id].tth-anchor){
    scroll-margin-top:96px !important;
  }

  body.single-post section.tth-scheme .tth-grid{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:16px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-top:16px !important;
    overflow:visible !important;
    contain:none !important;
  }

  body.single-post section.tth-scheme .tth-grid > aside.tth-toc,
  body.single-post section.tth-scheme .tth-grid > aside.tth-toc.tth-toc-fixed,
  body.single-post section.tth-scheme .tth-grid > aside.tth-toc.tth-toc-ended{
    order:1 !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    align-self:stretch !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    transform:none !important;
    translate:none !important;
    will-change:auto !important;
    overflow:hidden !important;
    z-index:auto !important;
  }

  body.single-post section.tth-scheme .tth-grid > main.tth-content{
    order:2 !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(h2,h3,h4):first-child,
  body.single-post section.tth-scheme .tth-toc > .tth-toc-title{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    min-height:48px !important;
    margin:0 0 12px !important;
    padding:0 0 12px !important;
    border-bottom:1px solid color-mix(in srgb,var(--tth-border,rgba(15,35,58,.14)) 78%,transparent) !important;
    color:var(--tth-text,#142033) !important;
    -webkit-text-fill-color:var(--tth-text,#142033) !important;
    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(h2,h3,h4):first-child::after,
  body.single-post section.tth-scheme .tth-toc > .tth-toc-title::after{
    content:"Jump to" !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:28px !important;
    padding:5px 10px !important;
    border:1px solid color-mix(in srgb,var(--tth-teal,#138f83) 32%,transparent) !important;
    border-radius:999px !important;
    color:var(--tth-teal,#138f83) !important;
    -webkit-text-fill-color:var(--tth-teal,#138f83) !important;
    background:color-mix(in srgb,var(--tth-teal,#138f83) 9%,transparent) !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol),
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol){
    display:block !important;
    flex:none !important;
    width:100% !important;
    max-height:min(340px,42vh) !important;
    margin:0 !important;
    padding-right:5px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-gutter:stable !important;
    scrollbar-width:thin !important;
    scrollbar-color:var(--tth-teal,#138f83) transparent !important;
  }

  body.single-post section.tth-scheme .tth-toc > nav{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.single-post section.tth-scheme .tth-toc :is(ul,ol){
    margin-bottom:0 !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol)::-webkit-scrollbar,
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol)::-webkit-scrollbar{
    width:5px !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol)::-webkit-scrollbar-track,
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol)::-webkit-scrollbar-track{
    background:transparent !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol)::-webkit-scrollbar-thumb,
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol)::-webkit-scrollbar-thumb{
    border-radius:999px !important;
    background:var(--tth-teal,#138f83) !important;
  }

  body.single-post section.tth-scheme .tth-toc a{
    display:flex !important;
    align-items:flex-start !important;
    width:100% !important;
    padding:10px 9px 10px 13px !important;
    border-bottom:0 !important;
    border-radius:10px !important;
    color:var(--tth-muted,#44546a) !important;
    -webkit-text-fill-color:var(--tth-muted,#44546a) !important;
    font-size:13.5px !important;
    line-height:1.42 !important;
    font-weight:800 !important;
    text-decoration:none !important;
  }

  body.single-post section.tth-scheme .tth-toc a:hover,
  body.single-post section.tth-scheme .tth-toc a:focus-visible,
  body.single-post section.tth-scheme .tth-toc a:is(.is-active,.active,[aria-current="true"],[aria-current="location"]){
    color:var(--tth-text,#142033) !important;
    -webkit-text-fill-color:var(--tth-text,#142033) !important;
    background:color-mix(in srgb,var(--tth-teal,#138f83) 10%,transparent) !important;
    outline:none !important;
  }

  body.single-post section.tth-scheme .tth-toc a:focus-visible{
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tth-teal,#138f83) 32%,transparent) !important;
  }

}

@media only screen and (max-width:480px){
  body.single-post section.tth-scheme .tth-grid{
    gap:14px !important;
    margin-top:14px !important;
  }

  body.single-post section.tth-scheme .tth-grid > aside.tth-toc{
    padding:15px 13px 14px !important;
    border-radius:17px !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(ul,ol),
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol){
    max-height:min(300px,38vh) !important;
  }

  body.single-post section.tth-scheme .tth-toc a{
    padding:10px 8px 10px 12px !important;
    font-size:13px !important;
    line-height:1.4 !important;
  }

  body.single-post section.tth-scheme .tth-toc > :is(h2,h3,h4):first-child,
  body.single-post section.tth-scheme .tth-toc > .tth-toc-title{
    min-height:44px !important;
    font-size:13px !important;
  }
}


/* Mobile in-flow TOC numbering. Keeps the normal card readable before it becomes sticky. */
@media only screen and (max-width:980px){
  body.single-post section.tth-scheme .tth-toc > :is(ul,ol),
  body.single-post section.tth-scheme .tth-toc > nav > :is(ul,ol){
    list-style:none !important;
    counter-reset:tth-mobile-flow-counter !important;
  }

  body.single-post section.tth-scheme .tth-toc li{
    counter-increment:tth-mobile-flow-counter !important;
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.single-post section.tth-scheme .tth-toc li::marker{
    content:"" !important;
  }

  body.single-post section.tth-scheme .tth-toc a{
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
  }

  body.single-post section.tth-scheme .tth-toc a::before{
    content:counter(tth-mobile-flow-counter) "." !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:32px !important;
    min-width:32px !important;
    color:var(--tth-teal,#138f83) !important;
    -webkit-text-fill-color:var(--tth-teal,#138f83) !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
  }
}

/* =========================================================
   TOKENTOOLHUB SINGLE-POST MOBILE TOC FLOATING COLLAPSE v4
   Stable viewport version.
   Desktop remains unchanged.
   On mobile the original TOC never leaves document flow. A
   separate floating copy appears after the reader passes it, so
   the article body cannot jump or oscillate at the TOC boundary.
========================================================= */

body.single-post .tth-mobile-toc-sentinel,
body.single-post .tth-mobile-toc-floating,
body.single-post .tth-mobile-toc-toggle {
    display: none;
}

@media (max-width:980px) {

    body.single-post .tth-mobile-toc-sentinel {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        pointer-events: none !important;
    }

    body.single-post .tth-mobile-toc-floating {
        display: none !important;
    }

    body.single-post .tth-article .tth-grid>.tth-toc:not(.is-mobile-sticky) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
    }

    body.single-post .tth-toc:not(.is-mobile-sticky) .tth-mobile-toc-toggle {
        display: none !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky {
        position: fixed !important;
        top: var(--tth-mobile-toc-top, 76px) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: auto !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: calc(100dvh - var(--tth-mobile-toc-top, 76px) - 12px) !important;

        margin: 0 !important;
        padding: 10px 12px !important;

        box-sizing: border-box !important;
        overflow: visible !important;

        border: 1px solid rgba(47, 201, 178, .34) !important;
        border-radius: 16px !important;

        background: #0d1933 !important;

        box-shadow:
            0 18px 46px rgba(2, 8, 23, .30),
            inset 0 1px 0 rgba(255, 255, 255, .06) !important;

        z-index: 2147482000 !important;

        transform: none !important;
        filter: none !important;
        contain: none !important;
        isolation: isolate !important;

        -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
        backdrop-filter: blur(14px) saturate(145%) !important;
    }

    html[data-tth-theme="light"] body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky {
        background:
            radial-gradient(circle at 12% 0%, rgba(47, 201, 178, .12), transparent 38%),
            linear-gradient(145deg, #ffffff 0%, #f3f7fb 100%) !important;
        border-color: rgba(19, 143, 131, .24) !important;
        box-shadow:
            0 16px 40px rgba(24, 48, 78, .16),
            inset 0 1px 0 rgba(255, 255, 255, .90) !important;
    }

    html[data-tth-theme="dark"] body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky {
        background:
            radial-gradient(circle at 12% 0%, rgba(47, 201, 178, .16), transparent 38%),
            linear-gradient(145deg, #0d1933 0%, #13213f 100%) !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky h3 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        min-height: 36px !important;

        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;

        color: #f2f5f9 !important;
        -webkit-text-fill-color: #f2f5f9 !important;

        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 950 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;

        white-space: normal !important;
    }

    html[data-tth-theme="light"] body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky h3 {
        color: #142033 !important;
        -webkit-text-fill-color: #142033 !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky h3::after {
        display: none !important;
        content: none !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky .tth-mobile-toc-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        flex: 0 0 auto !important;

        min-height: 34px !important;
        padding: 7px 10px !important;

        appearance: none !important;
        -webkit-appearance: none !important;

        border: 1px solid rgba(47, 201, 178, .30) !important;
        border-radius: 999px !important;

        background: rgba(47, 201, 178, .12) !important;

        color: #49d3bf !important;
        -webkit-text-fill-color: #49d3bf !important;

        font: inherit !important;
        box-shadow: none !important;

        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    html[data-tth-theme="light"] body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky .tth-mobile-toc-toggle {
        color: #138f83 !important;
        -webkit-text-fill-color: #138f83 !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky .tth-mobile-toc-toggle:active {
        transform: scale(.97) !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky .tth-mobile-toc-toggle:focus-visible {
        outline: 2px solid #49d3bf !important;
        outline-offset: 2px !important;
    }

    body.single-post .tth-mobile-toc-toggle__text {
        display: inline-block !important;
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;

        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: .02em !important;
        text-transform: none !important;
        white-space: nowrap !important;
    }

    body.single-post .tth-mobile-toc-toggle__arrow {
        position: relative !important;
        display: block !important;

        width: 8px !important;
        height: 8px !important;

        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;

        transform: translateY(-2px) rotate(45deg) !important;
        transform-origin: center !important;
        transition: transform .18s ease !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open .tth-mobile-toc-toggle__arrow {
        transform: translateY(2px) rotate(225deg) !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky:not(.is-mobile-open) ul,
    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky:not(.is-mobile-open) ol {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        max-height: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open {
        padding-bottom: 12px !important;
        overflow: hidden !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open h3 {
        margin: 0 0 9px !important;
        padding: 0 0 9px !important;
        border-bottom: 1px solid rgba(47, 201, 178, .18) !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open ul,
    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open ol {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        max-height: min(54dvh, 360px) !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 3px 0 0 !important;

        list-style: none !important;
        counter-reset: tth-mobile-sticky-counter !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;

        pointer-events: auto !important;

        scrollbar-width: thin !important;
        scrollbar-color: rgba(47, 201, 178, .58) rgba(255, 255, 255, .06) !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open li {
        counter-increment: tth-mobile-sticky-counter !important;

        position: relative !important;
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open li::marker {
        content: "" !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open a {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 9px 10px !important;

        border: 1px solid rgba(255, 255, 255, .075) !important;
        border-radius: 12px !important;

        background: rgba(255, 255, 255, .05) !important;

        color: #c0cad8 !important;
        -webkit-text-fill-color: #c0cad8 !important;

        font-size: 13px !important;
        line-height: 1.35 !important;
        font-weight: 760 !important;

        text-decoration: none !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;

        box-sizing: border-box !important;
    }

    html[data-tth-theme="light"] body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open a {
        background: rgba(255, 255, 255, .82) !important;
        border-color: rgba(15, 35, 58, .10) !important;

        color: #44546a !important;
        -webkit-text-fill-color: #44546a !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open a::before {
        content: counter(tth-mobile-sticky-counter) "." !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        min-width: 32px !important;

        color: #49d3bf !important;
        -webkit-text-fill-color: #49d3bf !important;

        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    html[data-tth-theme="light"] body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open a::before {
        color: #138f83 !important;
        -webkit-text-fill-color: #138f83 !important;
    }

    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open a:hover,
    body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open a:focus {
        background: rgba(47, 201, 178, .13) !important;
        border-color: rgba(47, 201, 178, .25) !important;

        color: #f2f5f9 !important;
        -webkit-text-fill-color: #f2f5f9 !important;

        transform: none !important;
        outline: none !important;
    }

    html[data-tth-theme="light"] body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open a:hover,
    html[data-tth-theme="light"] body.single-post .tth-toc.tth-mobile-toc-floating.is-mobile-sticky.is-mobile-open a:focus {
        color: #142033 !important;
        -webkit-text-fill-color: #142033 !important;
    }

    body.single-post .tth-content h2,
    body.single-post .tth-content h3,
    body.single-post .tth-content h4 {
        scroll-margin-top: 152px !important;
    }
}

@media (min-width:981px) {

    body.single-post .tth-mobile-toc-sentinel,
    body.single-post .tth-mobile-toc-floating,
    body.single-post .tth-mobile-toc-toggle {
        display: none !important;
    }
}

/* ================= END TOKENTOOLHUB SINGLE-POST MOBILE TOC FLOATING COLLAPSE v4 ================= */

/* Dark article perimeter reset. Uses only TokenToolHub mode signals. */
html:is([data-tth-mode="dark"],[data-tth-theme="dark"],.tth-dark-page-bg) body.single-post
:is(
  article,
  .entry-content,
  .elementor-location-single,
  [data-elementor-type="single-post"],
  .elementor-widget-theme-post-content,
  .elementor-widget-html:has(section.tth-scheme),
  .elementor-widget-html:has(section.tth-scheme) > .elementor-widget-container,
  .elementor-element:has(> .elementor-widget-container > section.tth-scheme),
  .e-con:has(section.tth-scheme),
  .e-con-inner:has(section.tth-scheme)
),
body.single-post:is([data-tth-mode="dark"],[data-tth-theme="dark"],.tth-dark-page-bg)
:is(
  article,
  .entry-content,
  .elementor-location-single,
  [data-elementor-type="single-post"],
  .elementor-widget-theme-post-content
){
  border:0 !important;
  border-color:transparent !important;
  outline:0 !important;
  box-shadow:none !important;
}

html:is([data-tth-mode="dark"],[data-tth-theme="dark"],.tth-dark-page-bg) body.single-post section.tth-scheme,
body.single-post:is([data-tth-mode="dark"],[data-tth-theme="dark"],.tth-dark-page-bg) section.tth-scheme{
  border:0 !important;
  border-width:0 !important;
  border-color:transparent !important;
  outline:0 !important;
  box-shadow:0 18px 44px rgba(0,0,0,.24) !important;
  background-clip:border-box !important;
}

html:is([data-tth-mode="dark"],[data-tth-theme="dark"],.tth-dark-page-bg) body.single-post
:is(
  .elementor-widget-html:has(section.tth-scheme),
  .elementor-widget-html:has(section.tth-scheme) > .elementor-widget-container,
  .elementor-element:has(> .elementor-widget-container > section.tth-scheme),
  section.tth-scheme
)::before,
html:is([data-tth-mode="dark"],[data-tth-theme="dark"],.tth-dark-page-bg) body.single-post
:is(
  .elementor-widget-html:has(section.tth-scheme),
  .elementor-widget-html:has(section.tth-scheme) > .elementor-widget-container,
  .elementor-element:has(> .elementor-widget-container > section.tth-scheme),
  section.tth-scheme
)::after{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

html:is([data-tth-mode="dark"],[data-tth-theme="dark"],.tth-dark-page-bg) body.single-post
:is(.e-con:has(section.tth-scheme),.elementor-element:has(section.tth-scheme))
> .elementor-background-overlay{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* Mode-safe TOC surface */
body.single-post section.tth-scheme .tth-grid > aside.tth-toc{
  color:var(--tth-text,#142033) !important;
  border-color:color-mix(in srgb,var(--tth-teal,#138f83) 24%,transparent) !important;
  background:
    radial-gradient(
      450px 210px at 0% 0%,
      color-mix(in srgb,var(--tth-teal,#138f83) 10%,transparent),
      transparent 65%
    ),
    var(--tth-card,#ffffff) !important;
}

/* color-mix fallback */
@supports not (color:color-mix(in srgb,white 50%,black)){
  body.single-post section.tth-scheme .tth-grid > aside.tth-toc{
    background:var(--tth-card,#ffffff) !important;
  }

  body.single-post section.tth-scheme .tth-toc a:hover,
  body.single-post section.tth-scheme .tth-toc a:focus-visible,
  body.single-post section.tth-scheme .tth-toc a:is(.is-active,.active,[aria-current="true"],[aria-current="location"]){
    background:var(--tth-card2,#f3f7fb) !important;
  }
}

/* Lightweight IntersectionObserver sentinel used by the mobile TOC runtime. */
body.single-post .tth-mobile-toc-sentinel{
  display:block !important;
  width:100% !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  pointer-events:none !important;
}
@media (min-width:981px){
  body.single-post .tth-mobile-toc-sentinel{display:none !important;}
}
