/* =========================================================================
   metrics.css —— 指标卡组件（数值格 + 值变化反馈）

   为什么是单独一份，而不是留在 components.css
   ------------------------------------------
   首页 index.html 按设计**不加载** components.css：它的通用选择器会与首页内联样式
   发生特异性碰撞（加载进来等于让首页排版被另一套规则改写）。但首页的 `techMetrics`
   网格正是这个组件 —— 历史上首页因此自己写了一份，于是有了"同一个组件三个尺寸"的
   漂移（18px vs `--fs-20`、12.5px vs `--fs-14`）和"首页传 pos/neg 而自己的 CSS
   里没有定义、静默不染色"这两个缺陷。

   收编进 components.css 之后漂移没了，但首页退化成**没有样式**（组件不在它加载的
   文件里）。所以拆成可单独加载的一份：
     · 首页只加载这一份；
     · 其余 16 页照旧加载 components.css，并额外加载这一份。
   实现仍然只有一处 —— 这是拆文件，不是拆逻辑。门禁 C22 校验"用了 FSMotion 的页面
   必须加载本文件"：漏加载的表现是**刷新时数字变了却什么都没发生**，不抛错。

   这份文件里两组规则属于同一个组件的两个面，不能只搬一半：
     · `.metrics/.metric` —— 网格与卡片的静态样式；
     · `.fs-flash-*`      —— 值变化反馈。`FSMotion.grid` 的闪色**就是指标卡的反馈
       通道**（判定与触发在 /static/motion.js），只搬静态样式等于把组件劈成两半。
   ========================================================================= */

/* ── 指标网格（唯一实现）──
   此前 index / intel / admin 各写一份，而且**三份不一样**：值字号 18px（不在刻度上）
   vs 20px（`--fs-20`）、标签 12.5px vs 14px（`--fs-14`）、内边距 14/16 vs 12/14、
   index 硬编码 `'JetBrains Mono'` 而别处用 `--font-mono`、index 多一个 hover 过渡。
   同一个组件三个尺寸，就是"设计系统"名存实亡的写法。这里按 token 刻度收一份：
   两页已用刻度值，index 的 18/12.5 不在刻度上 ⇒ 判定为漂移，取刻度值。
   布局列宽也一并收（mobile.css 用 !important 覆盖断点，与本文件次序无关）。 */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 14px 0; }
.metric {
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.metric:hover { border-color: var(--border-2); }
.metric .v { font-family: var(--font-mono); font-size: var(--fs-20); font-weight: 700; color: var(--text-0); }
.metric .k { font-size: var(--fs-14); color: var(--text-2); margin-top: 4px; }

/* 指标卡数值的语义色（唯一实现）──
   `up/down` = 涨跌方向，走 `--up/--down`（随 `data-market` 翻转）；
   `pos/neg` = 质量判断（胜率、索提诺…），走 `--ok/--err`。
   两套类名**不能合并**：涨跌方向与"好/坏"是两种语义（门禁 C9 也禁止涨跌与
   严重度/质量共用类名）。
   此前这段规则被 index / intel / admin 各写一份，而 index 那份只写了 `up/down`——
   于是它自己传进来的 `pos/neg`（胜率<50%、最大回撤、VaR/CVaR、索提诺<1）
   **谁也不认识，静默不染色**。同一件事写三遍就会漏，收一处。 */
.metric.up .v { color: var(--up); }
.metric.down .v { color: var(--down); }
.metric.pos .v { color: var(--ok); }
.metric.neg .v { color: var(--err); }

/* ── 值变化反馈（唯一实现；判定与触发逻辑在 /static/motion.js，门禁 C22）──
   为什么染**背景**而不是"文字闪一下语义色"：金融读数本身已按涨跌着色
   （`.metric.up .v { color: var(--up) }`），把文字再染成同一个语义色，视觉上等于
   什么都没发生。变化提示必须落在**没被语义占用的通道**上 —— 背景。
   方向未知时（"—" → 3.2%、或非数值文本变化）用品牌金：与 §5.3-3「数据刷新脉冲」
   同一语义（"这是新数据"），不发明第三种含义。
   降级：全局 prefers-reduced-motion 开关在 design-tokens.css（每个页面都加载，含首页）。 */
@keyframes fsFlashUp   { from { background-color: var(--up-dim); }   to { background-color: transparent; } }
@keyframes fsFlashDown { from { background-color: var(--down-dim); } to { background-color: transparent; } }
@keyframes fsFlashFlat { from { background-color: var(--gold-dim); } to { background-color: transparent; } }
.fs-flash-up   { animation: fsFlashUp var(--dur-flash) var(--ease-out) 1; }
.fs-flash-down { animation: fsFlashDown var(--dur-flash) var(--ease-out) 1; }
.fs-flash-flat { animation: fsFlashFlat var(--dur-flash) var(--ease-out) 1; }