/* Workwebsite v4.4.1
   Article TOC: bounded sticky behavior.
   - TOC never climbs above its intended top position.
   - It follows page scrolling through the article.
   - It stops automatically at the bottom of the article layout.
   - The list itself remains scrollable for long TOCs.
*/

:root{
  --b441-toc-top: 100px;
  --b441-toc-bottom-gap: 22px;
}

/* The grid becomes the hard movement boundary for sticky TOC. */
.b440-deep-layout{
  position:relative!important;
  align-items:stretch!important;
}

/* Sticky follows scroll, but remains bounded by .b440-deep-layout. */
.b440-toc{
  position:sticky!important;
  top:var(--b441-toc-top)!important;
  align-self:start!important;
  z-index:30!important;
  height:max-content!important;
  max-height:calc(100vh - var(--b441-toc-top) - var(--b441-toc-bottom-gap))!important;
}

/* Keep the card exactly in place; only its internal list scrolls when needed. */
.b440-toc__inner{
  display:flex!important;
  flex-direction:column!important;
  max-height:calc(100vh - var(--b441-toc-top) - var(--b441-toc-bottom-gap))!important;
  overflow:hidden!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24)!important;
}

/* The long 30-item TOC scrolls internally without moving the whole page. */
.b440-toc nav{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scroll-behavior:smooth!important;
  scrollbar-width:thin!important;
  scrollbar-color:#76551e #0a0907!important;
}

/* Chrome / Edge scrollbar */
.b440-toc nav::-webkit-scrollbar{
  width:6px!important;
}
.b440-toc nav::-webkit-scrollbar-track{
  background:#0a0907!important;
  border-radius:999px!important;
}
.b440-toc nav::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#9a7025,#d9a83e)!important;
  border-radius:999px!important;
}
.b440-toc nav::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#b8842c,#efc45c)!important;
}

/* Make active item easier to follow while scrolling the article. */
.b440-toc nav a.is-active{
  position:relative!important;
  color:#f4dfa9!important;
  background:linear-gradient(90deg,rgba(220,166,58,.09),rgba(220,166,58,.025))!important;
}
.b440-toc nav a.is-active:after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:7px!important;
  bottom:7px!important;
  width:2px!important;
  border-radius:999px!important;
  background:#e8b84c!important;
}

/* Tablet: preserve bounded sticky, but allow slightly more top clearance. */
@media(max-width:1040px) and (min-width:821px){
  :root{
    --b441-toc-top: 92px;
  }
}

/* On mobile/tablet stacked layout, sticky is intentionally disabled:
   TOC stays before the article and behaves naturally. */
@media(max-width:820px){
  .b440-deep-layout{
    align-items:start!important;
  }
  .b440-toc{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
  }
  .b440-toc__inner{
    max-height:none!important;
  }
  .b440-toc nav{
    max-height:330px!important;
  }
}