/* ============================================================
   web-spec.css — 设计资源 · 网页规范（#view-spec）
   内容层结构：左导航 + 右内容；当前内容 = 设计变量页（Arco theme token）。
   数据层：assets/js/arco-tokens.js（官方 theme 源码抽取）。
   样式全部限定在 #view-spec 内，避免与其它视图撞类名。
   ------------------------------------------------------------
   排版约定：
   - 每个变量一张两行小卡（.tk-token）：row1 预览+变量名+值，row2 使用场景独占整行
   - 色块（.tk-sw）右下角常驻档位徽标；容器无命中时整块收起（.tk-hidden）
   ============================================================ */

/* ---------- 设计变量页用的 Arco token（页面自展色值，非本站皮肤） ---------- */
#view-spec {
  --tk-primary: #165dff;
  --tk-text-1: #1d2129;
  --tk-text-2: #4e5969;
  --tk-text-3: #86909c;
  --tk-border: #e5e6eb;
  --tk-fill-1: #f7f8fa;
  --tk-fill-2: #f2f3f5;
  --tk-bg: #ffffff;
}
/* 页面强调色阶（--a-1…--a-6）：本文件大量规则引用（选中态 / hover / 焦点环 / 链接），
   但全站从未定义过 --a-*，var() 解析失败会让 background-color 静默回落为 transparent、
   border-color 回落为 currentColor —— 表现为「选中项没有高亮底、hover 无反馈」。
   此处按页面自用的 Arco 蓝补齐定义（主色对齐 --tk-primary），仅作用域限 #view-spec。 */
#view-spec {
  --a-1: #e8f3ff;
  --a-2: #bedaff;
  --a-3: #94bfff;
  --a-4: #6aa1ff;
  --a-5: #4080f4;
  --a-6: #165dff;
}
/* 暗色主题下页面灰阶跟随（取 Arco 暗色容器色，与所还原内容同源）；
   --tk-bg 保持白：阴影实物预览盒需白底才能正确呈现投影 */
[data-theme="dark"] #view-spec {
  --tk-fill-1: #232324;
  --tk-fill-2: #2a2a2b;
  /* 暗色下强调色阶：底色用带透明度的蓝，色标提亮，保证在深底上仍可辨认 */
  --a-1: rgba(22, 93, 255, 0.16);
  --a-2: rgba(22, 93, 255, 0.28);
  --a-3: rgba(22, 93, 255, 0.42);
  --a-4: #4080f4;
  --a-5: #6aa1ff;
  --a-6: #94bfff;
}

/* ===== 深色主题：按钮库暗色令牌 + 实物预览盒转深 =====
   原设计「stage 恒白底」是浅色下的 artboard 语义；整站切深色后，
   这里把演示盒（stage / canvas / 配置器面板）背景与按钮配色一并切暗，
   避免白盒割裂、浅底按钮在深底上看不清。
   按钮状态全部引用 var(--ab-*)，改令牌即可整套跟随，无需逐条重写。 */
[data-theme="dark"] #view-spec {
  /* 演示盒 / 面板 / 代码块背景 */
  --ab-stage-bg: #111319;
  --ab-canvas-bg: #16171d;
  --ab-panel-bg: #111319;
  --ab-seg-bg: #2a2a30;
  --ab-seg-opt-hover: #34343c;
  --ab-code-bg: #0e0f14;

  /* 主色系：品牌蓝保持，hover 略提亮适配深底；禁用转暗 */
  --ab-primary: #4488FF;
  --ab-primary-hover: #6AA1FF;
  --ab-primary-active: #3972D6;
  --ab-primary-disabled: #2E3A52;
  --ab-primary-light: #1A2740;
  --ab-tint-hover: #1A2740;
  --ab-tint-active: #22324F;

  /* 中性灰：深底上的按钮底色与文字 */
  --ab-fill: #2A2A30;
  --ab-fill-hover: #34343C;
  --ab-fill-active: #3E3E47;
  --ab-line: #3A3A42;
  --ab-line-2: #2A2A30;
  --ab-ink: #C9CDD4;
  --ab-ink-2: #86909C;
  --ab-ink-3: #6B7178;
  --ab-ink-disabled: #4E5969;

  /* 语义色：保持品牌值，hover 提亮一档更贴深底 */
  --ab-success: #00B42A;
  --ab-success-hover: #2BA471;
  --ab-warning: #FF7D00;
  --ab-warning-hover: #FF9A2E;
  --ab-danger: #F53F3F;
  --ab-danger-hover: #F76560;
  /* 语义浅染（深底上转暗染）+ 按下档 */
  --ab-success-light: #0E2A16;
  --ab-warning-light: #2A2008;
  --ab-danger-light: #2C1313;
  --ab-success-active: #009A29;
  --ab-warning-active: #E56B00;
  --ab-danger-active: #D72929;
  /* 语义 · 禁用（深底换算）：实心转暗一档，极浅底转近黑染 */
  --ab-success-disabled: #2E7A46;
  --ab-warning-disabled: #7E5520;
  --ab-danger-disabled: #7F3C3C;
  --ab-success-faint: #101D12;
  --ab-warning-faint: #1E1808;
  --ab-danger-faint: #1F1010;

  --ab-radius: 2px;
}

/* 演示盒 / 配置器面板在深色下的背景与文字（特异性高于原 #fff 写死规则，直接覆盖） */
[data-theme="dark"] #view-spec .bd-stage,
[data-theme="dark"] #view-spec .pg-canvas { background: var(--ab-canvas-bg); }
[data-theme="dark"] #view-spec .pg { background: var(--ab-panel-bg); color: var(--ab-ink); }
[data-theme="dark"] #view-spec .pg-seg { background: var(--ab-seg-bg); }
[data-theme="dark"] #view-spec .pg-opt { color: var(--ab-ink-2); }
[data-theme="dark"] #view-spec .pg-opt:hover { background: var(--ab-seg-opt-hover); color: var(--ab-ink); }
[data-theme="dark"] #view-spec .pg-opt.on,
[data-theme="dark"] #view-spec .pg-opt.on:hover { background: var(--ab-primary); color: #fff; }
[data-theme="dark"] #view-spec .pg-row > i { color: var(--ab-ink-3); }
[data-theme="dark"] #view-spec .pg-side { border-left-color: var(--ab-line-2); }
[data-theme="dark"] #view-spec .pg-metrics { color: var(--ab-ink-2); }
[data-theme="dark"] #view-spec .pg-foot { border-top-color: var(--ab-line-2); }
[data-theme="dark"] #view-spec .pg-code > summary { color: var(--ab-ink-2); }
[data-theme="dark"] #view-spec .pg-code > summary::before { color: var(--ab-ink-3); }
[data-theme="dark"] #view-spec .pg-code pre { background: var(--ab-code-bg); }
[data-theme="dark"] #view-spec .pg-code pre code { color: var(--ab-ink); }
[data-theme="dark"] #view-spec .pg-copy { background: var(--ab-seg-bg); color: var(--ab-ink); }
[data-theme="dark"] #view-spec .pg-copy:hover { background: var(--ab-seg-opt-hover); color: var(--ab-primary-hover); }
/* 禁用文字里有一处写死浅色，深色下过亮，单独压回暗档 */
[data-theme="dark"] #view-spec .bd-btn.is-secondary:disabled { color: #5C7CB0; }

/* ---------- 视图容器（tools.css 的 .tool-body 规则不覆盖 view-spec，需自带） ---------- */
/* ⚠️ 宽度限定（必留）：.app 是 flex row，各 .view 默认 flex:0 1 auto → 视图宽度跟随
   自身内容 max-content。规范页每篇文档内容宽窄差异极大（表格/代码/色卡/图标网格），
   曾导致右侧内容区在 ~700~1020px 之间随文档跳变、宽文档还撑出整页横向滚动条。
   此处显式 width:100% + min-width:0：假设尺寸取满容器，flex-shrink 再压到可用宽度，
   与内容 max-content 彻底脱钩（注意不可写成 flex:1，会与 .main 平分剩余空间）。 */
#view-spec { width: 100%; min-width: 0; }
#view-spec .tool-body {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 24px 32px;
}
#view-spec header h1 {
  font-size: var(--hx-t20); margin: 0; font-weight: 700; letter-spacing: .2px;
  color: var(--text);
}

/* ---------- 顶部栏：标题 + 搜索 + 返回（sticky） ---------- */
#view-spec .ws-topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  margin: 0 -24px 18px; padding: 14px 24px 12px;
  border-bottom: 1px solid var(--border);
}
#view-spec .ws-topbar .tb-head { align-items: center; }
#view-spec .ws-topbar-tools { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
#view-spec .ws-search { position: relative; }
#view-spec .ws-search input {
  width: 240px; padding: 7px 12px;
  font-size: var(--hx-t13); color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
