/* invite — the referral contest page (src/invite.rs): the link, progress towards the prizes,
   the friends and, for admins, the claims to review. Tokens and shared components only. */
@layer pages {
  .invite-link .form-row { flex-wrap: nowrap; }
  .invite-url { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }

  .invite-gold-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .invite-gold-amount { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-2); }
  .invite-gold-amount img { width: 28px; height: 28px; }
  .invite-gold-amount b { font: var(--fw-bold) var(--fs-stat) / 1 var(--font-display); color: var(--gold-text); font-variant-numeric: tabular-nums; }
  .invite-gold .hint { margin-top: var(--sp-3); }

  .invite-contest { display: flex; flex-direction: column; gap: var(--sp-5); }
  .invite-contest > .btn { align-self: flex-start; }
  .invite-progress { display: flex; flex-direction: column; gap: var(--sp-2); }
  .invite-count { display: flex; align-items: baseline; gap: var(--sp-2); color: var(--text-2); }
  .invite-count b { font: var(--fw-bold) var(--fs-stat) / 1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
  .invite-meter .fill { background: var(--brand); }

  /* The three prizes, best first; a taken one steps back, yours is marked. */
  .invite-prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .invite-prize { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-4); border-radius: var(--r-lg);
    background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .invite-prize small { font: var(--fw-semibold) var(--fs-xs) / 1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
  .invite-prize b { font: var(--fw-bold) var(--fs-h1) / 1 var(--font-display); color: var(--gold-text); }
  .invite-prize > span:not(.pill) { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--sp-1); }
  .invite-prize.taken { opacity: .55; }
  .invite-prize.mine { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

  .invite-rules ul { margin: var(--sp-3) 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
  .invite-rules a { color: var(--brand-text); }

  .invite-review { display: flex; flex-direction: column; gap: var(--sp-5); }
  .invite-claim { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
  .invite-claim header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  .invite-claim td { white-space: nowrap; }
  .invite-claim td.flags { white-space: normal; }
  .invite-claim .flags > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }

  @media (max-width: 560px) {
    .invite-link .form-row { flex-wrap: wrap; }
    .invite-link .btn { flex: 1 1 100%; }
    .invite-prizes { grid-template-columns: 1fr; }
  }
}