/* Evals page (12 October 2026): "Insights from our evaluation program", between the benchmark highlights
   and the deep dive, and the "Deep dive into the results" title over the per-benchmark sections.
   - Three insights from the evals deck, one full-width section each: the claim, a short paragraph, its net
     figure at the right (02 and 03), then the chart across the page. 01 sets its two paragraphs and the third
     axis figure beside its chart. Charts: evals-insights.20261013.js.
   - Test Time Cognition is the site green against the deck's warm grey baseline, and the deep dive's
     per-problem plots take the same two colours, so both read alike.
   - Three buttons under the title jump to the insights; while you scroll through them, the same three
     float at the top of the window (the jump bar), then fade when you stop.
   Type follows section-type.20261006.css: 13px labels, the section-title size, 17px body text. */

.eval-insights {
  --ins-ink: var(--ink);
  --ins-muted: var(--muted-text);
  --ins-grid: #d3dbcf;
  --ins-base: #c2bcaf;          /* bars and areas: the deck's warm grey baseline */
  --ins-base-dot: #8f8778;      /* points and the effort line: the same grey, darker */
  --ins-ttc: #3e7052;           /* Test Time Cognition: the site green */
  --ins-ttc-ink: #3e644c;
  --ins-veil: rgb(238 239 231 / 74%);
  --ins-flat: #9ca69b;          /* the two flat axes in insight 01's third axis figure */
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid var(--rule);
  color: var(--ins-ink);
}
@media screen {
  /* The dark theme keeps the colours, lightened for the dark paper (figure-colors.20260928.css). */
  html[data-theme="dark"] .eval-insights {
    --ins-grid: #2d2d2a;
    --ins-base: #6e6a62;
    --ins-base-dot: #a39f95;
    --ins-ttc: #75b68c;
    --ins-ttc-ink: #94cda7;
    --ins-veil: rgb(24 24 24 / 74%);
    --ins-flat: #7d7b75;
  }
}
.eval-insights figure { margin: 0; }

/* ---------------------------------------------------------------- the section's title and its three buttons */
.eval-insights-heading { padding-bottom: 56px; }
.eval-insights .eyebrow { margin: 0 0 14px; color: var(--accent-text); }
.eval-insights-heading h2 {
  margin: 0;
  font: 400 var(--section-title-size)/1.09 var(--sans);
  letter-spacing: var(--section-title-tracking);
  text-wrap: balance;
}
.insight-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.insight-jump a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 15px 22px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: 500 17px/1.3 var(--sans);
}
.insight-jump a span { color: var(--accent-text); font: 400 12px/1 var(--mono); letter-spacing: 1px; }
.insight-jump a i { margin-left: 10px; font-style: normal; color: var(--muted-text); }
@media (hover: hover) { .insight-jump a:hover { border-color: var(--ink); background: var(--paper); } }
.insight-jump a:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }

/* ---------------------------------------------------------------- one insight */
.insight { padding: 56px 0 64px; border-top: 1px solid var(--rule); scroll-margin-top: 76px; }
.insight-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 72px;
  align-items: end;
  margin-bottom: 44px;
}
.insight-head.is-solo { grid-template-columns: minmax(0, 1fr); }
.insight-head h3 {
  max-width: 15em;
  margin: 0;
  font: 400 var(--section-title-size)/1.09 var(--sans);
  letter-spacing: var(--section-title-tracking);
  text-wrap: balance;
}
.insight-head h3.is-one-line { max-width: none; text-wrap: wrap; }
/* The paragraph under a claim, in the body style of the benchmark descriptions below (.eval-about). */
.insight-text {
  max-width: 50em;
  margin: 18px 0 0;
  color: var(--ins-ink);
  font: 400 17px/1.65 var(--sans);
  text-wrap: pretty;
}
.insight-head.is-solo .insight-text { max-width: 64em; }
/* 01: the paragraph at the left, the chart at the right, so the chart is narrower and its slopes steeper. */
.insight-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 72px;
  align-items: start;
}
.insight-lead > .insight-text { margin: 0; }
.insight-lead > .insight-text + .insight-text { margin-top: 18px; }
/* Under the paragraphs, the third axis figure: training data and model size lie flat, and Test Time
   Cognition rises from their origin to a check. It rests on the finished drawing and grows again while
   hovered (hover only, no autoplay). */
