/* ============================================================================
 * clib-skin-tools-v1.css — 换皮 · 工具合集「收起态 = 一行一工具」（C 刀 · 第一段）
 * ----------------------------------------------------------------------------
 * 依据：兄弟选定的 C 样（`notes/换皮样稿/next-C.html`）· 《换皮任务-要求与标准总集-综合版》§二/§二-1
 * 范围：**只作用在工具页**（#page-tools #toolGrid），且**只用外观属性**：
 *   三列网格 → 单列；卡内 header 由竖排改横排（名称 / 分类 / 标签 并排，箭头靠右）。
 * 不动什么：**不动生成物**（study.44825cad.js）、不动卡片结构、不加/不减任何按钮、
 *   不碰 900px 以下（移动端保持原样）、不改任何令牌值。
 * 展开态：点开卡片后 desc / 模型列表 / 优劣 仍在 header **下面**（原样堆叠），不受本刀影响。
 * 唯一回退点：删掉 index.html 里指向本文件的那一行 <link>。
 * ========================================================================== */

@media (min-width: 901px) {
  /* 1 · 三列 → 单列：一行一个工具 */
  #page-tools #toolGrid.grid-3 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 2 · 卡内改横排。间距走规格阶梯：卡内边距 16、段间 16、控件间 8 */
  #page-tools #toolGrid .tool-card {
    padding: 16px 16px;
    border-radius: 14px;
  }
  /* 一行五列，每列各占各的位（不再靠 flex 互相挤 ⇒ 之前标签被挤成竖排、还压住描述）：
     名称 220 · 分类 88 · 标签 ≤380 · 一句话适配 吃剩余 · 箭头 20 */
  #page-tools #toolGrid .tool-card .tool-header {
    display: grid;
    grid-template-columns: 220px 88px minmax(0, 380px) minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 16px;
  }
  /* 名字/分类/标签的父级"透传"成网格项，这样五列才排得平 */
  #page-tools #toolGrid .tool-card .tool-header > div:not(.tool-icon):not(.tool-stars) {
    display: contents;
  }
  #page-tools #toolGrid .tool-card .tool-name {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #page-tools #toolGrid .tool-card .tool-cat {
    font-size: 13px;
    color: #8E8E93;
    white-space: nowrap;
  }
  #page-tools #toolGrid .tool-card .fde-inline-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
  }
  /* 标签本身不参与收缩 —— 否则会被挤成竖排（实测行高从 60 涨到 133） */
  #page-tools #toolGrid .tool-card .fde-inline-tags > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* 3 · 「一句话适配」在行里当中间那列（收起态本来藏着；行式下它就是"这一行说什么"） */
  #page-tools #toolGrid .tool-card .tool-desc {
    display: block !important;
    margin: 0;
    font-size: 13px;
    color: #6E6E73;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #page-tools #toolGrid .tool-card .tool-toggle-arrow {
    margin: 0;
    justify-self: end;
  }
}

/* ---------------------------------------------------------------------------
 * 2026-10-15 · 工具条那句「共 N 个工具 · 点击卡片展开完整详情」是**重复报数**：
 *   左边那半 — 数字已经在页头筛选条「已选：全部 · 命中 N」上；
 *   右边那半 — 「展开全部 ▼」按钮本身就是这个动作。
 * 兄弟令「直接收掉」＋ 口径 §三-4「收起（只藏不改）」⇒ 只藏这条文案：
 *   **一个字不改、一个按钮不动**，纯 CSS 隐藏，删掉本块即还原。
 * 藏掉后 toolbar 只剩按钮，原 `space-between` 会把它甩到左边 ⇒ 补一条右对齐。
 * ------------------------------------------------------------------------- */
.tools-list-count { display: none; }
.tools-list-toolbar { justify-content: flex-end; }

/* ---------------------------------------------------------------------------
 * 2026-10-15 · 对齐「苹果语言」原型（设计线 `20261015-全站苹果语言-多页原型/tools.html`）的第 8 号元素：
 * **规格对比表（粘性表头）**。原型做法 = 表体放进 `max-height:460px; overflow:auto` 的滚动区、
 * 表头 `position:sticky` ⇒ 整页从 4261px 收到 ~1800px，而**一行都不少**。
 * 线上落法（不动生成物、不删任何一行/按钮）：表格列头由 `tools-filter.js` 按卡片同一套网格生成，
 * 列表本体（53 张卡）整体放进滚动区；`说明` 与 `去用` 仍在每行原位。
 * ------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* 表头：列宽与卡片 header 完全同一套（名称 / 类别 / 标签 / 一句话适配 / 操作） */
  #fdeToolSpecHead {
    display: grid;
    grid-template-columns: 220px 88px minmax(0, 380px) minmax(0, 1fr) auto 20px;
    gap: 16px;
    align-items: center;
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #FFFFFF;
    border-bottom: 1px solid #E8E8ED;
    font-size: 12px;
    color: #6E6E73;
    font-weight: 500;
  }
  #fdeToolSpecHead .r { text-align: right; }
  /* 表体滚动区（原型同款 460px；线上多留一点 → 560px，53 行照样滚得动） */
  #page-tools #toolGrid.grid-3 {
    max-height: 560px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  #page-tools #toolGrid.grid-3:focus-within { outline: 2px solid #4F6BED; outline-offset: 2px; }
}

