/* ==========================================================================
   全部文章归档页 · agh-all
   --------------------------------------------------------------------------
   配合 usr/themes/joe/archives-all.php（自定义页面模板）使用。

   ⚠️ 为什么不写进 brand.css：
      brand.css 是"把 joe 主题配色映射到站点主色系"的文件，24 KB，
      里面全是主题变量的覆盖。这个页面是本项目新增的独立模板，
      它的样式放进 brand.css 会让那个文件的职责变混。
   ⛔ 无外部资源（字体/图标/CDN 一律不引）。
   ========================================================================== */

.agh-all__count {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--minor, #64748b);
}

.agh-all__count b {
  color: var(--theme, #2f6bff);
  font-size: 15px;
}

.agh-all {
  margin: 0;
}

.agh-all__year {
  margin: 22px 0 8px;
  padding: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--main, #0f172a);
  border-bottom: 1px solid var(--classA, #e2e8f0);
}

/* 第一组的年份标题不需要上边距（它紧跟在"共 N 篇"后面） */
.agh-all__year:first-child {
  margin-top: 0;
}

.agh-all__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-all__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 2px;
  border-radius: 6px;
  transition: background-color .15s ease;
}

.agh-all__item:hover {
  background: var(--classD, #f7fafc);
}

.agh-all__item time {
  flex: 0 0 auto;
  width: 46px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--minor, #64748b);
}

.agh-all__link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--routine, #475569);
  text-decoration: none;
  /* 长标题换行而不是横向溢出（移动端 320px 必须验证） */
  overflow-wrap: anywhere;
}

.agh-all__link:hover {
  color: var(--theme, #2f6bff);
}

/* 深色模式：joe 用 [data-mode="dark"] */
html[data-mode="dark"] .agh-all__year,
body[data-mode="dark"] .agh-all__year {
  color: #e8edf5;
  border-bottom-color: #2a3242;
}

html[data-mode="dark"] .agh-all__item:hover,
body[data-mode="dark"] .agh-all__item:hover {
  background: #1c2230;
}

html[data-mode="dark"] .agh-all__link,
body[data-mode="dark"] .agh-all__link {
  color: #c3ccda;
}

html[data-mode="dark"] .agh-all__link:hover,
body[data-mode="dark"] .agh-all__link:hover {
  color: #7aa6ff;
}

html[data-mode="dark"] .agh-all__count,
body[data-mode="dark"] .agh-all__count {
  color: #8b97a8;
}

@media (max-width: 480px) {
  .agh-all__item {
    gap: 9px;
    padding: 6px 2px;
  }

  .agh-all__item time {
    width: 42px;
    font-size: 11.5px;
  }

  .agh-all__link {
    font-size: 13.5px;
  }
}