/* ================================================================
   resources.css — 现货资源找货页（@layer pages）
   D 方向：分类横排在上部，选中品名后按 dim_labels 出动态维度，
   结果区一张宽表（品名/规格/材质/钢厂/市场/价格/操作），窄屏拆成卡片。
   依赖全局 tokens / base / components；本文件只放本页独有结构。
   ================================================================ */
@layer pages {

  .resources-page {
    padding: var(--space-lg) 0 var(--space-xl);
  }

  /* ================================================================
     1. 分类区（下钻式：路径行 + 当前层）
     ★ 2026-09-11 删掉了 overflow-x:auto + white-space:nowrap。
       横滑是原设计定的行为，不是降级产物；推翻它的理由是实测：390px 上三行分别
       实际宽 1318 / 2017 / 531px、可见 324px，被切掉的正是高亮的选中项。
       现在两行都 wrap，本页因此不再有任何横切元素。
     ================================================================ */
  .resource-cats {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
  }

  .resource-cats__path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
  }
  .resource-cats__crumb {
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  .resource-cats__crumb:hover { color: var(--color-primary); }
  .resource-cats__crumb.is-active {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-bold);
  }
  /* 分隔符走 CSS：它是标点、中英完全一样，进语言包只会多两条永远同值的 key，
     而且用户选中复制分类名时会把它一起带走。 */
  .resource-cats__crumb + .resource-cats__crumb::before {
    content: "\203A";
    margin-right: 6px;
    color: var(--color-text-muted);
  }

  .resource-cats__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-bg-light);
  }
  .resource-cats__item {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-light);
    text-decoration: none;
  }
  .resource-cats__item:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
  }
  .resource-cats__item.is-active {
    background: var(--color-primary);
    color: var(--color-text-white);
  }

  /* 分类限高展开开关：桌面不存在（面板从不限高），候选资格只在 <=991.98px 打开
     （见下面第 6 节），真正显示与否还要 JS 探测到真溢出才摘掉 hidden 属性
     （resources.phtml 的 refreshCatsOverflow）。这里的 display:none 是桌面端的默认值，
     也是无 JS/JS 判定不溢出时的最终落点。 */
  .resource-cats__toggle {
    display: none;
    margin-top: var(--space-xs);
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
  }
  /* 两句文案都渲染在 DOM 里，靠 aria-expanded 切换可见的那一句——不是 JS 现改 textContent。 */
  .resource-cats__toggle-label--less { display: none; }
  .resource-cats__toggle[aria-expanded="true"] .resource-cats__toggle-label--more { display: none; }
  .resource-cats__toggle[aria-expanded="true"] .resource-cats__toggle-label--less { display: inline; }

  /* ================================================================
     2. 已选条件（chips）
     ================================================================ */
  .resource-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  .resource-chips__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    text-decoration: none;
  }
  .resource-chips__clear {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: underline;
  }

  /* ================================================================
     3. 动态维度筛选
     ================================================================ */
  /* 抽屉开关：桌面不存在（面板常驻展开），<992px 才出现。
     类名与 /products 一致（products.phtml + products.css 的 991.98 媒体查询）——
     两页行为相同，不另造一套；products.css 不在本页加载，所以这里要有自己的一份。 */
  .filter-toggle { display: none; }

  .resource-dims {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  /* 筛选区内嵌搜索：走既有的 keyword 参数，表单 GET 提交，零 JS */
  .resource-dims__search {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-bg-light);
  }
  .resource-dims__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-strong);
    background: var(--color-bg-white);
  }
  .resource-dims__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-xs) 0;
  }

  .resource-dims__row + .resource-dims__row {
    border-top: 1px solid var(--color-bg-light);
  }
  /* 「显示前 20 / 共 727」——让「被截断」这件事可见。
     它挂在维度标签里，字重与颜色都压到最弱一档：它是注解，不是标签本身。 */
  .resource-dims__count {
    display: block;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }
  .resource-dims__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-strong);
  }
  .resource-dims__options {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }
  /* 维度标题 + 「清空本项」。桌面是左侧一列，窄屏由媒体查询摊成整行。 */
  .resource-dims__head {
    flex: 0 0 96px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-top: 6px;
  }
  .resource-dims__clear-dim {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: underline;
  }

  /* ★ 复选框本身保持可见：这是表单模型，勾选态必须一眼看得出来。
     只靠背景色区分的话，色觉障碍者分辨不出，而且看起来与改造前的单选链接一模一样。 */
  .resource-dims__option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
  }
  .resource-dims__option input {
    margin: 0;
    accent-color: var(--color-primary);
  }
  .resource-dims__option:hover {
    border-color: var(--color-primary);
  }
  /* ★ 2026-09-16 全分支终审 I2：表单模型下「勾选态」是用户当下的意图，不是已生效的筛选，
     两者在「正在选、还没点应用」这段窗口里会分岔——取消勾一个已生效的值，复选框空了但
     `.is-active`（服务端渲染，页面加载那一刻的静态类）还亮着；勾上一个新值，复选框打勾了
     但 `.is-active` 还是灰的。这是本轮（表单替代链接导航）新引入的状态，链接模型下不存在
     （点即生效，从无这个窗口）。
     ⚠ **不能写成 `.is-active, :has(input:checked)` 简单并列（逗号是 OR）**：
     `.is-active` 是页面渲染时钉死的静态类，用户取消勾选后它不会消失，OR 出来的效果是
     「只能点亮、点不灭」——实测勾灭天津后复选框已空，药丸背景色 `rgb(231,238,248)`
     与勾选前逐字节不变，**完全没有修好「取消勾一个已生效的值」这一半**，另一半
     （勾选新值即时点亮）反而是好的，因为 `.is-active` 那时本来就是假。
     必须用 `@supports selector()` 让支持 `:has()` 的浏览器里 `.is-active` 让位、
     只认实时勾选状态；不支持的浏览器整个查询块不生效，落回原来的 `.is-active` 单判据
     （不会撒谎，只是不如 `:has()` 及时——刷新页面后两者总会重新同步）。 */
  .resource-dims__option.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
  }
  @supports selector(:has(a)) {
    /* 先把 `.is-active` 的效果原地清空——支持 :has() 的浏览器里它不再是判据来源，
       只用来占位（服务端仍会渲染这个类，但视觉上不再生效）。 */
    .resource-dims__option.is-active {
      border-color: var(--color-border);
      background: none;
      color: var(--color-text-secondary);
    }
    /* 唯一权威判据：复选框此刻是否勾选，跟手，覆盖上面「清空」规则。 */
    .resource-dims__option:has(input:checked) {
      border-color: var(--color-primary);
      background: var(--color-primary-light);
      color: var(--color-primary);
    }
  }

  /* 底部操作条：提交 + 清空全部 */
  .resource-dims__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    margin-top: var(--space-xs);
    border-top: 1px solid var(--color-bg-light);
  }
  .resource-dims__clear-all {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: underline;
  }

  /* ================================================================
     4. 结果区头部：计数 / 汇率提示 / 排序
     ================================================================ */
  .resource-results__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }
  .resource-results__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }
  .resource-results__rate {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }
  /* 免责提示：与汇率提示同一级弱化小字，独占一行，压在表格上方 */
  .resource-results__note {
    margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--color-text-muted);
  }
  .resource-results__note-link {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .resource-results__note-link:hover {
    color: var(--color-primary);
  }
  .resource-results__sort {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
  }
  .resource-results__sort-item {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
  }
  .resource-results__sort-item.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
  }
  .resource-results__empty {
    padding: var(--space-2xl) 0;
    text-align: center;
    color: var(--color-text-muted);
  }

  /* ================================================================
     5. 结果表
     ================================================================ */
  /* 宽表在自己内部滚动，绝不能让 body 横向溢出 */
  .resource-table-wrap {
    overflow-x: auto;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  /* 表头固定七列，`table-layout: fixed` 配下面那份显式宽度——
     切换分类时行数据变了但列宽不再跟着内容抖动。
     ⚠ fixed 布局下超宽内容会被裁切而不是撑开表格，所以规格/材质/钢厂/市场四格都显式
     接了省略号处理（见「溢出处理」小节），不能只加 table-layout 不管溢出。 */
  .resource-table {
    width: 100%;
    /* 七列各自的最小可读宽加起来约 950px。低于 992 的视口走卡片（见文末媒体查询），
       所以这个值只在 ≥992px 时生效，实际不会触发横向滚动——留着是兜底。 */
    min-width: 950px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
  }
  /* 七列（2026-09-08 起）：品名 | 规格 | 材质 | 钢厂 | 市场 | 价格 | 操作。
     这就是设计文档 §4 定义的那张表——规格/材质原先被并成品名下的一条副行，
     是写实施计划那步降级掉的，没有记过任何理由。
     ⚠ 改列数要同时改：本组宽度、下面「溢出处理」那组的列序号、
       文末媒体查询里的网格区域，以及 resources.phtml 的 <th> 与 resource-row.phtml 的 <td>。 */
  .resource-table th:nth-child(1),
  .resource-table td:nth-child(1) { width: 20%; }   /* 品名（两行 clamp） */
  .resource-table th:nth-child(2),
  .resource-table td:nth-child(2) { width: 15%; }   /* 规格（最长 21 字符，如 Φ100*200*5.75） */
  .resource-table th:nth-child(3),
  .resource-table td:nth-child(3) { width: 11%; }   /* 材质（最长 14 字符，如 Q195-235） */
  .resource-table th:nth-child(4),
  .resource-table td:nth-child(4) { width: 13%; }   /* 钢厂 */
  .resource-table th:nth-child(5),
  .resource-table td:nth-child(5) { width: 10%; }   /* 市场 */
  /* 价格不能再窄：未登录时这一格印的是「Sign in to view price」，约需 210px */
  .resource-table th:nth-child(6),
  .resource-table td:nth-child(6) { width: 19%; }   /* 价格（含美元/说明文字） */
  .resource-table th:nth-child(7),
  .resource-table td:nth-child(7) { width: 12%; }   /* 操作 */

  .resource-table thead th {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .resource-table tbody td {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--color-bg-light);
    vertical-align: top;
  }
  /* 溢出处理：规格/材质/钢厂/市场都是单行值，定宽后用省略号收尾，
     比让它挤爆行高更「看起来是设计的」。四格在模板里都带了 title，裁掉的值悬停可读。
     ⚠ 只有品名走两行 clamp（见下），这四格不要跟着改成折行——它们折行会把行高顶起来，
       而它们是次要信息。 */
  .resource-table tbody td:nth-child(2),
  .resource-table tbody td:nth-child(3),
  .resource-table tbody td:nth-child(4),
  .resource-table tbody td:nth-child(5) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* ★★ 这个类挂在 **<td> 本身** 上，所以它**绝不能改变 display**。
     曾经写的是 `display:flex; flex-direction:column; gap:2px; min-width:0`，
     后果是：td 一旦不是 `table-cell` 就**退出 table-layout:fixed 的列宽计算**，
     浏览器给它套一个匿名单元格，flex 盒子自己缩到内容宽度——
     实测 1440 视口下 `<th>` 是设计好的 464px，而这个 `<td>` 只有 158px（34% 的 34%），
     第一列与第二列之间还空出一大片。于是**英文站每一行品名都被裁成 `Hot-…`**
     （最长英文分类名需要 313px，实际只剩 126px 内容宽），中文站因为品名最长 5 个字
     恰好卡在临界点上看不出来，所以这个 bug 在中文界面下是隐形的。
     （2026-09-08 规格/材质拆成独立列后，这一格里只剩品名一个 span，更没有理由用 flex 了。）
     ⚠ 以后想给这一格加图标、加徽标而需要 flex 的话，**加一层内部 div 再 flex**，
     不要动这个 td。 */
  /* 品名最多两行，第二行末尾省略号（写法对齐 utilities.css 的 .u-text-clamp-2，
     这里不直接挂那个工具类是因为还要叠字重/字色，且移动端要整条解除）。
     ★ 为什么不是单行 nowrap + ellipsis：那样「够不够显示」变成了视口宽度的函数。
       实测最长英文分类名需要 313px，而品名列只有表宽的 23%，任何视口下都不够单行放完。
       两行 clamp 把「够不够显示」这个变量整个消掉：长名换行而不是被砍，代价是那一行更高。
       130 个分类的英文名目前还全是 AI 草稿，人工定稿后只会更长，不会更短。
     ⚠ 规格/材质/钢厂/市场四列保持单行省略号——它们是次要信息，跟着折行会把行高再顶一截。 */
  .resource-row__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-strong);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 规格与材质：次要信息，比品名弱一档，但比钢厂/市场重要（它们是买家真正在比的参数） */
  .resource-row__spec,
  .resource-row__material {
    color: var(--color-text-secondary);
  }
  .resource-row__price {
    white-space: nowrap;
  }
  .resource-row__price strong {
    color: var(--color-text-strong);
    font-size: var(--font-size-md);
  }
  .resource-row__unit {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-left: 2px;
  }
  /* 价格口径「FOB China main port」：价格上方一行小字。每个价格都要看得出是 FOB，所以手机卡片上也印 */
  .resource-row__basis {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: normal;
  }
  .resource-row__signin {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    text-decoration: underline;
  }
  .resource-row__ask {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  /* 分页条：products 页那套是内联 style="display:flex;justify-content:center;margin-top:24px"，
     本页不许照抄——内联样式优先级高于媒体查询，会让下面（或将来）任何响应式覆盖悄悄失效。
     这里用 class 走 CSS，margin 也走间距刻度而不是写死像素。 */
  .resource-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--space-lg);
  }

  /* ================================================================
     6. 移动端
     ================================================================ */
  @media (max-width: 991.98px) {
    /* ------------------------------------------------------------------
       分类区限高：两行 + 展开开关（2026-09-17）
       只在 JS 探测到 #resourceCatsRow 真溢出时才会被挂上 .is-collapsible
       （resources.phtml 的 refreshCatsOverflow）——中文站 9 个顶层折 2~3 行本来就
       不溢出，永远不会被挂上，这条规则对它形同虚设，是刻意的（判据必须是运行时溢出，
       不能是「项数 > N」这类服务端启发式）。
       ⚠ max-height 是实测出的「正好两行」高度，不是拍的：headless Chrome + CDP 量
       /resources?cat=28（中厚板，22 个子分类）英文页在这一档宽度（>374.98px，即
       375~991.98px）下 .resource-cats__item 的盒高 = 33.6875px（padding 6px 14px，
       font-size 14px）。两行内容高 = 2×33.6875 + 行间距 8px(--space-sm，本档 gap 未收紧)
       = 75.375px；.resource-cats__row 自身还有 padding-top 4px(--space-xs) + border-top
       1px，box-sizing:border-box 下两者都算进最终高度，故 max-height = 75.375+4+1
       = 80.375px。改药丸的 padding/字号，或改 .resource-cats__row 的 gap/padding，
       都要重新量、重新写这个数（第 7 节 ≤374.98px 另有一份，理由同下）。 */
    .resource-cats__row.is-collapsible:not(.is-expanded) {
      max-height: 80.375px;
      overflow: hidden;
      /* 渐隐遮罩兜底：万一日后字号/padding 改动让两行高度不再是行高的整数倍，
         露出的半行会被淡出吃掉，退化成「看起来还有更多」而不是「一行被硬切一半」。 */
      mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
    }
    /* [hidden] 与这条类选择器同特异度（0,1,0 vs 0,1,0）——写成 :not([hidden]) 而不是
       裸类选择器，是为了让 hidden 属性在源码顺序/特异度打平时仍然赢：author 样式本来就
       盖得过 UA 的 [hidden]{display:none}，裸写 `.resource-cats__toggle{display:...}`
       会让 JS 还没判定、hidden 属性还在时按钮就被 CSS 强行显示出来。 */
    .resource-cats__toggle:not([hidden]) {
      display: inline-flex;
      align-items: center;
    }

    /* 筛选面板折叠为抽屉：默认收起，结果表立即可见，点开关才展开。
       实测动机：2026-09-11 逐维度折叠之后手机裸页维度区仍占 501px，
       结果表要到 902px 之后才出现（1.1 屏）。要进第一屏只能整体收起。 */
    .filter-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      width: 100%;
      padding: 11px 14px;
      margin-bottom: var(--space-sm);
      background: var(--color-primary);
      color: var(--color-text-white);
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-bold);
      cursor: pointer;
    }
    .filter-toggle__count {
      display: inline-block;
      min-width: 18px;
      padding: 0 5px;
      border-radius: var(--radius-pill);
      background: var(--color-bg-white);
      color: var(--color-primary);
      font-size: var(--font-size-xs);
      text-align: center;
    }
    /* 纯 CSS 三角，不引图标字体：本页不加载 bootstrap-icons，
       为一个箭头拉一整套字体是本仓库明令避免的那类代价。 */
    .filter-toggle__chevron {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid currentColor;
      transition: transform .2s;
    }
    .filter-toggle[aria-expanded="true"] .filter-toggle__chevron { transform: rotate(180deg); }

    .filter-panel { display: none; }
    .filter-panel.filter-panel--open { display: block; }

    .resource-dims__row {
      flex-direction: column;
      gap: var(--space-xs);
    }
    /* 窄屏：标题与「清空本项」摊成一整行，清空贴右 */
    .resource-dims__head {
      flex: none;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      width: 100%;
      padding-top: 0;
    }
    /* 计数贴左、排序贴右，一行放得下就一行；放不下由 flex-wrap 把排序折到第二行、仍贴右，不溢出。
       实测（2026-10-02）：中文 360 起一行；英文排序文案长（Price low to high / high to low），
       414 起才一行，320–390 是两行（47px，改前 67px）——不改文案、不改下拉、不加脚本。 */
    .resource-results__head {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-xs) var(--space-sm);
      margin-bottom: var(--space-sm);
    }
    .resource-results__count { font-size: var(--font-size-xs); }
    .resource-results__sort { margin-left: auto; gap: 2px; }
    .resource-results__sort-item { font-size: var(--font-size-xs); padding: 3px 6px; white-space: nowrap; }

    /* 免责提示挪到列表（含分页 / 空结果提示）之后：文案与 DOM 都不变，只用 order 重排，
       桌面仍在表格上方。2026-10-02 用户定：首屏让给结果，提示照样每页都在。 */
    .resource-results { display: flex; flex-direction: column; }
    .resource-results__note { order: 1; margin: var(--space-md) 0 0; }

    /* ------------------------------------------------------------------
       结果表 → 卡片列表
       手机上五列表是不可用的：表宽 min-width:720px 而可视区只有 356px，
       实测每一行的品名都被裁成 `Hot-…`、价格与 Inquire 两列整个在屏幕外，
       只能靠横向滚动去够。这里把表拆成一行一张卡。
       ⚠ 桌面那张表**不动**，本节全部关在这个媒体查询里。
       ------------------------------------------------------------------ */
    .resource-table-wrap {
      /* 卡片各自有边框，外层这层壳在手机上是多余的一圈线 */
      overflow-x: visible;
      border: 0;
      background: transparent;
      border-radius: 0;
    }
    .resource-table {
      display: block;
      width: 100%;
      /* 这条是「不再横向滚动」的关键，去掉 min-width:720px */
      min-width: 0;
    }
    .resource-table thead { display: none; }
    .resource-table tbody { display: block; }
    /* ★★ 卡片三段：品名 / 维度顺排 / 价格 + 按钮（2026-10-02 由「四行显式网格」改来，
       spec docs/superpowers/specs/2026-10-02-resources-mobile-cards-design.md；四行 123px → 三段约 98px）。
       2026-09-08 的教训仍然成立：**价格与按钮绝不能和可变长的文字共用一个行内格式化上下文**——
       那一版钢厂/市场是 inline、价格/按钮是 inline-block，断行由文字宽度决定：中文（「天津友发 · 天津」
       约 88px）+ 价格格 248px 装得下，价格被顶到钢厂行、按钮掉到下一行，中文站 20/20 行全中；
       英文装不下，碰巧是对的。验收时只截了英文页，所以放过去了。
       现在的判据：`tr::after` 是一个 flex-basis:100% 的空项，**强制**在维度之后换行，
       价格与按钮永远独占最后一段、同排，与文字多长、哪种语言无关。
       维度四格（规格/材质/钢厂/市场）只在第二段里顺排，放不下就整格折到下一行。
       顺带修掉旧网格的一个缺口：钢厂名一长，`auto` 列被撑宽、材质列被挤到文字越界
       （`check-resources-cards.mjs` 注入长钢厂名实测，中文站各断点都中）。 */
    .resource-row {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: 0;
      row-gap: 4px;
      background: var(--color-bg-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-sm);
    }
    /* flex 项会被 blockify，这里不必也不该再给它们指定 display——
       尤其别写 display:inline，那正是上面说的老路。 */
    .resource-table tbody td {
      border-top: 0;
      padding: 0;
    }
    .resource-row__product { flex: 0 0 100%; order: 1; }
    .resource-table tbody td:nth-child(2),
    .resource-table tbody td:nth-child(3),
    .resource-table tbody td:nth-child(4),
    .resource-table tbody td:nth-child(5) { order: 2; }
    .resource-row::after { content: ''; flex: 0 0 100%; height: 0; order: 3; }
    .resource-table tbody td:nth-child(6) { order: 4; flex: 1 1 auto; min-width: 0; }
    .resource-table tbody td:nth-child(7) { order: 4; margin-left: auto; }
    /* ★ 上面那五条 `td:nth-child(n) { width: 34% … }` 在 display:block 下**照样生效**，
       不清掉的话品名格只有卡片宽的 34%（约 110px），45 字符的英文品名会被挤成四行、
       卡片高度直接翻一倍。选择器写成同形的 `:nth-child(n)` 才压得过去（0-2-2 > 0-2-1）。
       ⚠ 它必须排在下面 td4/td5 那两条定宽之前——同特异度靠源码顺序定胜负。 */
    .resource-table tbody td:nth-child(n) { width: auto; }

    /* 品名与副行：整幅宽、想折几行折几行，一个字都不省略。
       ⚠ 必须把桌面那条两行 clamp **整条解除**（display 与 -webkit-line-clamp 都要复位）：
       只改 white-space 是不够的，-webkit-box + line-clamp:2 会继续生效，
       320px 这类窄屏上英文品名要三行，第三行会被无声砍掉。 */
    .resource-row__name {
      display: block;
      -webkit-line-clamp: none;
      font-size: var(--font-size-sm);
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    /* 维度四格（规格、材质、钢厂、市场）在第二段顺排，这里只管排版。分隔符「·」是标点不是文案，
       不需要进翻译文件（写成可翻译字符串会让 check-i18n 多一条毫无意义的 key）。 */
    .resource-table tbody td:nth-child(2),
    .resource-table tbody td:nth-child(3),
    .resource-table tbody td:nth-child(4),
    .resource-table tbody td:nth-child(5) {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      color: var(--color-text-secondary);
      font-size: var(--font-size-xs);
    }
    /* 分隔点挂在**前一格的 ::after**，且只在它后面还有非空维度格时出现：
       ① 折行时点留在上一行行尾，不会挂到下一行行首像列表符号；
       ② 空格不产生孤点——2026-10-02 前钢厂为空的卡片印的是「· Shanghai」。
       ⚠ 间距用 padding，不要写成 `content: ' · '` 靠内容里的空格——
       flex 项各自起一个行盒，首尾空格会被折叠掉。
       不支持 :has() 的浏览器只是没有点，内容与排版不受影响。 */
    .resource-table tbody td:is(:nth-child(2), :nth-child(3), :nth-child(4)):not(:empty):has(~ td:is(:nth-child(3), :nth-child(4), :nth-child(5)):not(:empty))::after {
      content: '·';
      padding: 0 5px;
      color: var(--color-text-muted);
    }

    /* 价格与询价按钮同在最后一段：价格 flex:1 贴左、按钮 margin-left:auto 贴右，宽度交给 flex 算——
       别再写 `width: calc(100% - 110px)` 这类凑数宽度去拼同排。 */
    .resource-table tbody td:nth-child(6),
    .resource-table tbody td:nth-child(7) {
      margin-top: 2px;
    }
    .resource-row__price { white-space: normal; }
  }

  /* ================================================================
     7. 超窄屏（≤374.98px）：分类区收紧留白与行高
     实测动机：2026-09-16「结果表在第一屏内」补测发现 320×568 英文裸页唯一未达标——
     `.resource-results` 的 top（580.47px）比 innerHeight（568px）多出 12.47px。
     高度分解（同一实测）：`.resource-cats__row` 单块 247.125px（9 个分类项折成 6 行）是
     结果表之上最大的一块，其次是 `.site-header-d` 127.69px；分类区其余留白（`.resource-cats`
     自身 padding/margin-bottom、`.resource-cats__path` 上下留白）合计约 60px。
     ⚠ 分类区本身**不许折叠/隐藏/进抽屉**（设计文档 §10：分类是找货页的主导航）——
     这里只收紧 `.resource-cats__row` 的行高与间距，不碰可见性、不碰下钻导航行为。
     ⚠ 只收进这一档媒体查询：390px 及以上已验收通过（A 之 4 组），不动它们。
     实测结果与药丸盒实测高度写在验收清单 A 之 4。 */
  @media (max-width: 374.98px) {
    .resource-cats {
      /* 上下各收 2px（8px → 6px），左右不动 */
      padding: 6px var(--space-md);
      /* 16px → 8px：这块与下面 .filter-toggle 之间本来就有 filter-toggle 自己的
         视觉重量（蓝底按钮），不需要满格 space-md 的呼吸感 */
      margin-bottom: var(--space-sm);
    }
    .resource-cats__row {
      /* 行间距 8px → 6px，列间距不变——折行数不受影响，只收纵向 */
      gap: 6px var(--space-sm);
    }
    .resource-cats__item {
      /* 6px 14px → 4px 10px：药丸盒高从实测 33.69px 降到约 29.69px，
         仍明显高于单行文字高度，点击区域没有被压到不可用（见验收清单实测对比）。
         横向收 4px 每侧，是否减少折行数以实测为准，不额外假设。 */
      padding: 4px 10px;
    }
    /* 分类限高的 max-height 在这一档要重新量：药丸盒变矮了（33.6875→29.6875px），
       行间距也收紧了（8px→6px，上面 .resource-cats__row 那条 gap: 6px var(--space-sm)）。
       同一份 headless Chrome + CDP 实测（/resources?cat=28 英文，320px 宽）：
       两行内容高 = 2×29.6875 + 6 = 65.375px；+ padding-top 4px + border-top 1px
       = 70.375px。选择器与上面第 6 节那条特异度相同（都是 3 个类/伪类），
       靠这里在文件里排得更后赢得层叠——与本节其它几条覆盖规则同一个机制，不是新写法。 */
    .resource-cats__row.is-collapsible:not(.is-expanded) {
      max-height: 70.375px;
      mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
    }
  }
}