/* ============================================================================
   Vibe Dashboard v2 — Revshare dashboard + Revshare leaderboard (D8 revshare
   lane). Mock docs/design/leaderboards-order/mock2/Vibe.dc.html L2438-2561.
   Tokens only from styles/vibe-tokens.css; class prefix v2rs-. Builds on
   v2-shell.css's shared kit (.v2-card, .v2-badge, .v2-empty, .v2-disclaimer)
   and reuses .v2l-state-chip.is-excluded verbatim from v2-leaderboard.css.
   Flat surfaces only: no gradients, no glassmorphism, tabular-nums on money.

   Custom props below carve out the exact non-token hex the mock uses (medal
   silver/bronze distinct from v2-leaderboard.css's own values, plus two tint
   shades with no matching --v- token) — mirrors the leaderboard.css
   precedent exactly; test/d8-revshare-render.test.js pins this file's no-hex
   rule the same way test/leaderboard-page.test.js pins v2-leaderboard.css.
   ============================================================================ */
:root {
  --v2rs-silver: #C6CBD6;
  --v2rs-bronze: #C98A5B;
  --v2rs-stat-hover: #1C2447;
  --v2rs-dotsep: #3A4257;
}

/* Page rhythm (mock L2441/L2503): the wrapper itself is the flex column with
   18px gaps between header/hero/stats/table — app.jsx's shared .v2-content
   only gaps ITS OWN direct children, and this view is its sole child. */
.v2rs-dash, .v2rs-board { display: flex; flex-direction: column; gap: 18px; }

/* ---------- shared page head (title + LAST SNAPSHOT) ---------- */
.v2rs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 6px;
}
.v2rs-head-main { flex: 1 1 260px; min-width: 0; }
.v2rs-title { font-size: 30px; font-weight: 700; letter-spacing: -.6px; color: var(--v-heading); margin: 0; }
.v2rs-subtitle { font-size: 14.5px; color: var(--v-text-2); margin: 5px 0 0; }
.v2rs-snap { display: flex; flex-direction: column; text-align: right; flex-shrink: 0; }
.v2rs-snap-label { font-family: var(--v-font-mono); font-size: 10.5px; letter-spacing: 1.4px; color: var(--v-text-2); }
.v2rs-snap-value { font-size: 16px; font-weight: 600; color: var(--v-text); margin-top: 3px; }
@media (max-width: 559px) {
  .v2rs-snap { text-align: left; }
}

/* ---------- "Estimated revenue" hero (dashboard only) ---------- */
.v2rs-hero { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.v2rs-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2rs-hero-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--v-text-overline); white-space: nowrap; }
.v2rs-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: var(--v-r-pill);
  border: 1px solid var(--v-border-info); color: var(--v-text-2);
  font-size: 9.5px; font-weight: 700; cursor: help;
}
.v2rs-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--v-text-2); }
.v2rs-live-dot { width: 6px; height: 6px; border-radius: var(--v-r-pill); background: var(--v-green); }
.v2rs-hero-value {
  font-size: 56px; font-weight: 700; letter-spacing: -1.8px; line-height: 1;
  color: var(--v-heading); font-variant-numeric: tabular-nums;
}
.v2rs-hero-accrued { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--v-text-2); }
.v2rs-accrued-value { color: var(--v-green); font-weight: 600; font-variant-numeric: tabular-nums; }
.v2rs-dot-sep { color: var(--v2rs-dotsep); }
@media (max-width: 759px) {
  .v2rs-hero-value { font-size: 40px; letter-spacing: -1px; }
}

