/* rank.css —— 榜单独立页（2026-10-05 新增，第 4 项）
 *
 * 目标：整页自洽，不依赖首页布局。
 * 视觉语言沿用 home.css（同一套 token），但**不复用首页的 .main/.sidebar 网格** ——
 * 榜单不需要侧栏，单列内容区更清晰。
 */

/* ---------- 顶部 ---------- */

.rank-body {
  /* ⛔ 原写 var(--bg) —— tokens 里没有这个变量（只有 --bg-page），
     未定义变量让整条 background 声明失效。2026-10-06 修正。 */
  background: var(--bg-page);
  color: var(--ink-1);
  min-height: 100vh;
}

.rank-top {
  position: sticky;
  top: 0;
  z-index: 20;
  /* ⛔ 原 var(--bg) 未定义 → color-mix 整条失效 → 透明，
     滚动时下方内容会从吸顶条下面透出来。2026-10-06 修正。 */
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border-2);
  padding: 14px 24px 16px;
}

.rank-top__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto 12px;
}

.rank-top__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  transition: color .15s, border-color .15s;
}
.rank-top__back:hover { color: var(--brand-dark); border-color: var(--brand); }

/* ---------- 类型切换（整页切换，不是同页覆盖） ---------- */

.rank-tabs {
  display: flex;
  gap: 6px;
  max-width: 1180px;
  margin: 0 auto 14px;
  background: var(--brand-tint-3);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 4px;
}

.rank-tab {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.rank-tab:hover { color: var(--ink-1); }
.rank-tab.is-on {
  background: var(--bg-card);
  color: var(--brand-dark);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.rank-title {
  max-width: 1180px;
  margin: 0 auto 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.rank-sub {
  max-width: 1180px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--ink-4);
}

/* ---------- 分组筛选 ---------- */

.rank-filters {
  max-width: 1180px;
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rank-filters__label { font-size: 12px; color: var(--ink-4); flex: none; }
.rank-filters__list { display: flex; gap: 6px; flex-wrap: wrap; }

.rank-filter {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  transition: all .15s;
}
.rank-filter:hover { border-color: var(--brand); color: var(--brand-dark); }
.rank-filter.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 500;
}

/* ---------- 卡片网格 ---------- */

.rank-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px 56px;
}

.rank-grid {
  display: grid;
  /* ⛔ auto-fill + minmax：自动决定列数，不写死 4 列。
     这样桌面 4~5 列、平板 3 列、手机 1~2 列都是自然结果，
     不需要在 media query 里逐档改列数。 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.rank-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-4);
  font-size: 14px;
  padding: 48px 0;
}

/* ---------- 卡片（沿用首页 .site 的骨架，只覆盖差异部分） ---------- */

.rank-card { position: relative; }

.rank-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex: none;
  display: grid;
  place-items: center;
  /* ⛔ overflow:hidden 在 tokens.css 的公共约定里已设，这里不重复 */
}

.rank-card__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rank-card__name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.35;
  /* 单行省略，避免长名把卡片撑高、导致网格参差不齐 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-card__desc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rank-card__no {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 最近收录模式下放的是日期，字号要小一点才放得下 */
.rank-card__no--new {
  background: var(--brand-tint-3);
  color: var(--ink-4);
  font-weight: 500;
  font-size: 10px;
}

.rank-card__clicks {
  font-size: 11px;
  color: var(--ink-4);
  font-family: var(--font-en);
}

/* ---------- 移动端 ---------- */

@media (max-width: 720px) {
  .rank-top { padding: 12px 16px 14px; }
  .rank-main { padding: 14px 16px 40px; }
  .rank-top__bar { margin-bottom: 10px; }
  .rank-title { font-size: 18px; }

  /* 手机上两列刚好放下（250px 最小宽 + 12px 间隙 > 390px 会退到 1 列，
     这里显式降到 160px 让小屏也能看到两列，减少滚动） */
  .rank-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .rank-card__icon { width: 38px; height: 38px; border-radius: 12px; }
  .rank-card__name { font-size: 14px; }
  .rank-card__desc { font-size: 12px; -webkit-line-clamp: 2; }
}