#view-spec .ws-search input::placeholder { color: var(--text-3); }
/* 聚焦环走站点中性规范（同 .search input / 各工具页 input·select），不取内容蓝：
   搜索框是站点外壳控件，L3 内容色（--tk-* / --a-*）不出内容区。 */
#view-spec .ws-search input:focus {
  border-color: var(--text-3);
  box-shadow: 0 0 0 3px var(--overlay-dim);
}

/* ---------- 布局：左目录 + 右内容 ---------- */
#view-spec .ws { display: flex; gap: 24px; align-items: flex-start; }
#view-spec .ws-toc {
  position: sticky; top: 86px; width: calc(148px * var(--hx-fsk, 1)); flex: none;
  max-height: calc(100vh - 110px); overflow-y: auto;
  scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 2px;
}
#view-spec .ws-toc a {
  display: block; padding: calc(6px * var(--hx-fsk, 1)) calc(12px * var(--hx-fsk, 1)); border-left: 2px solid var(--border);
  font-size: var(--hx-t13); color: var(--text-2);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
#view-spec .ws-toc a:hover { color: var(--text); border-color: var(--text-3); }
#view-spec .ws-toc a.on {
  color: var(--text); border-color: var(--a-6);
  font-weight: 600; background: var(--a-1);
}
#view-spec .ws-main { flex: 1; min-width: 0; width: 100%; }

/* ---------- 顶部工具条（页面内） ---------- */
#view-spec .tk-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
#view-spec .tk-crumb {
  font-size: var(--hx-t15); font-weight: 700; color: var(--text);
  letter-spacing: .2px;
}
#view-spec .tk-src { font-size: var(--hx-t11-5); color: var(--text-3); }
#view-spec .tk-theme { margin-left: auto; display: flex; gap: 0; }
#view-spec .tk-theme button {
  padding: 4px 12px; font-size: var(--hx-t12); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; transition: all .15s var(--ease);
}
#view-spec .tk-theme button:first-child { border-radius: 6px 0 0 6px; }
#view-spec .tk-theme button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
#view-spec .tk-theme button.on {
  color: var(--a-6); border-color: var(--a-6);
  background: var(--a-1); font-weight: 600; z-index: 1;
}

/* ---------- 板块 ---------- */
#view-spec .tk-panel { margin-bottom: 34px; }
#view-spec .tk-panel-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px;
}
#view-spec .tk-panel-head h2 {
  font-size: var(--hx-t15); font-weight: 700; color: var(--text);
  letter-spacing: .2px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
/* 板块英文名（与官网分组名对照） */
#view-spec .tk-en {
  font-size: var(--hx-t11); font-weight: 500; color: var(--text-3);
  letter-spacing: .3px;
}
#view-spec .tk-note {
  display: block; font-size: var(--hx-t12); color: var(--text-3);
  line-height: 1.6; max-width: 760px;
}
#view-spec .tk-hidden { display: none !important; }

/* ---------- 色板：每系一行（名称 + 10 级条带） ---------- */
#view-spec .tk-palette {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
#view-spec .tk-pal-row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
#view-spec .tk-pal-name {
  width: 150px; flex: none; font-size: var(--hx-t12-5); color: var(--text);
  white-space: nowrap;
}
#view-spec .tk-pal-name code {
  font-size: var(--hx-t11); color: var(--text-3); margin-left: 2px;
  font-family: var(--hx-mono);
}
#view-spec .tk-swatches { display: flex; flex: 1; min-width: 0; }

/* ---------- 色块（色板 / 功能色 / 数据色共用） ---------- */
#view-spec .tk-sw {
  position: relative; flex: 1; height: 40px; min-width: 0;
  border: 0; cursor: pointer; padding: 0;
  transition: transform .12s var(--ease);
}
#view-spec .tk-swatches .tk-sw:first-child { border-radius: 6px 0 0 6px; }
#view-spec .tk-swatches .tk-sw:last-child { border-radius: 0 6px 6px 0; }
/* 档位徽标：常驻右下角，浅色底上用深字药丸保证任何档位可读。
   opacity 曾用 .75「压存在感」，但 9/10 档深色块上白药丸被压到 2.97:1（字几乎读不出）——
   提到 .92：静态已清晰可读，hover 再提到 1 仍保留细微的层次反馈 */
#view-spec .tk-sw i {
  position: absolute; right: 4px; bottom: 4px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: var(--hx-t9-5); line-height: 1;
  color: #1d2129; background: rgba(255, 255, 255, .92);
  border-radius: 3px; opacity: .92;
  transition: opacity .12s var(--ease);
}
#view-spec .tk-sw:hover { transform: scaleY(1.18); z-index: 1; }
#view-spec .tk-sw:hover i { opacity: 1; }

/* ---------- 功能色：5 张卡 × 7 级（官方仅定义 1-7 级） ---------- */
#view-spec .tk-func-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}
#view-spec .tk-func {
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
#view-spec .tk-func-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
#view-spec .tk-func-head b { font-size: var(--hx-t13); color: var(--text); font-weight: 600; }
#view-spec .tk-func-from {
  margin-left: auto;
  font-family: var(--hx-mono);
  font-size: var(--hx-t11); color: var(--a-6); white-space: nowrap;
}
/* 功能色档位图例：编号药丸 + 场景文字，与色块右下角常驻徽标同一视觉语言 */
#view-spec .tk-func-levels {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
#view-spec .tk-func-lv {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--hx-t11); color: var(--text-3); line-height: 1.5;
}
#view-spec .tk-func-lv i {
  font-style: normal; min-width: 14px; height: 14px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--hx-t9-5); color: var(--text-2); background: var(--tk-fill-2);
  border-radius: 3px;
}

/* ---------- 数据色：20 色网格 ---------- */
#view-spec .tk-data-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(52px, 100%), 1fr));
  gap: 6px;
}
#view-spec .tk-data-grid .tk-sw { height: 44px; border-radius: 6px; }

/* ---------- 语义色 / 子分组 ---------- */
/* 注意：grid 的 1fr 轨道隐含 min-content 下限（会被超长 token 名撑爆），
   必须显式 minmax(0, 1fr) 允许轨道收缩；auto-fill 的 240px 下限也用 min() 防窄屏溢出 */
#view-spec .tk-sem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
#view-spec .tk-sub-group > b {
  display: block; font-size: var(--hx-t12-5); font-weight: 600; color: var(--text-2);
  margin-bottom: 8px; letter-spacing: .3px;
}
#view-spec .tk-sub-head {
  margin: 20px 0 12px; padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: var(--hx-t12-5); font-weight: 600; color: var(--text-2);
  letter-spacing: .3px;
}
#view-spec .tk-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* ---------- token 卡（通用两行结构）----------
   每个变量一张小卡：第一行 = 预览 + 名称 + 值，第二行 = 使用场景说明。
   名称/值/说明一律完整展示（可换行 + break-all），不用 ellipsis 截断。 */
#view-spec .tk-token-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px;
}
#view-spec .tk-token {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  width: 100%; min-width: 0;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
#view-spec .tk-token:hover { border-color: var(--a-4); background: var(--a-1); }
#view-spec .tk-token-name {
  flex: 1; min-width: 0;
  font-family: var(--hx-mono);
  font-size: var(--hx-t12); color: var(--text); line-height: 1.5;
  word-break: break-all; /* 长名（如 --font-size-body-3）自然换行，不截断 */
}
#view-spec .tk-token-val {
  margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 100%;
  font-family: var(--hx-mono);
  font-size: var(--hx-t11-5); color: var(--text-3); line-height: 1.5;
  white-space: normal; word-break: break-all;
}
#view-spec .tk-token-desc {
  flex-basis: 100%; font-size: var(--hx-t11-5); color: var(--text-3); line-height: 1.55;
}
#view-spec .tk-token-swatch {
  width: 22px; height: 22px; flex: none;
  border-radius: 4px; border: 1px solid rgba(0, 0, 0, .08);
}

/* ---------- 单行参考行（语义色 / 阴影零件）----------
   长值板块改用单行：预览 + 变量名（定宽列）+ 使用场景（弹性）+ 值（靠右），
   列序对齐官网表格；避免长值把变量名挤成竖排。 */
#view-spec .tk-row-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
#view-spec .tk-token--row { flex-wrap: nowrap; gap: 4px 12px; padding: 8px 12px; }
#view-spec .tk-token--row .tk-token-name { flex: none; width: 152px; }
#view-spec .tk-token--row .tk-token-desc { flex: 1 1 auto; flex-basis: auto; min-width: 0; }
#view-spec .tk-token--row .tk-token-val { margin-left: auto; flex: none; max-width: 46%; }

