/* Thank-you screen: piggy bank card with the growing tip, rating */

.success { padding-block-start: var(--space-3xl); text-align: center; }
.success-title { font-size: var(--size-headline); }
.success-title b { color: var(--color-signal); }

.piggy[data-variant="card"] { align-self: stretch; padding: var(--space-l); border-radius: var(--radius-2xl); background: var(--color-surface); text-align: start; }
.piggy[data-variant="card"] .piggy-goal { font-size: var(--size-4xl); }

/* --saved, --tip (model.piggyBar) and --tip-min are set by app.js on .bar-wrap. The red segment is empty at the start of the growth
   (--tip: 0%, --tip-min: 0) and then no thinner than the minimum; the «+received» label rides on its actual right edge
   and stops at the right edge of the bar */
.bar-wrap { position: relative; padding-block-start: var(--space-2xl); --tip-edge: min(100%, calc(var(--saved, 0%) + max(var(--tip, 0%), var(--tip-min, 0px)))); }
.bar[data-size="large"] { block-size: var(--bar-l); border-radius: var(--radius-l); }
.bar[data-size="large"] .bar-tip { inline-size: max(var(--tip, 0%), var(--tip-min, 0px)); min-inline-size: 0; }
.plus {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--tip-edge);
  transform: translateX(-100%);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-m);
  color: var(--color-signal);
  white-space: nowrap;
}
/* Growth animation: set by app.js with data-state="growing" (none under prefers-reduced-motion) */
#success-bar[data-state="growing"] .bar-tip { transition: inline-size var(--dur-grow) var(--ease-out); }
.bar-wrap[data-state="growing"] .plus { transition: inset-inline-start var(--dur-grow) var(--ease-out); }
.piggy-numbers[data-size="large"] { font-size: var(--size-base); font-weight: var(--weight-bold); color: var(--color-text); }
.piggy-numbers .pct { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--size-4xl); }

.stars button {
  min-inline-size: var(--control-star);
  min-block-size: var(--control-star);
  padding: var(--space-2xs);
  font-size: var(--size-star);
  line-height: var(--leading-none);
  color: var(--color-line);
}
.stars button[data-state="active"] { color: var(--color-text); }