/* ==========================================================================
   Beltchecker — list card-rows (leaderboards and feeds)
   Markup comes from bcListRow() in functions.php, used by fnListStats(),
   fnListStatsNoFace() and fnDisplayListOfUsers().
   Tokens from styles/modern.css.
   ========================================================================== */

.bc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  min-width: 0;
}
.bc-list-more { display: flex; flex-direction: column; gap: 6px; }
.bc-list-more.w3-hide { display: none !important; }

.bc-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px 10px 10px;
  background: var(--bc-surface-2, #f6f6f8);
  border: 1px solid var(--bc-line, rgba(15, 15, 25, 0.07));
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 0.25s var(--bc-ease, ease),
    box-shadow 0.25s var(--bc-ease, ease),
    background-color 0.25s var(--bc-ease, ease),
    border-color 0.25s var(--bc-ease, ease);
}
.bc-row:hover {
  transform: translateY(-1px);
  background: var(--bc-surface, #fff);
  border-color: var(--bc-line-strong, rgba(15, 15, 25, 0.12));
  box-shadow: var(--bc-shadow-2);
}
.bc-row:focus-within {
  border-color: var(--bc-accent, #5b4bd1);
  box-shadow: var(--bc-ring, 0 0 0 4px rgba(91, 75, 209, 0.16));
}
.bc-list--noface .bc-row { padding-top: 9px; padding-bottom: 9px; }

/* ---------- Rank pill ---------- */

.bc-row-rank {
  flex: 0 0 auto;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bc-surface-3, #eeeef2);
  color: var(--bc-muted, #6b6b76);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bc-row-rank--1 { background: var(--bc-surface-2); color: #7a5600; box-shadow: inset 0 0 0 1px rgba(196, 150, 20, 0.28); }
.bc-row-rank--2 { background: #e9ecf2; color: #464d5b; box-shadow: inset 0 0 0 1px rgba(110, 120, 140, 0.25); }
.bc-row-rank--3 { background: var(--bc-surface-2); color: #7d4520; box-shadow: inset 0 0 0 1px rgba(176, 108, 60, 0.26); }
/* Podium places: trophy, silver and bronze medal (bcRankBadge) */
.bc-row-rank--medal { width: 28px; min-width: 28px; height: 28px; padding: 0; font-size: 14px; }
.bc-row-rank--1.bc-row-rank--medal { background: linear-gradient(145deg, #fff3c4, #f5d56b); color: #9a6a00; }
.bc-row-rank--2.bc-row-rank--medal { background: linear-gradient(145deg, #f4f6fa, #cfd5df); color: #6b7485; }
.bc-row-rank--3.bc-row-rank--medal { background: linear-gradient(145deg, #fbe6d6, #e3a97f); color: #8a4a1f; }

/* ---------- Avatar (markup from showProfileImage, untouched) ---------- */

.bc-row-avatar {
  position: relative;
  z-index: 2;           /* above the stretched name link so the avatar keeps its own click */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  line-height: 0;
}

/* ---------- Name + belt chip ---------- */

.bc-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bc-row-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--bc-ink, #0b0b10) !important;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}
/* Stretch the name link over the whole row: the row is one click target */
.bc-row-name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.bc-row-name:focus { outline: none; }

.bc-row-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--bc-muted, #6b6b76);
  font-size: 12px;
  line-height: 1.2;
}
.bc-row-beltname {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Mini belt: fnDrawBelt() output shrunk to a 48px chip */
.bc-row-belt {
  flex: 0 0 48px;
  width: 48px;
  display: block;
  line-height: 0;
}
.bc-row-belt > div {
  width: 48px !important;
  height: 9px !important;
  padding: 0 7px 0 0 !important;
  margin: 0 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px rgba(15, 15, 25, 0.14) !important;
  overflow: hidden;
  font-size: 0 !important;
}
.bc-row-belt > div > div {
  width: 9px !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
}
.bc-row-belt img { display: none !important; }
/* Ranks drawn as a text block instead of a belt: the belt name beside it says the same */
.bc-row-belt > div:not(.bc-belt) { display: none !important; }
.bc-row-belt:has(> div:not(.bc-belt)) { display: none; }

/* ---------- Metric ---------- */

.bc-row-metric {
  flex: 0 1 auto;
  max-width: 45%;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.bc-row-value {
  color: var(--bc-ink, #0b0b10);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.bc-row-unit {
  color: var(--bc-muted, #6b6b76);
  font-weight: 500;
  font-size: 12px;
}

/* ---------- Phones ---------- */

@media (max-width: 480px) {
  .bc-row { gap: 10px; padding: 9px 12px 9px 9px; }
  .bc-row-rank { min-width: 24px; padding: 0 6px; }
  .bc-row-name { font-size: 14px; }
  .bc-row-metric { max-width: 38%; }
  .bc-row-value { font-size: 13.5px; }
  .bc-row-unit { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-row { transition: none; }
  .bc-row:hover { transform: none; }
}

/* Numbers are never clipped: the metric keeps its natural width and the name gives way */
.bc-row-metric { flex: 0 0 auto !important; max-width: none !important; overflow: visible !important; }
.bc-row-value { overflow: visible !important; text-overflow: clip !important; white-space: nowrap; }
/* Narrow columns: drop the belt name next to the mini belt, keep the belt itself */
@container (max-width: 300px) { .bc-row-beltname { display: none; } }
.bc-list { container-type: inline-size; }