/* The Source Finance — reading aids for long pages (articles and legal pages):
   the contents list built from the h2s and the reading-progress bar. Behaviour in assets/js/article.js. */

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Contents ---------- */
.toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 136px); overflow-y: auto; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc__label { font-size: 12px; letter-spacing: .06em; color: var(--muted-2); }
.toc__toggle { display: none; }
.toc__body { position: relative; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }
.toc__list { display: flex; flex-direction: column; }
.toc__list a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 7px 4px 7px 16px; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.35; color: var(--muted-2); text-wrap: pretty; transition: color .25s, background-color .25s; }
.toc__list a:hover { color: var(--fg); background: rgba(255, 255, 255, .03); }
.toc__list a[aria-current="true"] { color: var(--fg); }
.toc__list a:focus-visible { outline-offset: -2px; border-radius: 8px; }
.toc__n { font-family: var(--f-mono); font-size: 11px; line-height: 1.75; letter-spacing: .04em; color: var(--muted-3); transition: color .25s; }
.toc__list a[aria-current="true"] .toc__n { color: var(--accent); }
.toc__marker { position: absolute; left: 0; top: 0; width: 2px; height: var(--mh, 0px); transform: translateY(var(--my, 0px)); border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); opacity: 0; pointer-events: none; transition: transform .45s var(--ease-out), height .45s var(--ease-out), opacity .3s; }
.toc.has-active .toc__marker { opacity: 1; }

/* Small screens: a collapsible panel above the text (open by default without scripts) */
@media (max-width: 1199px) {
  .toc { position: static; max-height: none; overflow: visible; gap: 0; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .toc__label { padding: 16px 18px 10px; }
  .toc__body { margin: 0 18px 14px; }
  .js .toc__label { display: none; }
  .js .toc__toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-radius: 16px; background: none; color: var(--fg); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
  .toc__toggle .icon { color: var(--muted); }
  .toc__count { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--muted-2); }
  .toc__plus { transition: transform .4s var(--ease-spring); }
  .toc.is-open .toc__plus { transform: rotate(45deg); }
  .js .toc:not(.is-open) .toc__body { display: none; }
  .js .toc.is-open .toc__body { margin-top: 2px; }
}

/* ---------- Reading progress: follows the bottom edge of the fixed nav ---------- */
.read-progress { position: fixed; z-index: 49; left: 0; top: 0; width: var(--rp-w, 100%); height: 2px; transform: translate3d(var(--rp-x, 0px), var(--rp-y, 64px), 0); opacity: 0; pointer-events: none; transition: opacity .4s; }
.read-progress.is-on { opacity: 1; }
.read-progress::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.read-progress > i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold-700), var(--gold-300)); box-shadow: 0 0 12px var(--accent-glow); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

@media (prefers-reduced-motion: reduce) {
  .toc__marker, .toc__plus, .read-progress { transition: none; }
}