/* ---------- token 预览元件 ---------- */
#view-spec .tk-token-prev {
  width: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
}
#view-spec .tk-radius-demo {
  display: block; width: 34px; height: 34px;
  background: var(--a-1); border: 1.5px solid var(--a-5);
}
#view-spec .tk-spacing-demo {
  display: block; height: 8px; max-width: 160px;
  background: var(--a-5); border-radius: 2px;
}
#view-spec .tk-size-n {
  font-family: var(--hx-mono);
  font-size: var(--hx-t12); color: var(--text-2);
  border: 1px dashed var(--a-4); border-radius: 4px;
  padding: 2px 6px; white-space: nowrap;
}
/* 组件尺寸别名：竖条直观展示 24/28/32/36 四档高度 */
#view-spec .tk-csize-demo {
  display: block; width: 22px;
  background: var(--a-1); border: 1px solid var(--a-4); border-radius: 3px;
}
#view-spec .tk-shadow-demo {
  display: block; width: 34px; height: 34px;
  background: var(--tk-bg); border-radius: 4px;
}
#view-spec .tk-opacity-demo {
  display: block; width: 34px; height: 34px;
  background: var(--a-6); border-radius: 4px;
}
#view-spec .tk-border-demo {
  display: block; width: 40px; height: 0;
}
/* 无边框（0）用虚线浅槽示意，避免与「有线」混淆 */
#view-spec .tk-border-none { border-bottom: 2px dashed var(--border) !important; }
/* 零值 / 通配写法的预览占位：虚线浅槽，避免预览区空白落空 */
#view-spec .tk-demo-none {
  display: block; width: 34px; height: 0;
  border-top: 2px dashed var(--a-4);
}

/* ---------- 官方成品组合阴影（实物投影预览） ---------- */
#view-spec .tk-shadow-presets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 12px;
}
#view-spec .tk-shadow-preset {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: center;
  transition: border-color .15s var(--ease);
}
#view-spec .tk-shadow-preset:hover { border-color: var(--a-4); }
#view-spec .tk-shadow-box {
  width: 72px; height: 44px;
  background: var(--tk-bg); border-radius: 4px;
}
#view-spec .tk-shadow-preset b { font-size: var(--hx-t12); color: var(--text); font-weight: 600; }
#view-spec .tk-shadow-preset span { font-size: var(--hx-t11); color: var(--text-3); }
#view-spec .tk-shadow-preset code {
  font-family: var(--hx-mono);
  font-size: var(--hx-t10); color: var(--text-3); line-height: 1.5;
  max-width: 100%; word-break: break-all; /* 阴影值较长，允许换行完整展示 */
}

/* ---------- 左侧目录：分组（组件 / 通用） ---------- */
#view-spec .ws-toc-group { display: flex; flex-direction: column; gap: calc(2px * var(--hx-fsk, 1)); margin-top: calc(12px * var(--hx-fsk, 1)); }
#view-spec .ws-toc-group:first-child { margin-top: 0; }
#view-spec .ws-toc-group-t {
  padding: 2px 12px; font-size: var(--hx-t11); font-weight: 700;
  color: var(--text-3); letter-spacing: .5px;
}
#view-spec .ws-toc-sub { display: flex; flex-direction: column; gap: 2px; }
#view-spec .ws-toc-sub-t {
  padding: 3px 12px 1px 22px; font-size: var(--hx-t11);
  color: var(--text-3); letter-spacing: .3px;
}
/* 二级条目整体缩进，与主导航条带线形成层级 */
#view-spec .ws-toc-sub a { padding-left: calc(22px * var(--hx-fsk, 1)); }

/* ============================================================
   文档页（组件 / 通用：按钮 / 图标 / 链接 / 排版）
   官方组件文档原文渲染：.doc-head（标题+引言）+ .doc-sec（按 h2/h3 分节，
   带 data-search 供顶部搜索过滤章节）。链接色用 Arco 品牌蓝（--tk-primary，
   属被还原的官方内容色，不随本站皮肤变）。
   ============================================================ */
#view-spec .doc-head { margin-bottom: 0; }
#view-spec .doc-head h1 { font-size: var(--hx-t21); font-weight: 700; margin: 0; color: var(--text); letter-spacing: .2px; }
#view-spec .doc-head p { font-size: var(--hx-t13-5); line-height: 1.75; color: var(--text-2); margin: 0 0 10px; }
#view-spec .doc-sec { margin-top: calc(34px * var(--hx-fsk, 1)); }
#view-spec .doc-sec > *:last-child { margin-bottom: 0; }
/* 子标题不再拖一条整行长横线（和样张行之间的发丝线打架，看着像表格）：
   改站内分组标题的语言 —— 左侧 2px 薄荷短杠 + 加粗字，一眼能定位分节。
   ⚠️ 组件文档的分节标题是 ### （渲染成 h3），不是 h2 —— h2 只出现在 API 那种大段；
   两种都要吃这套样式，否则「基本用法」这类小节会退回 14px 无标记的正文层级。 */
#view-spec .doc-sec > h2 {
  font-size: var(--hx-t16); font-weight: 700; color: var(--hx-ink, var(--text));
  margin: 0 0 calc(12px * var(--hx-fsk, 1)); padding: 1px 0 1px calc(10px * var(--hx-fsk, 1));
  border: 0; border-left: 2px solid var(--hx-acc, var(--text));
  line-height: 1.4;
}
#view-spec .doc-sec > h3 {
  font-size: var(--hx-t15); font-weight: 700; color: var(--hx-ink, var(--text));
  margin: 0 0 calc(10px * var(--hx-fsk, 1)); padding: 1px 0 1px calc(10px * var(--hx-fsk, 1));
  border: 0; border-left: 2px solid var(--hx-acc, var(--text));
  line-height: 1.4;
}
#view-spec .doc-sec h4 { font-size: var(--hx-t14); font-weight: 600; color: var(--text); margin: 0 0 10px; }
#view-spec .doc-sec h4 { font-size: var(--hx-t13); font-weight: 600; color: var(--text); margin: calc(16px * var(--hx-fsk, 1)) 0 calc(8px * var(--hx-fsk, 1)); }
#view-spec .doc-sec p { font-size: var(--hx-t13-5); line-height: 1.75; color: var(--text-2); margin: 0 0 calc(12px * var(--hx-fsk, 1)); }
/* 紧贴子标题的那句说明 = 小注：一行灰字，不跟样张抢声量 */
#view-spec .doc-sec > h2 + p,
#view-spec .doc-sec > h3 + p {
  font-size: var(--hx-t12-5); line-height: 1.6;
  color: var(--hx-dim2, var(--text-3));
  margin: calc(-3px * var(--hx-fsk, 1)) 0 calc(14px * var(--hx-fsk, 1));
}
#view-spec .doc-page a { color: var(--tk-primary); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s var(--ease); }
#view-spec .doc-page a:hover { border-bottom-color: var(--tk-primary); }
#view-spec .doc-page strong { color: var(--text); font-weight: 600; }
#view-spec .doc-page hr { border: 0; border-top: 1px solid var(--border); margin: calc(20px * var(--hx-fsk, 1)) 0; }
/* 行内代码（pre 内的 code 在下方重置为纯文本块） */
#view-spec .doc-page :not(pre) > code {
  font-family: var(--hx-mono);
  font-size: var(--hx-t12); color: var(--text);
  background: var(--tk-fill-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px calc(5px * var(--hx-fsk, 1)); word-break: break-all;
}
/* ---------- 代码围栏 = 次要信息，默认折叠（2026-10-26） ----------
   规范页的主信息是「真实渲染的组件」，代码只作实现参考：
   收进 <details>，默认收起，点开才占版面。 */
#view-spec .doc-code { margin: 0 0 calc(6px * var(--hx-fsk, 1)); }
#view-spec .doc-code > summary {
  display: inline-flex; align-items: center; gap: calc(7px * var(--hx-fsk, 1));
  list-style: none; cursor: pointer;
  padding: calc(5px * var(--hx-fsk, 1)) 0;
  font-family: var(--hx-mono);
  font-size: var(--hx-t10-5); letter-spacing: .14em; text-transform: uppercase;
  color: var(--hx-dim2, var(--text-3));
  transition: color .15s var(--ease);
}
#view-spec .doc-code > summary::-webkit-details-marker { display: none; }
#view-spec .doc-code > summary::before {
  content: "+"; font-size: var(--hx-t13); line-height: 1; width: calc(10px * var(--hx-fsk, 1)); text-align: center;
  color: var(--hx-acc, var(--text-2));
}
#view-spec .doc-code[open] > summary::before { content: "−"; }
#view-spec .doc-code > summary:hover,
#view-spec .doc-code[open] > summary { color: var(--hx-ink, var(--text)); }
#view-spec .doc-code > summary .doc-code-n { color: var(--hx-dim2, var(--text-3)); letter-spacing: .1em; }
#view-spec .doc-pre {
  margin: calc(4px * var(--hx-fsk, 1)) 0 0; padding: calc(14px * var(--hx-fsk, 1)) calc(16px * var(--hx-fsk, 1));
  background: var(--hx-field-bg, var(--tk-fill-1));
  /* pre 不给字体族就吃 UA 默认 monospace（Windows 上是 Courier New），
     会和全站 ui-monospace 明显不同 —— 这里显式钉住，别让浏览器自己选。 */
  font-family: var(--hx-mono);
  border: 1px solid var(--hx-line, var(--border)); border-radius: 0;
  overflow-x: auto;
}
#view-spec .doc-pre code {
  font-family: var(--hx-mono);
  font-size: var(--hx-t12-5); line-height: 1.75; color: var(--text-2);
  background: none; border: 0; padding: 0; border-radius: 0;
  white-space: pre; word-break: normal;
}

