/* ------------------------------------------------------------------ *
 * site.css — minimal chrome (nav, footer, home, blog index) layered
 * on top of the Pandoc theme.css design tokens.
 * ------------------------------------------------------------------ */

:root {
  --site-max-width: 745px;
  --site-gap: 26px;
  /* Height of the sticky top nav (16px padding x2 + ~24px brand line + 1px border). */
  --site-nav-height: 58px;
}

/* The theme reserves a large top padding for the article title block.
 * We drive top spacing per-section instead so the nav can sit at the top. */
body {
  padding-top: 0;
}

/* Offset in-page anchor jumps (e.g. TOC links) so headings land below the
   sticky top nav instead of hiding behind it. */
html {
  scroll-padding-top: calc(var(--site-nav-height) + 12px);
}

/* ----- Navigation -------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--color-border);
}

/* Full-width nav/footer: brand pinned left, links pinned right, spanning the
   whole page with responsive side padding (Thinking Machines style). */
.site-nav__inner,
.site-footer__inner {
  max-width: none;
  margin: 0;
  padding: 16px clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-family-sans);
}

.site-nav__brand {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.2px;
  color: var(--color-text) !important;
}
.site-nav__brand:hover {
  text-decoration: none;
}

.site-nav__links a {
  margin-left: 28px;
  font-size: 16px;
  color: var(--color-text-secondary) !important;
}
.site-nav__links a:hover {
  color: var(--color-text) !important;
  text-decoration: none;
}

/* ----- Footer ------------------------------------------------------ */
.site-footer {
  max-width: none;
  width: 100%;
  margin: calc(4 * var(--line-height)) 0 0 0;
  border-top: 1px solid var(--color-border);
}
.site-footer__inner {
  color: var(--color-text-secondary);
  font-size: 14px;
  gap: 16px;
  flex-wrap: wrap;
}

/* ----- Section top spacing (body padding-top was removed) ---------- */
.home,
.page-header,
.post-header {
  padding-top: calc(2 * var(--line-height));
}

/* ----- Home -------------------------------------------------------- */
.home__hero {
  padding: calc(1.5 * var(--line-height)) 0 var(--line-height);
}
.home__title {
  font-size: var(--title-font-size);
  line-height: var(--title-line-height);
  font-weight: 600;
  margin: 0;
}
.home__tagline {
  margin-top: 10px;
  font-size: 20px;
  color: var(--color-text-secondary);
}
.home__intro {
  max-width: 36rem;
}
.home__intro p {
  margin-top: var(--line-height);
}
.home__actions {
  margin-top: calc(1.5 * var(--line-height));
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.home__actions a {
  font-size: 16px;
}
.home__recent {
  margin-top: calc(2.5 * var(--line-height));
}
.home__recent h2 {
  font-size: var(--h2-font-size);
  color: var(--color-text-secondary);
}

/* ----- Post list (home + blog index) ------------------------------- */
.post-list {
  list-style: none !important;
  margin: var(--line-height) 0 0 0 !important;
  padding: 0 !important;
}
.post-list__item {
  margin: 0;
  border-top: 1px solid var(--color-border);
}
.post-list__item:last-child {
  border-bottom: 1px solid var(--color-border);
}
.post-list__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  color: var(--color-text) !important;
}
.post-list__link:hover {
  text-decoration: none;
}
.post-list__link:hover .post-list__title {
  color: var(--color-link);
}
.post-list__title {
  font-size: 18px;
  line-height: 1.4;
}
.post-list__meta {
  font-size: 14px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ----- Table of contents: keep it in the crisp sans face ----------- */
nav#TOC,
nav#TOC a,
nav#TOC label {
  font-family: var(--font-family-sans);
}

/* Keep the sticky TOC clear of the sticky top nav so its first entries
   aren't hidden behind it while scrolling. Only applies at the width where
   the theme floats the TOC into the left margin. */
