/* Savings goals. */

.goal-card {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  align-content: start;
}
.goal-card--done { border-color: color-mix(in srgb, var(--pos) 45%, var(--border)); }

.goal-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.goal-card__titles { flex: 1; min-width: 0; display: grid; gap: var(--s-1); }
.goal-card__name {
  font-size: var(--fs-h2);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.goal-card__actions { display: inline-flex; gap: 2px; flex: none; }

.goal-card__figures {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.goal-card__current {
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.goal-card__target { color: var(--text-3); font-variant-numeric: tabular-nums; }

.goal-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.goal-stat { display: grid; gap: 2px; min-width: 0; }
.goal-stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.goal-stat__value {
  font-size: var(--fs-sm);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.goal-card__foot {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}