/* ============================================================
   按钮演示台（Button 文档）—— Arco 官方规范的实物化
   ------------------------------------------------------------
   ⚠️ 这一段的色值/圆角/尺寸是「被还原的规范内容」，不是本站皮肤的令牌：
   规范页要拿给别的网站当设计依据，所以按钮必须按 Arco 规范长，
   不能跟着像素工坊的薄荷/零圆角走。数值全部取自 arco-tokens.js
   （与「设计变量」页同源，见下方 --ab-* 注释），改一处两边一起变。

   白底画板保留（Arco 规范以 #fff 为基准，等于设计稿的 artboard，深色主题下也留着），
   但那圈 1px 边框去掉了（2026-10-26）：页面本身是浅色时，#fff + #E5E6EB 边框
   在白底上只剩一个空框，视觉上像贴了张白纸；去掉边框后白板与页面之间的层次
   由行与行之间的发丝线承担，不再有"框"的观感。
   ============================================================ */
#view-spec {
  /* ===== 令牌来源：自有「网页组件 · 16px 基准」规范（2026-10-26 接入，取代 Arco arcoblue）=====
     全部色值由设计稿导出图逐像素采样确认，不是拍脑袋取近似值：
       主色  default #4488FF · hover #7CABFF · active #3972D6 · disabled #B4CFFF
       浅底  #F0F6FF（次要按钮 / 线形浅底）
       文字按钮  hover 底 #E1ECFF · active 底 #D2E3FF
       中性  default #F2F4F5 · hover #E5E7EA · active #D8DCE1
       文字  #3E464F · 次级 #6B7178 · 弱 #989DA2 · 禁用 #BDC0C4
     尺寸：字号 12/14/16/18/20 → 高 = 字号 + 16（28/30/32/34/36）；
           左右 padding 固定 16，上下 4（由高度反推），图标 1em，图标-文字间距 4，圆角 2。 */
  --ab-primary: #4488FF;
  --ab-primary-hover: #7CABFF;
  --ab-primary-active: #3972D6;
  --ab-primary-disabled: #B4CFFF;
  --ab-primary-light: #F0F6FF;
  --ab-tint-hover: #E1ECFF;
  --ab-tint-active: #D2E3FF;
  /* 中性 */
  --ab-fill: #F2F4F5;
  --ab-fill-hover: #E5E7EA;
  --ab-fill-active: #D8DCE1;
  --ab-line: #D8DCE1;
  --ab-line-2: #EDEFF1;
  --ab-ink: #3E464F;
  --ab-ink-2: #6B7178;
  --ab-ink-3: #989DA2;
  --ab-ink-disabled: #BDC0C4;
  /* 状态色（规范外扩展，沿用语义色四档；hover 取亮一档） */
  --ab-success: #00B42A;
  --ab-success-hover: #23C343;
  --ab-warning: #FF7D00;
  --ab-warning-hover: #FF9A2E;
  --ab-danger: #F53F3F;
  --ab-danger-hover: #F76560;
  /* 语义浅染（次要/辅助默认底、文字/线形 hover 浅染用） + 按下档：浅深主题各一套 */
  --ab-success-light: #E8FFEA;
  --ab-warning-light: #FFF7E8;
  --ab-danger-light: #FFECE8;
  --ab-success-active: #009A29;
  --ab-warning-active: #E56B00;
  --ab-danger-active: #D72929;
  /* 语义 · 禁用（三档）：-disabled = 实心浅一档 / 线形描边与文字色；-faint = 次要·辅助的极浅底 */
  --ab-success-disabled: #9BE0AC;
  --ab-warning-disabled: #FFC48F;
  --ab-danger-disabled: #FBA9A9;
  --ab-success-faint: #F4FFF6;
  --ab-warning-faint: #FFFCF5;
  --ab-danger-faint: #FFF8F6;
  /* 圆角 2px */
  --ab-radius: 2px;
}

/* 白板本体：恒白底、无边框、无圆角（artboard 语义）。
   配置器的预览格只借用上面的令牌，不要这块布局。 */
#view-spec .bd-stage {
  margin: 0 0 8px; padding: 20px;
  background: #fff; border: 0; border-radius: 0;
  display: flex; flex-direction: column;
  font-family: var(--hx-sans);
}
/* 顶边对齐：同一行的按钮高度可能不同（尺寸节 24/28/32/36），
   居中对齐会让每行的顶边参差错落，看着不齐；顶边对齐后成一条水平线。 */
#view-spec .bd-row { display: flex; align-items: flex-start; gap: 12px 18px; flex-wrap: wrap; }
/* 行间分隔只用 padding-top + 发丝线（stage 不再给 gap，否则双重间距把每行撑到 60px+） */
#view-spec .bd-row + .bd-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ab-line-2); }
/* 长按钮行：格子吃掉剩余宽度，按钮 width:100% 才不会把左侧小标顶到上一行 */
#view-spec .bd-row.is-block { align-items: center; }
#view-spec .bd-row.is-block .bd-lab { padding-top: 0; }
#view-spec .bd-row.is-block .bd-cell { flex: 1 1 0; min-width: 0; }
#view-spec .bd-lab {
  /* 固定 84px 在字号放大后装不下「图标 → 圆环」，改成最小宽度，随字号自己长 */
  flex: none; min-width: 84px; white-space: nowrap;
  /* 与 32px 按钮的文字中线齐平（label 只标行，不参与小签的纵向排布） */
  padding-top: 10px;
  /* 行标签是中文，走正文字体栈：塞进等宽栈会让中文回退系统字体、英文走等宽，
     一行里出现两种字形（2026-10-27 字体收敛）。字距同步收到中文合适的 .06em。 */
  font-family: var(--hx-sans);
  font-size: var(--hx-t9-5); letter-spacing: .06em;
  color: var(--ab-ink-3);
}
/* 单个按钮 = 按钮 + 下方等宽小签（类型名 / 尺寸值）。
   同一行横排多个，比「一行一个按钮」省 2/3 高度，也符合组件库样张的惯例。 */
#view-spec .bd-cell {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
#view-spec .bd-cap {
  flex: none; height: 12px; line-height: calc(12px * var(--hx-fsk, 1)); padding-left: 1px;
  font-style: normal;
  font-family: var(--hx-mono);
  font-size: var(--hx-t9-5); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ab-ink-3);
}

/* —— 按钮本体 ——
   尺寸全部由「字号」推出来（--bd-fs）：高 = 字号 + 16、左右 padding 16、
   图标 1em、图标-文字 4px。改一个变量整档跟着变，不再逐档写死 height/padding。
   默认 = 次要按钮（浅蓝底 + 蓝字），与规范图一致（主要按钮才用实心蓝）。 */
#view-spec .bd-btn {
  --bd-fs: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: calc(var(--bd-fs) + 16px); padding: 0 16px;
  font: inherit; font-size: var(--bd-fs); line-height: 1; font-weight: 400;
  border: 1px solid transparent;
  border-radius: var(--ab-radius);
  background: var(--ab-primary-light); color: var(--ab-primary);
  cursor: pointer; white-space: nowrap;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
#view-spec .bd-btn svg { width: 1em; height: 1em; flex: none; }
/* 键盘可达性：规范图未覆盖，这里按主色补一圈 2px 焦点环（不外扩，避免撑破行高） */
#view-spec .bd-btn:focus-visible {
  outline: 2px solid var(--ab-primary); outline-offset: 1px;
}

/* ===== 类型 ===== */
/* 主要：实心蓝底白字 */
#view-spec .bd-btn.is-primary {
  background: var(--ab-primary); border-color: var(--ab-primary); color: #fff;
}
/* 次要：浅蓝底蓝字（= 默认态，显式类只为语义清晰） */
#view-spec .bd-btn.is-secondary {
  background: var(--ab-primary-light); border-color: transparent; color: var(--ab-primary);
}
/* 辅助：中性灰底深灰字 */
#view-spec .bd-btn.is-aux {
  background: var(--ab-fill); border-color: transparent; color: var(--ab-ink);
}
/* 文字：蓝字无底 */
#view-spec .bd-btn.is-text {
  background: transparent; border-color: transparent; color: var(--ab-primary);
}
/* 线形：透明底 + 1px 主色描边 */
#view-spec .bd-btn.is-outline {
  background: transparent; border-color: var(--ab-primary); color: var(--ab-primary);
}
/* 虚线（规范外保留，Arco 遗留类型，配色随新主色） */
#view-spec .bd-btn.is-dashed {
  background: transparent; border: 1px dashed var(--ab-line); color: var(--ab-ink);
}

