/* ============================================================================
   统一「分类 chips」组件（游戏库 × 硬件库第②层 共用一份）
   ----------------------------------------------------------------------------
   2026-09-11 第二十轮：从第十九轮的「同形」推到「同一份」。

   为什么要抽出来（用户原话）：
     「游戏库的分类逻辑：在第一栏显示的，选中就在默认位置；不在第一栏显示的，
       就会把下面的拉到第一个显示。我希望你把这个统一下，包括展示更多，
       还不是各用各的，或者我觉得你直接用游戏库的分类组件不就可以了」

   🚨 **本文件是这两页 chips 的唯一来源**。改这里 = 两页一起改；
      想只改一页，先问「为什么这个差异是这两个页面该有的」，写进注释再动。
      ⚠️ 别在 games.html / hardware.html 的 <style> 里再写 `.lchip` / `.hw-chip`
      的**第二条**规则 —— 页面 <style> 排在本文件之后，会静默盖掉这里的口径，
      过两周又变成「两页不一样」，而且没人记得是哪条盖的。

   ── 组件契约（两页逐条一致，不许有例外）──────────────────────────────
   ① 主行顺序**固定**，选中项**就地高亮**（不跳到最前）
   ② 选中项不在主行 → `.lcrumb` / `.hw-bcrumb` 面包屑**排在第一位**（✕ 可清）
      —— 「列表被筛了，但整条带上找不到是谁筛的」是最难自查的一类 bug
   ③ 「更多 ▾」= 实心纸片、文案**不带数字**、点开是**浮层面板**（不是行内展开）
      面板里是全量 + 底部「收起」；选完即收
   ④ chip 的 ✓ **常驻 + 绝对定位**（不参与布局）→ 选中时整行不重排、容量不掉
   ⑤ 「全部」是基线：不打勾（打了会让人以为它是另一个被选中的类目）

   ── 唯一保留的差异（有实测依据，别顺手抹平）─────────────────────────
   「主行装几个」这件事两页算法不同：
     · 游戏库 = 固定前 10（`PG_MAIN`）+ ≤720 按两行裁切 → 分类名宽窄接近，够用
     · 硬件库 = **实测缩容**（品牌名宽窄差三倍：`ID-COOLING` vs `猫头鹰`，
       写死任何固定值都有品类被挤到第二行）
   差异只在「挑几个进主行」，上面五条契约两页完全一致。

   ── 类名对照（同一份实现，两个命名空间）───────────────────────────────
   | 角色     | 游戏库            | 硬件库第②层      |
   |----------|-------------------|------------------|
   | chip     | `.lchip`          | `.hw-chip`       |
   | 更多     | `.lchip-more`     | `.hw-more`       |
   | 面包屑   | `.lcrumb`         | `.hw-bcrumb`     |
   | 浮层     | `.lib-panel`      | `.hw-panel`      |
   | 裁切     | `.lchip-hid`      | `.hw-chip-hid`   |
   ⚠️ 两个命名空间的类名刻意**不带前缀层级**（不是 `.uchip--games`），
      因为 12 个探针脚本 + 页面 CSS 已经按这两个名字写了一整年，改名等于连环返工。
      真要收敛成一套名字，是「一次性重命名」的独立任务，不混在这次改里。
   ========================================================================== */

/* ---- 1) chip 基座：无描边纸片（方角 4px + surface-2 底 + 1px 纸厚阴影）----
   ⚠️ 无描边是**刻意的**：这一族纸片靠「底色 + 纸厚阴影」表达可点，
      带 1px 描边的是**输入框**（`.lib-search input` / `.hw-q`）—— 两族别混。 */
.lchip,.hw-chip{display:inline-flex;align-items:center;gap:5px;
  cursor:pointer;white-space:nowrap;padding:6px 13px;
  border:none;border-radius:4px;
  background:var(--surface-2);color:var(--muted);
  font-family:'Sora','Noto Sans SC',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:transform .15s var(--ease),box-shadow .15s,color .15s,background .15s}
