/* 列表页：/notes 与 /desk（参考 design/04、design/05）。 */

.list-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-16);
}

/* 宽屏时右侧出侧栏；窄屏自然堆叠成一列（design/05） */
@media (min-width: 900px) {
  .list-layout { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }

  /* 侧栏钉住：翻着长长的列表时，筛选入口一直在手边。
     `top` 要让开上面那条同样钉住的页头。用 sticky 不用 fixed——
     它仍然在文档流里占着那一列，侧栏比屏幕高时也能自己滚完。 */
  .list-side {
    position: sticky;
    top: var(--header-h);
    max-height: calc(100vh - var(--header-h) - var(--space-4));
    overflow-y: auto;
    /* 侧栏真的滚起来时，别把内容贴在滚动条上 */
    scrollbar-width: thin;
  }

  /* 分类在侧栏里已经有一份（还带计数），顶上这排就是重复的。
     选择器要比后面那条 `.chips { display: flex }` 更具体，否则同权重时
     写在后面的赢。 */
  .list-main > .chips-category { display: none; }
}

.greeting { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); }

/* ── 分类 chips ────────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
}

.chip:hover { color: var(--ink); border-color: var(--muted); }

/* 选中：拿强调色描边 + 一层很浅的同色底，不做成实心色块。
   实心块在深色底上是屏幕上最亮的一处，比文章标题还抢眼，而它只是个筛选器。 */
.chip-on {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}
.chip-on:hover { color: var(--accent); }

/* 正在生效的那几条筛选，每条后面跟一个「×」 */
.chips-active .chip-x { margin-left: var(--space-2); opacity: 0.7; }
.chips-active .chip-on:hover .chip-x { opacity: 1; }

/* ── 卡片 ──────────────────────────────────────────────── */

.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

.card-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: var(--space-3) 0 0;
  text-wrap: balance;
}

.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--accent); }

.card-summary { color: var(--muted); margin: var(--space-3) 0 0; }

.card-tags { margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 标签是筛选入口，不是装饰：做成可点的，有 hover 和选中态 */
.tag {
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tag:hover { color: var(--accent); }

/* 侧栏里选中的标签：给它一个底，光靠变个色在一堆标签里认不出来 */
.side-tags .tag {
  padding: 2px var(--space-2);
  margin: -2px calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
}
.tag-on { color: var(--accent); }
.side-tags .tag-on { background: var(--accent-tint); }

.empty {
  color: var(--muted);
  text-align: center;
  padding: var(--space-16) 0;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ── 翻页 ──────────────────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
}

.pager a { color: var(--accent); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.pager-at { color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── 侧栏 ──────────────────────────────────────────────── */

.list-side { display: flex; flex-direction: column; gap: var(--space-4); }

.side-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
}

.side-title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  letter-spacing: 0.08em;
}

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

.side-list a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
}

.side-list a:hover { color: var(--ink); }

/* 侧栏里的选中：左边一道强调色的竖线 + 浅色底。
   侧栏是一列窄条，描边会把每一行框成一个盒子，反而更乱。 */
.side-list a {
  padding-inline: var(--space-3);
  margin-inline: calc(-1 * var(--space-3));
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
}
.side-list a.on {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-tint);
  border-left-color: var(--accent);
}

.side-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.side-tags { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── 搜索 ──────────────────────────────────────────────── */

.search-page { padding-bottom: var(--space-16); max-width: 46rem; }

.search-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }

.search-form input {
  flex: 1;
  font: inherit;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.search-form input:focus { border-color: var(--accent); }

.search-form button {
  min-height: var(--tap);
  padding: 0 var(--space-6);
  background: var(--ink);
  color: var(--bg);
  border: 0;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}

.search-count { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); }

/* 命中词。用朱红但不铺底，克制一点 */
.card-summary mark {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

/* ── 归档 ──────────────────────────────────────────────── */

.archive { padding-bottom: var(--space-16); max-width: 46rem; }

.archive-heading {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0;
}

.archive-total { color: var(--muted); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-8); }

.archive-year { margin-bottom: var(--space-8); }

.archive-year h2 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: 0.2em;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.archive-year ul { list-style: none; margin: 0; padding: 0; }

.archive-year li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.archive-year time {
  flex: 0 0 3.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.archive-year a { text-decoration: none; }
.archive-year a:hover { color: var(--accent); }

.list-heading {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0 0 var(--space-6);
}