/* ==========================================================================
   搜索结果页
   ========================================================================== */

.sresult {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--gutter) 64px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.sresult__side {
  width: 200px;
  flex: none;
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  /* 避让 .topbar 吸顶条（65px 高 + 20px 呼吸），与 home.css .sidebar 同口径 */
  top: 85px;
}

.sresult__main { flex: 1; min-width: 0; }

/* 顶部收窄的 hero */
.hero--slim {
  background: var(--hero-grad);
  padding: 16px var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.search--page { width: min(680px, 100%); }

.sresult__meta {
  width: min(680px, 100%);
  font-size: 13px;
  color: var(--ink-4);
}
.sresult__meta b { color: var(--ink-1); font-weight: 600; }

/* 结果卡片：复用站点卡片样式，列表单列 */
.rlist { display: flex; flex-direction: column; gap: 10px; }

.rcard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 16px 18px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.rcard:hover {
  transform: translateY(-1px);
  border-color: var(--border-2);
  box-shadow: 0 6px 18px -6px rgba(46, 128, 115, .1);
}

.rcard__icon {
  width: 40px; height: 40px; border-radius: 12px;
  flex: none; display: grid; place-items: center;
}

.rcard__body { flex: 1; min-width: 0; }

.rcard__name {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.rcard__desc {
  font-size: 13px;
  color: var(--ink-3);
  margin: 4px 0 0;
  line-height: 20px;
}
.rcard__desc mark {
  background: var(--warn-tint);
  color: var(--warn);
  border-radius: 3px;
  padding: 0 2px;
}

/* ⛔ .rcard__tags（结果行的站点标签行）已于 2026-10-07 随标记一起移除 ——
   只在有标签时渲染，会让同一列表里的结果行高矮不齐。
   名字后的「推荐 / 新收录」是行内 .rtag 徽标，规则仍在，继续使用。 */
.rtag {
  height: 20px; padding: 0 8px; border-radius: 10px;
  font-size: 11px; display: inline-flex; align-items: center;
}

.rcard__cat {
  font-size: 12px; color: var(--ink-4);
  padding-top: 3px; flex: none;
}

.ractive { background: var(--brand-tint); }
/* ⛔ 文字色必须用 --brand-ink，不能用 --brand：
   把 --brand 当文字色是本项目的老毛病，浅色主题下只有 2.62:1（AA 要求 4.5:1）。
   --brand 只能做填充/图形 —— 上面 .ractive 的 background 用它是对的。 */
.ractive .cat__label { color: var(--brand-ink); font-weight: 500; }

/* 空状态 */
.rempty {
  text-align: center;
  padding: 72px 20px;
  color: var(--ink-4);
}
.rempty__t { font-size: 16px; color: var(--ink-2); margin: 0 0 8px; }
.rempty__s { font-size: 13px; margin: 0 0 20px; }

.rsug {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}

@media (max-width: 860px) {
  .sresult { flex-direction: column; }
  .sresult__side { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; }
  .sresult__side .cat { width: auto; }
}

/* ---------- 二级筛选条（结果列顶部，2026-10-07） ----------
   ⛔ 位置由实测决定，不是随手放的：
      1) 不放侧栏 —— 一级 6 项 + 二级 9 项 = 一屏 15 行，用户反馈「很拥挤」；
      2) 不放 <header> —— header 的内容是**居中**的（.hero--slim 为 align-items:center，
         搜索框与 #meta 宽 min(680px,100%)），实测 1280px 下 #meta 的 left=300，
         而结果列 left=248，两者不在同一条轴上，塞进 header 会和下面的排序条错开一大截；
      3) 放结果列顶部 → 与 .rbar **同轴**（同一个父容器 #list，同样的左边界）。
   ✅ 该分组没有二级时 subBarHTML() 返回空串，整条不渲染 → 不留空带。
   ✅ 复用 home.css 的 .chip 视觉（与 .rbar__b 同为 30px 高 / 15px 圆角 / 1px 描边），
      ⛔ 这里**不要**重复定义 .chip，否则后加载的会盖掉前面那处（同 .siteimg 的坑）。 */

.catbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;      /* 窄屏换行，避免横向溢出 */
  gap: 6px;             /* ⛔ 6px 与 .rbar 一致，且不是随手取的。以下数字**全部实测**
                           （_theme_design/_quick_catbar.cjs + /tmp/_m.cjs，1280px 视口）：
                           列表可用宽 1008px；10 个 chip（全部 + 9 个二级）在
                           「细分」标签还在时（gap 6 / 内边距 12）实占 956px、余量 52px。
                           2026-10-07 按用户要求移除「细分」标签后：chip 宽度和 870px
                           + 9×6px gap = 924px，余量 84px，单行 30px 更稳。
                           （历史：内边距 14px 时 996px、余量仅 12px，gap 8px 会破 1008px
                           把「调试工具」顶成孤行 —— 故 gap 收 6px、内边距收 12px。） */
  margin-bottom: 12px;  /* 到下方 .rbar 的间距；.rbar 自己再用 14px 到结果列表 */
}

/* ⛔ .catbar__lbl（「细分」标签）已于 2026-10-07 按用户要求移除：
   它会把首个 chip 顶右，与下方 .rbar 的「综合」按钮错不开轴。去掉后首 chip 同轴。
   连带删除其样式块（含 --ink-3 对比度注释，历史结论留在 _theme_design/_ink4_audit.md）。 */

/* ⚠️ P1 对齐（2026-10-07 visual-architect-2 复核）：.chip 本体 padding 为 0 14px（首页在用），
   而相邻的 .rbar__b 为 0 12px；同长度标签在上下两行会差 4px 宽（实测：chip 99px vs rbar__b 95px，
   10/10 样本差值恒为 4px）。只在 .catbar 作用域内收齐到 12px。
   ⛔ 不改 .chip 本体（首页也在用，且注释已警告勿重复定义）。
   为什么不反过来把 .rbar__b 加到 14px：catbar 与 rbar 是**上下相邻**的两行，同屏可比；
   而 catbar 与首页 chip 分属不同路由，没有并排参照物，那 4px 读不出来。
   收齐后 catbar 内容宽由 996px 降到 956px（余量 52px），单行更稳。 */
.catbar .chip { padding: 0 12px; }

/* 排序条 */
.rbar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  align-items: center;
}
.rbar__b {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  font-size: 13px;
  color: var(--ink-3);
  border: 1px solid var(--border-2);
  transition: all .16s;
}
/* ⛔ 文字色用 --brand-ink，不用 --brand：--brand 是本项目的**填充/图形**色，
   当文字色在浅色主题下只有 2.62:1（AA 要 4.5:1）。border-color 用它是对的。 */
.rbar__b:hover { color: var(--brand-ink); border-color: var(--brand); }
.rbar__b.is-on {
  background: var(--brand-tint);
  border-color: transparent;
  color: var(--brand-ink);
  font-weight: 500;
}

/* 站点图标撑满容器的公共约定见 home.css 的 .siteimg / .siteicon-svg，
   ⛔ 本文件**不要**再写 .siteimg 覆盖 —— 各页面的尺寸容器不同，
   但「填满且不变形」这条规则必须只有一处定义，否则后加载的会盖掉前面的。 */