/* ══════════════════════════════════════════════════════════════════════════
   数字书写与呈现规范（num-standard.css）
   ──────────────────────────────────────────────────────────────────────────
   为什么要有这个文件：后台的数字会**随数据变**（今天 1,234、明天 12,345），
   如果每个数字宽度不一样、格式不统一，整块版面就会**左右晃、上下跳**，很干扰视觉。

   三条规矩：
     ① 格式统一 —— 金额一律 ¥12,345.00（千分位 + 两位小数），数量一律「33 笔」，
        百分比一律 17.76%。**同一屏内不混用两种写法。**
     ② 宽度稳定 —— 数字用等宽字形（tabular-nums），并给容器最小宽度，
        数字从 9 变 10,000 时**版面不动**。
     ③ 加载稳定 —— 没取到数时不空着（空了自己塌陷），用占位符撑住位置。

   用法：<link rel="stylesheet" href="/static/shared/num-standard.css">
        <span class="num">¥12,200.00</span>              // 普通金额
        <span class="num num-lg">¥12,200</span>          // 大数字（首页那种）
        <span class="num num-qty">33 笔</span>            // 数量
        <span class="num num-pct">17.76%</span>           // 百分比
        <span class="num-slot">¥000,000.00</span>        // 占位（取数前撑住宽度）
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 等宽数字：一切数字的底座 ─────────────────────────────────────────── */
.num,
.num-lg,
.num-qty,
.num-pct,
.num-slot,
[data-money],
[data-value],
td.num, th.num,
/* ★ 还要覆盖「**装数字的容器本身**」——很多页面把数字直接塞在容器里，
   不带 .num 类（实测：`<div class="big serif" id="hRev">¥12,200.00</div>`）。
   只写 .num 会导致「同一个组件，有的页面对、有的页面散」。 */
.big, .big .cur, .big .unit,
.row .v, .row .l .num,
.cmp b, .one b {
  /* ★ 字体：数字必须用**西文**衬线/等宽，不能用中文宋体。
     为什么（实测）：SimSun / Songti 的阿拉伯数字是**全角**（每个字符占一个汉字宽），
     `¥12,200.00` 会摊成 "¥ 1 2 , 2 0 0 . 0 0" 那样散开 —— 看着像没对齐、像"上蹿下跳"。
     西文字族在前、serif 兜底：**数字走 Georgia，中文（"人在岗"这类）自动回落宋体**，
     两种字各用各的，混排反而更整齐。 */
  font-family: Georgia, "Times New Roman", "Source Serif Pro",
               "Songti SC", "SimSun", serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;   /* 等宽 + 等高字形 */
  letter-spacing: 0;                            /* 等宽下再加字距会破坏对齐 */
}

/* 大字号块里的数字：**跟随父块的字距**。
   为什么：`.big` 这类块常用负字距收紧（如 -1.2px），而数字若停在 0，
   同一个块里就出现两种字距 —— 实测表现为「数字看上去比周围散、像没对齐」。
   用 inherit 让数字和它所在的标题块同一种间距，**宽度仍稳定**（tabular 不变）。 */
.big .num, .big .num-lg, .big .num-qty, .big .num-pct,
.big [data-money], .big [data-value] {
  letter-spacing: inherit;
}

/* ── ② 金额：千分位 + 两位小数（服务端 display 已是这个格式，这里兜底） ── */
.num {
  display: inline-block;
  white-space: nowrap;                          /* 数字中间绝不折行 */
}
.num-lg {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.15;                            /* 别再压到 1.02，字会被切 */
  min-height: 1.15em;                           /* 取数前后高度一致，不跳 */
}
/* 数量 / 百分比：同为数字，宽度稳定 */
.num-qty, .num-pct {
  display: inline-block;
  white-space: nowrap;
}

/* ── ③ 宽度锚：取数前先占住位置，数据来了不被撑开 ─────────────────────────
   为什么用「¥000,000.00」这种占位：它和真实最长值宽度接近，
   data 到位后只在原地换字，**版面一次都不动**。 */
.num-slot {
  display: inline-block;
  white-space: nowrap;
  color: transparent;                           /* 占位本身不显示，只占宽度 */
  pointer-events: none;
  user-select: none;
}
/* 取到数之后，把占位符换掉（JS 里 remove() 即可）；万一没取到，用这个显示「—」 */
.num-empty {
  display: inline-block;
  white-space: nowrap;
  color: var(--ink-3, #8b92a6);
  font-variant-numeric: tabular-nums;
}

/* ── ④ 数字块：标签在上、数字在下时的固定结构（宽度不随数字变） ────────── */
.num-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;                                 /* 允许 grid 收缩，不撑破 */
}
.num-block > .lbl {
  font-size: 13.5px;                            /* 全站绝对下限 13.5（V2 适老字号）：曾 13px，33 页的「最小字号」都被它压破 */
  font-weight: 600;
  color: var(--ink-2, #5c6478);
  white-space: nowrap;
}
.num-block > .val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;                      /* 万一超长，省略号而不是顶破 */
}

/* ── ⑤ 表格里的数字列：右对齐 + 等宽（最容易被忽略的一处） ───────────────
   ★ 单元格上的 .num 不适用「行内块」——先把这条钉死，否则下面两条全白写：
   ② 里的 .num{display:inline-block} 是给**行内数字**（<span class="num">）用的。
   它一旦命中单元格（<td class="num">），这个格就不再是「格」：浏览器会把同一行里连着
   的那几个行内块**塞进一个匿名单元格**里按行内流排（匿名盒不在 DOM 里，M1 与逐元素
   两把尺都看不见它）。实测（static/boss/partner-guide.html 那张 5 列表，320/430 档）：
   三个数字格 left 全挤在 116、竖着堆，行高 45 → 136px，「该拿」表头下面一个数都没有。
   所以：把单元格的 display 交还给表格布局（table-cell = 浏览器对 td/th 的原始值）；
   等宽字形、不折行、右对齐、内边距这些数字规矩**一条不动**（就在下面几条里）。
   （边界：这条只压得住共享表自己的 .num，不压页面里更具体的写法；全站以元素 td 设
   display 的只有 boss/partner-triad.html 的「窄屏卡片式表格」，而它没有 td.num ⇒ 不相干。） */
td.num, th.num { display: table-cell; }
table td.num, table th.num,
table td:has(> .num), table th:has(> .num) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table td.num, table th.num { padding-right: 10px; }

/* ── ⑥ 变化时不闪不跳：数字更新走「原地换字」，不许缩放/动画 ───────────── */
.num, .num-lg, .num-qty, .num-pct, .val {
  transition: none;                             /* 明令禁止：数字跳动/缩放动画 */
}