/* ============================================================================
   AVENLEO — EARN  (rewards + referrals)
   ----------------------------------------------------------------------------
   Two screens about money coming in. Gold is the signal for earned money
   throughout the product, so it appears here — on the figure itself, and on
   nothing else. The reward hero used to be a gold gradient panel with a 60px
   numeral in it, which spent the whole colour budget of the page on its
   background.
   ========================================================================== */

.earn-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.earn-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---- the earned balance ------------------------------------------------- */
.earn-hero {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--edge-highlight);
}
.earn-hero__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.earn-hero__label .icon { width: 13px; height: 13px; }
.earn-hero__amount {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-accent-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.02;
  margin: var(--space-3) 0 var(--space-4);
}
.earn-hero__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-subtle);
  margin-top: var(--space-3);
}

/* ---- where it came from ------------------------------------------------- */
.earn-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.src-card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
}
.src-card__ico {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-subtle);
}
.src-card__ico .icon { width: 14px; height: 14px; }
.src-card__ico--ai    { color: var(--color-text-muted); }
.src-card__ico--ref   { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-soft); }
.src-card__ico--bonus { color: var(--color-accent-strong); border-color: var(--color-accent-border); background: var(--color-accent-soft); }
.src-card__v {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.src-card__l { font-size: var(--text-2xs); color: var(--color-text-faint); margin-top: 1px; }

/* ---- referral link ------------------------------------------------------ */
.reflink {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 5px 5px 5px var(--space-3);
}
.reflink__url { font-family: var(--font-mono); font-size: var(--text-xs); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- numbered steps ----------------------------------------------------- */
.steps { display: grid; gap: var(--space-4); }
.step-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.step-row__n {
  width: 22px; height: 22px; border-radius: var(--radius-xs);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  display: grid; place-items: center;
  font-weight: var(--weight-semibold); font-size: var(--text-2xs);
  flex: none; font-variant-numeric: tabular-nums;
}
.step-row__t { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.step-row__d { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; line-height: var(--leading-snug); }

/* ---- team list ---------------------------------------------------------- */
.friend-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.friend-row:last-child { border-bottom: none; }
.friend-row__id { min-width: 0; flex: 1; }
.friend-row__name { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.friend-row__h { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-faint); }
.friend-row__earn { font-family: var(--font-display); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--text-sm); }

/* ---- a team member's contact line ---------------------------------------
   The reason the team list is worth opening: a referrer who can see somebody
   has gone quiet can call them. The number is a real tel: link, WhatsApp is one
   tap (it is how this product's members actually talk), and the digits copy.

   `align-items: flex-start` on the row above is what keeps a three-line member
   block from pushing the level pill and the amount out of line with the name. */
.friend-row { align-items: flex-start; }
.friend-row__contact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 5px;
  flex-wrap: wrap;
}
.friend-row__tel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-tight);
  padding: 2px 7px 2px 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.friend-row__tel:hover { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-3); }
.friend-row__tel .icon { width: 11px; height: 11px; opacity: .7; flex: none; }

.friend-row__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-faint);
  flex: none;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.friend-row__act:hover { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-3); }
/* WhatsApp keeps its own colour on hover — it is the action people reach for. */
.friend-row__act[href*="wa.me"]:hover { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-soft); }
.friend-row__act.is-copied { color: var(--color-success); border-color: var(--color-success-border); }
.friend-row__act .icon { width: 12px; height: 12px; }

.friend-row__contact--none {
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
  font-style: italic;
}

/* The level pill and the amount, stacked at the end of the row so a member
   block three lines tall keeps them together instead of stranding the amount. */
.friend-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  margin-top: 1px;
}

@media (max-width: 560px) {
  /* On a phone the amount goes under the pill rather than shrinking the name
     column to nothing. */
  .friend-row__meta { flex-direction: column; align-items: flex-end; gap: 4px; }
}

.team-count { color: var(--color-text-faint); font-variant-numeric: tabular-nums; margin-left: var(--space-1); }
.segmented__item[aria-selected="true"] .team-count { color: var(--color-text-subtle); }

.rate-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-strong);
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
}

/* ===========================================================================
   THE WELCOME BONUS
   ---------------------------------------------------------------------------
   One card, on the rewards page, and only while the ₦500 is actually on hold.
   It carries the gold accent because it is earned-money signal like everything
   else on this screen — but on the border, not the fill: a panel that shouted
   would be the loudest thing on a page whose subject is the balance above it.

   The two conditions are a list rather than a paragraph. Somebody who cannot
   withdraw wants to know which of the two is in the way, and a list answers
   that at a glance where a sentence has to be read.
   =========================================================================== */

.bonus-card { border-left: 2px solid var(--color-accent); }

.bonus-card__head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.bonus-card__id { flex: 1; min-width: 0; }
.bonus-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.bonus-card__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: var(--leading-snug);
}
.bonus-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-snug);
  margin-top: var(--space-4);
}

/* ---- the two conditions ------------------------------------------------- */
.bonus-steps {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.bonus-step {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.bonus-step__mark {
  flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-faint);
}
.bonus-step__text { flex: 1; min-width: 0; }
.bonus-step__text b { color: var(--color-text); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.bonus-step__state {
  flex: none;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Done. Green rather than gold: gold means money on this screen, and a tick
   that borrowed it would read as a second amount. */
.bonus-step[data-done="true"] { color: var(--color-text); }
.bonus-step[data-done="true"] .bonus-step__mark {
  color: var(--color-success);
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
}
.bonus-step[data-done="true"] .bonus-step__state { color: var(--color-success); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .earn-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .earn-sources { grid-template-columns: minmax(0, 1fr); }
  .friend-row { padding: var(--space-3) var(--space-4); }

  /* The referral rate table has to fit without scrolling sideways — the two
     figures are the point of it, so the prose column is what gives way. Same
     idea on a team row: the handle stays, the join date goes. */
  .rate-who { display: none; }
  .friend-row__when { display: none; }
}