.eval-insights .insight-axis { max-width: 520px; margin-top: 20px; padding: 0 8px; }
.insight-axis-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.insight-axis-svg .ia-flat { stroke: var(--ins-flat); stroke-linecap: round; }
.insight-axis-svg .ia-name { fill: var(--ins-muted); }
.insight-axis-svg .ia-rise { fill: none; stroke: var(--ins-ttc); stroke-dasharray: 1; stroke-dashoffset: 0; }
.insight-axis-svg .ia-goal circle, .insight-axis-svg .ia-goal path { fill: none; stroke: var(--ins-ttc); stroke-linecap: round; stroke-linejoin: round; }
.insight-axis-svg .ia-ttc { fill: var(--ins-ttc-ink); stroke: none; }
.insight-axis-svg .ia-origin { fill: var(--ins-ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .insight-axis:hover .ia-rise { animation: ia-rise 1.1s cubic-bezier(.3, .7, .3, 1) both; }
  .insight-axis:hover .ia-goal { animation: ia-goal .45s ease-out 1s both; }
}
@keyframes ia-rise { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ia-goal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.insight-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-bottom: 6px; text-align: right; }
.insight-stat strong {
  color: var(--ins-ttc);
  font: 400 clamp(44px, 4.4vw, 64px)/1 var(--sans);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.insight-stat strong small { margin-left: .12em; font-size: .42em; letter-spacing: -.01em; }
.insight-stat span { color: var(--ins-muted); font: 14px/1.45 var(--sans); }
.insight-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  margin: 12px 0 0; padding: 0; list-style: none;
  color: var(--ins-muted); font: 13px/1.4 var(--sans);
}
.insight-key li { display: flex; align-items: center; gap: 8px; }
.insight-key i { width: 14px; height: 14px; border-radius: 2px; background: var(--ins-base); }
.insight-key i.is-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ins-base-dot); }
.insight-key i.is-ttc { background: var(--ins-ttc); }
.insight-key .is-end { margin-left: auto; }
.insight-note { margin: 14px 0 0; color: var(--ins-muted); font: 12px/1.6 var(--sans); }

/* ---------------------------------------------------------------- charts */
.eval-insights [data-chart] { position: relative; width: 100%; min-width: 0; }
/* Narrower than its minimum, a chart scrolls sideways (evals-insights.20261013.js). */
.eval-insights .insight-scroll { padding: 0 0 7px; }
.eval-insights .insight-scroll .insight-svg { max-width: none; }
.insight-svg { display: block; overflow: visible; font-family: var(--sans); font-size: var(--fs, 15px); }
.insight-svg text { fill: var(--ins-ink); }
.insight-svg .ic-grid { stroke: var(--ins-grid); stroke-width: 1; }
.insight-svg .ic-axis { stroke: var(--ins-muted); stroke-width: 1; opacity: .7; }
.insight-svg .ic-tick { fill: var(--ins-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.insight-svg .ic-title { fill: var(--ins-muted); font-size: 14px; }
.insight-svg .ic-effort { fill: none; stroke: var(--ins-base-dot); stroke-width: 2; stroke-linejoin: round; }
.insight-svg .ic-dot { fill: var(--ins-base-dot); cursor: help; }
.insight-svg .ic-dot.is-ttc { fill: var(--ins-ttc); }
.insight-svg .ic-arrow { stroke: var(--ins-ttc); stroke-width: 2.5; }
.insight-svg .ic-arrowhead { fill: none; stroke: var(--ins-ttc); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.insight-svg .ic-label { fill: var(--ins-ink); font-size: var(--fs, 15px); }
.insight-svg .ic-ttc-label { fill: var(--ins-ttc-ink); font-size: calc(var(--fs, 15px) + 3px); }
.insight-svg .ic-ttc-value { font-weight: 700; }
.insight-svg .ic-bar-base { fill: var(--ins-base); }
.insight-svg .ic-bar-ttc { fill: var(--ins-ttc); }
.insight-svg .ic-veil { fill: var(--ins-veil); }
.insight-svg .ic-band-edge { stroke: var(--ins-muted); stroke-width: 1; stroke-dasharray: 5 5; }
.insight-svg .ic-band-label { fill: var(--ins-ink); font-size: 16px; }
.insight-svg .ic-band-gain { fill: var(--ins-ttc-ink); font-size: 19px; font-weight: 700; }
.insight-svg .ic-band-sub { fill: var(--ins-muted); font-size: 14px; }
.insight-svg .ic-band-name { fill: var(--ins-muted); font-size: 13px; }
.insight-svg .ic-hit { fill: transparent; }
.insight-svg .ic-hit.is-on { fill: var(--ins-ink); opacity: .07; }
.insight-tooltip { white-space: pre-line; }

/* ---------------------------------------------------------------- the jump bar */
.insight-bar {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.insight-bar.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.insight-bar-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgb(238 239 231 / 86%);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 34px rgb(36 61 52 / 13%), 0 2px 6px rgb(36 61 52 / 6%);
}
html[data-theme="dark"] .insight-bar-inner { background: rgb(30 30 28 / 84%); box-shadow: 0 12px 34px rgb(0 0 0 / 40%); }
.insight-bar-label {
  padding: 0 12px 0 14px;
  color: var(--muted-text);
  font: 11px/1 var(--mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.insight-bar-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--accent-pale);
  transition: transform .38s cubic-bezier(.3, .7, .25, 1), width .38s cubic-bezier(.3, .7, .25, 1);
}
.insight-bar a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--muted-text);
  font: 400 14px/1.2 var(--sans);
  white-space: nowrap;
  transition: color .2s ease;
}
.insight-bar a span { font: 11px/1 var(--mono); letter-spacing: .8px; }
.insight-bar a b { font-weight: 400; }
.insight-bar a .is-short { display: none; }
.insight-bar a[aria-current] { color: var(--ink); }
.insight-bar a[aria-current] span { color: var(--accent-text); }
@media (hover: hover) { .insight-bar a:hover { color: var(--ink); } }
.insight-bar a:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
/* How far through the insights you are: a hairline along the bar's flat bottom edge. */
.insight-bar-progress {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ins-ttc);
  opacity: .85;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}