@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
  nav#TOC {
    top: calc(var(--site-nav-height) + 12px);
    max-height: calc(100vh - var(--site-nav-height) - 2 * var(--line-height));
  }
}

/* Scale post headings up one level for a stronger hierarchy: section (h2)
   headings render at the h1 scale, and subsection (h3) headings at the h2
   scale. */
main h2 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  word-spacing: var(--h1-word-spacing);
  margin-top: var(--h1-margin-top);
}
main h2 code {
  font-size: var(--h1-code-font-size);
}
main h3 {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  word-spacing: var(--h2-word-spacing);
  margin-top: var(--h2-margin-top);
}
main h3 code {
  font-size: var(--h2-code-font-size);
}

/* Give section headings more breathing room above their body text; the
   theme's default (--h2-margin-bottom: 6px) reads as cramped next to the
   ~line-height paragraph rhythm. */
main h2 + *,
main h2 + p {
  margin-top: calc(0.6 * var(--line-height));
}

/* Subsection (h3) headings, e.g. "2.1 Generation pipeline", sit too close to
   their body text by default; give them comparable breathing room to h2. */
main h3 + *,
main h3 + p {
  margin-top: calc(0.55 * var(--line-height));
}

/* ----- Dataset release tags: highlighted orange inline-code links ------ */
a.dataset-tag {
  font-family: var(--font-family-mono, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace);
  font-size: var(--inline-code-font-size, 0.92em);
  color: #b5530b;
  background-color: #fbe8d6;
  border: 1px solid #ecc8a3;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  text-decoration: none;
}
a.dataset-tag:hover {
  color: #8f3f06;
  background-color: #f6dcc1;
  text-decoration: none;
}

/* Scale selected figures (image + caption) down ~30% and center them. The
   class lands on the <img>, so we size/center the wrapping <figure>. */
