/* ============================================================ 04 · results: line charts
   Four small figures under the leaderboard. Same rules as the bars: Primitive alone in ink at low
   weight, Continuity in signal; the line draws in, then the end value counts up. */
.lc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}
.lc {
  position: relative;
  margin: 0;
  padding: 16px 16px 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}
.lc.reading { background: var(--surface); }
.lc figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lc figcaption b { font: 600 15px/1.2 var(--sans); letter-spacing: -0.02em; }
.lc figcaption span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lc-plot { position: relative; height: 210px; margin-top: 10px; touch-action: pan-y; cursor: crosshair; }
.lc-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }

.lc .grid line { stroke: var(--line); }
.lc .grid line.axis { stroke: var(--line-2); }
.lc .tick { font: 500 10px var(--mono); font-variant-numeric: tabular-nums; fill: var(--faint); }
.lc .tick.unit { fill: var(--muted); }

.lc .s {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease) 0.15s;
}
.lc .s.me { stroke: var(--signal); stroke-width: 2.2; transition: stroke-dashoffset 1.4s var(--ease) 0.5s; }
.lc.on .s { stroke-dashoffset: 0; }
.lc .pt { fill: var(--bg); stroke: var(--faint); stroke-width: 1.4; opacity: 0; transition: opacity 0.3s var(--ease) 1.1s; }
.lc .pt.me { stroke: var(--signal); stroke-width: 1.8; transition-delay: 1.5s; }
.lc.on .pt { opacity: 1; }
.lc .end,
.lc .end-n { opacity: 0; transition: opacity 0.45s var(--ease) 1.35s; }
.lc.on .end,
.lc.on .end-n { opacity: 1; }
.lc .end { font: 600 14px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; fill: var(--muted); }
.lc .end.me { fill: var(--signal-ink); }
.lc .end-n { font: 500 9px var(--mono); letter-spacing: 0.03em; text-transform: uppercase; fill: var(--faint); }
.lc .end-n.me { fill: var(--ink-2); }

/* the reading line */
.lc .hover { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.lc .hover.show { opacity: 1; }
.lc .hover line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.lc .hover circle { fill: var(--bg); stroke: var(--faint); stroke-width: 2; }
.lc .hover circle.me { stroke: var(--signal); }
.lc .hv { font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.lc .hv.me { fill: var(--signal-ink); }
.lc .hv-x { fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 14px; }

@media (max-width: 720px) {
  .lc-grid { grid-template-columns: 1fr; }
}

/* ============================================================ competitors in the leaderboard
   Mem0 and Zep sit beside Primitive alone in each benchmark: Mem0 a solid mid-grey, Zep an outline,
   so the only colour on the board is still Continuity's. */
.col.r1 i,
.lb-key .r1 i,
.spec th i.r1 { background: color-mix(in srgb, var(--muted) 72%, transparent); }
.col.r2 i,
.lb-key .r2 i,
.spec th i.r2 { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.lc.picked { background: var(--surface); }
.lc:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--signal); }

/* ============================================================ results: the headline numbers
   The four summary stats; hovering the row widens it to the right and slams in what the memory layers cost
   by comparison, one at a time, each sized by how many times cheaper Continuity is (3.7x → 11x → 30x),
   each landing with a jolt of the row. */
.stats-more {
  container-type: inline-size;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0fr) minmax(0, 0fr);
  outline: none;
  transition: grid-template-columns 0.6s var(--ease);
}
.stats-more .stat { position: relative; transition: padding 0.6s var(--ease), border-color 0.3s; }
.stats-more .stat b { white-space: nowrap; transition: font-size 0.6s var(--ease); }
.stats-more .stat span { transition: font-size 0.6s var(--ease); }
.stats-more .slam { overflow: hidden; min-width: 0; padding-left: 0; padding-right: 0; border-left-color: transparent; }
.stats-more .slam b,
.stats-more .slam span { opacity: 0; }
.stats-more .slam b { color: var(--signal); transform-origin: left bottom; }
/* sized by the multiple, on a log scale against the 3.7x beside them */
.stats-more .slam:nth-child(5) { --z: 1.95; }
.stats-more .slam:nth-child(6) { --z: 2.9; }

@media (min-width: 961px) {
  .stats-more .slam b { font-size: calc(3.6cqi * var(--z)); }
  .stats-more.open { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr) minmax(0, 2.15fr); }
  .stats-more.open .stat { padding-right: 10px; }
  .stats-more.open .stat + .stat { padding-left: 12px; border-left-color: var(--line); }
  .stats-more.open .stat:not(.slam) b { font-size: 3.6cqi; }
  .stats-more.open .stat span { font-size: 9.5px; }
}

/* the slam: drops in oversized and blurred, overshoots, settles; a signal rule strikes across; then its label */
.stats-more .slam.hit b { animation: slam 0.62s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.stats-more .slam.hit span { animation: label-in 0.4s var(--ease) 0.35s both; }
.stats-more .slam.hit::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 12px;
  height: 2px;
  background: var(--signal);
  transform-origin: left;
  animation: impact 0.9s var(--ease) 0.28s both;
}
.stats-more.jolt { animation: jolt 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes slam {
  0% { opacity: 0; transform: translateY(-38%) scale(2.3); filter: blur(8px); }
  48% { opacity: 1; transform: translateY(0) scale(0.9); filter: blur(0); }
  66% { transform: scale(1.07); }
  82% { transform: scale(0.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes label-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes impact { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes jolt {
  0%, 100% { transform: none; }
  18% { transform: translate(calc(var(--amp, 5) * -1px), calc(var(--amp, 5) * 0.4px)); }
  36% { transform: translate(calc(var(--amp, 5) * 0.8px), calc(var(--amp, 5) * -0.3px)); }
  54% { transform: translate(calc(var(--amp, 5) * -0.5px), 0); }
  72% { transform: translate(calc(var(--amp, 5) * 0.25px), 0); }
}
/* still motion: the row opens with both numbers already in place */
.stats-more.still .slam b,
.stats-more.still .slam span { opacity: 1; animation: none; }

/* narrow screens: two columns; the two new numbers take a third row */
@media (max-width: 960px) {
  .stats-more,
  .stats-more.open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-more .slam { display: none; }
  .stats-more.open .slam { display: block; padding-left: 20px; padding-right: 10px; border-left-color: var(--line); }
  .stats-more.open .slam:nth-child(5) { padding-left: 0; border-left-color: transparent; }
  .stats-more .slam b { font-size: calc(36px * var(--z) * 0.62); }
}