/* v146 — fixed right-side table of contents for ordinary document pages. */
.content-page--document{
    max-width:1240px;
}
.document-layout{
    width:100%;
}
.document-layout.has-toc{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(220px, 270px);
    gap:clamp(36px, 4vw, 64px);
    align-items:start;
}
.document-main{
    min-width:0;
}
.document-layout.has-toc .document-main .content-section{
    max-width:none;
}
/*
 * The aside remains in the grid only as a width placeholder. The visible
 * contents panel itself is fixed to the viewport, so it never travels with
 * the document or stops at the bottom edge of the article.
 */
.document-toc{
    position:relative;
    align-self:start;
    min-width:0;
    min-height:1px;
}
.document-toc[hidden]{
    display:none!important;
}
.document-toc__inner{
    position:fixed;
    top:calc(var(--top-bar-height) + 28px);
    left:var(--document-toc-left, auto);
    width:var(--document-toc-width, 250px);
    max-height:calc(100dvh - var(--top-bar-height) - 56px);
    display:flex;
    flex-direction:column;
    min-height:0;
    border-left:2px solid rgba(83,146,255,.28);
    padding:4px 0 4px 28px;
    z-index:20;
}
.document-toc__title{
    flex:0 0 auto;
    margin:0 0 20px;
    color:var(--text-primary);
    font-size:14px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.document-toc__nav{
    display:flex;
    flex-direction:column;
    gap:0;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:8px;
}
.document-toc__link{
    display:block;
    position:relative;
    padding:7px 0;
    color:var(--text-muted);
    font-size:15px;
    line-height:1.45;
    text-decoration:none;
    overflow-wrap:anywhere;
    transition:color .15s ease;
}
.document-toc__link:hover,
.document-toc__link:focus-visible{
    color:var(--text-primary);
    outline:none;
}
.document-toc__link.is-active{
    color:var(--accent-blue);
    font-weight:700;
}
.document-toc__link--h1{
    padding-left:0;
    font-weight:600;
}
.document-toc__link--h2{
    padding-left:14px;
}
.document-toc__link--h3{
    padding-left:28px;
    font-size:14px;
}
#pageContent h1[id],
#pageContent h2[id],
#pageContent h3[id],
#pageContent [data-toc-heading][id]{
    scroll-margin-top:calc(var(--top-bar-height) + 28px);
}
@media (max-width:1024px){
    .document-layout.has-toc{
        display:block;
    }
    .document-toc{
        display:none!important;
    }
}

/* v147 — hover permalink control for document headings. */
#pageContent .document-heading--anchored{
    position:relative;
}
.document-heading-anchor{
    position:absolute;
    right:100%;
    top:50%;
    transform:translateY(-50%);
    margin-right:8px;
    width:28px;
    height:36px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--accent-blue);
    font:inherit;
    font-size:.72em;
    font-weight:700;
    line-height:1;
    text-align:center;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .14s ease,color .14s ease;
    z-index:5;
}
/* Keep a transparent hover bridge between the heading and its permalink.
   Without it the 8px visual gap drops :hover before the pointer reaches #. */
.document-heading-anchor::before{
    content:'';
    position:absolute;
    top:-8px;
    bottom:-8px;
    left:-8px;
    right:-16px;
}
.document-heading--anchored:hover > .document-heading-anchor,
.document-heading-anchor:focus-visible{
    opacity:1;
    pointer-events:auto;
}
.document-heading-anchor:hover,
.document-heading-anchor:focus-visible{
    color:var(--text-primary);
    outline:none;
}
.document-heading-anchor:focus-visible::after{
    content:'';
    position:absolute;
    inset:3px;
    border:1px solid var(--accent-blue);
    border-radius:4px;
}
.document-heading-anchor__feedback{
    position:absolute;
    left:50%;
    bottom:calc(100% + 5px);
    transform:translateX(-50%) translateY(3px);
    width:max-content;
    max-width:190px;
    padding:5px 7px;
    border:1px solid var(--border-color);
    border-radius:5px;
    background:var(--bg-secondary);
    color:var(--text-primary);
    font-family:var(--font-family, Inter, sans-serif);
    font-size:11px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease,transform .12s ease;
    z-index:30;
}
.document-heading-anchor.is-copied .document-heading-anchor__feedback,
.document-heading-anchor.is-copy-error .document-heading-anchor__feedback{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.document-heading-anchor.is-copied{
    opacity:1;
    pointer-events:auto;
    color:var(--accent-blue);
}
.document-heading-anchor.is-copy-error{
    opacity:1;
    pointer-events:auto;
    color:var(--danger, #ef4444);
}
@media (hover:none), (pointer:coarse){
    .document-heading-anchor{
        opacity:.72;
        pointer-events:auto;
    }
}
@media (max-width:720px){
    .document-heading-anchor{
        position:static;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        transform:none;
        width:24px;
        height:1em;
        margin:0 4px 0 0;
        vertical-align:baseline;
    }
}


/* v148 — the FAQ uses the same fixed document navigation. */
.faq-page.content-page--document{
    max-width:1240px;
}
.faq-document-content{
    min-width:0;
}
.faq-document-layout.has-toc .faq-document-main{
    min-width:0;
}
.faq-document-layout.has-toc .faq-intro{
    max-width:none;
}


/* v151 — compact back-to-top action for long documents and FAQ pages. */
.document-back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:9px;
    background:rgba(17,25,35,.94);
    color:var(--text-primary);
    font-family:inherit;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    z-index:45;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity .16s ease,transform .16s ease,border-color .16s ease,background .16s ease;
}
.document-back-to-top.is-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
.document-back-to-top:hover,
.document-back-to-top:focus-visible{
    border-color:rgba(101,159,243,.52);
    background:#182335;
    outline:none;
}
@media (max-width:720px){
    .document-back-to-top{
        right:14px;
        bottom:14px;
        width:40px;
        height:40px;
    }
}