/* Long-form table of contents, option A (Andrew, Oct 27, 2026; board 14-variant-boards/article/toc-a.png).
   Numbered list, every label in full Ink, the current section's number in the accent and its label bold,
   and a thin reading-progress underline under the current label (track in the rule tint, fill in the approved gradient).
   Used by templates/longform.html only. Loads after tpl.css. */
.lf-layout{--tpl-toc-w:300px}
.toc-a a{display:grid;grid-template-columns:2em minmax(0,1fr);column-gap:var(--sp-2);align-items:start;padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2)}
.toc-a a::before{content:none}
.toc-a__n{font-variant-numeric:tabular-nums;font-weight:var(--fw-medium)}
.toc-a__t{min-width:0}
.toc-a__bar{grid-column:2;display:none;height:3px;margin-top:var(--sp-2);border-radius:var(--r-pill);background:var(--c-rule-light);overflow:hidden}
.toc-a__bar span{display:block;height:100%;width:var(--p,0%);background:var(--grad-flare);border-radius:inherit}
.toc-a a[aria-current="true"]{font-weight:var(--fw-bold)}
.toc-a a[aria-current="true"] .toc-a__n{color:var(--accent);font-weight:var(--fw-bold)}
.toc-a a[aria-current="true"] .toc-a__bar{display:block}
@media (min-width:1100px){
  .toc-a ol{gap:var(--sp-1)}
  .toc-a a{padding-inline:0;min-height:0}
  .toc-a a:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
  .toc-a a:hover .toc-a__t{text-decoration:inherit}
}
@media (min-width:1100px){.toc-a summary{padding-left:0}}

/* the number and label sit on one line; the label wraps normally; live TOCs carry their own numbers in the text */
.toc-a a{grid-template-columns:2.2em minmax(0,1fr)}
.toc-a--live a{grid-template-columns:minmax(0,1fr)}
.toc-a--live .toc-a__n{display:none}
.toc-a__t{overflow-wrap:normal;word-break:normal;hyphens:manual}
.toc-a--live .toc-a__bar{grid-column:1}