/* ──────────────────────────────────────────────────────────────────────
 * article-toc.css — Sticky TOC sidebar + scroll progress bar.
 * Companion to article-toc.js. Drop both files into any article page
 * with at least 3 H2 headings inside .article-wrap and the TOC + bar
 * appear automatically.
 * ────────────────────────────────────────────────────────────────────── */

/* ── Reading progress bar (top edge of viewport) ────────────────────── */
.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary, #6AADCF);
  transform: scaleX(0);
  transform-origin: 0 0;
  z-index: 200;
  pointer-events: none;
  transition: transform 0.08s linear;
}

/* ── Sticky TOC sidebar (desktop only) ───────────────────────────────── */
/* Hidden on mobile/tablet — progress bar carries the "where am I" signal there */
.article-toc { display: none; }

@media (min-width: 1100px) {
  .article-toc {
    display: block;
    position: fixed;
    top: 110px;
    /* Sits to the LEFT of the 720px-max article column */
    left: calc(50% - 360px - 280px);
    width: 240px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1rem 1rem 0;
    z-index: 50;
  }
}

.article-toc__title {
  font-family: 'Nunito', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9ca3af;
  margin: 0 0 0.85rem;
}

.article-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid #e5e7eb;
}

.article-toc__list li {
  padding: 0;
  margin: 0;
}

.article-toc__list a {
  display: block;
  padding: 0.45rem 0 0.45rem 0.9rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, font-weight 0.15s;
}

.article-toc__list a:hover {
  color: #2C2420;
}

.article-toc__list a.is-active {
  color: var(--color-primary, #6AADCF);
  border-left-color: var(--color-primary, #6AADCF);
  font-weight: 700;
}

/* Scroll-margin so deep-links don't tuck H2 under any fixed header */
.article-wrap h2 {
  scroll-margin-top: 80px;
}