/* Reading-depth toggle (content-tier). Default state is driven by [data-depth] alone, so it is correct with JS off and before JS runs: comprehensive (advanced) shows, basic hides. The est-depth-toggle library is attached only on nodes whose body carries a .depth-variant (est_theme_v2.theme). */ /* No-JS / pre-JS default: comprehensive visible, basic hidden. */ .depth-variant[data-depth="basic"] { display: none; } .depth-variant[data-depth="advanced"] { display: block; } /* When JS has set the page to basic, flip them (attribute on ). */ [data-page-depth="basic"] .depth-variant[data-depth="advanced"] { display: none; } [data-page-depth="basic"] .depth-variant[data-depth="basic"] { display: block; } /* The jump-nav TOC (page-toc.js) is built from the comprehensive variant only; hide it in basic mode (the basic variant is a short linear read). */ [data-page-depth="basic"] .page-toc { display: none; } /* Toggle control. */ .depth-toggle { display: inline-flex; gap: 0; border: 1px solid var(--ink-200, #e2e8f0); border-radius: 8px; overflow: hidden; margin: 4px 0 20px; } .depth-btn { appearance: none; border: 0; background: #fff; color: var(--ink-600, #475569); font: inherit; font-size: 14px; padding: 7px 16px; cursor: pointer; line-height: 1.2; } .depth-btn + .depth-btn { border-left: 1px solid var(--ink-200, #e2e8f0); } .depth-btn[aria-pressed="true"] { background: var(--brand-600, #1d4ed8); color: #fff; font-weight: 600; } .depth-btn:focus-visible { outline: 2px solid var(--brand-600, #1d4ed8); outline-offset: 2px; } .depth-invite { font-size: 15px; color: var(--ink-600, #475569); margin: 18px 0 8px; } .depth-up-note { margin-top: 28px; font-size: 14px; } /* Toggle embedded in the page header, far top-right. Scoped to the modifier class so only depth-toggle pages get this hero layout; every other .content-hero is untouched. Anchored to the FULL-WIDTH .content-hero (not the 880px .content-hero-inner) so it sits at the right edge of the content column, well clear of the title and the (now full-width) lede. */ .content-hero--has-toggle { position: relative; } .content-hero--has-toggle .content-hero-lede { max-width: none; } .depth-hero-toggle { position: absolute; top: 32px; /* aligns with the hero content top (eyebrow) = the hero padding-top */ right: 18px; /* in from the content-column right edge */ display: flex; flex-direction: column; align-items: flex-end; } .depth-hero-toggle .depth-invite { margin: 0 0 6px; font-size: 13px; } .depth-hero-toggle .depth-toggle { margin: 0; } /* Mobile: too narrow for a far-right cluster, so let it sit in normal flow under the lede, left-aligned. */ @media (max-width: 760px) { .content-hero--has-toggle { position: static; } .depth-hero-toggle { position: static; align-items: flex-start; margin-top: 16px; } }