/* ===== 语义色（规范外扩展：成功 / 警告 / 危险，实心，四档同主色节奏） ===== */
#view-spec .bd-btn.is-success { background: var(--ab-success); border-color: var(--ab-success); color: #fff; }
#view-spec .bd-btn.is-warning { background: var(--ab-warning); border-color: var(--ab-warning); color: #fff; }
#view-spec .bd-btn.is-danger  { background: var(--ab-danger);  border-color: var(--ab-danger);  color: #fff; }

/* ===== 交互四态（真实 :hover/:active 与静态还原类 is-hover/is-active 共用同一条规则） ===== */
#view-spec .bd-btn:hover { background: var(--ab-primary-hover); border-color: var(--ab-primary-hover); color: #fff; }
#view-spec .bd-btn.is-hover { background: var(--ab-primary-hover); border-color: var(--ab-primary-hover); color: #fff; }
/* 兜底：无类型类的基础按钮按下时也给出主色 active 档（类型专属 :active 特异性更高，会覆盖此条） */
#view-spec .bd-btn:active { background: var(--ab-primary-active); border-color: var(--ab-primary-active); color: #fff; }

#view-spec .bd-btn.is-secondary:hover,
#view-spec .bd-btn.is-secondary.is-hover { background: var(--ab-primary); border-color: var(--ab-primary); color: #fff; }
#view-spec .bd-btn.is-secondary:active,
#view-spec .bd-btn.is-secondary.is-active { background: var(--ab-primary-active); border-color: var(--ab-primary-active); color: #fff; }

#view-spec .bd-btn.is-primary:hover,
#view-spec .bd-btn.is-primary.is-hover { background: var(--ab-primary-hover); border-color: var(--ab-primary-hover); color: #fff; }

#view-spec .bd-btn.is-aux:hover,
#view-spec .bd-btn.is-aux.is-hover { background: var(--ab-fill-hover); border-color: transparent; color: var(--ab-ink); }
#view-spec .bd-btn.is-aux:active,
#view-spec .bd-btn.is-aux.is-active { background: var(--ab-fill-active); border-color: transparent; color: var(--ab-ink); }

#view-spec .bd-btn.is-text:hover,
#view-spec .bd-btn.is-text.is-hover { background: var(--ab-tint-hover); border-color: transparent; color: var(--ab-primary); }
#view-spec .bd-btn.is-text:active,
#view-spec .bd-btn.is-text.is-active { background: var(--ab-tint-active); border-color: transparent; color: var(--ab-primary); }


#view-spec .bd-btn.is-outline:hover,
#view-spec .bd-btn.is-outline.is-hover { background: transparent; border-color: var(--ab-primary-hover); color: var(--ab-primary-hover); }
#view-spec .bd-btn.is-outline:active,
#view-spec .bd-btn.is-outline.is-active { background: transparent; border-color: var(--ab-primary-active); color: var(--ab-primary-active); }

#view-spec .bd-btn.is-success:hover { background: var(--ab-success-hover); border-color: var(--ab-success-hover); }
#view-spec .bd-btn.is-warning:hover { background: var(--ab-warning-hover); border-color: var(--ab-warning-hover); }
#view-spec .bd-btn.is-danger:hover  { background: var(--ab-danger-hover);  border-color: var(--ab-danger-hover); }

/* 语义色按下态：取比 hover 更深一档（令牌未单独定义 active 档，内联补） */
#view-spec .bd-btn.is-success:active { background: #009A29; border-color: #009A29; }
#view-spec .bd-btn.is-warning:active { background: #E56B00; border-color: #E56B00; }
#view-spec .bd-btn.is-danger:active  { background: #D72929; border-color: #D72929; }

/* 按下（真实 :active）统一取 active 档；.is-on 用于分段控件的持续选中态 */
#view-spec .bd-btn.is-primary:active,
#view-spec .bd-btn.is-primary.is-active { background: var(--ab-primary-active); border-color: var(--ab-primary-active); color: #fff; }
#view-spec .bd-btn.is-on {
  background: var(--ab-primary-active); border-color: var(--ab-primary-active); color: #fff;
}


/* —— 尺寸：字号 12 / 14 / 16 / 18 / 20 → 高 28 / 30 / 32 / 34 / 36 ——
   规范只给了「字号梯度 + 高 = 字号 + 16」，这里用 --bd-fs 单一变量驱动，
   改字号档即自动换高度、padding 不动。旧类名保留：mini=12 / sm=14 / 默认=16 / lg=18 / xl=20。 */
#view-spec .bd-btn.is-mini,
#view-spec .bd-btn.is-fs12 { --bd-fs: 12px; }
#view-spec .bd-btn.is-sm,
#view-spec .bd-btn.is-fs14 { --bd-fs: 14px; }
#view-spec .bd-btn.is-lg,
#view-spec .bd-btn.is-fs18 { --bd-fs: 18px; }
#view-spec .bd-btn.is-xl,
#view-spec .bd-btn.is-fs20 { --bd-fs: 20px; }

/* —— 形状：方形 2px（默认）/ 正方形图标按钮（宽 = 高 = 字号 + 16）/ circle 50% / round 胶囊 ——
   规范明确「图标按钮保持正方形」，所以宽度跟着字号档走，不再写死 32/28/24。 */
#view-spec .bd-btn.is-square { width: calc(var(--bd-fs) + 16px); padding: 0; }
#view-spec .bd-btn.is-circle { width: calc(var(--bd-fs) + 16px); padding: 0; border-radius: 50%; }
#view-spec .bd-btn.is-round { border-radius: 999px; }

/* —— 加载中：1em 圆环 + 0.7s 线性旋转（规范外扩展，尺寸随字号自动缩放） —— */
#view-spec .bd-btn.is-loading { pointer-events: none; }
/* 加载时图标让位给圆环，否则「图标 + 圆环」两个图形同时出现 */
#view-spec .bd-btn.is-loading svg { display: none; }
/* 固定宽度加载：加载前后宽度不跳（Arco loadingFixedWidth），圆环在固定宽度内居中 */
#view-spec .bd-btn.is-fixw { width: 104px; padding: 0; justify-content: center; }
/* STATE 节：纯色板示例，冻结各状态色、整行禁止交互（对照设计稿只作状态颜色说明，不可点击） */
#view-spec .bd-row.is-static .bd-btn { pointer-events: none; }
#view-spec .bd-btn.is-loading::before {
  content: ""; flex: none; width: 1em; height: 1em;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: bd-spin .7s linear infinite;
}
@keyframes bd-spin { to { transform: rotate(360deg); } }

/* —— 禁用：不是统一灰，而是「同色系浅一档」，与规范图逐态对应 ——
   主要 = #B4CFFF 底 + 白字 · 次要 = #F0F6FF 底 + #ABCAFF 字 · 线形 = #B4CFFF 描边字
   辅助 = #F2F4F5 底 + #BDC0C4 字 · 文字 = 无底 + #B4CFFF / #B2B5B9 */
#view-spec .bd-btn:disabled {
  cursor: not-allowed;
  background: var(--ab-fill); color: var(--ab-ink-disabled); border-color: transparent;
}
#view-spec .bd-btn.is-primary:disabled {
  background: var(--ab-primary-disabled); border-color: var(--ab-primary-disabled); color: #fff;
}
#view-spec .bd-btn.is-secondary:disabled {
  background: var(--ab-primary-light); border-color: transparent; color: #ABCAFF;
}
#view-spec .bd-btn.is-aux:disabled { background: var(--ab-fill); color: var(--ab-ink-disabled); }
#view-spec .bd-btn.is-text:disabled {
  background: transparent; border-color: transparent; color: var(--ab-primary-disabled);
}
#view-spec .bd-btn.is-outline:disabled {
  background: transparent; border-color: var(--ab-primary-disabled); color: var(--ab-primary-disabled);
}
#view-spec .bd-btn.is-dashed:disabled { background: transparent; border: 1px dashed var(--ab-line-2); color: var(--ab-ink-disabled); }
#view-spec .bd-btn.is-success:disabled,
#view-spec .bd-btn.is-warning:disabled,
#view-spec .bd-btn.is-danger:disabled {
  background: var(--ab-fill); border-color: transparent; color: var(--ab-ink-disabled);
}

/* ===== 语义色 × 类型：语义色给「类型」上色（Arco 节奏），类型样式保留、仅换色相 =====
   通用 .is-success/.is-warning/.is-danger（上）只产生「实心语义色」= primary + 语义；
   这里补「类型 + 语义」组合，特异性 (0,3,0)/(0,4,0) 高于上方基础规则，干净覆盖、不改动它们。
   primary + 语义仍走通用实心规则，不在此重复。 */
