/* Silo Points — Discover's card language: a floating header row on the plain
   ground, four filled squircle stat cards (info chips feed the shared HeroUI
   tooltip via data-hero-tip), then the leaderboard as the main event — ONE
   filled sheet (Discover's exact table surface, 20px top radius). The column
   header sits on the sheet and the ROWS scroll beneath it in their own
   scroller, so the scrollbar starts below the header, with the markets
   table's scroll-driven fades riding inside the scroller. Wallet avatars are
   hashvatar dither squircles (js/vendor/hashvatar.js), animated on row
   hover. Fills, not outlines: nothing on this page draws a border box.
   Markup owned by buildPoints() in js/silo-pages.js; carries its own dark
   rules, so load order vs silo-theme.css does not matter.
   Design contract: keep other passes off .pts-*. */

.pts-page {
  --pts-card: rgba(252, 252, 251, 0.94);   /* Discover table sheet */
  --pts-card-solid: #fcfcfb;
  --pts-line: #ececea;                     /* Discover row hairline */
  --pts-ink: #17181a;
  --pts-mut: #878e97;
  --pts-faint: #9aa1a9;
  --pts-accent: #e0447c;
  --pts-accent-soft: rgba(224, 68, 124, 0.10);
  --pts-hover: #f5f5f3;
  --pts-fade-top: linear-gradient(to bottom, #fcfcfb 0%, rgba(252, 252, 251, 0.85) 38%, rgba(252, 252, 251, 0) 100%);
  --pts-fade-bot: linear-gradient(to bottom, rgba(252, 252, 251, 0) 0%, rgba(252, 252, 251, 0.85) 62%, #fcfcfb 100%);
  overflow: hidden;                        /* the rows scroll, not the page */
}
html[data-silo-theme="dark"] .pts-page {
  --pts-card: rgba(26, 28, 31, 0.96);
  --pts-card-solid: #1a1c1f;
  --pts-line: rgba(255, 255, 255, 0.055);
  --pts-ink: #f2f3f5;
  --pts-mut: #8f959e;
  --pts-faint: #70767f;
  --pts-accent: #ff8fb3;
  --pts-accent-soft: rgba(255, 143, 179, 0.12);
  --pts-hover: #202226;
  --pts-fade-top: linear-gradient(to bottom, #1a1c1f 0%, rgba(26, 28, 31, 0.85) 38%, rgba(26, 28, 31, 0) 100%);
  --pts-fade-bot: linear-gradient(to bottom, rgba(26, 28, 31, 0) 0%, rgba(26, 28, 31, 0.85) 62%, #1a1c1f 100%);
}

/* ---------- frame: header + cards float, the sheet takes the rest ---------- */
.pts-wrap {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 0;
  gap: 0;
}
.pts-wrap .sp-headrow { margin-bottom: 14px; }

/* ---------- the four stat cards ---------- */
.pts-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.pts-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 14px 16px 15px;
  border-radius: 18px;
  corner-shape: squircle;
  background: var(--pts-card-solid);
}
.pts-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pts-mut);
}
.pts-card-val {
  margin-top: 1px;
  font-size: 21px;
  line-height: 26px;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--pts-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pts-card-val em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--pts-mut);
}
/* the (i) chip — its explanation renders through the shared HeroUI tooltip
   (interactions.js picks up data-hero-tip on hover) */
.pts-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: var(--pts-faint);
  cursor: help;
  outline: none;
}
.pts-info:hover,
.pts-info:focus { color: var(--pts-mut); }
.pts-info svg { width: 13px; height: 13px; }

/* ---------- the leaderboard sheet ---------- */
.pts-sheet {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--pts-card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* column header on the sheet itself — the scroller (and its scrollbar)
   starts below it */
.pts-lb-head {
  display: grid;
  grid-template-columns: 30px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 22px 10px;
  border-bottom: 1px solid var(--pts-line);
  font-size: 12px;
  font-weight: 500;
  color: var(--pts-mut);
}
.pts-lb-head-rank { text-align: center; }
.pts-lb-head-wallet { grid-column: 2 / 4; }
.pts-lb-head-pts { text-align: right; }

.pts-lb {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* the markets table's scroll-driven fades: rows dissolve under the header
   instead of clipping on the hairline, and slip away at the bottom edge.
   Real elements riding inside the scroller so scroll(nearest) resolves to
   it; browsers without scroll timelines keep the always-on fade. */
.pts-fade {
  display: block;
  z-index: 1;
  pointer-events: none;
}
.pts-fade-top {
  position: sticky;
  top: 0;
  height: 26px;
  margin-bottom: -26px;
  background: var(--pts-fade-top);
  animation: pts-head-fade linear both;
  animation-timeline: scroll(nearest);
  animation-range: 0px 48px;
  opacity: 0;
}
@keyframes pts-head-fade { to { opacity: 1; } }
.pts-fade-bot {
  position: sticky;
  bottom: 0;
  height: 32px;
  margin-top: -32px;
  background: var(--pts-fade-bot);
  animation: pts-foot-fade linear both;
  animation-timeline: scroll(nearest);
  animation-range: calc(100% - 48px) 100%;
}
@keyframes pts-foot-fade { to { opacity: 0; } }

.pts-lb-row {
  display: grid;
  grid-template-columns: 30px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--pts-line);
  transition: background 0.12s ease;
}
/* the last row sits just above the bottom fade rail */
.pts-lb-row:nth-last-child(2) { border-bottom: 0; }
.pts-lb-row:hover { background: var(--pts-hover); }
.pts-lb-row.is-mine { background: var(--pts-accent-soft); }

/* rank column, markets-style (#N, centred, quiet) */
.pts-rank {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pts-faint);
  font-variant-numeric: tabular-nums;
}

/* wallet avatar: hashvatar dither squircle (canvas painted by silo-pages.js;
   the inline gradient underneath is the no-vendor fallback) */
.pts-ava {
  justify-self: center;
  width: 26px;
  height: 26px;
  border-radius: 40%;
  corner-shape: squircle;
}

.pts-lb-wallet {
  display: flex;
  align-items: center;
  min-width: 0;
}
.pts-lb-addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--pts-ink);
}
.pts-you {
  flex: none;
  font-style: normal;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pts-accent-soft);
  color: var(--pts-accent);
  font-size: 10.5px;
  font-weight: 650;
}
.pts-lb-pts {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pts-ink);
  font-variant-numeric: tabular-nums;
}
.pts-lb-pts em { font-style: normal; font-weight: 500; color: var(--pts-faint); }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  .pts-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pts-cards { gap: 8px; margin-bottom: 10px; }
  .pts-card { padding: 12px 14px 13px; border-radius: 16px; }
  .pts-card-val { font-size: 19px; line-height: 24px; }
  .pts-lb-head { padding: 12px 16px 9px; gap: 11px; }
  .pts-lb-row { padding: 11px 16px; gap: 11px; }
}