figure:has(> img.fig-small) {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Code blocks: boxed, with light syntax colors ------------------ */
/* Pandoc wraps fenced code in div.sourceCode > pre.sourceCode and tags tokens
   with short classes (co = comment, kw/cf = keyword, st = string, ...). */
main div.sourceCode > pre,
main pre:not(.sourceCode) {
  background-color: var(--color-inline-code-bg);
  border: 1px solid var(--color-border-heavy);
  border-radius: 8px;
  padding: calc(0.5 * var(--line-height)) 6px;
  overflow-x: auto;
}
pre > code.sourceCode .co { color: #7d7a73; font-style: italic; }
pre > code.sourceCode .kw,
pre > code.sourceCode .cf,
pre > code.sourceCode .im { color: #8a3f9d; }
pre > code.sourceCode .st,
pre > code.sourceCode .vs,
pre > code.sourceCode .ss,
pre > code.sourceCode .ch { color: #2e7d4f; }
pre > code.sourceCode .sc { color: #b35c00; }
pre > code.sourceCode .dv,
pre > code.sourceCode .fl,
pre > code.sourceCode .bn { color: #b35c00; }
pre > code.sourceCode .fu,
pre > code.sourceCode .bu { color: #1f5fbf; }

/* ----- References: compact numbered list, smaller type ----------------- */
.references ol { font-size: 0.85em; line-height: 1.45; padding-left: 1.6em; margin: 0 0 var(--line-height); }
.references li { margin: 0 0 0.35em; }
.references li::marker { color: var(--color-text-secondary); }

/* ----- Citation: render the cite blocks as clear, boxed code -------- */
.citation pre {
  background-color: var(--color-inline-code-bg);
  border: 1px solid var(--color-border-heavy);
  border-radius: 8px;
  padding: calc(0.6 * var(--line-height)) 16px;
  overflow-x: auto;
}
.citation pre > code {
  padding: 0;
}

/* ----- Post hero: centered title / authors / affiliations / date --- */
.post-hero {
  text-align: center;
  padding-top: calc(2 * var(--line-height));
  margin-bottom: var(--line-height);
}
.post-hero h1.title {
  margin-top: 0;
  margin-bottom: calc(0.75 * var(--line-height));
}
.post-hero h1.title .title-logo {
  display: inline-block;
  height: 1.65em;
  width: auto;
  margin: 0 0.15em 0 0;
  vertical-align: -0.33em;
}
.post-hero .byline {
  font-family: var(--font-family-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.2px;
  max-width: 40rem;
  margin: 0 auto;
}
.post-hero .affiliations {
  display: inline-block;
  margin: 12px auto 0;
  padding: 6px 16px;
  border: 1px solid var(--color-border-heavy);
  border-radius: 999px;
  background-color: var(--color-table-heading);
  font-family: var(--font-family-sans);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
}
.post-hero .byline p,
.post-hero .affiliations p,
.post-hero .post-date p {
  margin: 0;
}
.post-hero .post-subtitle {
  margin: calc(-0.4 * var(--line-height)) auto calc(0.6 * var(--line-height));
  font-family: var(--font-family-sans);
  font-size: clamp(11px, 2.85vw, 21px);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-text-secondary);
}
.post-hero .post-subtitle p { margin: 0; }
.clm-blue { color: #0668E1; }
.ctx-o { color: #1179b5; } .ctx-e { color: #c23962; }
.nowrap { white-space: nowrap; }
.tok-seg.prev { --fill: #e6e3dc; --ink: #8a857b; }
.ctx-g { color: #8a857b; }
.marginnote .clm-cover { display: block; width: 100%; margin-top: 8px; border: 1px solid var(--color-border); border-radius: 6px; }
.sidenote .sn-fig { display: block; width: 100%; margin-top: 8px; }
.post-hero .post-subtitle .sidenote { font-size: 11px; line-height: 1.35; white-space: normal; text-align: left; }
.post-hero .post-date {
  font-family: var(--font-family-sans);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 6px;
}

/* ----- TL;DR callout box ------------------------------------------- */
.tldr {
  margin-top: var(--line-height);
  margin-bottom: var(--line-height);
  padding: calc(0.75 * var(--line-height)) calc(1.25 * var(--line-height));
  background-color: var(--color-inline-code-bg);
  border: 1px solid var(--color-border-heavy);
  border-radius: 10px;
}
.tldr > :first-child {
  margin-top: 0;
}
.tldr > :last-child {
  margin-bottom: 0;
}
.tldr p {
  margin-top: calc(0.5 * var(--line-height));
}
.tldr .tldr-label {
  font-family: var(--font-family-sans);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ----- Interactive charts and tab panels (assets/js/clm-charts.js) - */
.clm-chart,
.clm-tabs {
  margin: calc(1.25 * var(--line-height)) 0;
}
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-bottom: 10px;
  font-family: var(--font-family-sans);
  font-size: 13px;
  line-height: 20px;
}
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.seg-label {
  color: var(--color-text-secondary);
  margin-right: 3px;
}
.seg button {
  font: inherit;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border-heavy);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
}
.seg button:hover {
  background-color: var(--color-table-heading);
}
.seg button.on {
  color: #fff;
  background-color: #0668E1;
  border-color: #0668E1;
}
.seg.quotes button {
  font-family: var(--font-family-prose);
  font-style: italic;
  font-size: 14px;
  border-radius: 8px;
  text-align: left;
}
.chart-plot {
  width: 100%;
  height: 420px;
}
.chart-slider {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 12px;
  color: var(--color-text-secondary);
}
.chart-slider input {
  flex: 1;
  accent-color: #0668E1;
}
.clm-chart > p.chart-caption,
.flops-sim > p.chart-caption {
  margin-top: 8px;
  font-size: var(--figcaption-font-size);
  line-height: var(--figcaption-line-height);
  color: var(--color-text-secondary);
}
.clm-tabs.ready > .tab {
  display: none;
}
.clm-tabs.ready > .tab.on {
  display: block;
}
.clm-tabs .tab > p {
  margin-top: 0;
}
.clm-tabs .tab-source {
  font-family: var(--font-family-sans);
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Qualitative examples: outlined gallery; code spans follow the paper figure
   (highlight = key new text, struck = deleted context, faded = code around it). */
.clm-tabs.clm-examples {
  padding: 14px 18px 12px;
  border: 1px solid var(--color-border-heavy);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.45);
}
.clm-examples .hl {
  color: #0550c8;
  background-color: rgba(6, 104, 225, 0.1);
  border-radius: 3px;
}
.clm-examples .rm {
  color: #9a968e;
  text-decoration: line-through;
}
.clm-examples .sc {
  color: #b3aea5;
}
.clm-examples .edit-legend > p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  font-family: var(--font-family-code);
  font-size: 12.5px;
}
.clm-examples .edit-legend span {
  padding: 1px 6px;
}
.clm-examples .edit-legend .sc {
  color: #9a968e;
}
.clm-tabs > p {
  margin-top: 8px;
  font-size: var(--figcaption-font-size);
  line-height: var(--figcaption-line-height);
  color: var(--color-text-secondary);
}

/* Row of small task illustrations (image + short caption each). */
.task-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
  margin: var(--line-height) 0 calc(0.5 * var(--line-height));
}
.task-row figure {
  margin: 0;
}
.task-row img {
  width: 100%;
  height: auto;
}
.task-row figcaption {
  text-align: center;
  font-size: 13px;
  line-height: 18px;
}
@media screen and (max-width: 600px) {
  .task-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Reviewer notes in drafts. Hidden in production builds (see _layouts/default.html). */
.draft-note {
  margin: var(--line-height) 0;
  padding: 8px 12px;
  border: 1px dashed #d9480f;
  border-radius: 6px;
  background-color: #fff4e6;
  color: #862e00;
  font-family: var(--font-family-sans);
  font-size: 13px;
  line-height: 20px;
}
.draft-note > :first-child::before {
  content: "Draft note: ";
  font-weight: 700;
}
.draft-note p {
  margin: 0;
}

/* ----- About: people grids ----------------------------------------- */
.people {
  list-style: none !important;
  margin: var(--line-height) 0 0 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 24px;
}
.people > li {
  padding: 4px 0;
}
.people .role {
  display: block;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ----- Medium widths (e.g. a half-screen window) -------------------- */
/* Below 1365px the theme hides the table of contents but pins the column to the
   left and keeps a sidenote margin on the right, which reads as an empty strip
   wherever a section has no notes. Center a single column there instead and fold
   sidenotes inline behind their numbers, as the theme already does on phones. */
@media screen and (min-width: calc(26px + 550px + 26px + 169px + 26px)) and (max-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
  header,
  nav#TOC,
  main,
  footer {
    max-width: min(var(--main-width), calc(100vw - 2 * var(--line-height)));
    margin-left: auto;
    margin-right: auto;
  }
  .sidenote,
  .marginnote {
    display: none;
  }
  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote {
    display: block;
    float: left;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-top: var(--side-note-line-height);
    vertical-align: baseline;
  }
  label.margin-toggle {
    color: var(--color-link);
    cursor: pointer;
  }
  label.margin-toggle:not(.sidenote-number) {
    display: inline;
  }
}

/* ----- Responsive nav/footer spacing ------------------------------- */
@media screen and (max-width: 600px) {
  .post-list__link {
    flex-direction: column;
    gap: 4px;
  }
}

/* ----- Interactive prefix-reuse FLOPs figures (assets/js/flops-sim.js) ----- */
.flops-sim {
  margin: calc(1.25 * var(--line-height)) 0;
}
.fs-box {
  position: relative;
  padding: 16px 18px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-table-heading) 45%, transparent);
  font-family: var(--font-family-sans);
}
.fs-main {
  display: grid;
  grid-template-columns: minmax(0, 7.5fr) minmax(0, 2.7fr);   /* strips a little wider (Rulin 2026-10-01) */
  gap: 22px;
  align-items: stretch;
}
.fs-left { display: flex; flex-direction: column; }
.fs-strips-wrap { flex: 1; display: flex; align-items: center; }   /* strips centred under their title */
.fs-ptitle {
  font-family: var(--font-family-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  margin: 0 0 10px;
  white-space: nowrap;
}
.fs-ptitle .fs-ptitle-unit {
  display: block;
  font-family: var(--font-family-code);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.fs-right { border-left: 1px solid var(--color-border); padding-left: 18px; }
@media (max-width: 720px) {
  .fs-main { grid-template-columns: 1fr; }
  .fs-right { border-left: 0; padding-left: 0; max-width: 320px; }
}
.fs-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fs-svg text { font-family: var(--font-family-sans); fill: var(--color-text); }
.fs-svg .fs-cap { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; fill: var(--color-text-secondary); }
.fs-svg .fs-lane { font-size: 12.5px; }
.fs-svg .fs-lane-sub { font-size: 10.5px; fill: var(--color-text-secondary); }
.fs-svg .fs-seg { font-size: 11px; font-style: italic; fill: #3c3a36; }
.fs-svg .fs-seg-dark { fill: #fff; }
.fs-svg .fs-leg { font-size: 11.5px; fill: var(--color-text-secondary); }
.fs-svg .fs-tick { font-size: 10.5px; fill: var(--color-text-secondary); }
.fs-svg .fs-grid-line { stroke: var(--color-border); stroke-width: 1; }
.fs-svg .fs-ref { stroke: var(--color-text-secondary); stroke-width: 1; stroke-dasharray: 4 3; }
.fs-svg .fs-ref-t { font-size: 10.5px; fill: var(--color-text-secondary); }
.fs-svg .fs-bar-v { font-family: var(--font-family-code); font-size: 13px; font-weight: 700; }
.fs-svg .fs-bar-l { font-size: 11.5px; }
.fs-svg .fs-seg-v { font-family: var(--font-family-code); font-size: 11.5px; font-weight: 700; }
.fs-svg .fs-bar-note { font-family: var(--font-family-code); font-size: 11.5px; font-weight: 700; fill: var(--color-text); }
.fs-svg rect { transition: x .15s ease, y .15s ease, width .15s ease, height .15s ease; }
.fs-tip {
  display: none;
  position: absolute;
  z-index: 5;
  pointer-events: none;
  max-width: 250px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text);
  background: var(--background-color);
  border: 1px solid var(--color-border-heavy);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.fs-tip span { color: var(--color-text-secondary); }
.fs-stats {
  margin: 6px 0 0;
  font-family: var(--font-family-code);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-secondary);
}
.fs-stats b { color: var(--color-text); }
.fs-controls {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border-heavy);
  font-size: 13px;
}
.fs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.fs-lab {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-right: 6px;
}
.fs-pill {
  font-family: var(--font-family-sans);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border-heavy);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
}
.fs-pill:hover { background-color: var(--color-table-heading); }
.fs-pill.on { color: #fff; background: #0668E1; border-color: #0668E1; }
.fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
@media (max-width: 640px) { .fs-grid { grid-template-columns: 1fr; } }
.fs-slider { display: grid; grid-template-columns: 12.2em 1fr 7.4em; align-items: center; gap: 10px; }
.fs-slider .fs-lab { white-space: nowrap; }
.fs-slider .fs-lab .fs-mark { display: inline-block; vertical-align: 0; margin-left: 2px; }
.fs-slider .fs-lab { margin: 0; }
.fs-slider input { width: 100%; accent-color: #0668E1; }
.fs-val { font-family: var(--font-family-code); font-size: 12px; color: var(--color-text); white-space: nowrap; }

.katex-display { overflow-x: auto; overflow-y: hidden; }

/* ----- Suffix Cache Reuse teaser (assets/js/scr-teaser.js) ----- */
.scr-tagline {
  text-align: center;
  font-family: var(--font-family-prose);
  font-style: italic;
  font-size: 17px;
  line-height: 1.35;
  color: #0668E1;
  margin: calc(0.25 * var(--line-height)) auto calc(-0.75 * var(--line-height));
}
.scr-tagline p { margin: 0; white-space: nowrap; }
@media (max-width: 720px) { .scr-tagline p { white-space: normal; } }
.scr-teaser {
  margin: calc(1.25 * var(--line-height)) 0;
}
.st-box {
  padding: 20px 22px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-table-heading) 45%, transparent);
}
.st-svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.st-svg text { font-family: var(--font-family-sans); }
.st-svg .st-letter { font-family: var(--font-family-prose); font-style: italic; font-size: 18px; }
.st-svg .st-row { font-family: var(--font-family-prose); font-style: italic; font-size: 15px; fill: var(--color-text-secondary); }
.st-svg .st-band { font-size: 13px; font-style: italic; }
.st-svg .st-lab { font-size: 13.5px; }
.st-svg .st-tag { font-family: var(--font-family-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.3px; text-anchor: start; }
.st-svg.narrow .st-letter { font-size: 15px; }
.st-svg.narrow .st-row { font-size: 13px; }
.st-svg.narrow .st-band { font-size: 11.5px; }
.st-svg.narrow .st-lab { font-size: 12px; }
@media (max-width: 520px) {
  .st-box { padding: 14px 12px 10px; }
}
.scr-teaser > p.st-caption {
  margin-top: 8px;
  font-size: var(--figcaption-font-size);
  line-height: var(--figcaption-line-height);
  color: var(--color-text-secondary);
}

/* ----- Token-level example of a context edit (colors match standard-serving.png) ----- */
.tok-viz {
  margin: calc(1.25 * var(--line-height)) 0;
}
.tok-row + .tok-row {
  margin-top: 14px;
}
.tok-row::before {
  content: attr(label);
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 20px;
  font-style: italic;
  color: var(--color-text-secondary);
}
.tok-row > p {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 16px;
  margin: 0;
}
.tok-seg {
  --fill: #bcd8ee;
  --ink: #1179b5;
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding-bottom: 32px;
}
.tok-seg.prefill {
  --fill: #f4c8d6;
  --ink: #c23962;
}
.tok {
  padding: 2px 7px;
  font-size: 15px;
  line-height: 22px;
  white-space: nowrap;
  color: #2b2b2b;
  background: var(--fill);
  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 5px;
}
.tok-seg-label {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
  padding-top: 3px;
  border-top: 1.5px solid var(--ink);
  font-family: var(--font-family-sans);
  font-size: 12.5px;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}
.tok-seg-label em {
  font-family: var(--font-family-prose);
  font-size: 14px;
}
.tok-seg-label::before,
.tok-seg-label::after {
  content: "";
  position: absolute;
  top: -6px;
  height: 6px;
  border-left: 1.5px solid var(--ink);
}
.tok-seg-label::before { left: -1.5px; }
.tok-seg-label::after { right: -1.5px; }
.tok-seg.first-change::before {
  content: "×";
  position: absolute;
  left: -12px;
  top: 3px;
  font-family: var(--font-family-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink);
}
.tok-legend {
  margin-top: 8px;
  font-family: var(--font-family-sans);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-text-secondary);
}
.tok-legend p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tok-legend span.item { white-space: nowrap; }
.tok-legend .sw {
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: -1px;
}
.tok-legend .sw-cached { background: #bcd8ee; border: 1px solid rgba(17, 121, 181, 0.4); }
.tok-legend .sw-prefill { background: #f4c8d6; border: 1px solid rgba(194, 57, 98, 0.4); }
.tok-legend .sw-x { color: #c23962; font-weight: 700; margin-right: 4px; }
@media (max-width: 520px) {
  .tok { padding: 1px 5px; font-size: 14px; }
  .tok-seg-label { font-size: 11.5px; }
}

/* ----- SCR figure in the token-strip style (Rulin 2026-10-01) ----- */
.ctx-r { color: #2f7d3f; }
.tok-seg.reused { --fill: #cfe8d4; --ink: #2f7d3f; }
.tok-viz-fig .tok-row + .tok-row { margin-top: 18px; }
.tok-caption { margin-top: 4px; text-align: center; font-style: italic; font-size: var(--figcaption-font-size); line-height: var(--figcaption-line-height); color: var(--color-text-secondary); }
.tok-caption > p { margin: 0; }

/* ----- Links in the CLM post: light blue so citations stand out (Rulin 2026-10-01) ----- */
main:has(.post-hero) a { color: #1a7fd4; }
main:has(.post-hero) a:hover { color: #0b5fa8; }
main:has(.post-hero) label.margin-toggle { color: #1a7fd4; }

/* ----- TMax v1.1 post (charts: assets/js/tmax-v11-charts.js) ------------ */
.tmax-chart,
.tmax-tabs {
  margin: calc(1.25 * var(--line-height)) 0;
}
.tmax-chart > p.chart-caption,
.tmax-tabs > p {
  margin-top: 8px;
  font-size: var(--figcaption-font-size);
  line-height: var(--figcaption-line-height);
  color: var(--color-text-secondary);
}
.tmax-tabs.ready > .tab { display: none; }
.tmax-tabs.ready > .tab.on { display: block; }
.tmax-tabs .tab > p { margin-top: 0; }

/* Release box: artifact placeholders until the links exist. */
.release {
  margin: var(--line-height) 0;
  padding: calc(0.6 * var(--line-height)) calc(1 * var(--line-height));
  border: 1px solid var(--color-border-heavy);
  border-radius: 10px;
  font-family: var(--font-family-sans);
  font-size: 14px;
  line-height: 22px;
}
.release > p { margin: 0 0 10px; color: var(--color-text-secondary); }
.release .release-label { font-weight: 700; color: var(--color-text); margin-right: 6px; }
.release-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 20px;
}
.release-card p { margin: 0 0 6px; }
.release-card p:first-child { font-weight: 700; }
.release a.dataset-tag { display: inline-block; margin: 0 4px 6px 0; color: #b5530b; }
.release a.dataset-tag.tbd { border-style: dashed; opacity: 0.6; }

/* Row of headline numbers. */
.stat-row > p {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: var(--line-height) 0;
}
.stat-row .stat {
  display: block;
  padding: 10px 8px;
  border: 1px solid var(--color-border-heavy);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-family-sans);
  font-size: 12.5px;
  line-height: 17px;
  color: var(--color-text-secondary);
}
.stat-row .stat-num {
  display: block;
  margin-bottom: 2px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: #B85C38;
}

/* Real auditor verdicts, one per tab. */
.tmax-tabs.audit-examples {
  padding: 14px 18px 12px;
  border: 1px solid var(--color-border-heavy);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.45);
}
.audit-examples blockquote {
  margin: 8px 0;
  font-size: 15px;
  line-height: 23px;
}
.audit-examples .fix { font-family: var(--font-family-sans); font-size: 13.5px; line-height: 20px; }
.audit-examples .fix strong { color: #B85C38; }
.audit-examples .fix.dropped strong { color: var(--color-text-secondary); }

/* v1.0 -> v1.1 summary table. */
.changes table { font-size: 15px; }
.changes td:first-child { font-family: var(--font-family-sans); font-size: 13.5px; color: var(--color-text-secondary); white-space: nowrap; }
.changes td:last-child { font-weight: 600; }

@media screen and (max-width: 600px) {
  .release-grid { grid-template-columns: 1fr; }
  .stat-row > p { grid-template-columns: repeat(2, 1fr); }
  .changes td:first-child { white-space: normal; }
}