/* Floating table-of-contents: a sticky right-hand column. Activated by toc.js on pages whose has class "enable-toc". The .has-toc class is added by toc.js to .site-content; its higher specificity (0,2,0) reliably beats main.css's plain .site-content. */ @media (min-width: 1025px) { .site-content.has-toc { max-width: min(1500px, 95vw); padding-left: 24px; padding-right: 24px; } } .tut-layout { display: flex; align-items: flex-start; gap: 32px; } .tut-main { flex: 1; min-width: 0; } .toc-float { position: sticky; top: 90px; flex-shrink: 0; width: 230px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 16px 18px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); font-size: 13px; } .toc-float .toc-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); margin-bottom: 10px; } .toc-float ul { list-style: none; margin: 0; padding: 0; } .toc-float li { margin: 0; } .toc-float a { display: block; padding: 5px 10px; border-left: 2px solid transparent; color: var(--text-secondary); text-decoration: none; line-height: 1.4; border-radius: 0 4px 4px 0; transition: all 0.15s ease; } .toc-float a:hover { color: var(--primary-color); background: var(--bg-elevated); } .toc-float a.toc-h4 { padding-left: 22px; font-size: 12.5px; color: var(--text-tertiary); } .toc-float a.active { color: var(--primary-color); border-left-color: var(--primary-color); background: var(--bg-elevated); /* No font-weight change: bolding widens the text and reflows the wrap. Color + left border + background already mark the active item. */ } /* Stack to a single column on narrow screens; drop the TOC. */ @media (max-width: 1024px) { .tut-layout { display: block; } .toc-float { display: none; } }