/* —— DEFAULT —— */
#view-spec .bd-btn.is-secondary.is-success,
#view-spec .bd-btn.is-aux.is-success { background: var(--ab-success-light); border-color: transparent; color: var(--ab-success); }
#view-spec .bd-btn.is-secondary.is-warning,
#view-spec .bd-btn.is-aux.is-warning { background: var(--ab-warning-light); border-color: transparent; color: var(--ab-warning); }
#view-spec .bd-btn.is-secondary.is-danger,
#view-spec .bd-btn.is-aux.is-danger { background: var(--ab-danger-light); border-color: transparent; color: var(--ab-danger); }

#view-spec .bd-btn.is-text.is-success { background: transparent; border-color: transparent; color: var(--ab-success); }
#view-spec .bd-btn.is-text.is-warning { background: transparent; border-color: transparent; color: var(--ab-warning); }
#view-spec .bd-btn.is-text.is-danger { background: transparent; border-color: transparent; color: var(--ab-danger); }

#view-spec .bd-btn.is-outline.is-success { background: transparent; border-color: var(--ab-success); color: var(--ab-success); }
#view-spec .bd-btn.is-outline.is-warning { background: transparent; border-color: var(--ab-warning); color: var(--ab-warning); }
#view-spec .bd-btn.is-outline.is-danger { background: transparent; border-color: var(--ab-danger); color: var(--ab-danger); }

/* —— HOVER —— */
#view-spec .bd-btn.is-secondary.is-success:hover,
#view-spec .bd-btn.is-aux.is-success:hover { background: var(--ab-success); border-color: var(--ab-success); color: #fff; }
#view-spec .bd-btn.is-secondary.is-warning:hover,
#view-spec .bd-btn.is-aux.is-warning:hover { background: var(--ab-warning); border-color: var(--ab-warning); color: #fff; }
#view-spec .bd-btn.is-secondary.is-danger:hover,
#view-spec .bd-btn.is-aux.is-danger:hover { background: var(--ab-danger); border-color: var(--ab-danger); color: #fff; }

#view-spec .bd-btn.is-text.is-success:hover { background: var(--ab-success-light); border-color: transparent; color: var(--ab-success); }
#view-spec .bd-btn.is-text.is-warning:hover { background: var(--ab-warning-light); border-color: transparent; color: var(--ab-warning); }
#view-spec .bd-btn.is-text.is-danger:hover { background: var(--ab-danger-light); border-color: transparent; color: var(--ab-danger); }

#view-spec .bd-btn.is-outline.is-success:hover { background: transparent; border-color: var(--ab-success-hover); color: var(--ab-success-hover); }
#view-spec .bd-btn.is-outline.is-warning:hover { background: transparent; border-color: var(--ab-warning-hover); color: var(--ab-warning-hover); }
#view-spec .bd-btn.is-outline.is-danger:hover { background: transparent; border-color: var(--ab-danger-hover); color: var(--ab-danger-hover); }

/* —— ACTIVE（按下） —— */
#view-spec .bd-btn.is-secondary.is-success:active,
#view-spec .bd-btn.is-aux.is-success:active { background: var(--ab-success-active); border-color: var(--ab-success-active); color: #fff; }
#view-spec .bd-btn.is-secondary.is-warning:active,
#view-spec .bd-btn.is-aux.is-warning:active { background: var(--ab-warning-active); border-color: var(--ab-warning-active); color: #fff; }
#view-spec .bd-btn.is-secondary.is-danger:active,
#view-spec .bd-btn.is-aux.is-danger:active { background: var(--ab-danger-active); border-color: var(--ab-danger-active); color: #fff; }

#view-spec .bd-btn.is-text.is-success:active { background: var(--ab-success-light); border-color: transparent; color: var(--ab-success-active); }
#view-spec .bd-btn.is-text.is-warning:active { background: var(--ab-warning-light); border-color: transparent; color: var(--ab-warning-active); }
#view-spec .bd-btn.is-text.is-danger:active { background: var(--ab-danger-light); border-color: transparent; color: var(--ab-danger-active); }

#view-spec .bd-btn.is-outline.is-success:active { background: transparent; border-color: var(--ab-success-active); color: var(--ab-success-active); }
#view-spec .bd-btn.is-outline.is-warning:active { background: transparent; border-color: var(--ab-warning-active); color: var(--ab-warning-active); }
#view-spec .bd-btn.is-outline.is-danger:active { background: transparent; border-color: var(--ab-danger-active); color: var(--ab-danger-active); }

/* —— DISABLED：语义色按「类型」降档（Arco 节奏）——
   实心转浅实心（仍白字）／浅底转极浅底 + 浅语义字／线形转浅描边／文字转浅语义字。
   不加这一段，语义色的禁用会全部落到灰色底（.is-*-:disabled 通用规则），分不出色相。 */
#view-spec .bd-btn.is-primary.is-success:disabled { background: var(--ab-success-disabled); border-color: var(--ab-success-disabled); color: #fff; }
#view-spec .bd-btn.is-primary.is-warning:disabled { background: var(--ab-warning-disabled); border-color: var(--ab-warning-disabled); color: #fff; }
#view-spec .bd-btn.is-primary.is-danger:disabled  { background: var(--ab-danger-disabled);  border-color: var(--ab-danger-disabled);  color: #fff; }

#view-spec .bd-btn.is-secondary.is-success:disabled,
#view-spec .bd-btn.is-aux.is-success:disabled { background: var(--ab-success-faint); border-color: transparent; color: var(--ab-success-disabled); }
#view-spec .bd-btn.is-secondary.is-warning:disabled,
#view-spec .bd-btn.is-aux.is-warning:disabled { background: var(--ab-warning-faint); border-color: transparent; color: var(--ab-warning-disabled); }
#view-spec .bd-btn.is-secondary.is-danger:disabled,
#view-spec .bd-btn.is-aux.is-danger:disabled { background: var(--ab-danger-faint); border-color: transparent; color: var(--ab-danger-disabled); }

#view-spec .bd-btn.is-outline.is-success:disabled { background: transparent; border-color: var(--ab-success-disabled); color: var(--ab-success-disabled); }
#view-spec .bd-btn.is-outline.is-warning:disabled { background: transparent; border-color: var(--ab-warning-disabled); color: var(--ab-warning-disabled); }
#view-spec .bd-btn.is-outline.is-danger:disabled  { background: transparent; border-color: var(--ab-danger-disabled);  color: var(--ab-danger-disabled); }

#view-spec .bd-btn.is-text.is-success:disabled { background: transparent; border-color: transparent; color: var(--ab-success-disabled); }
#view-spec .bd-btn.is-text.is-warning:disabled { background: transparent; border-color: transparent; color: var(--ab-warning-disabled); }
#view-spec .bd-btn.is-text.is-danger:disabled  { background: transparent; border-color: transparent; color: var(--ab-danger-disabled); }


/* —— 组合按钮：相邻 0 间距，只有外侧保留圆角（Arco ButtonGroup） —— */
#view-spec .bd-group { display: inline-flex; }
#view-spec .bd-group .bd-btn { border-radius: 0; }
#view-spec .bd-group .bd-btn + .bd-btn { margin-left: -1px; }
#view-spec .bd-group .bd-btn:first-child { border-radius: var(--ab-radius) 0 0 var(--ab-radius); }
#view-spec .bd-group .bd-btn:last-child { border-radius: 0 var(--ab-radius) var(--ab-radius) 0; }
#view-spec .bd-group .bd-btn.is-on { position: relative; z-index: 1; }

/* —— 长按钮：block = 撑满容器宽度 —— */
#view-spec .bd-btn.is-long { width: 100%; }

/* 表格（API / 参数表）—— 2026-10-26 重做
   ① 原先每个格子四边都画 1px 边框 → 一整张深色网格，比内容还抢眼。
      现在纵向不画线，只留行与行之间的 1px 发丝线（分层靠线、不靠格子），
      行 hover 给一层极浅底，长表格（Form 有 37 条）扫读时不串行。
   ② 列宽不再交给浏览器的自动分配：JS 按列数生成 <colgroup> + table-layout:fixed
      把四列定死。自动列宽会被某一行最长的内容带偏 —— 曾出现一行 7 格
      把「默认值」挤成一行一个字的竖排（转义竖线没处理，见 mdToHtml 注释）。
   ③ 参数名 / 类型 / 默认值是代码性质的字符串，统一等宽字；描述用正文字体。 */
