/* SENDIT's page kit (round 19, first drawn for /leaderboard/ after the owner's
 * mockup; /c/, Stake and the perp vault take it next): the hero over a
 * banner (components/PageHero.jsx), the arrow after a link's words, the
 * outlined action pill, the title row with its pickers (components/Pills.jsx),
 * a podium of three, the viewer's own place, a panel holding a table with its
 * search (components/TablePanel.jsx) and a ranked table's rows. Nothing here
 * is one page's: a page sets its own columns in its own sheet. Built from
 * shell.css's tokens; after dex.css and spot.css (.pep-chip, .pep-tok-find),
 * before the page sheets that place it and sendit.css. */

/* The medals' metals: the podium's places, and the first card's edge. */
:root {
  --pep-medal-1: #f2c94c;
  --pep-medal-2: #c9d0d8;
  --pep-medal-3: #d39256;
}

/* ---------------------------------------------------------------- the hero
 * A banner as a rounded card, darkened from the left for the words (a shade
 * over the picture, never over the words' own ground), its subject kept in
 * view per width: each banner sets its crop as three positions (below, "the
 * banners"). Its blurred placeholder is the art's ground until the picture
 * lands. The hero's own width picks the layout (the rail beside the page
 * changes it, not the window): wide, the banner across the card; middling,
 * the banner on the right beside the words; a phone, a band above them. */

