/* ============================================================
   Shared article chrome: sticky scroll-spy TOC.
   Themed entirely from each post's own CSS variables, so it inherits
   the article's palette/type automatically. Include AFTER the post's
   :root tokens. Vanilla port of hometown_hybrids ArticleTOC.tsx.
   ============================================================ */

/* sticky side rail, parked in the left gutter of the centered column */
.toc{
  position:fixed;z-index:40;
  top:var(--toc-top,128px);
  left:max(20px, calc((100vw - var(--wide,64rem)) / 2 - 232px));
  width:212px;
  max-height:calc(100vh - var(--toc-top,128px) - 32px);
  overflow:auto;
  font-family:var(--sans,system-ui,-apple-system,sans-serif);
}
.toc-label{
  display:block;padding:0 .8rem .55rem;
  font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute,#888);
}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc a{
  display:flex;gap:.6rem;align-items:flex-start;
  padding:.5rem .8rem;border-radius:8px;text-decoration:none;
  font-size:13px;line-height:1.35;color:var(--body,#555);
  border-left:2px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.toc a:hover{background:var(--soft2,#f2f2f2);color:var(--ink,#111)}
.toc a .n{
  flex:none;padding-top:.12rem;
  font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;font-weight:600;color:var(--mute,#888);
  font-variant-numeric:tabular-nums;
}
.toc a.active{
  background:var(--soft,#fafafa);color:var(--ink,#111);font-weight:600;
  border-left-color:var(--accent,var(--ink,#111));
}
.toc a.active .n{color:var(--accent,var(--link,#0070f3))}

/* hide the rail when there isn't room beside the column */
@media (max-width:1249px){ .toc{display:none} }

.live-repo-note{
  max-width:var(--wide,64rem);
  margin:clamp(2rem,5vw,3rem) auto 0;
  padding:0 clamp(1.25rem,5vw,2rem);
  font-family:var(--sans,system-ui,-apple-system,sans-serif);
}
.live-repo-note-inner{
  display:grid;gap:.45rem;
  padding:.8rem 0;
  border-top:1px solid var(--hairline,#ddd);
  border-bottom:1px solid var(--hairline,#ddd);
  color:var(--body,#555);
  font-size:13px;line-height:1.45;
}
.live-repo-note a{color:var(--link,var(--accent,#0070f3));text-decoration:none}
.live-repo-note a:hover{text-decoration:underline}
.live-label{
  display:inline-block;margin-right:.7rem;
  font-family:var(--mono,ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute,#888);
}
.live-due{color:var(--accent,var(--link,#0070f3));font-weight:600}