#view-spec .doc-table-wrap { overflow-x: auto; margin: 0 0 calc(16px * var(--hx-fsk, 1)); }
#view-spec .doc-table-wrap table {
  width: 100%; border-collapse: collapse;
  font-size: var(--hx-t13); line-height: 1.65;
}
#view-spec .doc-table-wrap table.doc-tbl-fixed { table-layout: fixed; }
#view-spec .doc-table-wrap th,
#view-spec .doc-table-wrap td {
  padding: 9px 18px 9px 0;
  border: 0; border-bottom: 1px solid var(--hx-line, var(--border));
  text-align: left; vertical-align: top;
  overflow-wrap: break-word;
}
/* 最后一列贴着内容区右缘收口，不额外留白 */
#view-spec .doc-table-wrap tr > :last-child { padding-right: 0; }
#view-spec .doc-table-wrap th {
  padding: 0 18px 8px 0;
  border-bottom: 1px solid var(--hx-line-2, var(--border-strong));
  font-size: var(--hx-t11); font-weight: 600; letter-spacing: .06em;
  color: var(--hx-dim2, var(--text-3));
  white-space: nowrap;
}
#view-spec .doc-table-wrap tbody tr:last-child td { border-bottom: 0; }
#view-spec .doc-table-wrap tbody tr:hover td { background: var(--hx-field-bg, var(--tk-fill-1)); }
#view-spec .doc-table-wrap td { color: var(--text-2); }
/* 参数名是这一行的主键：等宽 + 主文字色，扫读先看它 */
#view-spec .doc-table-wrap td:first-child {
  font-family: var(--hx-mono);
  font-size: var(--hx-t12); color: var(--hx-ink, var(--text));
}
/* 第 3 列起是类型 / 默认值 / 版本：等宽小一号 */
#view-spec .doc-table-wrap td:nth-child(n+3) {
  font-family: var(--hx-mono);
  font-size: var(--hx-t12);
}
/* 枚举值之间的竖线：压成灰细线，别和值本身抢注意力（但要看得出是分隔符，
   --hx-line-2 太淡，会读成「两个值挨在一起」） */
#view-spec .doc-table-wrap .doc-sep {
  font-style: normal; color: var(--hx-dim2, var(--text-3));
  margin: 0 3px;
}
/* 空默认值：弱化到只剩一个存在感极低的短横 */
#view-spec .doc-table-wrap .doc-nil { color: var(--hx-dim2, var(--text-3)); }
/* 表内行内代码（枚举值 / 属性名）随等宽字缩小一档，别把行撑高；
   nowrap：标识符绝不能在中间断开（曾把 iconOnly 拆成 icon / Only 两行） */
#view-spec .doc-table-wrap code {
  font-size: var(--hx-t11-5); padding: 0 3px; white-space: nowrap;
}
/* 列表 */
#view-spec .doc-sec ul, #view-spec .doc-sec ol { margin: 0 0 calc(12px * var(--hx-fsk, 1)); padding-left: calc(22px * var(--hx-fsk, 1)); }
#view-spec .doc-sec li { font-size: var(--hx-t13-5); line-height: 1.75; color: var(--text-2); margin-bottom: calc(4px * var(--hx-fsk, 1)); }
#view-spec .doc-sec li:last-child { margin-bottom: 0; }
/* 引用 */
#view-spec .doc-page blockquote {
  margin: 0 0 calc(14px * var(--hx-fsk, 1)); padding: calc(10px * var(--hx-fsk, 1)) calc(14px * var(--hx-fsk, 1));
  border-left: 3px solid var(--a-5); background: var(--a-1);
  border-radius: 0 6px 6px 0;
}
#view-spec .doc-page blockquote p { margin: 0; font-size: var(--hx-t13); color: var(--text-2); }
/* 官方插图（CDN 直链，属被还原内容） */
#view-spec .doc-page img {
  max-width: 100%; height: auto; display: block;
  margin: 2px 0 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--tk-bg);
}

/* ---------- 图标库浏览器（Icon 文档 %%Icons%% 占位符） ---------- */
#view-spec .ic-browser {
  margin: 0 0 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
#view-spec .ic-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--tk-fill-1);
}
#view-spec .ic-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
#view-spec .ic-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; font-size: var(--hx-t12-5); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
#view-spec .ic-tab:hover { color: var(--text); border-color: var(--text-3); }
#view-spec .ic-tab.on { color: var(--a-6); border-color: var(--a-6); background: var(--a-1); font-weight: 600; }
#view-spec .ic-tab-n { font-size: var(--hx-t11); font-weight: 400; color: var(--text-3); }
#view-spec .ic-tab.on .ic-tab-n { color: var(--a-6); opacity: .8; }
#view-spec .ic-search { position: relative; margin-left: auto; display: flex; align-items: center; }
#view-spec .ic-search svg {
  position: absolute; left: 10px; width: 14px; height: 14px;
  color: var(--text-3); pointer-events: none;
}
#view-spec .ic-q {
  width: 210px; padding: 6px 12px 6px 30px;
  font-size: var(--hx-t12-5); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
#view-spec .ic-q::placeholder { color: var(--text-3); }
#view-spec .ic-q:focus { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--overlay-dim); }
#view-spec .ic-body { padding: 14px; display: flex; flex-direction: column; gap: 18px; }
#view-spec .ic-cat-t {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--hx-t12-5); font-weight: 600; color: var(--text);
  margin: 0 0 10px;
}
#view-spec .ic-cat-n { font-size: var(--hx-t11); font-weight: 400; color: var(--text-3); }
#view-spec .ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: 8px; }
#view-spec .ic-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: center;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
#view-spec .ic-cell:hover { border-color: var(--a-4); background: var(--a-1); }
#view-spec .ic-ico {
  width: 24px; height: 24px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
#view-spec .ic-ico svg { width: 100%; height: 100%; display: block; }
#view-spec .ic-name {
  font-size: var(--hx-t11); color: var(--text-3); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-spec .ic-cell:hover .ic-name { color: var(--a-6); }
#view-spec .ic-empty { font-size: var(--hx-t13); color: var(--text-3); text-align: center; padding: 28px 0; margin: 0; }
#view-spec .ic-note {
  font-size: var(--hx-t11-5); color: var(--text-3); line-height: 1.6;
  margin: 0; padding: 10px 14px;
  border-top: 1px solid var(--border); background: var(--tk-fill-1);
}

/* ---------- 色卡网格（颜色 Color 文档 %%Block:<key>%% 渲染结果） ---------- */
#view-spec .cs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr));
  gap: 10px; margin: 0 0 14px;
}
#view-spec .cs-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  padding: 8px 8px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  cursor: pointer; text-align: left;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
#view-spec .cs-card:hover { border-color: var(--a-4); background: var(--a-1); }
/* 色块本身是规范内容色（数据给定、内联 background），块内「文字」示意前景色用法 */
#view-spec .cs-chip {
  display: flex; align-items: center; justify-content: center;
  height: 52px; border-radius: 4px;
}
#view-spec .cs-chip i {
  font-style: normal; font-size: var(--hx-t12-5); font-weight: 600;
  color: #fff; letter-spacing: .5px;
}
#view-spec .cs-name {
  font-size: var(--hx-t12); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-spec .cs-hex {
  font-family: var(--hx-mono);
  font-size: var(--hx-t11); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-spec .cs-card:hover .cs-name { color: var(--text); }
#view-spec .cs-card:hover .cs-hex { color: var(--a-6); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  #view-spec .ws { flex-direction: column; gap: 14px; align-items: stretch; }
  #view-spec .ws-toc {
    position: static; width: 100%; max-height: none;
    flex-direction: row; overflow-x: auto;
  }
  #view-spec .ws-toc a { border-left: 0; border-bottom: 2px solid var(--border); }
  #view-spec .ws-toc a.on { border-bottom-color: var(--a-6); }
  #view-spec .tk-pal-row { flex-wrap: wrap; }
  #view-spec .tk-pal-name { width: auto; }
  /* 窄屏单行参考行退回多行结构：名称独占一行、场景第二行、值第三行 */
  #view-spec .tk-token--row { flex-wrap: wrap; }
  #view-spec .tk-token--row .tk-token-name { width: auto; flex: 1 1 auto; }
  #view-spec .tk-token--row .tk-token-desc { flex-basis: 100%; }
  #view-spec .tk-token--row .tk-token-val { margin-left: 0; max-width: 100%; }
  /* 窄屏顶部栏：标题与工具组换行，搜索框收缩 */
  #view-spec .ws-topbar .tb-head { flex-wrap: wrap; gap: 10px; }
  #view-spec .ws-search input { width: min(240px, calc(100vw - 160px)); }
  /* 窄屏目录横滑：分组标题与条目同排流动 */
  #view-spec .ws-toc-group { flex-direction: row; align-items: center; gap: 2px; margin-top: 0; }
  #view-spec .ws-toc-sub { flex-direction: row; align-items: center; gap: 2px; }
  #view-spec .ws-toc-group-t, #view-spec .ws-toc-sub-t { white-space: nowrap; padding: 6px 8px; }
  /* 横滑目录：子项不参与收缩 —— 字号放大后一旦被压窄，条目会缩成「设计变…」这种省略号，
     宁可让整条横向溢出、由 .ws-toc 的 overflow-x 承接 */
  #view-spec .ws-toc > *, #view-spec .ws-toc-group > *, #view-spec .ws-toc-sub > * { flex: none; }
  #view-spec .ws-toc-sub a { padding-left: 10px; }
  /* 窄屏图标浏览器：搜索框独占一行 */
  #view-spec .ic-search { margin-left: 0; width: 100%; }
  #view-spec .ic-q { width: 100%; }
  /* 窄屏文档表格更紧凑 */
  #view-spec .doc-table-wrap th, #view-spec .doc-table-wrap td { padding: 6px 8px; font-size: var(--hx-t12-5); }
}

