
/* ===== Clean sticky TOC ===== */

/*
  Sticky works only when none of its scrolling ancestors create a competing
  scroll container. Keep the page chain vertically visible.
*/
html,
body,
.app,
.app__wrapper,
.tp2-main,
.tp2-content,
.tp2-wrap,
.tp2-content__grid{
  overflow-y:visible!important;
}

.app{
  overflow-x:clip!important;
}

/* Desktop */
@media (min-width:981px){
  .tp2-content__grid{
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr)!important;
    gap:34px!important;
    align-items:start!important;
  }

  .tp2-toc{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:76px!important;
    align-self:start!important;

    width:220px!important;
    max-width:220px!important;
    height:auto!important;
    max-height:calc(100vh - 96px)!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

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

    display:block!important;
    box-sizing:border-box!important;
    z-index:10!important;

    scrollbar-width:thin;
    scrollbar-color:#34404b transparent;
  }

  .tp2-toc__title{
    display:block!important;
    margin:0 0 14px!important;
  }

  .tp2-toc a{
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;

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

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

    font-size:12px!important;
    line-height:1.4!important;
    white-space:normal!important;
  }

  .tp2-toc a span{
    display:block!important;
    width:22px!important;
    min-width:22px!important;
    line-height:1.4!important;
  }

  .tp2-toc a b{
    display:block!important;
    min-width:0!important;
    font-size:12px!important;
    line-height:1.4!important;
    font-weight:600!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  .tp2-toc::-webkit-scrollbar{width:5px}
  .tp2-toc::-webkit-scrollbar-thumb{
    background:#34404b;
    border-radius:10px;
  }
  .tp2-toc::-webkit-scrollbar-track{background:transparent}
}

/* Tablet / mobile: normal in-flow contents block */
@media (max-width:980px){
  .tp2-content__grid{
    grid-template-columns:1fr!important;
  }

  .tp2-toc{
    position:static!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 18px!important;
    padding:0 0 18px!important;
    margin:0!important;
  }

  .tp2-toc__title{
    grid-column:1/-1!important;
  }
}

@media (max-width:700px){
  .tp2-toc{
    grid-template-columns:1fr!important;
  }
}
