/* Workwebsite v4.4.2
   Exact requested behavior:
   .b440-toc__inner is the moving/sticky element.
   The outer .b440-toc becomes a full-height rail bounded by the article.
*/

:root{
  --b442-toc-top: 100px;
  --b442-toc-bottom-gap: 20px;
}

/* The whole article row is the movement boundary. */
.b440-deep-layout{
  position:relative!important;
  align-items:stretch!important;
}

/* Outer aside is NOT sticky anymore.
   It becomes a rail with the same height as the article row. */
.b440-toc{
  position:relative!important;
  top:auto!important;
  align-self:stretch!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  z-index:30!important;
}

/* THIS is the element the user asked to move with page scroll. */
.b440-toc__inner{
  position:sticky!important;
  top:var(--b442-toc-top)!important;
  right:auto!important;
  left:auto!important;

  display:flex!important;
  flex-direction:column!important;

  width:100%!important;
  height:auto!important;
  max-height:calc(100vh - var(--b442-toc-top) - var(--b442-toc-bottom-gap))!important;

  overflow:hidden!important;
  transform:none!important;

  border:1px solid #3c2f18!important;
  border-radius:17px!important;
  background:linear-gradient(155deg,#0d0b08,#080706)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24)!important;
}

/* Only the list scrolls internally when all 30 entries do not fit. */
.b440-toc__inner nav[data-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;
}

.b440-toc__inner nav[data-b440-toc-nav]::-webkit-scrollbar{
  width:6px!important;
}

.b440-toc__inner nav[data-b440-toc-nav]::-webkit-scrollbar-track{
  background:#0a0907!important;
  border-radius:999px!important;
}

.b440-toc__inner nav[data-b440-toc-nav]::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#9a7025,#d9a83e)!important;
  border-radius:999px!important;
}

/* Active item remains visually obvious. */
.b440-toc__inner 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__inner 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;
}

/* Slightly smaller top offset on medium desktop/tablet landscape. */
@media(max-width:1040px) and (min-width:821px){
  :root{
    --b442-toc-top: 90px;
  }
}

/* Stacked/mobile layout: normal document flow. */
@media(max-width:820px){
  .b440-deep-layout{
    align-items:start!important;
  }

  .b440-toc{
    position:relative!important;
    top:auto!important;
    align-self:auto!important;
    height:auto!important;
  }

  .b440-toc__inner{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
  }

  .b440-toc__inner nav[data-b440-toc-nav]{
    max-height:330px!important;
  }
}