/* Chat Tower Companion -- pages/invite.css
 * ui-582: "Einladen"-Tab (Referral-Programm "Freunde einladen", Backend
 * web-282) -- Werber-Panel, NEUE eigene Datei (Ticket-Lock: ui-580 laeuft
 * parallel auf achievements.css, dieses Ticket meidet die Datei komplett).
 *
 * `.rf-*`-Namensraum 1:1 aus dem Fifty-abgenommenen Prototyp
 * `.claude/sprint/prototypes/ui-576-referral.html` (Werber-Sicht, 25/25-
 * Fassung) uebernommen -- NUR die Werber-Sicht-Klassen (Kopf/Link-Box/
 * Meilenstein-Leiste/Eingeladenen-Liste/Bilanz-Zeile/Empty-State/
 * Meilenstein-Banner); die "Geworbenen-Sicht" (`.rf-invite-hero`/
 * `.rf-check`/`.rf-privacy`/`.rf-welcome`, Landing fuer die frisch
 * eingeladene Person) ist Out-of-Scope dieses Tickets (web-283).
 * `.rf-toast` (prototype-eigener Toast-Nachbau) ist NICHT uebernommen --
 * die echte Implementierung nutzt den geteilten Companion-Toast
 * (`toast()`, web/client/companion/util.js, `#toast-bar`), kein zweites
 * Toast-System.
 *
 * Token-Uebersetzung: der Prototyp (Standalone-HTML) nutzt `var(--border)`
 * (Viewer-Namenskonvention, s. tokens.css-Kopfkommentar); diese Datei nutzt
 * `var(--line)` -- identischer Wert, aber die im Companion-CSS dominante
 * Namenskonvention (131:3 Verwendungen ueber base.css/components.css/
 * pages/*.css hinweg). Ebenso ohne die `, #hexliteral`-Fallbacks des
 * Prototyps (Standalone-HTML kann tokens.css fehlen -- hier via
 * layout.js-Kaskade IMMER geladen, s.u.).
 *
 * Aeussere Panel-Chrome (Border/Radius/Padding) kommt bewusst NICHT aus
 * dem Prototyp-eigenen `.rf-panel` (14px-Radius/eigener Border), sondern
 * aus der geteilten `.panel`-Basisklasse (components.css) -- Muster
 * `.shop-panel`/`.achievement-*`-Panels: JEDER Dashboard-Tab teilt dieselbe
 * Panel-Chrome, nur der Inhalt ist seitenspezifisch (views/invite.js
 * rendert `<div class="panel invite-panel" data-invite-root>`).
 * `.invite-panel` traegt aktuell keine eigenen Regeln (Layout-Rhythmus
 * kommt vollstaendig aus den margin-Regeln der `.rf-*`-Kinder, wie im
 * Prototyp) -- als Klasse trotzdem gesetzt (Konsistenz-Hook, Muster
 * `.shop-panel`, falls ein Folge-Ticket eigene Layout-Regeln braucht.
 *
 * Ladereihenfolge (Kaskade-Lock, Muster web-241/ui-557): via layout.js
 * `<link>`-Liste NACH base.css/components.css, Position ganz am Ende
 * (nach legal.css) -- keine Kaskaden-Abhaengigkeit zu den uebrigen 16
 * Dateien (alle Selektoren hier sind eigene `.rf-*`/`.invite-panel`-Klassen,
 * kein geteilter bare Selektor). */

.rf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rf-title { font-size: 16px; font-weight: 700; color: var(--text); }
.rf-pitch { color: var(--muted); font-size: 12.5px; }
.rf-pitch svg { vertical-align: -2px; }

.rf-linkbox { display: flex; gap: 8px; margin: 12px 0; }
.rf-link {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 12.5px; color: var(--cyan);
  background: rgba(56, 225, 255, 0.06); border: 1px dashed var(--cyan); border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit;
}
.rf-copy {
  padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: rgba(56, 225, 255, 0.14); color: var(--cyan);
  border: 1px solid var(--cyan); border-radius: 8px; flex: 0 0 auto;
}
.rf-copy.ok { background: rgba(94, 255, 138, 0.14); color: var(--green); border-color: var(--green); }

/* Meilenstein-Leiste: Sockel bei 1/2/3/5/8 (services/referrals.js REFERRAL_MILESTONES) */
.rf-miles { margin: 16px 0 6px; }
.rf-miles-track { position: relative; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.rf-miles-fill { position: absolute; inset: 0; right: auto; background: var(--gold); border-radius: 99px; transition: width 0.3s ease; }
.rf-miles-stops { position: relative; height: 40px; margin-top: 4px; }
.rf-stop { position: absolute; transform: translateX(-50%); text-align: center; }
.rf-stop-dot {
  width: 14px; height: 14px; border-radius: 50%; margin: -14px auto 2px;
  background: var(--bg); border: 2px solid var(--line); position: relative; z-index: 2;
}
.rf-stop.hit .rf-stop-dot { border-color: var(--gold); background: var(--gold); }
.rf-stop-lbl { font-size: 10px; color: var(--muted); white-space: nowrap; }
.rf-stop.hit .rf-stop-lbl { color: var(--gold); font-weight: 700; }
.rf-miles-note { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Eingeladenen-Liste */
.rf-friends { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.rf-friend {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: rgba(255, 255, 255, 0.02);
}
.rf-friend.q { border-color: rgba(94, 255, 138, 0.5); }
.rf-fname { font-weight: 700; color: var(--text); font-size: 13px; flex: 0 0 auto; }
.rf-crit { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rf-chip {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: rgba(0, 0, 0, 0.2);
}
.rf-chip.ok { border-color: var(--green); color: var(--green); }
.rf-fstatus { margin-left: auto; font-size: 12px; color: var(--muted); }
.rf-fstatus.q { color: var(--green); font-weight: 700; }
.rf-fstatus svg { vertical-align: -2px; }
.rf-poke-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

.rf-balance { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.rf-balance b { color: var(--text); }
.rf-balance svg { vertical-align: -2px; }

.rf-empty { text-align: center; padding: 22px 10px; color: var(--muted); font-size: 13px; }
.rf-empty b { color: var(--text); display: block; font-size: 15px; margin-bottom: 6px; }

/* Meilenstein-/Deckel-Banner (dieselbe Klasse, s. views/invite.js) */
.rf-mile-banner {
  border: 1px solid var(--gold); border-radius: 10px; padding: 10px 14px; margin-top: 12px;
  background: linear-gradient(180deg, rgba(240, 179, 80, 0.12), rgba(240, 179, 80, 0.03));
  color: var(--text); font-size: 13px;
}
.rf-mile-banner b { color: var(--gold); }