.pep-ph { container: pep-ph / inline-size; min-width: 0; }
.pep-ph-in {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--pep-line);
  border-radius: 22px;
  background: var(--pep-ground);
  isolation: isolate;
}
.pep-ph-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: var(--pep-ph-pos, 50% 50%);
  background-repeat: no-repeat;
  background-size: cover;
}
.pep-ph-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pep-ph-pos, 50% 50%);
}
.pep-ph-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(8 11 9 / 94%) 0%, rgb(8 11 9 / 82%) 26%, rgb(8 11 9 / 30%) 46%, rgb(8 11 9 / 0%) 60%),
    linear-gradient(0deg, rgb(8 11 9 / 45%) 0%, rgb(8 11 9 / 0%) 30%);
}
.pep-ph-copy { display: grid; justify-items: start; gap: 12px; max-width: 520px; padding: 30px 40px; }
.pep-ph-copy .pep-ph-kicker { margin: 0; }
.pep-ph-h { margin: 0; font-size: clamp(36px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
.pep-ph-h span { display: block; }
.pep-ph-lime { color: var(--pep-brand); }
.pep-ph-line { margin: 0; color: var(--pep-text); font-size: 17px; font-weight: 500; line-height: 1.4; }
.pep-ph-do { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* The ghost pill: an edge in cream over a dark wash, the words in cream. */
.pep-btn.pep-ph-cta {
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid rgb(243 243 232 / 38%);
  border-radius: var(--pep-radius-pill);
  background: rgb(8 11 9 / 40%);
  font-size: 14px;
}
.pep-btn.pep-ph-cta:hover { border-color: var(--pep-text); color: var(--pep-text); }

/* Middling: the banner on the right of the card, the words on its dark left. */
@container pep-ph (max-width: 899px) {
  .pep-ph-art { left: 34%; background-position: var(--pep-ph-pos-mid, 50% 50%); }
  .pep-ph-img { object-position: var(--pep-ph-pos-mid, 50% 50%); }
  .pep-ph-art::after { background: linear-gradient(90deg, var(--pep-ground) 0%, rgb(11 16 12 / 55%) 22%, rgb(8 11 9 / 0%) 50%); }
  .pep-ph-copy { max-width: 62%; padding: 28px 28px; }
  .pep-ph-h { font-size: 40px; }
}
/* A phone: the banner a band across the top, the words under it on the panel it fades into. */
@container pep-ph (max-width: 559px) {
  .pep-ph-in { align-items: end; min-height: 0; border-radius: 18px; background: var(--pep-panel); }
  .pep-ph-art { inset: 0 0 auto; height: 200px; background-position: var(--pep-ph-pos-band, 50% 50%); }
  .pep-ph-img { object-position: var(--pep-ph-pos-band, 50% 50%); }
  .pep-ph-art::after { background: linear-gradient(0deg, var(--pep-panel) 0%, rgb(18 25 18 / 55%) 26%, rgb(8 11 9 / 0%) 55%); }
  .pep-ph-copy { gap: 10px; max-width: none; padding: 172px 18px 20px; }
  .pep-ph-h { font-size: 36px; }
  .pep-ph-line { font-size: 15px; }
}

/* ------------------------------------------------------------- the banners
 * One block per banner: its placeholder (node scripts/banner-webp.mjs prints
 * it) and its crop wide, beside the words and as a phone's band. */

/* The leaderboard's (round 19): the pickle and his trophy, a little right of the middle. */
.pep-ph--leaderboard-banner { --pep-ph-pos: 50% 34%; --pep-ph-pos-mid: 52% 40%; --pep-ph-pos-band: 56% 34%; }
.pep-ph--leaderboard-banner .pep-ph-art {
  background-image: url("data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAADwAwCdASogAAwALrV2u12jqampiYC0S2AF2ZQANUKFWc4FeOi3AAIAAP7p/tlHIIY/yYXtQWspVUwvml9kEWhNhdMS/l5EWK+jXrn2j2xcV11XDKqS7G/84GiLoubUl1+KfNr5PTY7AzJ9rQh0Qi56iRADIqh6CZihGYFsdMDKmlkAAAA=");
}

/* No banner yet (PageHero with no `banner`; Stake's and the vault's until round 20): the card in
 * words alone, over a dark gradient in the palette (the ground warming to the
 * panel, a lime glow and a sage one on the right), a dot grid that fades in
 * away from the words, and the brand's asterisk, large and faint, where the
 * picture would be. The card keeps the hero's height at every width; on a
 * phone there is no band to clear, so the words sit at the top. A banner
 * later replaces all of it: `banner` on the PageHero and its own block above. */
.pep-ph--plain .pep-ph-art {
  inset: 0;
  height: auto;
  background:
    radial-gradient(48% 90% at 86% 22%, rgb(195 245 111 / 15%), rgb(195 245 111 / 0%) 70%),
    radial-gradient(42% 70% at 64% 108%, rgb(127 148 104 / 24%), rgb(127 148 104 / 0%) 70%),
    linear-gradient(115deg, var(--pep-ground) 34%, var(--pep-panel) 100%);
}
.pep-ph--plain .pep-ph-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(226 255 196 / 14%) 1px, rgb(226 255 196 / 0%) 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%) 30%, rgb(0 0 0 / 100%) 78%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%) 30%, rgb(0 0 0 / 100%) 78%);
}
.pep-ph--plain .pep-ph-art::after {
  inset: -14% 4% -14% auto;
  width: min(34%, 300px);
  background: var(--pep-brand);
  opacity: 0.13;
  -webkit-mask: url("/assets/sendit-star.svg") center / contain no-repeat;
  mask: url("/assets/sendit-star.svg") center / contain no-repeat;
  rotate: 12deg;
}
@container pep-ph (max-width: 899px) {
  .pep-ph--plain .pep-ph-art { left: 0; }
  .pep-ph--plain .pep-ph-art::after { right: -6%; width: 42%; }
  .pep-ph--plain .pep-ph-copy { max-width: 72%; }
}
@container pep-ph (max-width: 559px) {
  .pep-ph--plain .pep-ph-in { align-items: center; min-height: 0; background: var(--pep-ground); }
  .pep-ph--plain .pep-ph-art { inset: 0; height: auto; }
  .pep-ph--plain .pep-ph-art::before {
    -webkit-mask-image: linear-gradient(200deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0%) 60%);
    mask-image: linear-gradient(200deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0%) 60%);
  }
  .pep-ph--plain .pep-ph-art::after { inset: -30px -40px auto auto; width: 170px; height: 170px; opacity: 0.09; }
  .pep-ph--plain .pep-ph-copy { max-width: none; padding: 26px 18px 22px; }
}

/* The clans' (round 19, /c/): three pickles bumping fists under a flag, right of the middle. */
.pep-ph--clan-banner { --pep-ph-pos: 50% 46%; --pep-ph-pos-mid: 74% 50%; --pep-ph-pos-band: 92% 56%; }
/* Its second line is long ("One leaderboard."): wide, a little more room and a size that keeps it on one line. */
@container pep-ph (min-width: 900px) {
  .pep-ph--clan-banner .pep-ph-copy { max-width: 600px; }
  .pep-ph--clan-banner .pep-ph-h { font-size: clamp(34px, 4vw, 54px); }
}
.pep-ph--clan-banner .pep-ph-art {
  background-image: url("data:image/webp;base64,UklGRmwAAABXRUJQVlA4IGAAAAAQBACdASogAAsAPu1iqU2ppaQiMAgBMB2JZgC06GjNyzUC3fbUQyplzAD+/VP3sn3QoHtGuBstHrQKnCISna8krsWKNENwFw0dgAHPbtemQpGVESSAGOuM9Fyt+3yAAAA=");
}