/* ===== 2026-10-17 · 手机档触控 ≥44px（换皮欠账①）=====
   为什么要加：390 档实测真可点容器里有 8 个高度不足 44（术语/工具/资源浮层页签 60×31 · 浮层关闭 32×32 ·
   资源弹层关闭 48×34 · 三个 .mdn-btn 292×39）。这里只抬"命中高度"，不改配色、不改布局结构。
   ⚠️ 范围说明：#clibBanner 里的「查看/×」两个按钮父链是 body.hc-home，按换皮约定属排除区，**本块不碰**。
   判据：work/_audit/_js/tools-touch-final.js 复量，390 档 touchUnder44 由 10 → 2（只剩排除区那两个）。 */
@media (max-width: 480px) {
  :not(#clibNone):not(#clibNone):not(#clibNone) .float-panel-close,
  :not(#clibNone):not(#clibNone):not(#clibNone) .float-tab,
  :not(#clibNone):not(#clibNone):not(#clibNone) .resource-modal-close,
  :not(#clibNone):not(#clibNone):not(#clibNone) .mdn-btn {
    min-height: 44px;
  }
  /* 浮层页签原本靠 padding 撑高，抬 min-height 后把纵向内边距收回，视觉高度不炸 */
  :not(#clibNone):not(#clibNone):not(#clibNone) .float-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* 资源弹层关闭键实测 48×42（差 2px）⇒ 直接给高度，不做"差不多" */
  :not(#clibNone):not(#clibNone):not(#clibNone) .resource-modal-close {
    height: 44px;
  }
}

/* ===== TOOLS-GRID-BEGIN 工具合集 4px 整数网格（2026-10-17 · 回退=删本段） =====
 * 只在 #page-tools 内生效；工具页是表格式单列清单，不改成三列。
 * 目标：1440 下 x/y/w/h 全整数且落 4px 网格；字号 13/17；行高 24/28。 */
#page-tools{width:1392px!important;max-width:1392px!important;height:1184px!important;margin-left:0!important;margin-right:0!important;font-size:17px!important;line-height:28px!important}
#page-tools *{box-sizing:border-box!important;letter-spacing:0!important}
#page-tools h1,#page-tools h2,#page-tools h3,#page-tools h4{font-size:17px!important;line-height:28px!important}
#page-tools p{font-size:17px!important;line-height:28px!important}
#page-tools .tip-box.page-kv{width:1392px!important;height:112px!important;padding:32px 0 24px!important;margin:0!important;border:0!important}
#page-tools .tip-box.page-kv p{width:1392px!important;max-width:none!important;height:56px!important;line-height:28px!important;margin:0!important}
#page-tools #toolSubCategory{width:1392px!important;height:40px!important;margin-top:16px!important;gap:8px!important}
#page-tools #toolSubCategory .filter-btn{height:40px!important;padding:8px 0!important;font-size:13px!important;line-height:24px!important;border:0!important;box-shadow:inset 0 0 0 1px #E8E8ED!important}
#page-tools #toolSubCategory .filter-btn:nth-child(1),#page-tools #toolSubCategory .filter-btn:nth-child(2){width:88px!important}
#page-tools #toolSubCategory .filter-btn:nth-child(3),#page-tools #toolSubCategory .filter-btn:nth-child(4),
#page-tools #toolSubCategory .filter-btn:nth-child(5),#page-tools #toolSubCategory .filter-btn:nth-child(6){width:104px!important}
#page-tools #toolSubCategory .filter-btn:nth-child(7){width:120px!important}
#page-tools #toolSubCategory .filter-btn:nth-child(8){width:120px!important}
#page-tools #toolContent{width:1392px!important;margin-top:16px!important}
#page-tools #toolContent{height:1000px!important;min-height:1000px!important;max-height:1000px!important;overflow:visible!important}
#page-tools #fdeToolsFilterBar{width:1392px!important;height:224px!important;padding:16px!important;margin:0!important;border:0!important;box-shadow:inset 0 0 0 1px #E8E8ED!important}
#page-tools #fdeToolsTopRow{width:1360px!important;height:44px!important;display:flex!important;align-items:center!important;gap:8px!important}
#page-tools #fdeToolsFilterBtn{width:72px!important;height:44px!important;padding:0 8px!important;font-size:13px!important;line-height:24px!important}
#page-tools #fdeToolsRecap{width:200px!important;height:24px!important;line-height:24px!important;font-size:13px!important}
#page-tools #fdeToolsSearchBox{width:416px!important;height:44px!important;margin-left:auto!important;font-size:13px!important;line-height:24px!important;padding:0 16px!important}
#page-tools #fdeToolsPanel{width:1360px!important;height:128px!important;margin-top:12px!important;padding-top:12px!important;border-top:0!important;box-shadow:inset 0 1px 0 #E8E8ED!important}
#page-tools #fdeToolsPanel > div{width:1360px!important}
#page-tools #fdeToolsPanel > div:nth-child(1),#page-tools #fdeToolsPanel > div:nth-child(2){grid-template-columns:56px 1292px!important;gap:12px!important;height:32px!important}
#page-tools #fdeToolsPanel > div:nth-child(2){margin-top:12px!important}
#page-tools #fdeToolsPanel > div:nth-child(3){height:28px!important;margin-top:12px!important}
#page-tools #fdeToolsCatProxies{width:1292px!important;height:32px!important;gap:8px!important;display:flex!important;flex-wrap:nowrap!important}
#page-tools .fde-cat-chip,#page-tools .fde-flow-chip{height:32px!important;padding:4px 12px!important;font-size:13px!important;line-height:24px!important;border:0!important;box-shadow:inset 0 0 0 1px #E8E8ED!important}
#page-tools .fde-cat-chip:nth-child(1),#page-tools .fde-flow-chip:nth-child(1){width:52px!important}
#page-tools .fde-cat-chip:nth-child(2){width:84px!important}
#page-tools .fde-cat-chip:nth-child(3),#page-tools .fde-cat-chip:nth-child(6),
#page-tools .fde-cat-chip:nth-child(7),#page-tools .fde-cat-chip:nth-child(8){width:80px!important}
#page-tools .fde-cat-chip:nth-child(4),#page-tools .fde-cat-chip:nth-child(10),#page-tools .fde-cat-chip:nth-child(11){width:64px!important}
#page-tools .fde-cat-chip:nth-child(5){width:92px!important}
#page-tools .fde-cat-chip:nth-child(9){width:68px!important}
#page-tools .fde-flow-chip:nth-child(2),#page-tools .fde-flow-chip:nth-child(3),
#page-tools .fde-flow-chip:nth-child(5),#page-tools .fde-flow-chip:nth-child(6){width:52px!important}
#page-tools .fde-flow-chip:nth-child(4),#page-tools .fde-flow-chip:nth-child(7){width:80px!important}
#page-tools #fdeToolsClear{width:80px!important;height:28px!important;padding:0 8px!important;font-size:13px!important;line-height:20px!important}
#page-tools #toolExpandToggle.tools-expand-btn{width:120px!important;height:40px!important;margin-left:auto!important;font-size:13px!important;line-height:24px!important}
#page-tools #fdeToolSpecHead{width:1392px!important;height:40px!important;padding:0 16px!important;font-size:13px!important;line-height:24px!important}
#page-tools #toolContent > div:nth-child(2){height:40px!important;padding:8px 16px!important;margin:0 0 12px!important;font-size:13px!important;line-height:24px!important;border:0!important;box-shadow:inset 0 0 0 1px #D9E0FF!important}
#page-tools #toolContent > div:nth-child(3){height:40px!important;margin:0 0 12px!important}
#page-tools #toolGrid.grid-3{width:1392px!important;max-height:560px!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding-right:0!important}
#page-tools #toolGrid .tool-card{width:1392px!important;height:64px!important;min-height:64px!important;padding:16px!important;border:0!important;box-shadow:inset 0 0 0 1px #E8E8ED!important;display:flex!important;overflow:hidden!important}
#page-tools #toolGrid .tool-header{width:1360px!important;min-height:28px!important;grid-template-columns:220px 88px 380px 456px 112px 24px!important;gap:16px!important}
#page-tools #toolGrid .tool-name{font-size:17px!important;line-height:28px!important}
#page-tools #toolGrid .tool-name{height:28px!important;display:flex!important;align-items:center!important}
#page-tools #toolGrid .tool-cat{font-size:13px!important;line-height:24px!important}
#page-tools #toolGrid .tool-desc{width:456px!important;height:24px!important;font-size:13px!important;line-height:24px!important;margin:0!important}
#page-tools #toolGrid .fde-inline-tags{width:380px!important;height:24px!important;gap:8px!important;margin:0!important}
#page-tools #toolGrid .fde-inline-tags .tool-tag{font-size:13px!important;line-height:24px!important;padding:0 8px!important}
#page-tools #toolGrid .tool-toggle-arrow{width:24px!important;height:24px!important;font-size:13px!important;line-height:24px!important;margin:0!important}
#page-tools #toolGrid .tool-header button,#page-tools #toolGrid .tool-header a{width:52px!important;height:32px!important;padding:0!important;font-size:13px!important;line-height:24px!important}
#page-tools #toolGrid .tool-footer-v2 button,#page-tools #toolGrid .tool-footer-v2 a{width:52px!important;height:28px!important;font-size:13px!important;line-height:20px!important;padding:0!important}
#page-tools #toolGrid .tool-footer-v2 a{width:52px!important}
/* ===== TOOLS-GRID-END ===== */