/* WealthPilot | css/g4.css — page styles of G4 — Budget & Goals + Wealth + Lend & Borrow (pages/budget.js, pages/wealth.js, pages/lendborrow.js).
 * Only selectors with this group's own prefixes (spec 8.1); shared components live in core/styles.css. */

/* ─── BUDGET — month beside the card title; bar column wide enough for bar + %; rows without a budget are muted ─── */
.bud-month{font-weight:400}
@media (min-width:769px){.bud-tbl .c-bar{width:22%;min-width:140px}}
.bud-rest,.bud-rest .cell-title{color:var(--t3)}
.bud-rest .cell-title{font-weight:500}

/* ─── GOAL ROWS — one button per goal (5.5 .row-btn): icon tile · name, meta, bar · amount ─── */
.goal-item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border-bottom:1px solid var(--bd2)}
.goal-item:last-child{border-bottom:0}
.goal-icon{width:36px;height:36px;border-radius:var(--rd);display:flex;align-items:center;justify-content:center;font-size:var(--fs-16);background:var(--bg3);color:var(--t3)}
.goal-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.goal-name{font-size:var(--fs-15);font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-meta{font-size:var(--fs-12);color:var(--t3)}
.goal-info .prog{display:block;max-width:320px;margin-top:6px}
.goal-info .prog-fill{display:block}
.goal-amt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:var(--fs-15);font-weight:700}
.goal-pct{font-size:var(--fs-12);font-weight:500;color:var(--t3)}