/* article.css — the one style for the four blog articles (spec 134 R7, K-24).
   Replaces the per-article inline <style> blocks and the highlight.js theme that one article loaded:
   every code block now renders the same way, from the site's own tokens, with no third-party CSS.
   Layout: .container.has-toc is a two-column grid from 1100 px (article 760 + sticky "On this page" aside);
   below that the list sits inline above the text. */
.blog-article{max-width:760px;margin-inline:auto}
.blog-article h2{margin-bottom:var(--space-4);scroll-margin-top:96px}
.blog-article p{margin-bottom:var(--space-5)}
.blog-article ol,.blog-article ul{margin:0 0 var(--space-6) 1.25rem;color:var(--color-gray-400)}
.blog-article li{line-height:var(--leading-relaxed)}
.blog-article hr{border:0;border-top:1px solid var(--color-border)}
.blog-article .taxonomy-table{margin:var(--space-6) 0}
.blog-meta{color:var(--color-gray-500);font-size:var(--text-sm)}
/* The old inline blocks also set h2/h3/hr/.blog-meta margins and a pre radius from tokens that do not exist
   (--space-8/-10/-12, --radius-lg, --color-accent-soft), so those declarations never applied; they are not
   carried over, and what renders is unchanged. */

/* code */
.blog-article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.blog-article .codeblock{position:relative;margin:0 0 var(--space-6)}
.blog-article pre{
  background:var(--color-bg-card);border:1px solid var(--color-border);border-left:2px solid var(--thread);
  padding:var(--space-5);overflow-x:auto;margin:0 0 var(--space-6);
  font-size:var(--text-sm);line-height:1.6;color:var(--color-gray-300);-webkit-overflow-scrolling:touch
}
.blog-article .codeblock>pre{margin:0;padding-top:44px}  /* room for the Copy button above the first line */
.blog-article pre code{background:transparent;padding:0;color:inherit}
.blog-article pre:focus-visible,.blog-article table:focus-visible{outline:2px solid var(--thread);outline-offset:3px}
.blog-article .copy{
  position:absolute;top:10px;right:10px;z-index:1;
  font:inherit;font-size:12px;line-height:1;letter-spacing:.02em;
  padding:6px 10px;border:1px solid var(--color-border);border-radius:6px;
  background:var(--paper);color:var(--color-gray-500);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s
}
.blog-article .copy:hover{color:var(--ink);border-color:var(--thread)}
.blog-article .copy:focus-visible{outline:2px solid var(--thread);outline-offset:2px}
.blog-article .copy.is-copied{color:var(--paper);background:var(--thread);border-color:var(--thread)}

/* "On this page" */
.toc{max-width:760px;margin:0 auto 32px;padding:16px 18px;border:1px solid var(--rule);border-radius:10px;background:var(--paper-2)}
.toc__title{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.toc li{margin:0;line-height:1.4}
.toc a{color:var(--ink-2);font-size:var(--text-sm);background-image:none;padding-bottom:0}
.toc a:hover,.toc a:focus-visible,.toc a[aria-current="true"]{color:var(--thread)}
.toc a[aria-current="true"]{font-weight:600}
@media (min-width:1100px){
  .container.has-toc{display:grid;grid-template-columns:minmax(0,760px) 220px;column-gap:56px;justify-content:center;align-items:start}
  .container.has-toc>.blog-article{grid-column:1;grid-row:1;max-width:none;width:100%}
  .container.has-toc>.toc{grid-column:2;grid-row:1;position:sticky;top:96px;margin:0;max-width:none;background:transparent;border:0;border-left:1px solid var(--rule);border-radius:0;padding:4px 0 4px 18px}
  .container.has-toc>.more{grid-column:1 / -1;grid-row:2}
}