/* 手机竖屏：返回键文案会带「来源工具名」（如「返回 PDF 压缩」），
   单行放不下会把头部撑破 → 标题独占一行，控件组另起一行并允许内部换行 */
@media (max-width: 640px) {
  #view-spec .ws-topbar .tb-head { flex-wrap: wrap; }
  #view-spec .ws-topbar .tb-head > h1 { flex: 0 0 auto; max-width: 100%; }
  #view-spec .ws-topbar-tools {
    flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; min-width: 0;
  }
  #view-spec .ws-search { flex: 1 1 100%; min-width: 0; }
  #view-spec .ws-search input { width: 100%; min-width: 0; }
}

/* ——— 窄屏：参数表改成「一行一张卡」（2026-10-26） ———
   四列在 720px 以下必然被挤出屏幕，而横向滚动读参数表是最差体验。
   表头藏起来，改用每格上的 data-label 当行内标签；参数名单独占一行当小标题。
   放在文件末尾是为了压过上面 @media(max-width:640px) 里的 padding 规则。 */
@media (max-width: 720px) {
  #view-spec .doc-table-wrap { overflow-x: visible; }
  #view-spec .doc-table-wrap table,
  #view-spec .doc-table-wrap table.doc-tbl-fixed { table-layout: auto; display: block; }
  #view-spec .doc-table-wrap colgroup,
  #view-spec .doc-table-wrap thead { display: none; }
  #view-spec .doc-table-wrap tbody { display: block; }
  #view-spec .doc-table-wrap tbody tr {
    display: block; padding: 11px 0 12px;
    border-bottom: 1px solid var(--hx-line, var(--border));
  }
  #view-spec .doc-table-wrap tbody tr:last-child { border-bottom: 0; }
  #view-spec .doc-table-wrap tbody tr:hover td { background: none; }
  #view-spec .doc-table-wrap tbody td {
    display: grid; grid-template-columns: 58px 1fr; gap: 3px 12px;
    padding: 2px 0; border: 0; font-size: var(--hx-t12-5);
  }
  #view-spec .doc-table-wrap tbody td::before {
    content: attr(data-label);
    font-family: inherit; font-size: var(--hx-t10-5); letter-spacing: .06em;
    color: var(--hx-dim2, var(--text-3)); padding-top: 3px;
  }
  /* 参数名当行标题：不带标签、大一档，和下面三项拉开层级 */
  #view-spec .doc-table-wrap tbody td:first-child {
    grid-template-columns: 1fr; font-size: var(--hx-t13); padding-bottom: 4px;
  }
  #view-spec .doc-table-wrap tbody td:first-child::before { content: none; }
  #view-spec .doc-table-wrap tbody td:not([data-label]) { grid-template-columns: 1fr; }
  #view-spec .doc-table-wrap tbody td:not([data-label])::before { content: none; }
  /* grid 的 1fr 子项默认 min-width:auto，长串会顶穿容器 */
  #view-spec .doc-table-wrap .doc-td { min-width: 0; }
  /* 窄屏里标识符允许折行，否则会顶穿屏幕 */
  #view-spec .doc-table-wrap code { white-space: normal; }
}


/* ===== 按钮配置器（页面顶部 playground，2026-10-26） =====
   结构：左「选项」+ 右「预览（竖分割线 + 纯白底）」+ 通栏页脚「查看 CSS / 复制 CSS」。
   整块无外内边距，由各区自己撑 —— 竖分割线才能从顶到底贯穿。
   内部配色一律用「16px 基准」的字面色值，不引 --hx-*：
   这块是给别人照抄的规范实物，不跟站内皮肤走。 */
#view-spec .pg {
  margin: 8px 0 26px;
  background: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  font-family: var(--hx-sans);
  color: #3E464F;
}

/* —— 左：选项 —— */
#view-spec .pg-opts { padding: calc(16px * var(--hx-fsk, 1)) 30px calc(16px * var(--hx-fsk, 1)) 20px; }
#view-spec .pg-row { display: flex; align-items: center; gap: calc(12px * var(--hx-fsk, 1)); min-height: calc(var(--hx-t12) + 20px); }
#view-spec .pg-row + .pg-row { margin-top: calc(4px * var(--hx-fsk, 1)); }
#view-spec .pg-row > i {
  /* 定宽 34px 在字号放大后装不下「类型」两个字，会被挤成竖排单字 —— 改最小宽度 + 不换行 */
  flex: none; min-width: 34px; white-space: nowrap;
  font-style: normal; font-size: var(--hx-t12); line-height: 1; color: #989DA2;
}
/* 选项不做「一排小方框」：整组落进一个浅灰槽，未选透明、选中主色实心。
   灰槽本身没有描边，视觉上是一组分段控件，不是一堆输入框。 */
#view-spec .pg-seg {
  display: flex; flex-wrap: wrap; gap: calc(2px * var(--hx-fsk, 1));
  padding: calc(2px * var(--hx-fsk, 1)); border-radius: 2px; background: #F2F4F5;
}
#view-spec .pg-opt {
  /* 高度跟着自己的字号走（字号 + 12 的上下余量），不要写死 24px ——
     22 档下选项字 19px 挤在 24px 里，上下只剩 2.5px，像要贴到边上 */
  height: calc(var(--hx-t12) + 12px);
  min-width: calc(40px * var(--hx-fsk, 1));
  padding: 0 calc(10px * var(--hx-fsk, 1));
  font: inherit; font-size: var(--hx-t12); line-height: 1;
  border: 0; border-radius: 2px;
  background: transparent; color: #6B7178; cursor: pointer;
  transition: background .12s, color .12s;
}
#view-spec .pg-opt:hover { background: #E5E7EA; color: #3E464F; }
#view-spec .pg-opt.on,
#view-spec .pg-opt.on:hover { background: #4488FF; color: #fff; }

/* —— 右：预览（分割线左、白底内） —— */
#view-spec .pg-side {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 16px 20px 16px 30px;
  border-left: 1px solid #EDEFF1;
}
#view-spec .pg-canvas {
  flex: 0 0 auto; min-height: 96px; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
#view-spec .pg-metrics {
  font-family: var(--hx-mono);
  font-size: var(--hx-t11-5); line-height: 1.6; color: #6B7178;
  font-variant-numeric: tabular-nums;
  text-align: left; white-space: pre-line;
}

/* —— 页脚：查看 CSS（展开占满左侧）+ 复制（右下角） —— */
#view-spec .pg-foot {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 10px 20px 14px;
  border-top: 1px solid #EDEFF1;
}
#view-spec .pg-code { flex: 1 1 auto; min-width: 0; }
#view-spec .pg-code > summary {
  cursor: pointer; list-style: none;
  height: 26px; font-size: var(--hx-t12); color: #6B7178;
  display: flex; align-items: center; gap: 6px;
}
#view-spec .pg-code > summary::-webkit-details-marker { display: none; }
#view-spec .pg-code > summary::before { content: "+"; color: #989DA2; }
#view-spec .pg-code[open] > summary::before { content: "\2212"; }
#view-spec .pg-code pre { margin: 10px 0 0; padding: 12px 14px; background: #F7F8FA; overflow-x: auto; font-family: var(--hx-mono); }
/* 站内给行内 code 铺了深底（深色皮肤下更明显），这里必须全部还原成纯文本块，
   否则每行会变成一段黑底白字。 */
#view-spec .pg-code pre code {
  display: block;
  font-family: var(--hx-mono);
  font-size: var(--hx-t11-5); line-height: 1.7;
  color: #3E464F; background: none; border: 0; padding: 0; border-radius: 0;
  white-space: pre; word-break: normal; tab-size: 2;
}
#view-spec .pg-copy {
  flex: none; margin-left: auto;
  height: 24px; padding: 0 12px;
  font: inherit; font-size: var(--hx-t12); line-height: 1;
  border: 0; border-radius: 2px;
  background: #F2F4F5; color: #3E464F; cursor: pointer;
  transition: background .12s, color .12s;
}
#view-spec .pg-copy:hover { background: #E5E7EA; color: #4488FF; }

/* —— 窄屏：预览落到下方，分割线转横线 —— */
@media (max-width: 900px) {
  #view-spec .pg { grid-template-columns: minmax(0, 1fr); }
  #view-spec .pg-opts { padding: 16px 20px 14px; }
  #view-spec .pg-side {
    padding: 14px 20px 16px;
    border-left: 0; border-top: 1px solid #EDEFF1;
  }
  #view-spec .pg-side { justify-content: flex-start; }
  #view-spec .pg-canvas { min-height: 96px; }
}