/* Blog posts: reading progress bar, reading time and contents list. Everything here is created by js/blog-live.js under html.bl. */
html.bl .bl-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 55; pointer-events: none; }
html.bl .bl-fill { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
html.bl .bl-time { margin-left: 16px; }
html.bl p.bl-time { margin: 0 0 20px; color: var(--fg-muted); font-size: 13.5px; }
html.bl .bl-h { scroll-margin-top: calc(var(--bl-hdr, 76px) + 16px); }

/* contents list: shared link style (style.css gives every nav ul a flex row, so it is reset here) */
html.bl .bl-toc-m ul, html.bl .bl-toc-s ul { display: block; gap: 0; margin: 0; padding: 0; list-style: none; }
html.bl .bl-toc-m li, html.bl .bl-toc-s li { margin: 0; font-size: 14.5px; }
html.bl .bl-toc-m a, html.bl .bl-toc-s a { display: block; padding: 8px 12px; border-left: 3px solid transparent; color: var(--fg-muted); font-size: 14.5px; font-weight: 400; line-height: 1.4; text-decoration: none; transition: none; }
html.bl .bl-toc-m a:hover, html.bl .bl-toc-s a:hover { color: var(--fg); }
html.bl .bl-toc-m a[aria-current], html.bl .bl-toc-s a[aria-current] { border-left-color: var(--accent); color: var(--fg); font-weight: 600; }

/* small screens: native details above the first section */
html.bl .bl-toc-m { display: block; margin: 0 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html.bl .bl-toc-m summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 4px; color: var(--fg); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
html.bl .bl-toc-m summary::-webkit-details-marker { display: none; }
html.bl .bl-toc-m summary::after { content: ""; flex-shrink: 0; width: 14px; height: 14px; background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; }
html.bl .bl-toc-m[open] summary::after { background-size: 100% 2px, 2px 0; }
html.bl .bl-toc-m nav { padding: 0 0 12px; }

/* wide screens: fixed list in the right margin; script sets left and keeps it inside the article's height */
html.bl .bl-toc-s { display: block; position: fixed; top: calc(var(--bl-hdr, 76px) + 24px); left: 0; z-index: 40; width: 220px; max-height: calc(100vh - var(--bl-hdr, 76px) - 48px); overflow-y: auto; }
html.bl .bl-toc-s .bl-toc-t { padding: 0 12px 8px 15px; color: var(--fg-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
html.bl .bl-toc-m[hidden], html.bl .bl-toc-s[hidden] { display: none; }

/* reduced motion: contents-link jumps are instant (css/style.css sets smooth scrolling site-wide) */
@media (prefers-reduced-motion: reduce) { html.bl { scroll-behavior: auto; } }