/* ---------------------------------------------------------------- "Deep dive into the results" */
.eval-deep-dive { margin-top: 72px; padding-top: 44px; border-top: 1px solid var(--rule); }
.eval-deep-dive .eyebrow { margin: 0 0 12px; color: var(--accent-text); }
.eval-deep-dive h2 {
  margin: 0;
  font: 400 var(--section-title-size)/1.09 var(--sans);
  letter-spacing: var(--section-title-tracking);
}
.eval-deep-dive p:not(.eyebrow) {
  max-width: 34em;
  margin: 16px 0 0;
  color: var(--ink);
  font: 400 var(--subtext-size)/var(--subtext-leading) var(--sans);
  letter-spacing: var(--subtext-tracking);
}
/* The first benchmark sits closer under it. */
.eval-deep-dive + #eval-results > .eval-section:first-child { padding-top: 56px; }

/* The deep dive's per-problem plots in the insights' two colours (results.v34.js draws them grey and the
   accent; zero values are short lines in those colours). */
.eval-figure[id$="-problems"] { --problem-base: #c2bcaf; --problem-ttc: #3e7052; }
@media screen {
  html[data-theme="dark"] .eval-figure[id$="-problems"] { --problem-base: #6e6a62; --problem-ttc: #75b68c; }
  html[data-theme="dark"] .eval-figure[id$="-problems"] .aggregate-averages > div + div dd { color: #94cda7; }
}
.eval-figure[id$="-problems"] .eval-bar.baseline { fill: var(--problem-base); opacity: 1; }
.eval-figure[id$="-problems"] .eval-bar.ttc { fill: var(--problem-ttc); }
.eval-figure[id$="-problems"] .legend-bar.baseline { background: var(--problem-base); opacity: 1; }
.eval-figure[id$="-problems"] .legend-bar.ttc { background: var(--problem-ttc); }
.eval-figure[id$="-problems"] line[stroke="var(--muted)"] { stroke: var(--problem-base); }
.eval-figure[id$="-problems"] line[stroke="var(--accent)"] { stroke: var(--problem-ttc); }

@media (max-width: 1100px) {
  .eval-deep-dive h2 { font-size: 42px; }
}
@media (max-width: 900px) {
  .insight-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
  .insight-split { grid-template-columns: minmax(0, 1fr); }
  .insight-stat { align-items: flex-start; padding-bottom: 0; text-align: left; }
}
@media (max-width: 760px) {
  .eval-deep-dive h2 { font-size: 36px; letter-spacing: -1.7px; }
}
@media (max-width: 700px) {
  .eval-insights { margin-top: 48px; padding-top: 32px; }
  .eval-insights-heading { padding-bottom: 40px; }
  .insight-jump { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 24px; }
  .insight-jump a { min-height: 52px; padding: 13px 19px; font-size: 16px; }
  .insight-jump a i { margin-left: auto; }
  .insight { padding: 40px 0 44px; scroll-margin-top: 68px; }
  .eval-deep-dive { margin-top: 48px; padding-top: 32px; }
  /* On phones the bar spans the window; the insight you're reading carries its short name. */
  .insight-bar { left: 10px; right: 10px; transform: translateY(-10px); }
  .insight-bar.is-shown { transform: none; }
  .insight-bar-inner { justify-content: space-between; }
  .insight-bar-label { display: none; }
  .insight-bar a { flex: 0 1 auto; padding: 10px 13px; font-size: 13px; }
  .insight-bar a .is-long, .insight-bar a:not([aria-current]) .is-short { display: none; }
  .insight-bar a[aria-current] .is-short { display: inline; }
  .insight-bar-progress { left: 18px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .insight-bar, .insight-bar.is-shown { transform: translate(-50%, 0); transition: opacity .2s ease, visibility 0s linear .2s; }
  .insight-bar-thumb { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .insight-bar, .insight-bar.is-shown { transform: none; }
}
@media print {
  .insight-bar, .insight-jump { display: none; }
  .insight { break-inside: avoid; }
}