/* Tip page body: recipient, piggy bank, amount chips, the fee switch (the amount field: amount.css) */

.who-name {
  font-size: var(--size-name);
  overflow-wrap: anywhere;
}
.who-name b { color: var(--color-signal); }
.who-venue { margin-block-start: var(--tip-venue-gap); color: var(--color-text-muted); font-weight: var(--weight-medium); }

/* Piggy bank: green = saved, red = this tip; widths come from model.piggyBar as --saved and --tip */
.piggy-label { font-size: var(--size-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.piggy-goal { font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--size-l); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
.bar { block-size: var(--bar-s); border-radius: var(--bar-s); background: var(--color-line); overflow: hidden; }
.bar i { block-size: 100%; }
.bar .bar-saved { inline-size: var(--saved, 0%); background: var(--color-accent); }
.bar .bar-tip { inline-size: var(--tip, 0%); min-inline-size: var(--bar-tip-min-s); background: var(--color-signal); transition: inline-size var(--dur-bar); }
.piggy-numbers { font-size: var(--size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* The lowest step of the first screen (styles.css, --tip-* tokens): the goal speaks for itself without the label above it */
@media (max-height: 619px) { #tip-piggy .piggy-label { display: none; } }

.chip {
  min-block-size: var(--tip-chip);
  min-inline-size: 0;
  border: var(--border) solid var(--color-border-strong);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-base);
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* Fee switch (role="switch": aria-checked is its state) */
.fee { inline-size: 100%; padding: var(--space-m) var(--space-ml); border-radius: var(--radius-l); background: var(--color-highlight); text-align: start; }
.fee-text { flex: 1; min-inline-size: 0; }
.fee-text b { display: block; font-size: var(--size-base); line-height: var(--leading-snug); }
.fee-text span { display: block; margin-block-start: var(--space-2xs); font-size: var(--size-s); color: var(--color-text-on-highlight); font-variant-numeric: tabular-nums; }
.switch {
  position: relative;
  flex: none;
  inline-size: var(--switch-w);
  block-size: var(--switch-h);
  border-radius: var(--radius-pill);
  background: var(--color-track);
  transition: background var(--dur-fast);
}
.switch::after {
  content: "";
  position: absolute;
  inset-block-start: var(--knob-gap);
  inset-inline-start: var(--knob-gap);
  inline-size: var(--knob);
  block-size: var(--knob);
  border-radius: 50%;
  background: var(--color-surface);
  transition: transform var(--dur-fast);
}
.fee[aria-checked="true"] .switch { background: var(--color-accent); }
.fee[aria-checked="true"] .switch::after { transform: translateX(var(--knob-travel)); }