/* ==========================================================================
   filters.css — 列表页的「导航 / 筛选」控件：标签墙 · 分段控件 · 筛选条 · 快捷筛片
   从 components.css 拆出（该文件已 11.97KB 顶到 12KB 上限）。
   这一层的共同点是「改变列表内容/视图的控件」，与 components.css 的
   「静态呈现件」（按钮·胶囊·角标·信任状条）职责不同。
   依赖：tokens.css / base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   标签 / 标签墙（分类、日期、子类入口）
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* 分组标签：贴在一排 tag 前面，说明这排是什么（如「整月归档」） */
.tags-label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-right: 2px;
  font-size: 13px;
  color: var(--txt-3);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  color: var(--txt-2);
}
.tag:hover { color: var(--acc-400); box-shadow: inset 0 0 0 1px var(--acc-400); }
.tag b { color: var(--txt-1); font-weight: 600; }
.tag:hover b { color: var(--acc-400); }
.tag[aria-current="page"] {
  color: var(--acc-400);
  box-shadow: inset 0 0 0 1px var(--acc-400);
}
.tag .n { color: var(--txt-3); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   分段控件（链接式，零 JS；选中态由服务端决定）
   -------------------------------------------------------------------------- */
.seg {
  display: flex;
  gap: var(--sp-4);
  min-height: var(--h-seg);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg a {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  padding: 0 2px;
  font-size: 14px;
  color: var(--txt-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.seg a:hover { color: var(--txt-1); }
.seg a[aria-current="page"] { color: var(--acc-400); border-bottom-color: var(--acc-400); }
/* 计数写成全角括号紧贴档位名（「1折（6）」）：括号本身自带视觉留白，
   再加 gap 会散成「1折 （6）」 —— 所以 .seg a 的 gap 归零。 */
.seg a b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   筛选条
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.filter-bar input,
.filter-bar select {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-field);
  background: var(--bg-2);
  color: var(--txt-1);
  font-size: 14px;
}
.filter-bar input { flex: 1 1 200px; min-width: 0; }
.filter-bar input::placeholder { color: var(--txt-3); }
.filter-bar select { flex: 0 0 auto; }
.filter-bar input:focus,
.filter-bar select:focus { border-color: var(--acc-400); }

/* 左右分置版：搜索吃左侧剩余宽度，版本/类型下拉固定贴右（两端对齐）。
   不换行；窄屏让位折行，搜索与下拉各占整行，避免输入框被压到不可用。 */
.filter-bar--split { flex-wrap: nowrap; }
.filter-bar--split input { flex: 1 1 auto; }
.filter-bar--split select { flex: 0 0 auto; width: 180px; }
@media (max-width: 599px) {
  .filter-bar--split { flex-wrap: wrap; }
  .filter-bar--split input,
  .filter-bar--split select { flex: 1 1 100%; width: 100%; }
}

/* 快捷筛选片 */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips button {
  min-height: 34px;
  padding: 5px 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--txt-2);
  font-size: 13px;
}
.chips button[aria-pressed="true"] {
  color: var(--acc-400);
  box-shadow: inset 0 0 0 1px var(--acc-400);
}
.chips button:hover { color: var(--txt-1); }

.hint { color: var(--txt-3); font-size: 13.5px; padding-top: var(--sp-2); }