/* ---------- stat strip (dashboard: 3 linked cells; board: 3 static cells) ---------- */
.v2rs-stats {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--v-border-soft); border: 1px solid var(--v-border);
  border-radius: var(--v-r-card); overflow: hidden;
}
.v2rs-stat {
  background: var(--v-surface); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  text-decoration: none; cursor: pointer;
}
.v2rs-stat:hover { background: var(--v2rs-stat-hover); }
.v2rs-stat.is-static { cursor: default; }
.v2rs-stat.is-static:hover { background: var(--v-surface); }
.v2rs-stat-label {
  font-family: var(--v-font-mono); font-size: 10.5px; letter-spacing: 1.5px; color: var(--v-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2rs-stat-value {
  height: 28px; display: flex; align-items: center; font-size: 24px; font-weight: 700;
  letter-spacing: -.6px; color: var(--v-heading); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.v2rs-tier-value { color: var(--v-amber); }
.v2rs-stat-sub { font-size: 12px; color: var(--v-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 760px) {
  .v2rs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- level split card (dashboard) ---------- */
.v2rs-levels-head {
  padding: 16px 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--v-border-soft);
}
.v2rs-levels-head-copy { display: flex; flex-direction: column; gap: 3px; }
.v2rs-levels-title { font-size: 15px; font-weight: 600; color: var(--v-text); }
.v2rs-levels-sub { font-size: 12.5px; color: var(--v-text-2); }
.v2rs-levels-full { font-size: 13px; font-weight: 600; color: var(--v-link); cursor: pointer; text-decoration: none; }
.v2rs-levels-full:hover { color: var(--v-link-hover); }
.v2rs-levels-empty { border: 0; }
.v2rs-level-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center; gap: 14px; padding: 13px 22px; border-bottom: 1px solid var(--v-border-row);
}
.v2rs-level-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--v-r-badge);
  font-family: var(--v-font-mono); font-size: 10.5px; letter-spacing: .8px; color: var(--v-green);
  border: 1px solid color-mix(in srgb, var(--v-green) 30%, transparent); background: var(--v-green-tint);
  width: fit-content;
}
.v2rs-level-bar { height: 6px; border-radius: var(--v-r-pill); background: var(--v-border); overflow: hidden; }
.v2rs-level-bar-fill { height: 6px; border-radius: var(--v-r-pill); background: var(--v-green); }
.v2rs-level-share {
  text-align: right; font-family: var(--v-font-mono); font-size: 13.5px;
  font-variant-numeric: tabular-nums; color: var(--v-text);
}
.v2rs-level-accts, .v2rs-level-volume {
  text-align: right; font-family: var(--v-font-mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--v-text-table);
}
.v2rs-level-row.is-zero .v2rs-level-share,
.v2rs-level-row.is-zero .v2rs-level-accts,
.v2rs-level-row.is-zero .v2rs-level-volume { color: var(--v-text-3); }
.v2rs-level-row.is-zero .v2rs-level-bar-fill { background: var(--v-text-3); }
@media (min-width: 760px) {
  .v2rs-level-row { grid-template-columns: 56px minmax(0, 1fr) 52px 80px 120px; }
}

/* ---------- leaderboard toolbar (segments + estimated chip) ---------- */
.v2rs-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 18px;
  padding: 14px 20px; border-bottom: 1px solid var(--v-border-soft); flex-wrap: wrap;
}
.v2rs-segs {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px;
  background: var(--v-inset); border: 1px solid var(--v-border);
}
.v2rs-seg {
  appearance: none; border: 0; padding: 6px 12px; border-radius: 7px;
  font-family: var(--v-font-mono); font-size: 11.5px; font-weight: 500;
  cursor: pointer; color: var(--v-text-2); background: transparent;
}
.v2rs-seg.is-active { color: var(--v-white); background: var(--v-blue); }
.v2rs-estimated-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--v-r-badge);
  font-family: var(--v-font-mono); font-size: 10px; letter-spacing: 1.3px; color: var(--v-green);
  border: 1px solid color-mix(in srgb, var(--v-green) 35%, transparent); background: var(--v-green-tint);
}

/* ---------- leaderboard table ---------- */
.v2rs-table-head, .v2rs-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 14px;
}
.v2rs-table-head {
  padding: 11px 22px 11px 20px; font-family: var(--v-font-mono); font-size: 10px;
  letter-spacing: 1.3px; color: var(--v-text-3); border-bottom: 1px solid var(--v-border-soft);
}
.v2rs-col-right { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2rs-row {
  align-items: center; padding: 12px 22px 12px 18px;
  border-left: 2px solid transparent; border-bottom: 1px solid var(--v-border-row);
  background: transparent;
}
.v2rs-row:hover { background: var(--v-hover-tint); }
.v2rs-row.is-you, .v2rs-row.is-pinned { border-left-color: var(--v-link); background: var(--v-blue-tint); }
.v2rs-row.is-pinned { border-bottom-color: color-mix(in srgb, var(--v-link) 25%, transparent); }
@media (min-width: 760px) {
  .v2rs-table-head, .v2rs-row { grid-template-columns: 32px minmax(0, 1.6fr) 40px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1101px) {
  .v2rs-table-head, .v2rs-row { grid-template-columns: 40px minmax(150px, 1.6fr) 56px minmax(100px, 1fr) minmax(100px, 1fr) minmax(130px, 1.1fr); }
}

.v2rs-rank-cell { display: flex; }
.v2rs-rank {
  font-family: var(--v-font-mono); font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--v-text-2);
}
.v2rs-rank-1 { color: var(--v-amber); }
.v2rs-rank-2 { color: var(--v2rs-silver); }
.v2rs-rank-3 { color: var(--v2rs-bronze); }
.v2rs-rank-you { color: var(--v-link); }

.v2rs-wallet { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v2rs-handle {
  min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--v-text-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2rs-row.is-you .v2rs-handle, .v2rs-row.is-pinned .v2rs-handle { color: var(--v-heading); font-weight: 700; }
.v2rs-you-chip {
  flex-shrink: 0; font-family: var(--v-font-mono); font-size: 9.5px; letter-spacing: 1.2px;
  color: var(--v-link); border: 1px solid color-mix(in srgb, var(--v-link) 40%, transparent);
  border-radius: 4px; padding: 2px 6px;
}
.v2rs-tier-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--v-r-badge);
  font-family: var(--v-font-mono); font-size: 10.5px; color: var(--v-amber);
  border: 1px solid var(--v-border-amber); background: var(--v-amber-tint); width: fit-content;
}
.v2rs-vol {
  text-align: right; font-family: var(--v-font-mono); font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--v-text-table);
}
.v2rs-rev {
  text-align: right; font-family: var(--v-font-mono); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--v-green);
}
.v2rs-share { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.v2rs-share-bar { flex: 1 1 0; min-width: 0; height: 5px; border-radius: var(--v-r-pill); background: var(--v-border); overflow: hidden; }
.v2rs-share-fill { height: 5px; border-radius: var(--v-r-pill); background: var(--v-green); }
.v2rs-share-pct {
  flex-shrink: 0; width: 42px; text-align: right; font-family: var(--v-font-mono);
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--v-text-2);
}
.v2rs-footer { padding: 14px 22px; font-size: 12.5px; color: var(--v-text-3); }
.v2rs-footnote { margin: 0; }