/* ==========================================================================
   Scorepath SAT — social layer styles. Matches the site's design system
   (tokens are defined in index.html's :root; fallbacks included).
   ========================================================================== */

/* nav ELO pill (topbar) — only visible when the backend is live */
.sb-elo {
  display: none; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 999px; background: var(--navy, #0B1433); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
html.sb-on .sb-elo.on { display: inline-flex; }
.sb-elo .tiny { color: rgba(255,255,255,.66); }

/* generic table wrapper (leaderboard / match lists) */
.tbl-wrap { overflow-x: auto; }

/* friend rows */
.friend-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-top: 1px solid var(--line-2, #EDEDED);
}
.friend-row:first-of-type { border-top: 0; }
.friend-row .av, .mu-side .av.big {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--blue-20, #DDE5FF); color: var(--blue-ink, #1B34B8);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.friend-row > div { display: flex; flex-direction: column; }
.friend-row b { font-size: 14.5px; font-weight: 600; }
.friend-row .btn { flex: none; }

/* leaderboard */
.lb-tbl th, .lb-tbl td { padding: 12px 10px; }
.lb-tbl td span.small { display: block; }
.lb-tbl tr.lb-me td {
  background: var(--blue-10, #EEF2FF);
  border-top: 1.5px solid var(--blue, #335CFF);
  border-bottom: 1.5px solid var(--blue, #335CFF);
}
.lb-tbl tr.lb-me td:first-child { border-left: 1.5px solid var(--blue, #335CFF); border-radius: 8px 0 0 8px; }
.lb-tbl tr.lb-me td:last-child { border-right: 1.5px solid var(--blue, #335CFF); border-radius: 0 8px 8px 0; }

/* matchmaking */
.mm-wrap { max-width: 720px; margin: 0 auto; }
.mm-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.mm-dots i { width: 14px; height: 14px; border-radius: 4px; background: var(--neutral, #F0F0F0); }
.mm-dots i.ok { background: var(--ok, #1b7843); }

/* matchup header on a single match */
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; text-align: center; }
.matchup .mu-side { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line, #E5E5E5); }
.matchup .mu-side.mu-win { border-color: var(--ok, #1b7843); background: var(--ok-soft, #E4F2E9); }
.matchup .mu-side b { font-size: 15px; }
.matchup .mu-side .av.big { margin-bottom: 4px; }
.matchup .mu-mid { display: grid; justify-items: center; }
.matchup .mu-mid .h-display { font-size: 44px; letter-spacing: -0.04em; }

/* stat row used on the profile */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-row .stat { padding: 14px 16px; border-radius: 14px; background: var(--soft, #F5F5F5); }
.stat-row .stat .n { font-family: var(--display, 'DM Sans'); font-size: 26px; font-weight: 500; letter-spacing: -0.03em; }
.stat-row .stat .l { font-size: 12px; color: var(--muted, #737373); }

/* toast for social notices reuses .toast; give kinds a tint */
.toast.ok { background: var(--ok, #1b7843); }
.toast.err { background: var(--err, #c92a2a); }

/* sidebar group just added by APPNAV.push */
.side .side-group:last-child { margin-top: 6px; }