/* Miracle v3 — referral link, share and lookup styles.
   OWNER: MCL-SITE-REFERRAL-001-T07/T08. Do not edit css/base.css.
   Used by /join/ (success), /founding/ (Google return), /referral-link/,
   /confirmed/, /referral-terms/ and /terms/. Mobile-first, base.css bands only. */

/* ---------- the share card ------------------------------------------------ */
.ref-card { display:flex; flex-direction:column; gap:var(--s3); width:100%; min-width:0; }

.ref-link {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  width:100%; min-width:0;
  border:1px dashed #A9CFC0; background:var(--surface-2);
  border-radius:var(--r-sm); padding:var(--s3) var(--s4);
}
.ref-link__url {
  flex:1 1 12rem; min-width:0;
  font-family:var(--heading); font-weight:700; font-size:.9375rem;
  color:var(--deep); text-decoration:underline; text-underline-offset:3px;
}
.ref-link__copy { flex:none; }
.ref-link__copy[data-copied="true"] { background:var(--mint); }

.ref-share { display:flex; flex-wrap:wrap; gap:var(--s2); width:100%; min-width:0; }
.ref-share__item {
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:10px 14px; min-height:44px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink);
  font-family:var(--heading); font-size:.8125rem; font-weight:700;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ref-share__item:hover { border-color:var(--teal); background:var(--surface-2); }
.ref-share__item:focus-visible { outline:2px solid var(--focus, var(--teal)); outline-offset:2px; }
.ref-share__icon { display:grid; place-items:center; width:18px; height:18px; color:var(--teal); flex:none; }
.ref-share__icon svg { width:18px; height:18px; }

/* D4: the benefit sits directly under the link. D3: the cap lives only behind
   "Conditions apply" on /referral-terms/. */
.ref-benefit {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3);
  width:100%; min-width:0;
  border:1px solid #EFD79B; background:#FDF4DE;
  border-radius:var(--r-sm); padding:var(--s3) var(--s4);
}
.ref-benefit strong { font-family:var(--heading); font-size:.9375rem; color:#6B4E08; min-width:0; }
.ref-terms { font-size:.75rem; color:#7A5C1C; text-decoration:underline; text-underline-offset:2px; }

/* "N friends joined · M Stars earned (credited at launch)" — a count, never a balance. */
.ref-stats {
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:baseline;
  width:100%; min-width:0; margin:0;
  font-family:var(--heading); font-weight:700; color:var(--ink);
}
.ref-stats__n { font-size:1.375rem; color:var(--deep); }
.ref-stats__sep { color:var(--muted); }
.ref-stats__note { font-family:var(--body); font-weight:500; font-size:.8125rem; color:var(--muted); }

.ref-notice {
  width:100%; min-width:0;
  border-left:3px solid var(--teal); background:var(--surface-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s3) var(--s4); font-size:.875rem; line-height:1.7; color:var(--ink-2);
}
.ref-notice a, .ref-prose a, .ref-lookup .fine-print a { color:var(--teal); text-decoration:underline; text-underline-offset:2px; }

/* ---------- /referral-link/ ---------------------------------------------- */
.ref-lookup {
  width:100%; min-width:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:clamp(20px,4vw,36px);
  display:flex; flex-direction:column; gap:var(--s4);
}
.ref-lookup h2 { font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem); letter-spacing:-.02em; }
.ref-lookup h2:focus-visible { outline:2px solid var(--focus, var(--teal)); outline-offset:4px; }
.ref-code-input {
  font-family:var(--heading); font-weight:800; font-size:1.5rem;
  letter-spacing:.3em; text-align:center; max-width:14rem;
}
.ref-actions { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; min-width:0; }
.ref-linkbtn {
  background:none; border:0; padding:0; min-height:44px;
  font:inherit; font-size:.875rem; font-weight:600; color:var(--teal);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.ref-linkbtn[disabled] { color:var(--muted); cursor:default; text-decoration:none; }

/* ---------- simple text pages (terms, referral terms, confirmed) -------- */
.ref-prose { display:flex; flex-direction:column; gap:var(--s4); min-width:0; }
.ref-prose ol, .ref-prose ul { padding-left:1.25rem; display:grid; gap:var(--s3); line-height:1.7; color:var(--ink-2); }
.ref-placeholder {
  border:2px dashed var(--gold); background:#FDF4DE; color:#6B4E08;
  border-radius:var(--r-sm); padding:var(--s4); font-weight:600;
}
.ref-status-card { display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; min-width:0; }
.ref-status-card[hidden] { display:none; }