.metric-card { --metric-unit: 1px; --metric-tone: var(--color-metric-revenue); --metric-width: 326.5; display: flex; flex-direction: column; gap: calc(var(--space-metric-content) * var(--metric-unit)); inline-size: calc(var(--metric-width) * var(--metric-unit)); max-inline-size: 86%; min-block-size: calc(224 * var(--metric-unit)); padding: calc(var(--space-metric-padding) * var(--metric-unit)); border-radius: calc(var(--radius-metric-card) * var(--metric-unit)); background: var(--color-text); color: var(--color-page); }
.metric-card--average { --metric-width: 317; --metric-tone: var(--color-metric-loss); }
.metric-card--leak { --metric-width: 340; }
.metric-card--losses { --metric-width: 340; --metric-tone: var(--color-metric-loss); }
.metric-card__label { margin: 0; color: var(--color-metric-muted); font-size: calc(var(--fs-metric-label) * var(--metric-unit)); font-weight: var(--fw-semibold); line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; }
.metric-card__body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: calc(var(--space-metric-content) * var(--metric-unit)); min-inline-size: 0; }
.metric-card__headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(8 * var(--metric-unit)); margin: 0; }
.metric-card--leak .metric-card__headline { gap: calc(6 * var(--metric-unit)); }
.metric-card__value { font-size: calc(var(--fs-metric-value) * var(--metric-unit)); font-weight: var(--fw-bold); line-height: 1; overflow-wrap: anywhere; }
.metric-card__annotation { display: inline-flex; align-items: center; gap: calc(4 * var(--metric-unit)); color: var(--metric-tone); font-size: calc(var(--fs-metric-label) * var(--metric-unit)); font-weight: var(--fw-bold); line-height: 1.2; }
.metric-card__arrow { font-size: calc(var(--fs-metric-arrow) * var(--metric-unit)); }
.metric-card__chart { display: flex; flex-direction: column; gap: calc(4 * var(--metric-unit)); }
.metric-card__plot { display: flex; align-items: end; gap: calc(10 * var(--metric-unit)); block-size: calc(44 * var(--metric-unit)); }
.metric-card__point { flex: 1; min-inline-size: 0; block-size: var(--chart-size); }
.metric-card__track { block-size: 100%; }
.metric-card__bar { display: block; inline-size: 100%; block-size: 100%; background: var(--metric-tone); opacity: var(--chart-opacity); border-radius: calc(2 * var(--metric-unit)) calc(2 * var(--metric-unit)) 0 0; transform-origin: bottom; }
.metric-card__axis, .metric-card__comparison-label { display: flex; justify-content: space-between; gap: calc(4 * var(--metric-unit)); color: var(--color-metric-muted); font-size: calc(var(--fs-metric-small) * var(--metric-unit)); font-weight: 500; line-height: 1.2; }
.metric-card--losses .metric-card__plot { block-size: calc(64 * var(--metric-unit)); gap: calc(6 * var(--metric-unit)); }
.metric-card__chart--comparison .metric-card__plot { block-size: auto; flex-direction: column; align-items: stretch; gap: calc(14 * var(--metric-unit)); }
.metric-card__chart--comparison .metric-card__point { display: flex; flex-direction: column; gap: calc(6 * var(--metric-unit)); block-size: auto; }
.metric-card__chart--comparison .metric-card__track { block-size: calc(6 * var(--metric-unit)); background: var(--color-metric-track); border-radius: calc(3 * var(--metric-unit)); }
.metric-card__chart--comparison .metric-card__bar { inline-size: var(--chart-size); border-radius: inherit; transform-origin: left; }
.metric-card__chart--segments { max-inline-size: calc(256 * var(--metric-unit)); gap: calc(12 * var(--metric-unit)); }
.metric-card__chart--segments .metric-card__plot { block-size: calc(14 * var(--metric-unit)); gap: calc(2 * var(--metric-unit)); border-radius: calc(10 * var(--metric-unit)); overflow: clip; }
.metric-card__chart--segments .metric-card__point { flex: var(--chart-size); block-size: 100%; }
.metric-card__chart--segments .metric-card__bar { border-radius: 0; transform-origin: left; }
.is-visible .metric-card__bar { animation: metric-card-rise var(--dur-counter) var(--ease-out) both; animation-delay: calc(var(--chart-order) * var(--dur-chart-stagger)); }
.is-visible .metric-card__chart--comparison .metric-card__bar, .is-visible .metric-card__chart--segments .metric-card__bar { animation-name: metric-card-fill; }
@keyframes metric-card-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes metric-card-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1023px) { .metric-card { border-radius: calc(31.36 * var(--metric-unit)); } }
@media (prefers-reduced-motion: reduce) { .is-visible .metric-card__bar { animation: none; } }