/* Evals deep dive (13 October 2026): one short section per highlighted comparison beside each benchmark's
   Performance & cost plot (storyNotes in results.v36.js), as in the first insight: the sections at the left,
   the plot at the right. The plot stays in view while you read past it, and hovering a section highlights
   its comparison. Below 1200px the plot comes first and the sections follow it; the enlarged view shows
   the plot alone. Type follows section-type.20261006.css: 13px labels, 17px-family body text. */

.cost-split { display: flex; flex-direction: column; }
.cost-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; margin-top: 20px; }
.cost-stories:empty { display: none; }

.cost-story { padding: 22px 0 24px; border-top: 1px solid var(--rule); transition: opacity .15s ease; }
.cost-story-key {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  color: var(--story-tint, var(--muted-text));
  font: 500 13px/1.4 var(--sans);
}
.cost-story-key svg { flex: none; }
.cost-story h4 {
  margin: 0;
  color: var(--ink);
  font: 400 20px/1.3 var(--sans);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.cost-story h4 + p {
  margin: 9px 0 0;
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  text-wrap: pretty;
}
/* While a comparison is highlighted (from its section or a point in the plot), the other sections recede. */
.cost-stories.has-focus .cost-story:not(.is-active) { opacity: .4; }

@media (min-width: 1200px) {
  .cost-split.has-stories {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 64px;
    align-items: start;
  }
  .cost-split.has-stories > .cost-stories { grid-column: 1; grid-row: 1; display: block; margin-top: 18px; }
  .cost-split.has-stories > .cost-plot { grid-column: 2; grid-row: 1; position: sticky; top: 20px; }
  .cost-split.has-stories .cost-story:first-child { border-top: 0; padding-top: 0; }
}

@media (max-width: 700px) {
  .cost-stories { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .cost-story { padding: 18px 0 20px; }
  .cost-story h4 { font-size: 18px; }
  .cost-story h4 + p { font-size: 15px; }
}

/* The enlarged view (eval-expand) shows the plot alone, across the dialog. */
.eval-chart-dialog .cost-split.has-stories { display: block; }
.eval-chart-dialog .cost-split > .cost-stories { display: none; }
.eval-chart-dialog .cost-split > .cost-plot { position: static; }

@media (prefers-reduced-motion: reduce) { .cost-story { transition: none; } }
@media print {
  .cost-split.has-stories { display: block; }
  .cost-split.has-stories > .cost-plot { position: static; }
  .cost-story { break-inside: avoid; }
}