/* ============================================================
   artifact-skin —— 产物的「标注层」换成站点自己的字体与色阶
   ============================================================
   每份产物里有两层东西，必须分开对待：

     ① 标注层  —— 路径名、评分、区域标题、图例、说明
                  这是"我在讲解"，属于作品集，必须跟正文一套语汇
     ② 页面本体 —— .lp-* / .tb / .kpi / .nav-* / .sect / .kv* …
                  这是"被讲解的产品界面"，是证物，原样保留

   这份文件只碰 ①。改动范围严格按类名点名，不写通配，
   免得手一滑把线框图也一起"美化"了 —— 那就等于伪造证物。

   权重的实情（跟直觉不一样，改之前先读）：
   产物自带的 CSS 被编译成 `.art-<id> .col-nm`，这里写的是 `.art .col-nm`，
   两边都是「一个类 + 一个类」，权重完全相同；而产物的那份是 app.js 运行时
   append 进 head 的，排在这个 <link> 后面 —— 同权重、后来者赢。
   所以：产物没声明的属性（多数 font-family / color）这里说了算，
   产物自己声明过的（几乎所有 font-size）以产物为准，这里的值只是兜底。
   想让某条真正盖过产物，得自己再加一层权重，别只改数值。
   ============================================================ */

/* 兜底：产物里没被自身 CSS 指定字体的文本，跟站点走 */
.art {
  font-family: var(--sans);
  color: var(--ink);

  /* 标注层的字号单位 —— 抵消整幅缩放。
     产物按自己的设计宽度排版，再被 app.js 整体 scale(--s) 缩到栏宽。
     写死 17px 的话，--s=0.8 的图上渲染成 13.6px，--s=1 的图上就是 17px，
     同一套标注在不同图里不一样大。按 --art-em 记数之后，
     下面每条写的都是"最终看到的像素"，跟这张图缩了多少无关。 */
  --art-em: calc(1px / var(--s, .8));
}

/* ── 通用标注元素 ─────────────────────────────────────────── */

/* 小号全大写标签：PATH 01 / BASELINE / GROUP 01 这类 */
.art .col-tag,
.art .side-tag,
.art .dim-tag,
.art .g-n {
  font-family: var(--mono);
  font-size: calc(10.4 * var(--art-em));   /* 标签本来就该退一档 */
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* 标注的主名称：路径名 / 分组名 */
.art .col-nm,
.art .side-nm {
  font-family: var(--display);
  font-size: calc(15.2 * var(--art-em));   /* 跟正文同级 */
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
}
.art .col-nm em,
.art .side-nm em {
  display: block;
  font-size: calc(12 * var(--art-em));
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-top: 2px;
}

/* 分数：数字用 display 字重压住，/75 退到次级 */
.art .col-sc,
.art .side-sc {
  font-family: var(--display);
  font-size: calc(24 * var(--art-em));     /* 分数是这张图的主角，给足字重和字号 */
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.art .col-sc small,
.art .side-sc small {
  font-family: var(--mono);
  font-size: calc(11.2 * var(--art-em));
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
}

/* 区域标题 + 区域说明（细节对比图里的「区域 A · 筛选区布局」） */
.art h2.zone {
  font-family: var(--display);
  font-weight: 800;
  font-size: calc(16.8 * var(--art-em));
  letter-spacing: -0.01em;
  color: var(--ink);
}
.art .zone-d,
.art .vd,
.art .g-hd p {
  font-family: var(--sans);
  font-size: calc(13.6 * var(--art-em));
  line-height: 1.72;
  color: var(--ink-2);
}
.art .vd b {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink-3);
}

/* 分组大标题（skill 前后对比里的「列表页」「详情页」） */
.art .g-hd h2 {
  font-family: var(--display);
  font-size: calc(22.4 * var(--art-em));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* 图例 */
.art .legend h3,
.art .lg-hd {
  font-family: var(--display);
  font-size: calc(15.2 * var(--art-em));
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.art .lg-col li {
  font-family: var(--sans);
  font-size: calc(12.8 * var(--art-em));
  line-height: 1.7;
  color: var(--ink-2);
}
.art .lg-col li b,
.art .mk::after {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .04em;
}

/* 标注用的小圆点 / 序号徽标：跟站点的评论 pin 同一套形状语言 */
.art .mk {
  border-radius: 50% 50% 50% 2px;
}

/* ── 明确不碰的：页面本体 ─────────────────────────────────────
   下面这些类是被讲解的产品界面本身，任何字体/字号覆盖都会让它
   不再是"当时真实生成的样子"。留白在这里是刻意的。

     .lp-top .lp-tab .lp-fi .lp-fa .lp-lh   列表页
     .tb .fcard .fline .facts               表格与卡片
     .h-t .h-meta .kpi .nav-p .nav-c        详情页头与导航
     .sect .grp .kv2 .kv4 .tl-h .dt         详情页区块
     .btn .act .chip .code .crumb .banner   控件
   ──────────────────────────────────────────────────────────── */