/* /leaderboard/: the traders ranked by realised PnL (pages/leaderboard.jsx,
 * components/social/Leaderboard.jsx; round 13, out of the Feed's tabs; round
 * 19 in the owner's mockup's look). The hero, the title's pickers, the
 * podium, "Your position", the table's panel and its rows' look are
 * page.css's, shared with the pages that copy this one; this sheet is the
 * page's gaps and the table's columns: the place, the trader (name, address,
 * Following, You), the trade count, the figure, and the action (Copy trader,
 * or View profile on one's own row). Built from shell.css's tokens; after
 * social.css and page.css, whose pieces it places. */
.pep-lb-page { display: grid; gap: 18px; min-width: 0; }
/* The rows' layout follows the room the board has (the rail beside it takes 300 px or none), not the window's. */
.pep-lb { gap: 14px; container: pep-lb / inline-size; }

/* The phone first: the place, the trader across the row (name, address, badges), then the figure and the action
   on the line under it; the trade count and the column names are left for a wider board. */
.pep-lb-head { display: none; }
.pep-lb-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas: "rank who who" "rank fig do";
  gap: 6px 10px;
  padding: 10px 8px;
}
.pep-lb-rank { grid-area: rank; }
.pep-lb-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pep-lb-who .pep-trader { max-width: 100%; }
.pep-lb-trades { display: none; }
.pep-lb-fig { grid-area: fig; justify-self: start; white-space: nowrap; }
.pep-lb-fig b { font-size: 15px; font-weight: 800; }
.pep-lb-do { position: relative; z-index: 1; grid-area: do; display: flex; justify-content: flex-end; min-width: 0; }
.pep-lb-do .pep-pill-go { min-height: 30px; padding: 0 12px; font-size: 12px; }

/* A board with room: one line per trader, under the column names. */
@container pep-lb (min-width: 600px) {
  .pep-lb-head,
  .pep-lb-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 72px 150px 132px;
    grid-template-areas: "rank who trades fig do";
    gap: 16px;
    padding: 9px 12px;
  }
  .pep-lb-trades { grid-area: trades; display: block; justify-self: end; }
  .pep-lb-fig { justify-self: end; }
  .pep-lb-row .pep-lb-trades { color: var(--pep-text); font-size: 14px; }
  .pep-lb-who { gap: 4px 10px; }
  .pep-lb-do .pep-pill-go { min-height: 32px; padding: 0 14px; font-size: 13px; }
}