/* ================================================================
   XP-GROUP.CSS — the Learner Home's weekly leaderboard, everyone
   (../practice/xp-group-view.js, Seth 2026-09-29): under your own bars,
   one row per member, most XP first — rank, name, a bar scaled to the
   leader's week, the number. (🪦 The one-chart-per-member rows of
   2026-09-27/28 went with it.)

   Token-first, no hex (styles/watch.py).
   ================================================================ */

.xp-board {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
}
.xp-board-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.xp-board-title {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.xp-board-note { color: var(--muted); font-size: 12.5px; margin: 0; }
.xp-board-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.xp-board-row {
  align-items: center;
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 1.6em minmax(6em, 14em) minmax(0, 1fr) auto;
}
.xp-board-rank {
  color: var(--muted);
  font-family: var(--xp-mono);
  font-size: 12px;
  text-align: right;
}
.xp-board-row.is-first .xp-board-rank { color: var(--warn); font-weight: 600; }
.xp-board-name {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xp-board-row.is-you .xp-board-name { color: var(--white); font-weight: 600; }
.xp-board-bar {
  background: rgb(var(--tint-rgb) / calc(0.07 * var(--tint-k)));
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.xp-board-fill {
  background: var(--xp-ink);
  border-radius: inherit;
  display: block;
  height: 100%;
  opacity: 0.55;
}
.xp-board-row.is-you .xp-board-fill { opacity: 1; }
.xp-board-xp {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 4.5em;
  text-align: right;
}
.xp-board-row.is-you .xp-board-xp { color: var(--text); }
.xp-you-tag {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  margin-left: 7px;
}

/* ✎ on your own row renames you (Seth 2026-10-01). */
.xp-board-rename {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  margin-left: 4px;
  padding: 0 2px;
}
.xp-board-rename:hover,
.xp-board-rename:focus-visible { color: var(--text); }
.xp-board-name-form { display: flex; flex-direction: column; gap: 2px; grid-column: 2 / 4; overflow: visible; }
.xp-board-name-input {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  min-width: 0;
  padding: 1px 5px;
  width: 100%;
}
.xp-board-name-error { color: var(--warn); font-size: 11px; white-space: normal; }
.xp-board-name.is-mine { align-items: baseline; display: flex; }
.xp-board-name.is-mine .xp-you-tag,
.xp-board-name.is-mine .xp-board-rename { flex: none; }
.xp-board-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xp-board-name-line { align-items: center; display: flex; gap: 4px; min-width: 0; }
.xp-board-name-btn {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  font: inherit;
  font-size: 11px;
  padding: 1px 6px;
}
.xp-board-name-btn.is-save { color: var(--text); }
.xp-board-name-btn:disabled { cursor: default; opacity: 0.5; }
.xp-board-name-form + .xp-board-bar { display: none; } /* the box takes the bar's column */