/* The perp vault's (round 20, /perps/vault/): the pickle leaning on an open vault of coins, right of the middle.
 * Drawn from the owner's text-free file (its left is dark ground; the page writes its own words). */
.pep-ph--perpvault-banner { --pep-ph-pos: 0% 40%; --pep-ph-pos-mid: 78% 50%; --pep-ph-pos-band: 88% 50%; }
/* Its second line is long ("Earn from every trade."): wide, a size that keeps the words left of the pickle. */
@container pep-ph (min-width: 900px) {
  .pep-ph--perpvault-banner .pep-ph-h { font-size: clamp(34px, 4vw, 54px); }
}
.pep-ph--perpvault-banner .pep-ph-art {
  background-image: url("data:image/webp;base64,UklGRmoAAABXRUJQVlA4IF4AAADwAwCdASogAAsAPu1iqU2ppaQiMAgBMB2JagC7MoAKQxWwLz+np5v4AP79m4udIOhyzz1W6dkitDCUlldQ2mGs/MeX4rjPcK5ZIR0yaX892YgVykSKOFFqSf+LAAAA");
}

/* Stake's (round 20, /stake/): the pickle at his PKL reactor tossing ETH, on the right; its left is dark already. */
.pep-ph--earn-banner { --pep-ph-pos: 50% 40%; --pep-ph-pos-mid: 94% 50%; --pep-ph-pos-band: 100% 50%; }
.pep-ph--earn-banner .pep-ph-art {
  background-image: url("data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAACwAwCdASogAAsAPu1iqU2ppaQiMAgBMB2JZgCw7Gk648pMwBLceAD+/dtC6eJbCLXZS66t+pV15WgPwTgFwf1qfB4H/Izg+LYboBBvOqG1QTwSgd4AAA==");
}

/* The traders' (round 20, /traders/): the pickle in sunglasses at his tablet's charts, right of the middle, among
 * balloons and the city; its left is dark ground. A crop of a wide strip (about 7:1, the screenshot's frame trimmed),
 * so the card cuts its sides, not its height: each crop keeps the pickle and his tablet right of the words. */
.pep-ph--traders-banner { --pep-ph-pos: 59% 50%; --pep-ph-pos-mid: 66% 50%; --pep-ph-pos-band: 72% 50%; }
.pep-ph--traders-banner .pep-ph-art {
  background-image: url("data:image/webp;base64,UklGRmAAAABXRUJQVlA4IFQAAADQAwCdASogAAQAPu1qrU8ppiQiMAgBMB2JQBjguAAHmX89B/mh0uAA/vKiTn8bICxn2sShurJx1VxNG6q3IJ4/1v5MwbCPjC8zhPHwFhP6onYAAAA=");
}

/* Copy trading's (round 24, /copy/): a busy neon city, the pickle in sunglasses lounging before his Top Trader screen
 * left of the middle, green arrows to the traders who copy him on the right. Its left is crowd, not dark ground, and
 * a 16:9 picture: across the whole card the pickle would sit under the words. So, wide, the picture starts a third
 * in (as beside the words) and fades from the ground; the words keep the dark ground and the shade. */
.pep-ph--copy-banner { --pep-ph-pos: 50% 62%; --pep-ph-pos-mid: 50% 60%; --pep-ph-pos-band: 40% 60%; }
@container pep-ph (min-width: 900px) {
  .pep-ph--copy-banner .pep-ph-art { left: 34%; }
  .pep-ph--copy-banner .pep-ph-art::after {
    background:
      linear-gradient(90deg, var(--pep-ground) 0%, rgb(8 11 9 / 70%) 14%, rgb(8 11 9 / 0%) 34%),
      linear-gradient(0deg, rgb(8 11 9 / 45%) 0%, rgb(8 11 9 / 0%) 30%);
  }
}
/* Beside the words (not on a phone, whose band fades downward): the crowd on the picture's left darkened further,
 * where the line under the headline ends. */
@container pep-ph (min-width: 560px) and (max-width: 899px) {
  .pep-ph--copy-banner .pep-ph-art::after {
    background: linear-gradient(90deg, var(--pep-ground) 0%, rgb(11 16 12 / 80%) 18%, rgb(8 11 9 / 45%) 30%, rgb(8 11 9 / 0%) 46%);
  }
}
/* A phone's band is as wide as the whole picture: closer in, on the pickle and his screen. */
@container pep-ph (max-width: 559px) {
  .pep-ph--copy-banner .pep-ph-art { overflow: hidden; }
  .pep-ph--copy-banner .pep-ph-img { scale: 1.6; transform-origin: var(--pep-ph-pos-band); }
}
.pep-ph--copy-banner .pep-ph-art {
  background-image: url("data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAADQBQCdASogABIAPu1kqE2ppaOiMAgBMB2JYgCdMsn8AA49gnnQEGdL+2PTMKp2Smh5hu543UlAAP6DaBS7CJikO1bNEUA+F7SX5uF4sicXJ/WyAqam90PzgEO/kde66s21haLHp0oluhi+Jbb9r8Navg4thngjy6JpBz16QR9bAo0IsSlMvrKkxxowoiulCsfoBdsWEz0XuAAA");
}

