.ledger{min-inline-size:0;margin:0;container-type:inline-size}.ledger__track{grid-template-columns:repeat(var(--ledger-count), minmax(0, 1fr));gap:var(--knox-space-1);margin:0;padding:0;list-style:none;display:grid}.ledger__cell{gap:var(--knox-space-1);flex-direction:column;min-inline-size:0;display:flex}.ledger__bar{border-radius:var(--knox-radius-sm);background:var(--knox-color-surface-2);block-size:40px;box-shadow:inset 0 0 0 1px var(--knox-color-border);place-items:center;display:grid;position:relative;overflow:hidden}.ledger--sm .ledger__bar{border-radius:6px;block-size:28px}.ledger__fill{transform-origin:0;position:absolute;inset:0}[dir=rtl] .ledger__fill{transform-origin:100%}.ledger__icon{position:relative}.ledger [data-state=paid] .ledger__fill{background:var(--knox-color-success)}.ledger [data-state=paid] .ledger__icon{color:var(--knox-color-surface)}.ledger [data-state=due] .ledger__bar{background:var(--knox-color-warning-bg);box-shadow:inset 0 0 0 2px var(--knox-color-warning)}.ledger [data-state=due] .ledger__icon{color:var(--knox-color-warning)}.ledger [data-state=overdue] .ledger__bar{background:var(--knox-color-danger-bg);box-shadow:inset 0 0 0 2px var(--knox-color-danger)}.ledger [data-state=overdue] .ledger__icon{color:var(--knox-color-danger)}.ledger__label{color:var(--knox-color-text-muted);font-size:var(--knox-text-xs);line-height:var(--knox-line-heading);text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ledger [data-state=due] .ledger__label,.ledger [data-state=overdue] .ledger__label{color:var(--knox-color-text);font-weight:600}.ledger__amount{color:var(--knox-color-text-muted);font-size:var(--knox-text-xs);text-align:center;font-weight:500}@container (width<=480px){.ledger__amount{display:none}.ledger .ledger__cell:not(:first-child,:last-child,[data-state=due],[data-state=overdue]) .ledger__label{visibility:hidden}.ledger__label{text-overflow:clip;justify-content:center;display:flex;overflow:visible}.ledger .ledger__cell:first-child .ledger__label{justify-content:flex-start}.ledger .ledger__cell:last-child .ledger__label{justify-content:flex-end}}.ledger__caption{justify-content:space-between;align-items:center;gap:var(--knox-space-2) var(--knox-space-4);font-size:var(--knox-text-sm);color:var(--knox-color-text-muted);flex-wrap:wrap;margin-block-start:var(--knox-space-3);display:flex}.ledger__summary{color:var(--knox-color-text);font-variant-numeric:tabular-nums;font-weight:600}.ledger__legend{gap:var(--knox-space-1) var(--knox-space-4);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.ledger__key{align-items:center;gap:var(--knox-space-2);display:inline-flex}.ledger__swatch{background:var(--knox-color-surface-2);block-size:14px;inline-size:14px;box-shadow:inset 0 0 0 1px var(--knox-color-border);border-radius:4px}.ledger__key[data-state=paid] .ledger__swatch{background:var(--knox-color-success);box-shadow:none}.ledger__key[data-state=due] .ledger__swatch{background:var(--knox-color-warning-bg);box-shadow:inset 0 0 0 2px var(--knox-color-warning)}.ledger__key[data-state=overdue] .ledger__swatch{background:var(--knox-color-danger-bg);box-shadow:inset 0 0 0 2px var(--knox-color-danger)}@media (prefers-reduced-motion:no-preference){html.js:not(.io-off) [data-ledger-animate] .ledger__fill{transition:transform var(--knox-duration-slow) var(--knox-ease-standard);transition-delay:calc(var(--i) * 90ms)}html.js:not(.io-off) [data-ledger-animate] .ledger__icon,html.js:not(.io-off) [data-ledger-animate] [data-state=due] .ledger__bar,html.js:not(.io-off) [data-ledger-animate] [data-state=overdue] .ledger__bar{transition:opacity var(--knox-duration-base) var(--knox-ease-standard), box-shadow var(--knox-duration-base) var(--knox-ease-standard);transition-delay:calc(var(--i) * 90ms + .2s)}html.js:not(.io-off) [data-ledger-animate]:not([data-visible]) .ledger__fill{transform:scaleX(0)}html.js:not(.io-off) [data-ledger-animate]:not([data-visible]) .ledger__icon{opacity:0}html.js:not(.io-off) [data-ledger-animate]:not([data-visible]) [data-state=due] .ledger__bar,html.js:not(.io-off) [data-ledger-animate]:not([data-visible]) [data-state=overdue] .ledger__bar{box-shadow:inset 0 0 0 1px var(--knox-color-border)}}