.lchip:hover,.hw-chip:hover{color:var(--text);transform:translateY(-1px);
  box-shadow:0 6px 14px -8px rgba(60,40,160,.34)}
/* 焦点圈统一 `--accent-ink`（基架 `*:focus-visible` 的同色）——
   游戏库原来是 `--accent-num`（品红），那是「大号数字/热标」专用色，不该拿来画焦点圈。 */
.lchip:focus-visible,.hw-chip:focus-visible,
.lchip-more:focus-visible,.hw-more:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

/* ---- 2) 选中态：纯品牌色实心 + 白字（5.33:1 过 AA）----
   配 ✓ 记号 —— 不靠颜色单打独斗（WCAG 1.4.1）。
   ⚠️ 判据统一用 `aria-pressed`：两页的 JS 都写这个属性，游戏库的 `.on` 类**同时保留**
      （旧探针按类选），但**样式一律走 aria-pressed** —— 一条判据，不会两套打架。 */
.lchip[aria-pressed="true"],.hw-chip[aria-pressed="true"]{
  background:var(--accent-btn);color:var(--on-accent);font-weight:700}
.lchip[aria-pressed="true"]:hover,.hw-chip[aria-pressed="true"]:hover{
  background:var(--accent-btn);color:var(--on-accent)}

/* ---- 3) ✓ 记号：常驻 + 绝对定位，完全不参与布局 ----
   🚨 为什么不用「常驻占位槽」：那会让每枚 chip 宽 ~12px，硬件实测主行容量从 10 掉到 8。
   🚨 也别改成「选中才插进 DOM 的 inline 元素」（游戏库旧写法）：chip 会变宽 →
      整行放不下 → 最右那个被挤掉，用户看到的是「点一下少一个」。
   绝对定位的 ✓ 占 4~10px，正好落在 `padding-left:13px` 里，chip 宽度恒定。 */
.lchip,.hw-chip{position:relative}
.lchip .tick,.hw-chip .tick{position:absolute;left:4px;top:50%;transform:translateY(-50%);
  font-size:9px;line-height:1;opacity:0;pointer-events:none}
.lchip[aria-pressed="true"] .tick,.hw-chip[aria-pressed="true"] .tick{opacity:.9}
/* RTL：✓ 跟着镜像到右侧（绝对定位不继承 direction 的物理左右） */
html[dir="rtl"] .lchip .tick,html[dir="rtl"] .hw-chip .tick{left:auto;right:4px}

/* ---- 4) 0 命中置灰（搜索把某个类目的货全滤掉时出现；目前只有硬件页用）----
   ⚠️ hover 位移必须显式收回：`disabled` 不拦 :hover，不写这行鼠标移上去还会浮一下。 */
.lchip[disabled],.hw-chip[disabled]{background:var(--track);color:var(--muted);
  opacity:.62;cursor:not-allowed;box-shadow:none}
.lchip[disabled]:hover,.hw-chip[disabled]:hover{transform:none;box-shadow:none;color:var(--muted)}

/* ---- 5) 「更多 ▾」：实心纸片，与 chip 完全同族，靠主色文字区分 ----
   🚨 基座属性在**这条里写全**（不靠继承 `.lchip,.hw-chip`）：硬件那颗只挂 `.hw-more`
      —— 让它带 `.hw-chip` 会让 `#hwChips .hw-chip` 把「更多」也算进品牌数
      （探针取「最后一枚 chip」时会拿到它，而不是最后一个品牌）。
      游戏库那颗是 `.lchip.lchip-more` 两个类都挂，写全了也不影响它。
   ⚠️ 别改回虚线框：在这套纸片语言里，**虚线 = 面包屑 / 待补位**，不是「点开还有更多」。
   ⚠️ 文案不带数字（游戏库那颗从来就没有；硬件原来写「展开 +12」，第十九轮已删）。 */
.lchip-more,.hw-more{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;
  padding:6px 13px;border:none;border-radius:4px;background:var(--surface-2);
  color:var(--accent-ink);font-family:'Sora','Noto Sans SC',sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:transform .15s var(--ease),box-shadow .15s,color .15s,background .15s}
