/* ============================================================================
   Delta — 变化量（涨跌 / 增减）
   ============================================================================
   一句话：**一个数相对某个基准变了多少，带方向**。

   🔴 它与 badge、table 的 num--pos/neg 分工在哪
   ----------------------------------------------------------------------------
   · badge      说的是**状态**（已停牌 / 审计中）—— 一个词，没有数值
   · num--pos/neg 说的是**会计正负**（营收 -3.2 亿是"红字"）—— 好恶由会计决定
   · delta      说的是**变化方向**（同比 +12.4%）—— 只描述往哪边变了

   这不是同一件事的三种叫法。最刺眼的例子：
     「研发费用 +38%」用 num--pos 渲染成绿 = 说"好消息"，
     而它其实是成本失控。颜色对了语义错了，读者不会怀疑颜色，只会怀疑自己的判断。

   🔴 为什么符号由 CSS 生成，而不是写在 HTML 里
   ----------------------------------------------------------------------------
   与 `table .num--pos::before` 同一理由：让"漏写符号"在结构上不可能发生。
   demo 里留着一组对照 —— 手写 `−1.05%` 再叠 CSS 的 `−`，渲染成 `−−1.05%`。
   这类错误不会报错、不会崩，只会让报表看起来像坏了。

   ⇒ 约定：**HTML 里写数值本体（`3.21%`），符号交给本组件。**

   🔴 为什么不能只靠颜色（WCAG 1.4.1）
   ----------------------------------------------------------------------------
   红绿是**冗余线索**，不是唯一线索。默认的 `+` / `−` 就是第二线索；
   需要更强方向感时加 `.delta--arrow`，把符号换成 ▲ / ▼。
   ⚠️ 箭头是字符伪元素，读屏可能把它念成字符名。要严格可控，
      请给外层加 `aria-label`（如「同比上涨 12.4%」），或不用这一档。

   🔴 方向由**你**给，不由数值推断
   ----------------------------------------------------------------------------
   本组件没有 JS，也不会读数值。类名写错就颜色错，且不报错。
   ⇒ 数据侧务必按值选类；值恰好为 0 时用 `.delta--flat`，不要塞进 up/down。

   口径：默认红涨绿跌（A 股）。`[data-market="intl"]` 下整体对调，
   本文件**不做任何判断** —— 它只写 `var(--dir-up)`，切换发生在令牌层。

   实测对比度（05-audit/contrast.py）：
     浅色 up 4.89–5.44 / down 5.75–5.96 · 暗色 up 5.60–6.15 / down 6.01–6.60
   全部 ≥ 4.5（AA），12px 小字号下也成立。
   ========================================================================= */

.delta {
  display: inline-flex;
  align-items: baseline;      /* 与相邻数字基线对齐，不用 center（会错半像素）*/
  gap: 0.15em;                /* 符号与数字之间：随字号走，不用 --sp（那是布局间距）*/
  font-family: var(--mono);
  /* 🔴 这里**故意不声明**「等宽数字」那个特性（`tabular-nums`）。
     等宽字族每个字形同宽（含 `.` 与 `,`），数字天然对齐；
     那个特性只对**比例字族**有意义，在等宽字族上是无效动作。
     库里的 `.num` / `.num-lg` 是为「比例字体里的数字」准备的统一手段，
     而 delta 已经用 `--mono` 从字族层面解决了 —— 再声明一次就是两套机制。 */
  white-space: nowrap;        /* 「+12.4%」不许断成两行 */
  font-weight: 500;           /* 比正文重半档：它是结论，不是叙述 */
  line-height: 1.4;
}

/* 符号槽：默认正负号。放在 ::before 而不是 ::after —— 符号是"前缀"，
   且 ::before 在 bidi 环境下会跟着方向走（RTL 里自然跑到右边）。 */
.delta::before {
  font-weight: 400;           /* 符号别跟着加粗，否则像"两个 +" */
  font-size: 0.95em;
}

.delta--up {
  color: var(--dir-up);
}
.delta--up::before {
  content: "+";
}

.delta--down {
  color: var(--dir-down);
}
.delta--down::before {
  content: "\2212";           /* U+2212 真减号。连字符比它窄一半，混排会歪 */
}

/* 持平：无方向 ⇒ 无符号、无彩色。
   ⚠️ 这里**故意不生成符号**：0 本身没有方向，给个 ± 是把"误差"的概念借过来。
   它不违反 1.4.1，因为中性色本来就不承载"涨/跌"这个信息。 */
.delta--flat {
  color: var(--text-secondary);
}
.delta--flat::before {
  content: none;
}

/* 方向强化档：把符号换成箭头。
   ⚠️ 与符号档**互斥**（同一个 ::before），不要同时加。 */
.delta--arrow.delta--up::before {
  content: "\25B2";           /* ▲ */
  font-size: 0.8em;           /* 三角在同样字号下显得过大 */
}
.delta--arrow.delta--down::before {
  content: "\25BC";           /* ▼ */
  font-size: 0.8em;
}

/* 表格行内、密集列表里的紧凑档 */
.delta--sm {
  font-size: var(--fs-xs);
  font-weight: 400;
}

/* 🔴 这里**故意没有** `@media (forced-colors: active)` 块
   ----------------------------------------------------------------------------
   第一版写了一个（给 up/down 加下划线，理由是"强制色下红绿都变系统色"）。
   写完发现自己绕回来了：强制色确实会抹掉红绿，但 1.4.1 要的是
   "**信息不能只由颜色承载**" —— 而 `+` / `−` 一直都在，与配色无关。
   ⇒ 颜色被抹掉时，符号仍在表达方向，本来就不需要补偿。
   加下划线反而更糟：它会让数字看起来像链接。 */