/* ============================================================
   SAVINGS METER — fill animated via --savings-ratio @property for smooth scaleX
   ============================================================ */

.savings-meter {
    --meter-bar-w: 256px;
    --meter-bar-h: 6px;
    --track-bg: oklch(from var(--color-text-faint) l c h / 0.35);
    --fill-bg: var(--color-primary-hover);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding-inline: var(--space-2);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: inherit;
    font: inherit;
    cursor: default;
    transition:
        opacity var(--transition),
        background var(--transition),
        border-color var(--transition);
}

.savings-meter[data-empty="true"] {
    opacity: 0.5;
    cursor: default;
}

.savings-meter:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Bar container */
.savings-meter-bar {
    width: var(--meter-bar-w);
    height: var(--meter-bar-h);
    position: relative;
    border-radius: 999px;
    background: var(--track-bg);
    flex-shrink: 0;
}

/* Fill — animated via --savings-ratio + @property */
.savings-meter-fill {
    position: absolute;
    inset: 0;
    background: var(--fill-bg);
    transform: scaleX(var(--savings-ratio, 1));
    transform-origin: left center;
    border-radius: 999px;
    box-shadow:
        0 0 x oklch(from var(--fill-bg) l c h / 0.45),
        0 0 16px oklch(from var(--fill-bg) l c h / 0.25);
    transition:
        --savings-ratio 480ms var(--ease-out),
        background var(--transition),
        box-shadow var(--transition);
}

/* No savings state: neutral gray fill */
.savings-meter[data-no-savings="true"] .savings-meter-fill {
    --fill-bg: var(--color-text-faint);
}

.savings-meter[data-no-savings="true"] .savings-meter-label {
    color: var(--color-text-faint);
}

/* Inline weight display — original → optimized */
.savings-meter-before,
.savings-meter-after {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    user-select: none;
}

.savings-meter-arrow {
    color: var(--color-text-faint);
    font-size: var(--text-xs);
    user-select: none;
}

.savings-meter[data-empty="true"] .savings-meter-before,
.savings-meter[data-empty="true"] .savings-meter-after,
.savings-meter[data-empty="true"] .savings-meter-arrow {
    visibility: hidden;
}

.savings-meter[data-no-savings="true"] .savings-meter-before,
.savings-meter[data-no-savings="true"] .savings-meter-after,
.savings-meter[data-no-savings="true"] .savings-meter-arrow {
    color: var(--color-text-faint);
}

.savings-meter-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    user-select: none;
}