/* Article contents: a sticky rail beside the article above 1080 px, a sticky section bar and a
   bottom sheet below it. Scoped to .article-layout, .article-toc, .article-toc-bar and
   .article-toc-sheet so it cannot touch any other page. */

/* One column for everything. Prose, tables and figures share the same 820 px width, and the whole
   composition (rail + gap + column) is centred inside a 1160 px container, so the right edge of a
   wide table lines up with the left edge of the rail instead of running to the window edge. The
   old approach — a 760 px text column with tables bleeding 110–220 px past it — was what made
   diagrams look like they were spilling out of the page. */
.article-layout{max-width:1160px;display:grid;grid-template-columns:208px minmax(0,820px);column-gap:40px;justify-content:center;align-items:start}
.article-layout .article-inner{max-width:820px;margin:0 auto;scroll-margin-top:96px}
.article-inner h2{scroll-margin-top:calc(96px + 14px)}

.article-toc{position:sticky;top:calc(96px + 28px);align-self:start;max-height:calc(100vh - 96px - 56px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px;scrollbar-width:thin}
.article-toc::-webkit-scrollbar{width:4px}
.article-toc::-webkit-scrollbar-thumb{background:#D8DEEA;border-radius:4px}
.article-toc-label{font-size:11.5px;font-weight:700;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;margin:0 0 12px}
.article-toc-progress{height:2px;background:var(--border);border-radius:2px;overflow:hidden;margin:0 0 16px}
.article-toc-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2F6BFF,#38BDF8);border-radius:2px;transition:width .15s linear}
.article-toc-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.article-toc-list li{margin:0;padding:0}
.article-toc-list a{display:block;padding:7px 10px 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:13.5px;line-height:1.55;color:var(--muted);text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.article-toc-list a:hover{color:var(--accent)}
.article-toc-list a.is-active{color:var(--ink);font-weight:700;border-left-color:var(--accent);background:linear-gradient(90deg,rgba(47,107,255,.09),rgba(47,107,255,0))}
.article-toc-list a:focus-visible,.article-toc-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.article-toc-top{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none}
.article-toc-top:hover{color:var(--accent)}

.article-toc-bar{display:none;position:sticky;top:96px;z-index:40;margin:0 0 22px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.article-toc-open{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0;background:none;border:0;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.article-toc-open svg{flex:none;color:var(--muted)}
.article-toc-current{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:500}
.article-toc-current.is-active{color:var(--ink);font-weight:700}
.article-toc-chev{flex:none;color:var(--muted);transition:transform .18s}
.article-toc-open[aria-expanded="true"] .article-toc-chev{transform:rotate(180deg)}
.article-toc-bar .article-toc-progress{position:absolute;left:0;right:0;bottom:-1px;margin:0;height:2px;border-radius:0}

/* The contents panel opens downward from the bar, so the list is read top to bottom from where
   the eye already is, and the bottom of the phone stays clear. It starts under the header (97 px)
   plus the bar (48 px). */
.article-toc-sheet{width:100%;max-width:none;margin:calc(96px + 48px) auto auto;padding:0;border:0;border-radius:0 0 18px 18px;background:#fff;color:var(--ink);box-shadow:0 24px 60px -24px rgba(15,42,79,.4);max-height:calc(100vh - 96px - 48px - 12px);max-height:calc(100dvh - 96px - 48px - 12px)}
.article-toc-sheet::backdrop{background:rgba(11,31,58,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.article-toc-sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 10px;background:#fff;border-bottom:1px solid var(--border)}
.article-toc-sheet-head p{font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;margin:0}
.article-toc-close{display:grid;place-items:center;width:44px;height:44px;margin:-8px -8px -8px 0;border:0;background:none;border-radius:10px;cursor:pointer;color:var(--muted)}
.article-toc-close:hover{background:var(--soft);color:var(--ink)}
.article-toc-sheet .article-toc-list{border-left:0;padding:8px 12px 20px;overflow-y:auto;max-height:calc(100vh - 96px - 48px - 68px);max-height:calc(100dvh - 96px - 48px - 68px)}
.article-toc-sheet .article-toc-list a{padding:12px 14px;border-left:0;border-radius:10px;font-size:15px}
.article-toc-sheet .article-toc-list a.is-active{background:var(--soft);color:var(--ink);font-weight:700;border-left-color:transparent}
.article-toc-sheet.is-open{position:fixed;left:0;right:0;top:0;bottom:auto;z-index:80;display:block;margin-top:calc(96px + 48px);overflow-y:auto}

@media(max-width:1079px){
.article-layout{display:block}
.article-toc{display:none}
.article-toc-bar{display:block}
.article-inner h2{scroll-margin-top:calc(96px + 48px + 14px)}
}

/* Above the rail breakpoint the column owns its own width, so the inner's page padding is removed:
   208 + 40 + 820 = 1068 inside a 1112 px content box, with the leftover space split evenly. */
@media(min-width:1080px){
.article-layout .article-inner{max-width:none;margin:0;padding-left:0;padding-right:0}
.article-toc-sheet,.article-toc-sheet.is-open{display:none}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.article-toc-progress i{transition:none}
}
@media print{
.article-toc,.article-toc-bar,.article-toc-sheet{display:none!important}
.article-layout{display:block}
}