/* ============================================================================
 * clib-skin-snippets-v1.css — 换皮 · 代码片段页（#page-snippets）默认收起
 * ----------------------------------------------------------------------------
 * 依据：《换皮任务-要求与标准总集-综合版》§三「信息分级 · 可达≠同屏铺开」+ 附录 A-1。
 * 实测（work/_audit/_page-structure-probe.js）改前：**页面总高 24658px**，13 张 `.snippet-card`，
 *   平均每张 1897px —— 原因是一张卡 = 标题 + **整段代码全展开**（第 1 张就 29 行 670px）。
 *   这是全站最长的页（比修之前的术语词典 17038 还长）。
 * 做法（与术语词典/面试题库同一套）：每段代码默认**露前 12 行**（≈264px），底部渐隐 + 一张
 *   「展开全部（N 行）」按钮；页顶一条回执说明"共几段 · 默认露几行"。
 * 不动什么：**不删任何一段代码、不改一个字的内容、不动生成物**（卡片由 study.44825cad.js 渲染，
 *   本文件只加"收起态"的外观 + 一个按钮位）；`btn-copy` 复制按钮原样保留。
 * 唯一回退点：删 index.html 里指向本文件的那一行 <link>（同时删 snippet-collapse.js 那行）。
 * ========================================================================== */

/* 概览条（沿用换皮通用条样式：.fde-bar* 定义在 clib-shell-v1.css，这里只加本页特有的位） */
#fdeSnipBar { margin: 16px 0; }

/* 收起态：每段代码露前 12 行 */
#page-snippets .snippet-card .snippet-code {
  max-height: 264px;
  overflow: hidden;
  position: relative;
}
/* 底部渐隐：用 mask 而不是盖一层底色 —— 代码块底色是生成物定的，盖色会猜错 */
#page-snippets .snippet-card:not(.fde-snip-open) .snippet-code {
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
#page-snippets .snippet-card.fde-snip-open .snippet-code {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* 每张卡的展开/收起按钮 */
.fde-snip-toggle {
  margin-top: 8px;
  height: 32px;
  padding: 0 16px;
  border: 1px solid #E8E8ED;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #1D1D1F;
  cursor: pointer;
}
.fde-snip-toggle:hover { border-color: #D2D2D7; }

@media (max-width: 430px) {
  .fde-snip-toggle { height: 44px; }            /* 390 档触控 ≥44（规格 §五） */
  #fdeSnipBar .fde-bar-btn { height: 44px; }
}

/* 概览条按钮的**基样式显式化**（2026-10-15）：原先它只靠页面默认按钮样式，
   同一套 `.fde-bar-btn` 在别的页是内联样式、在这页是页面默认 ⇒ 观感不通气、也会被外部尺子误分类。
   写在这里（CSS，不写内联）⇒ 上面那条 390 的 44px 覆盖仍然生效（内联会压掉它）。 */
#fdeSnipBar .fde-bar-btn {
  height: 32px;
  padding: 0 16px;
  border: 1px solid #E8E8ED;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 13px;
  font-family: inherit;
  color: #1D1D1F;
  cursor: pointer;
}