/* ============================================================
   Savings goals: cards (dashboard) and the photo editor (goal modal).
   ============================================================ */

/* auto-fit collapses empty tracks so the cards stretch to fill the row; the
   max-width keeps a lone goal from turning into a full-width banner */
.goals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.goals-grid > .goal-card{max-width:400px}
.goal-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.goal-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
/* each goal takes one of three tints (blue, green, coral) for its header and bar */
.goal-card.tone-0{--tone-bg:var(--tone0-bg);--tone-ink:var(--tone0-ink);--tone-fill:var(--tone0-fill)}
.goal-card.tone-1{--tone-bg:var(--tone1-bg);--tone-ink:var(--tone1-ink);--tone-fill:var(--tone1-fill)}
.goal-card.tone-2{--tone-bg:var(--tone2-bg);--tone-ink:var(--tone2-ink);--tone-fill:var(--tone2-fill)}
.goal-photo{position:relative;height:96px;background-size:cover;background-position:center;background-color:var(--tone-bg,var(--brand-bg))}
.goal-photo-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--tone-ink)}
.goal-add{
  position:absolute;top:10px;right:10px;z-index:2;
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;line-height:1;
  background:rgba(255,255,255,.92);color:var(--tone-ink,var(--brand));font-size:var(--fs-lg);font-weight:600;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:background .14s ease;
}
.goal-add:hover{background:#fff}
[data-theme="dark"] .goal-add{background:var(--surface)}
[data-theme="dark"] .goal-add:hover{background:var(--surface-hover)}
.goal-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.goal-name{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-amt{font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.goal-amt .muted{font-weight:500;color:var(--ink-mute)}
.goal-progress{display:flex;align-items:center;gap:10px}
.goal-track{flex:1;height:8px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.goal-fill{height:100%;border-radius:4px;background:var(--tone-fill,var(--brand-soft));transition:width .35s ease}
.goal-fill.done{background:var(--good)}
.goal-pct{font-size:12px;font-weight:700;color:var(--ink);flex-shrink:0}
.goal-remain{font-size:12px;color:var(--ink-mute)}
.goal-remain.done{color:var(--good);font-weight:600}
/* goal photo editor (in the goal modal) */
.goal-photo-thumb{width:100%;height:130px;object-fit:cover;border-radius:var(--radius-md);display:block}
.goal-photo-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:38px;background:linear-gradient(135deg,var(--brand-bg),var(--surface-hover))}
.goals-empty{
  background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);
  padding:28px;text-align:center;
}
.goals-empty .ge-emoji{font-size:var(--fs-xl)}
.goals-empty .ge-title{font-size:var(--fs-base);font-weight:650;color:var(--ink);margin-top:8px}
.goals-empty .ge-sub{font-size:var(--fs-sm);color:var(--ink-mute);margin-top:4px;margin-bottom:14px}