.lchip-more:hover,.hw-more:hover{color:var(--text);transform:translateY(-1px);
  box-shadow:0 6px 14px -8px rgba(60,40,160,.34)}
.lchip-more .car,.hw-more .car{display:inline-block;font-size:9px;margin-left:5px;opacity:.8;
  transition:transform .18s var(--ease)}
.lchip-more[aria-expanded="true"] .car,.hw-more[aria-expanded="true"] .car{transform:rotate(180deg)}

/* ---- 6) 面包屑：主行之外的选中项，钉在第一位 ----
   🚨 `line-height:normal` 不能省：`.hw-chip` 是 inline-flex 且带 `align-items:center`，
      面包屑若继承到别处给的行高，会比 chip 高 1px → 被硬件「恒单行」判据读成折行
      （容差 2px 也救不回来，因为差的是**高度**不是 top）。 */
.lcrumb,.hw-bcrumb{display:inline-flex;align-items:center;gap:4px;padding:4px 5px 4px 12px;
  border:1px dashed var(--border-2);border-radius:4px;background:var(--chip);
  font-family:'Sora','Noto Sans SC',sans-serif;font-size:12.5px;font-weight:700;
  white-space:nowrap;line-height:normal}
.lcrumb b,.hw-bcrumb b{cursor:pointer;font-weight:700;font-size:11px;color:var(--muted);
  padding:0 4px;border-radius:4px}
.lcrumb b:hover,.hw-bcrumb b:hover,
.lcrumb b:focus-visible,.hw-bcrumb b:focus-visible{color:var(--bad)}

/* ---- 7) 「更多」浮层：下拉语言（淡边 + 大圆角 + 柔阴影），不横滑、不截断 ----
   grid 等宽铺满。flex-wrap 的死穴：贴纸各按自然宽度排，最后一行注定填不满
   （28 项 × 52–77px 自然宽度，右边缘永远是参差锯齿，行尾还缺一大块）
   → 用户当年直接反馈「下拉尺寸两边会有空白」。
   `auto-fill + minmax(80px,1fr)`：320 屏 3 列 / 430 屏 4 列 / 桌面 12 列，行行顶到左右边。
   ⚠️ 定位祖先：游戏库是 `.lib-bar`、硬件是 `.hw-band`，两边都给了 `position:relative`。 */
.lib-panel,.hw-panel{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:45;
  display:none;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;padding:14px;
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:14px;box-shadow:0 16px 40px -18px rgba(0,0,0,.3)}
.lib-panel.open,.hw-panel.open{display:grid}
/* 等宽列是硬宽度，遇到超长类目名不能撑破格子（否则整列被顶歪）→ 兜个省略号。
   🚨 这里要把 chip 改回 **display:block**：`text-overflow` 只对**块容器**生效，
      chip 基座是 inline-flex（为了 ✓ 绝对定位和「更多」的箭头对齐），flex 容器上
      这条会**静默失效** → 长名直接被切成半截、连「…」都没有（实测 CoolerMaster）。
      浮层里的 chip 只有一行文字 + 一颗绝对定位的 ✓，block 不会带来任何布局差异。 */
.lib-panel .lchip,.hw-panel .hw-chip{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 🚨 底部「收起」行已删（`.lp-close` / `.hw-pclose`），2026-09-11 第二十轮 b。
     原因：展开后「更多 ▾」文案自己就变成「收起 ▾」，浮层里再来一行是同一个动作的第二个入口，
     还独占 grid 末行把全量列表往下顶。收起走：再点「收起 ▾」/ 点浮层外 / Esc 三条退路。
     ⚠️ 别加回来 —— 加回来就是「两个收起按钮」。 */

/* ---- 8) 裁切：真下线（`display:none`），不是 max-height 裁切 ----
   为什么必须打 display:none：被「裁掉」的按钮还留在 Tab 序列里（能聚焦、读屏会照念，
   屏幕上却看不见）→ WCAG 2.4.7 / 4.1.2 双违规。浮层里全量都在，可达性一分不损。 */
.lchip-hid,.hw-chip-hid{display:none}