/* friends.css — Friends tab + friend profile (Arcane theme).
 * Scoped to .fp-* classes so it can't collide with the v1 shell styles
 * or the other feature workers. Uses the theme tokens from styles.css
 * (:root vars); Cinzel for display headers like the rest of the site.
 * Normal document flow only (no position:fixed).
 */

/* friends list */
.fp-friend {
  display: block; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; margin: 10px 0;
  cursor: pointer; color: var(--cream); font-family: inherit; font-size: 15px;
}
.fp-friend:active { border-color: var(--gold); }
.fp-fname { display: block; font-weight: 700; font-size: 16px; }
.fp-fnote { display: block; font-size: 12.5px; margin-top: 2px; }
.fp-fsum { display: block; font-size: 12.5px; margin-top: 4px; }
.fp-wants { color: var(--gold); font-weight: 700; }
.fp-empty { font-size: 13.5px; }

/* profile */
.fp-phead { padding: 14px; }
.fp-pname {
  font-family: "Cinzel", Georgia, serif; font-weight: 700;
  font-size: 20px; letter-spacing: .03em;
}
.fp-pnote { margin-top: 4px; font-size: 13px; font-style: italic; }

.fp-sect {
  font-family: "Cinzel", Georgia, serif; letter-spacing: .08em;
  color: var(--gold); font-size: 13px; margin: 18px 0 6px 0;
}

.fp-list { margin: 10px 0; }
.fp-lhead { font-size: 13.5px; margin-bottom: 6px; }
.fp-lnote { font-size: 13px; margin-top: 2px; font-style: italic; }
.fp-actions { display: flex; margin-top: 10px; }

/* item / collection rows */
.fp-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 2px; border-bottom: 1px solid rgba(217,164,65,.08);
  font-size: 14px;
}
.fp-row:last-child { border-bottom: none; }
.fp-cname { flex: 1; min-width: 140px; }
.fp-csub { font-size: 12px; }
.fp-qty { white-space: nowrap; color: var(--dim-warm); }