/* ----------------------------------------------------------- links, pills
 * The arrow after a link's words: the brand's arrow (/assets/sendit-arrow.svg)
 * as a mask in the words' colour, drawn only, so no name or label changes. */

.pep-go::after {
  content: "";
  flex: none;
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.45em;
  background-color: currentcolor;
  -webkit-mask: url("/assets/sendit-arrow.svg") center / contain no-repeat;
  mask: url("/assets/sendit-arrow.svg") center / contain no-repeat;
}
/* An action in a row or a card: an outlined pill, small, cream on the ground. */
.pep-btn.pep-pill-go {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: transparent;
  font-size: 13px;
  white-space: nowrap;
}
.pep-btn.pep-pill-go:hover:where(:not([disabled])) { border-color: var(--pep-text-2); background: var(--pep-panel-hover); }
/* A small rounded word beside a name: Following, You. */
.pep-badge {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  color: var(--pep-text-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.pep-badge-you { border-color: var(--pep-brand-soft); background: var(--pep-brand-soft); color: var(--pep-brand); }

/* ---------------------------------------------------- the title's pickers
 * "Title." on the left with its sub line, the pickers on the right: groups of
 * pills with a hairline between them, a segmented toggle, a link with the
 * arrow at the end. Under the words on a narrow page; on a phone each group
 * takes the room it needs and the row wraps, with no hairlines. */

.pep-title-pickers { align-items: center; gap: 14px 20px; }
.pep-title-pickers .pep-title-do { align-items: center; gap: 12px 18px; }
.pep-pickers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; min-width: 0; }
.pep-pickers > * + * { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--pep-line); }
.pep-pills { display: flex; gap: 6px; }
.pep-pills .pep-chip { min-height: 34px; padding: 0 15px; }
.pep-seg.pep-seg-pill { padding: 3px; border-radius: var(--pep-radius-pill); background: var(--pep-panel); box-shadow: inset 0 0 0 1px var(--pep-line); }
.pep-seg-pill > button { min-height: 32px; padding: 0 18px; border-radius: var(--pep-radius-pill); font-size: 13px; }
.pep-title-go {
  display: inline-flex;
  align-items: center;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pep-brand);
  color: var(--pep-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.pep-title-go:hover { color: var(--pep-brand); }
@media (max-width: 699px) {
  .pep-title-pickers .pep-title-do { width: 100%; }
  .pep-pickers { gap: 8px 10px; width: 100%; }
  .pep-pickers > * + * { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* -------------------------------------------------------------- the podium
 * Three cards side by side (one under another on a phone): the medal in its
 * metal, the trader with the badges, the figure big over the trade count,
 * the action beside them (under them in a narrow card). The name's link covers the card (its ::after) and the
 * action stays a button of its own. The first is edged in gold, lit softly. */

.pep-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pep-podium-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas: "medal who" "medal body";
  align-content: start;
  gap: 10px 12px;
  min-width: 0;
  padding: 16px 16px 16px 14px;
  border-radius: var(--pep-radius);
  background: var(--pep-panel);
  box-shadow: inset 0 0 0 1px var(--pep-line);
}
.pep-podium-card:hover { background: var(--pep-panel-2); }
.pep-podium-1 {
  background: linear-gradient(135deg, rgb(242 201 76 / 9%), transparent 60%), var(--pep-panel);
  box-shadow: inset 0 0 0 1.5px var(--pep-medal-1), 0 0 28px rgb(242 201 76 / 14%);
}
.pep-podium-1:hover { background: linear-gradient(135deg, rgb(242 201 76 / 12%), transparent 60%), var(--pep-panel-2); }
.pep-podium-card .pep-trader::after { content: ""; position: absolute; inset: 0; border-radius: var(--pep-radius); }
.pep-podium-card .pep-trader:focus-visible { outline: none; }
.pep-podium-card:focus-within:has(.pep-trader:focus-visible) { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-podium-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.pep-podium-who .pep-trader { max-width: 100%; }
.pep-podium-who .pep-trader-primary { font-size: 16px; }
/* The figure and the trade count, the action beside them while it fits and under them when it does not. */
.pep-podium-body { grid-area: body; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; min-width: 0; }
.pep-podium-fig { display: grid; gap: 2px; min-width: 0; }
.pep-podium-fig b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.pep-podium-fig span { color: var(--pep-text-3); font-size: 13px; white-space: nowrap; }
.pep-podium-do { position: relative; z-index: 1; }
.pep-medal {
  grid-area: medal;
  align-self: start;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--pep-text-2);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 18%), 0 0 0 3px rgb(255 255 255 / 6%);
  color: var(--pep-brand-ink);
  font-size: 14px;
  font-weight: 800;
}
.pep-medal-1 { background: var(--pep-medal-1); }
.pep-medal-2 { background: var(--pep-medal-2); }
.pep-medal-3 { background: var(--pep-medal-3); }

/* ------------------------------------------------------ your own standing
 * The viewer's place in a strip: the face, where they stand, then their
 * figures between hairlines, and the way to their profile at the end. */

.pep-standing {
  display: grid;
  grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}
.pep-standing-k { display: grid; gap: 2px; min-width: 0; }
.pep-standing-k + .pep-standing-k { padding-left: 20px; border-left: 1px solid var(--pep-line); }
.pep-standing-k b { font-size: 20px; font-weight: 800; white-space: nowrap; }
.pep-standing-k span { color: var(--pep-text-3); font-size: 13px; }
.pep-standing-place span { color: var(--pep-text-2); }
.pep-standing-none { padding: 0 4px; }
.pep-standing-none p { margin: 0; color: var(--pep-text-2); font-size: 13px; }
@media (max-width: 699px) {
  .pep-standing { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 16px; }
  .pep-standing > .pep-face { grid-row: span 2; }
  .pep-standing-k + .pep-standing-k { padding-left: 0; border-left: 0; }
  .pep-standing-place { grid-column: 2 / 4; }
  .pep-standing .pep-pill-go { grid-column: 2 / 4; justify-self: start; }
}

/* ------------------------------------------------ a panel holding a table
 * Its title and count on the left, the search on the right; the table; a
 * foot with a note and a link. */

.pep-tpanel { display: grid; gap: 10px; min-width: 0; padding: 18px 20px 16px; }
.pep-tpanel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pep-tpanel-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.pep-tpanel-count { color: var(--pep-text-3); font-size: 13px; }
.pep-tok-find.pep-tpanel-find { flex: 0 1 300px; margin-left: auto; }
.pep-tpanel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px 4px 0; color: var(--pep-text-3); font-size: 12px; }
.pep-tpanel-link { display: inline-flex; align-items: center; color: var(--pep-text); font-weight: 700; text-decoration: none; }
.pep-tpanel-link:hover { color: var(--pep-brand); }
@media (max-width: 699px) {
  .pep-tpanel { padding: 14px 12px 12px; }
  .pep-tok-find.pep-tpanel-find { flex: 1 1 100%; margin-left: 0; }
}

