.money-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; min-width: 0; }
.money-chart { margin: 0; padding: 1rem; min-width: 0; border: 1px solid var(--surface-border); border-radius: 14px; background: var(--surface); }
.money-chart figcaption { font-weight: 700; font-size: 1rem; margin-bottom: .65rem; overflow-wrap: anywhere; }
.money-chart ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.money-chart-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; font-size: .85rem; margin-bottom: .25rem; }
.money-chart-label span { overflow-wrap: anywhere; min-width: 0; }
.money-chart-label strong { font-variant-numeric: tabular-nums; }
.money-chart-track { height: 12px; border-radius: 4px; background: var(--surface-strong); border: 1px solid var(--surface-border); overflow: hidden; }
.money-chart-track span { display: block; height: 100%; background: var(--amber); min-width: 0; }
.money-chart .is-negative .money-chart-track span { background: #e55757; }
.money-chart .is-negative strong { text-decoration: underline; text-decoration-style: dotted; }
.food-scenario-summary { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.food-expense-row { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; padding: .5rem 0; }
.food-expense-row label { flex: 1 1 10rem; min-width: 0; }
.food-expense-row input { max-width: 100%; }

.money-chart-label strong { min-width: 0; overflow-wrap: anywhere; }

.finance-workspace { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.finance-workspace > * { min-width: 0; max-width: 100%; }
.finance-workspace .commerce-table-wrap { max-width: 100%; }