/* Decorative cost bars share a zero-based scale; row text remains authoritative. */
.cost-chart-key{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--grey-dark,#424245);font-size:.82rem;line-height:1.5}
.cost-chart-key>span{display:inline-flex;align-items:center;gap:6px}
.cost-chart-key i{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.cost-chart-axis{display:flex;justify-content:space-between;gap:12px;margin:6px 0;color:var(--grey-dark,#424245);font-size:.78rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cost-chart-bar{grid-column:1/-1;min-width:0;max-width:100%;margin:3px 0}
.cost-chart-track{display:block;width:100%;height:10px;background:var(--bg-soft,#f5f5f7);border-radius:3px;overflow:hidden}
.cost-chart-fill{display:flex;height:100%;transform-origin:left center;animation:cost-bar-enter 180ms ease-out both}
.cost-chart-piece{display:block;flex:none;height:100%}
.cost-chart-uncachedInput{background:#0066cc}
.cost-chart-cachedInput{background:#8dbbea}
.cost-chart-output{background:#e65b36}
.cost-chart-text{display:none;font-size:.82rem;line-height:1.5;overflow-wrap:anywhere}
@keyframes cost-bar-enter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.cost-chart-fill{animation:none;transition:none}}
@media(forced-colors:active){.cost-chart-track,.cost-chart-key i{display:none}.cost-chart-text{display:block;color:CanvasText}.cost-chart-key,.cost-chart-axis{color:CanvasText}}