/* ████████████████████████████████████████████████████████ */
/* ██  social.css — social panel, player/org cards        ██ */
/* ████████████████████████████████████████████████████████ */

#p-social{padding:14px 16px 80px;gap:0;overflow-y:auto}

/* ── SUB-TABS ──────────────────────────────────────────── */
.soc-stabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px;flex-shrink:0}
.soc-stab{flex:1;padding:8px 10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.72rem;font-weight:700;color:var(--dim);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s}
.soc-stab.on{color:var(--gold);border-bottom-color:var(--gold)}
.soc-section-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--dim);padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:6px}

/* ── SUGGESTIONS GRID ───────────────────────────────────── */
/* Mobile: 1 column. ≥600px: 2 cols. ≥900px: auto-fit so cards stretch to fill
   the row with no empty gap on the right. */
.social-sug-grid{display:grid;grid-template-columns:1fr;gap:5px}
@media (min-width: 600px){.social-sug-grid{grid-template-columns:repeat(2,1fr);gap:6px}}
@media (min-width: 900px){.social-sug-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px}}
/* Grid items default to min-width:auto (= min-content), which lets a flex
   card with a nowrap "+ Follow" button overflow the 1fr track and clip on
   the right of narrow phones. Force min-width:0 so the cards honour the
   track width and the inner flex children shrink/ellipsize correctly. */
.social-sug-grid > *{min-width:0}
/* Cards inside the grid shouldn't stack margin — grid gap handles spacing */
.social-sug-grid > div[id^="pscard-"],
.social-sug-grid > div[id^="sug-card-"],
.social-sug-grid > div[data-oid],
.social-sug-grid > div[data-sug-hidden] > div,
.social-sug-grid > div[data-sug-hidden-for] > div{margin-bottom:0 !important}
/* Dismiss (✕) button — sits in the top-right corner of each suggestion card,
   slightly overflowing outside the card. Only turns red when hovered directly. */
.sug-dismiss-btn{
  position:absolute;top:-8px;right:-8px;
  width:22px;height:22px;border-radius:50%;
  background:var(--surf2);border:1px solid var(--border);
  color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:0.68rem;line-height:1;padding:0;
  opacity:0.75;z-index:2;
  transition:opacity 0.15s,color 0.15s,background 0.15s,transform 0.12s;
  -webkit-tap-highlight-color:transparent;
}
.sug-dismiss-btn:hover{opacity:1;color:#e11d48;background:var(--surf);transform:scale(1.08)}

/* ── PLAYER / ORG CARDS ────────────────────────────────── */
.soc-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surf);border:1px solid var(--border);border-radius:12px;margin-bottom:7px}
.soc-av{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-family:serif;flex-shrink:0;color:#fff;overflow:hidden}
.soc-name{font-size:0.86rem;font-weight:700;color:var(--tx);margin-bottom:2px}
.soc-meta{font-size:0.71rem;color:var(--muted)}

/* ── BUTTONS ───────────────────────────────────────────── */
.soc-add-btn{padding:5px 12px;border-radius:8px;background:var(--acc);color:#fff;border:none;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.72rem;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:background 0.15s}
.soc-add-btn:hover{background:var(--acc2)}
.soc-follow-btn{padding:5px 12px;border-radius:8px;background:var(--surf2);color:var(--muted);border:1px solid var(--border2);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.72rem;cursor:pointer;flex-shrink:0;white-space:nowrap}
.soc-follow-btn.on{background:rgba(194,65,12,0.1);color:var(--acc);border-color:rgba(194,65,12,0.3)}