/* ranking-accent.css — 积分排名页 per-page accent (Phase 13 Task X)
 *
 * 约束 (binding):
 *   - C11: NO @keyframes — transitions + rAF only
 *   - C13: border-radius: 0 — 全站统一无圆角 (本文件无例外)
 *   - tokens.css 变量唯一来源 — 无 raw hex
 *   - 单 var(--ease) + 双时长 var(--dur-micro) / var(--dur-reveal)
 *   - 错误文案 ≤20 中文字符 (Global Constraint #5)
 *
 * 视觉定位: 编辑型榜单表 (BWF world rankings 气质),不用 wine 强调,
 *           与 matches / trainings 等"赛场"页面保持一致的 forest 主导,
 *           用 tabular-nums 强化数字对比。
 */

/* ===== hidden attribute override (binding: skeleton + table + empty state
 *      all toggle via `node.hidden = true`. Without this rule, .ranking-skeleton's
 *      `display: flex` would override the browser's [hidden] { display: none }.) ===== */
[hidden] { display: none !important; }

/* ===== error banner (matches il-error / match-detail__error pattern) ===== */
.ranking-error {
  padding: 12px 16px;
  margin: 16px 0;
  border: 1px solid var(--accent-wine);
  color: var(--accent-wine);
  background: var(--wine-overlay-12);
  font-size: 14px;
}

/* ===== loading skeleton (C11: no @keyframes — static placeholder only) =====
 * Skeleton rows render at fixed low opacity. They are replaced by the real
 * table as soon as the fetch resolves, so the lack of animation is fine —
 * the user sees: (1) gray placeholders, (2) real data appears.
 */
.ranking-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}
.ranking-skeleton__row {
  height: 56px;
  background: var(--color-surface-variant);
  opacity: 0.5;
}

/* ===== table chrome ===== */
.ranking-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
}
.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg);
}
.ranking-table thead th {
  font: 500 11px/18px var(--font-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-on-surface-variant);
  white-space: nowrap;
}
.ranking-table thead th.ranking-table__col-num { text-align: right; }
.ranking-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--color-surface-variant);
  vertical-align: baseline;
  transition: background var(--dur-micro) var(--ease);
}
.ranking-table__col-ranking {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: var(--fg);
  width: 64px;
}
.ranking-table__col-name {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
}

/* ===== name cell with avatar (UI Phase 8 T4c 2026-10-08) =====
 * 36×36 圆形头像嵌在队员名前, 头像无则 fallback 到 forest-bg CJK 首字
 * .ranking-avatar 是 C13 (border-radius: 0) 的一个例外: 圆形头像需 50%
 */
.ranking-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}
.ranking-name-cell__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-variant);
  flex: 0 0 auto;
  display: block;
  transition: opacity var(--dur-micro) var(--ease);
}
.ranking-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-utility);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--color-on-surface-variant);
  user-select: none;
}
.ranking-table__col-num { text-align: right; width: 96px; }
.ranking-table__col-date { text-align: right; width: 120px; }

.ranking-table__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.ranking-table__num--muted { color: var(--color-on-surface-variant); }

/* ===== row hover + click ===== */
.ranking-table__row {
  cursor: pointer;
  transition:
    background var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.ranking-table__row:hover {
  background: var(--color-surface-variant);
}
.ranking-table__row:hover td:first-child {
  color: var(--accent);
}
.ranking-table__row:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ===== stagger entrance (matches il-card stagger pattern) ===== */
.ranking-table__row[data-stagger] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}
.ranking-table__row[data-stagger].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Even if user hovers before reveal completes, respect their action */
.ranking-table__row[data-stagger].is-revealed:hover { transform: translateY(-1px); }

/* ===== footnote ===== */
.ranking-footnote {
  margin: 16px 0 0;
  font: 500 11px/18px var(--font-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

/* ===== empty state ===== */
.ranking-empty {
  margin: 64px 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: var(--color-on-surface-variant);
}

/* ===== mobile ===== */
@media (max-width: 600px) {
  .ranking-table { font-size: 13px; }
  .ranking-table thead th { padding: 10px 8px; font-size: 10px; }
  .ranking-table tbody td { padding: 12px 8px; }
  .ranking-table__col-ranking { font-size: 18px; width: 44px; }
  .ranking-table__col-num { width: 64px; }
  .ranking-table__col-date { width: 88px; }
  /* Hide total + matches columns on mobile to keep name + rolling visible */
  .ranking-table thead th:nth-child(4),
  .ranking-table tbody td:nth-child(4),
  .ranking-table thead th:nth-child(5),
  .ranking-table tbody td:nth-child(5) { display: none; }
}

/* ===== reduced-motion guard (binding, no exceptions) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}