/* Reading progress bar \002014 fixed 3px stripe, width driven by --bp-progress
   (set by the runtime JS). Themed by the site's --accent token. */
.bp-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: var(--bp-progress, 0%); background: var(--accent, #2563eb); z-index: 9999; transition: width 100ms linear; pointer-events: none; }

/* Active TOC item \002014 the IntersectionObserver toggles is-active on the
   <li> whose heading is in the upper third of the viewport. */
.bp-toc li.is-active > a { color: var(--accent, #2563eb); font-weight: 600; }
.bp-toc li.is-active { position: relative; }
.bp-toc li.is-active::before { content: ""; position: absolute; left: -1.25rem; top: 0.3em; width: 3px; height: calc(1em + 0.2em); background: var(--accent, #2563eb); border-radius: 2px; }

/* Copy-to-clipboard share button affordance. */
[data-bp-copy] { cursor: pointer; }
.bp-share-copied { opacity: 0.85; }

/* Fixed/sticky-nav compensation. The deterministic runtime measurer (JS below)
   writes the REAL navbar height into these vars, so blog content clears a
   position:fixed navbar (--pbn-nav-pad) and in-page anchor jumps land below
   the bar (--pbn-nav-scroll, fixed OR sticky). Defaults 0 \002192 static-nav sites
   get NO spurious gap. This replaces the chrome session's brittle, unenforced
   AI-estimated padding-top literal (the "blog title slides under the fixed
   header" bug): the value is now MEASURED, not guessed, and applied at the same
   selector so it wins source-order over any stale literal in _chrome.css. */
html { scroll-padding-top: var(--pbn-nav-scroll, 0px); }
body.pbn-blog-page > main { padding-top: var(--pbn-nav-pad, 0px); }
.pbn-blog-page .content, .pbn-blog-page .content p, .pbn-blog-page .content li { color: inherit; }
.pbn-blog-page .key-takeaways { background: rgba(127,127,127,0.08); color: inherit; border-left: 4px solid var(--accent, currentColor); }
.pbn-blog-page .key-takeaways h2, .pbn-blog-page .key-takeaways h3 { color: inherit; opacity: 0.7; }
.pbn-blog-page .article-meta, .pbn-blog-page .share-label { color: inherit; opacity: 0.65; }
.pbn-blog-page .tag { background: rgba(127,127,127,0.14); color: inherit; }