/* Checkout Bench charts (checkout-bench-charts.js). Builds on .chart-card / .ch-grid / .ch-tick / .ch-legend
   from components.css and only adds cb- classes. Motion is transform and opacity only. */
.cb-label{font:500 13px var(--font-sans);fill:var(--text-secondary)}
.cb-val{font:600 12px var(--font-sans);fill:var(--text-default);font-variant-numeric:tabular-nums}
.cb-val.cb-miss{fill:var(--text-default);font-weight:700}
.cb-end{font:600 13px var(--font-sans);fill:var(--text-default);font-variant-numeric:tabular-nums}
.cb-bar{stroke:currentColor;stroke-opacity:.28;stroke-width:4;stroke-linecap:round}
.cb-axis{stroke:var(--border-secondary);stroke-width:1}
.cb-shade{fill:currentColor;fill-opacity:.035}
.cb-zebra{fill:currentColor;fill-opacity:.03}
.cb-band{fill:var(--slate-9);fill-opacity:.14}
.cb-ring{fill:var(--bg-subtle);stroke-width:2.5}
.cb-tm-num{font:650 26px var(--font-sans);letter-spacing:-.8px;fill:var(--text-default);font-variant-numeric:tabular-nums}
.cb-tm-lab{font:500 12.5px var(--font-sans);fill:var(--text-default);fill-opacity:.8}
.cb-tm-sm{font:650 13px var(--font-sans);fill:var(--text-default)}
.cb-tm-legend{margin-top:2px}
.cb-tm-legend b{font-weight:600;color:var(--text-default);font-variant-numeric:tabular-nums}
.cb-stat{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cb-stat strong{font-size:28px;font-weight:650;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.cb-stat span{font-size:13.5px;color:var(--text-secondary)}

.cb-slide{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(.04);opacity:0;transition:transform .9s cubic-bezier(.22,1,.36,1) calc(var(--i)*70ms),opacity .5s ease calc(var(--i)*70ms)}
.cb-pop{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.6);opacity:0;transition:transform .6s cubic-bezier(.22,1,.36,1) calc(var(--i)*28ms),opacity .4s ease calc(var(--i)*28ms)}
.cb-draw{opacity:0;transform:translateY(6px);transition:transform .9s cubic-bezier(.22,1,.36,1) calc(var(--i)*160ms),opacity .6s ease calc(var(--i)*160ms)}
.in .cb-slide,.in .cb-pop,.in .cb-draw{transform:none;opacity:1}
@media (prefers-reduced-motion: reduce){.cb-slide,.cb-pop,.cb-draw{transition:none}}

/* Round 6n: the waffle tile card keeps its own height next to the taller slope card on desktop */
@media (min-width:788px){.chart-grid .chart-card.cb-tilecard{align-self:start}}

/* Round 7: accent treemap tile, per-model comparison (cb-models), run-mode pills, bench KPIs */
.cb-tm-accent .cb-tm-num,.cb-tm-accent .cb-tm-lab,.cb-tm-accent .cb-tm-sm{fill:#fff;fill-opacity:1}
.cbm{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cbm-col{display:flex;flex-direction:column;gap:14px;padding:16px 14px 14px;border-radius:16px;background:var(--bg-default);box-shadow:inset 0 0 0 1px var(--border-secondary);opacity:0;transform:translateY(10px);transition:opacity .5s ease calc(var(--i)*90ms),transform .6s cubic-bezier(.22,1,.36,1) calc(var(--i)*90ms)}
.in .cbm-col{opacity:1;transform:none}
.cbm-name{font:600 14px/1.25 var(--font-sans);letter-spacing:-.2px;color:var(--text-default);min-height:2.5em}
.cbm-bars{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.cbm-bar{display:flex;flex-direction:column;align-items:center;gap:6px}
.cbm-bar b{font:650 17px/1 var(--font-sans);letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--text-default)}
.cbm-bar span{position:relative;display:block;width:100%;max-width:44px;height:140px;border-radius:10px;background:var(--bg-element);overflow:hidden}
.cbm-bar i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v)*1%);border-radius:10px;background:var(--slate-9);transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.22,1,.36,1) calc(var(--i)*90ms + 200ms)}
.cbm-bar.right i{background:var(--blue-9)}
.in .cbm-bar i{transform:none}
.cbm-bar small{font:500 11.5px/1.2 var(--font-sans);color:var(--text-tertiary);text-align:center}
@media (max-width:787.98px){
  .cbm{grid-template-columns:1fr;gap:8px}
  .cbm-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:center;gap:12px;padding:12px 14px}
  .cbm-name{min-height:0}
  .cbm-bars{grid-template-columns:1fr;gap:6px}
  .cbm-bar{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;align-items:center}
  .cbm-bar b{font-size:14px;grid-row:1/3;text-align:right}
  .cbm-bar span{max-width:none;height:8px;border-radius:4px}
  .cbm-bar i{top:0;height:auto;width:calc(var(--v)*1%);border-radius:4px;transform:scaleX(0);transform-origin:left}
  .cbm-bar small{text-align:left;font-size:11px}
}
@media (prefers-reduced-motion: reduce){.cbm-col,.cbm-bar i{transition:none}}
.cb-modes{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg-element);font:600 13px/1 var(--font-sans);align-self:flex-start}
.cb-modes span{padding:7px 12px;border-radius:999px;color:var(--text-secondary)}
.cb-modes span.on{background:var(--bg-default);color:var(--text-default);box-shadow:var(--shadow-xs),inset 0 0 0 1px var(--border-secondary)}
.cb-modes-note{font-size:13.5px;line-height:1.5;color:var(--text-secondary);margin:0}
.cb-kpis{margin-bottom:16px}
.kpi .kd{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--text-tertiary)}