/* ------------------------------------------------------ a ranked table
 * The column names over the rows, the place in a circle (the first in lime),
 * the name's link covering its row, one's own row edged in lime. A page sets
 * the columns (grid-template-columns) on its head and rows. */

.pep-rt { display: grid; min-width: 0; }
.pep-rt-head {
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--pep-line);
  color: var(--pep-text-3);
  font-size: 12px;
  font-weight: 600;
}
.pep-rt-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pep-rt-row {
  position: relative;
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--pep-line);
}
.pep-rt-row:last-child { border-bottom: 0; }
.pep-rt-row:hover { background: var(--pep-panel-2); }
.pep-rt-row .pep-trader::after { content: ""; position: absolute; inset: 0; }
.pep-rt-row .pep-trader:focus-visible { outline: none; }
.pep-rt-row:focus-within:has(.pep-trader:focus-visible) { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-rt-me {
  border-color: transparent;
  border-radius: var(--pep-radius-sm);
  background: var(--pep-brand-soft);
  box-shadow: inset 0 0 0 1px var(--pep-brand);
}
.pep-rt-me:hover { background: var(--pep-brand-soft); }
.pep-rt-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 50%;
  color: var(--pep-text);
  font-size: 13px;
  font-weight: 700;
}
.pep-rt-rank-1 { border-color: var(--pep-brand); background: var(--pep-brand); color: var(--pep-brand-ink); }
.pep-rt-none { margin: 0; padding: 18px 12px; color: var(--pep-text-2); font-size: 14px; }