/* ---------- results charts ----------
 * One inline-SVG column panel per benchmark, each in its own hue with the
 * darkest step on CoPE, plus a collapsed table twin.
 */

.results .chart { margin: 0 0 8px; }
.results h3 { margin-top: 36px; }

.chart-cap {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 10px;
}

.chart-cap b { color: var(--ink); }

/* ----- side-by-side panels ----- */

.chart-row {
  display: grid;
  gap: 12px 24px;
  align-items: start;
}

.chart-main { max-width: 820px; margin: 0 auto 8px; }
.chart-row-5 { grid-template-columns: repeat(5, 1fr); gap: 8px 12px; }

@media (max-width: 760px) {
  .chart-row-5 { grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
}

/* ----- shared SVG chrome ----- */

.chart-panel svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

.chart-panel text { fill: var(--ink); font-size: 13px; }
.chart-panel .ttl { font-size: 15px; font-weight: 700; }
.chart-panel .tick { font-size: 12px; fill: var(--ink-soft); }
.chart-panel .small { font-size: 11px; }
.chart-panel .mut { fill: var(--ink-soft); }
.chart-panel .grid { stroke: var(--rule); stroke-width: 1; }
.chart-panel .axis { stroke: #C9BDB5; stroke-width: 1; }

/* ----- column panels ----- */

.chart-panel .col { transform-box: fill-box; transform-origin: center bottom; }
.chart-panel .val { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-panel .is-ours .val { font-weight: 700; }
.chart-panel .xlab { font-size: 12.5px; fill: var(--ink-soft); }
.chart-panel .is-ours .xlab { font-weight: 700; }

.chart.is-in .col {
  animation: col-grow 0.5s ease-out both;
  animation-delay: calc(var(--i) * 60ms);
}

.chart.is-in .colg .val {
  animation: pt-in 0.3s ease-out both;
  animation-delay: calc(var(--i) * 60ms + 0.4s);
}

@keyframes col-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes pt-in { from { opacity: 0; } to { opacity: 1; } }

/* ----- collapsed table twin ----- */

.chart-table {
  margin: 8px 0 0;
  font-size: 0.85rem;
}

.chart-table summary {
  cursor: pointer;
  color: var(--ink-soft);
  width: max-content;
  padding: 2px 0;
}

.chart-table summary:hover { color: var(--brown); }
.chart-table[open] summary { margin-bottom: 10px; }

.results-note { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .chart.is-in .col,
  .chart.is-in .colg .val { animation: none; }
}