/*
 * CP-09 Earnings/invoice row — app/components/ui/earnings_table_component.rb
 *
 * Mobile trailing amount (prominent, unlike CP-06's plain-badge
 * trailing) and the expand-column disclosure's split-line layout.
 */

.ui-cp09__amount {
  font-size: var(--text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.ui-cp09__expand-summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.ui-cp09__expand-summary::-webkit-details-marker {
  display: none;
}

.ui-cp09__split {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.ui-cp09__split-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* A reward's payout (ReferrerPayoutStatus): the badge, then one muted line
   saying why, or the gross, Stripe's fee and the net once paid. The
   longer payout labels ("Add your ABN or declaration to get paid") wrap
   rather than push the card past 375px. */
.ui-cp09__payout-badge {
  white-space: normal;
  text-align: left;
}

.ui-cp09__detail {
  display: block;
  margin-top: var(--space-1);
  max-width: 32ch;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
}

.ui-cp09 .ui-list-row__meta {
  flex-wrap: wrap;
}

.ui-cp09 .ui-list-row__meta .ui-cp09__detail {
  flex-basis: 100%;
  max-width: none;
  margin-top: 0;
}