/* The article on the two inference modes (inference-perks.html): the animation and chart cards of perks.js. The design
   tokens come from main.css; the colours the canvases read are set here once. */

:root {
  --perk-latent: #34d399;
  --perk-roundtrip: #ff922b;
  --perk-surface: #0f1220;
  --perk-grid: rgba(255, 255, 255, 0.08);
  --perk-axis: rgba(255, 255, 255, 0.22);
  --perk-chunk0: #4dabf7;
  --perk-chunk1: #ff922b;
  --perk-chunk2: #51cf66;
  --perk-chunk3: #be4bdb;
  --perk-chunk4: #22d3ee;
  --perk-chunk5: #fcc419;
  --perk-chunk6: #f783ac;
  --perk-chunk7: #94d82d;
}

:root[data-theme="light"] {
  --perk-latent: #0ca678;
  --perk-roundtrip: #e8590c;
  --perk-surface: #ffffff;
  --perk-grid: rgba(15, 23, 42, 0.08);
  --perk-axis: rgba(15, 23, 42, 0.25);
  --perk-chunk0: #1c7ed6;
  --perk-chunk1: #e8590c;
  --perk-chunk2: #2f9e44;
  --perk-chunk3: #ae3ec9;
  --perk-chunk4: #0c8599;
  --perk-chunk5: #e0a800;
  --perk-chunk6: #d6336c;
  --perk-chunk7: #66a80f;
}

.perk-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 26px; }
.perk-trio > div { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.perk-trio b { display: block; color: var(--text); font-size: 1rem; margin-bottom: 4px; }
.perk-trio span { color: var(--muted); font-size: 0.88rem; line-height: 1.5; display: block; }
/* on a narrow screen the three stay side by side, tighter */
@media (max-width: 680px) { .perk-trio { gap: 6px; } .perk-trio > div { padding: 10px 9px; } .perk-trio b { font-size: 0.95rem; } }

.perk-card {
  background: var(--perk-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  box-shadow: 0 20px 50px -30px var(--shadow);
}
.perk-canvas { display: block; width: 100%; }
.perk-canvas.rollout { aspect-ratio: 2.3 / 1; }
.perk-canvas.chunks { aspect-ratio: 2.1 / 1; }
.perk-canvas.perk-chart { height: auto; aspect-ratio: 2.2 / 1; }
.perk-canvas.reach { aspect-ratio: 2.6 / 1; }
@media (max-width: 700px) {
  .perk-canvas.rollout { aspect-ratio: 1.4 / 1; }
  .perk-canvas.chunks { aspect-ratio: 0.95 / 1; }
  .perk-canvas.perk-chart, .perk-canvas.reach { aspect-ratio: 1.5 / 1; }
}
.perk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.perk-controls.top { margin: 0 0 12px; }
.perk-controls .segmented { width: auto; }
.perk-controls .segmented button { white-space: nowrap; }
.perk-controls .chip { padding: 6px 12px; font-size: 0.8rem; }
.perk-chart-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 14px; align-items: center; }
@media (max-width: 700px) { .perk-chart-row { grid-template-columns: 1fr; } }
.perk-readout { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.perk-readout .value { font-size: 2.4rem; font-weight: 850; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
.perk-readout .label { color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.perk-stats { margin: 26px 0; gap: 14px; }
.perk-stats .stat { padding: 18px; }
.perk-stats .stat .value { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.perk-stats .stat .label { font-size: 0.84rem; }
@media (max-width: 520px) { .perk-stats { grid-template-columns: 1fr; } }
.canvas-box { position: relative; }
/* the measured charts at the text width and shorter, as there is little in them */
.perk-canvas.perk-chart { aspect-ratio: 2.8 / 1; }
.perk-canvas.reach { aspect-ratio: 3.4 / 1; }
@media (max-width: 760px) { .perk-canvas.perk-chart, .perk-canvas.reach { aspect-ratio: 1.6 / 1; } }
.perk-chart-row .perk-canvas.perk-chart { aspect-ratio: 2 / 1; }
#chunk-chart.perk-canvas.perk-chart { aspect-ratio: 2.2 / 1; }
/* on a phone the memory and latency chart is more than twice as tall as on a laptop */
@media (max-width: 760px) { #chunk-chart.perk-canvas.perk-chart { aspect-ratio: 0.98 / 1; } }