/* Elf Tracker: the Invite friends card (js/tracker/invite.js). Uses the tokens in tracker.css.
   (The November mission checklist and certificate styles went with the checklist, 13 Oct 2026.) */

/* testing only (demo + ?debug=1) */
.mdebug{display:grid;gap:8px;border:2px dashed var(--muted);border-radius:12px;padding:10px;font-size:13px;color:var(--muted)}

/* Invite friends: the tracker referral scheme (js/tracker/invite.js), grown-up screens only */
.invite{display:grid;gap:8px;border:2px dashed var(--gold)}
.invite.done{border-style:solid;background:#FFFDF5}
.invprog{display:flex;gap:8px}
.invprog i{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);background:#fff}
.invprog i.on{background:var(--green);border-color:var(--green)}
.invcount{font-size:13.5px;font-weight:700;color:var(--muted)}
.invite p{font-size:14.5px;color:var(--ink);line-height:1.4}
.invlink{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:13px}
.invlink span{color:var(--muted);font-weight:600}
.invlink code{font-family:var(--mono);font-size:14px;color:var(--navy);background:var(--wash);border-radius:8px;padding:3px 8px;overflow-wrap:anywhere}
.invopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.invopts .btn{text-align:center;text-decoration:none}
@media(max-width:380px){.invopts{grid-template-columns:1fr}}
.tk--ob .invite{margin-top:14px}