/* ══════════════════════════════════════════════════════════════
   星跃 VI 1.2 · 平台互动字形组件（Interaction Glyphs）
   2026-08-30 定稿 · 规范文档：../平台互动体系调研与图标规范.md
   依赖：golive_tokens.css（或 vi-tokens.css 兼容层）
   搭配：vi-interactions.js（SVG sprite + VI_INTER.metrics() 渲染助手）

   设计原则：
   1. 官方字形单色渲染（currentColor），禁粉彩多色
   2. 语义在 tooltip（官方名 + 公开/私密），同形不同义靠 tooltip 消歧
   3. 采不到的指标用禁用态（.is-disabled），区分「无数据」与「数据为0」
   ══════════════════════════════════════════════════════════════ */

/* 指标行容器 */
.vi-inter {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.vi-inter.is-compact { gap: 12px; }

/* 单指标：图标 + 数值
   字体/字号继承上下文（em 相对尺寸），与相邻文本自然对齐；
   需要独立大小时用 .is-sm/.is-lg 或在外层容器设 font-size */
.vi-inter-m {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-ink-secondary, #5A6572);
  transition: color var(--dur-fast, .15s) var(--ease, cubic-bezier(.22,.61,.36,1));
  cursor: default;
  white-space: nowrap;
  line-height: 1;
}
.vi-inter-m svg {
  width: 1.45em;
  height: 1.45em;
  flex: none;
}
.vi-inter-m .n {
  font-family: inherit;
  font-size: 1em;
  line-height: 1;
}
.vi-inter-m:hover { color: var(--color-coral, #E8542E); }

/* 尺寸变体（独立成行时使用；嵌入 meta 文本行时无需加，自动继承） */
.vi-inter.is-sm { font-size: .75rem; }
.vi-inter.is-lg { font-size: .9375rem; }
.vi-inter.is-lg .vi-inter-m svg { width: 1.5em; height: 1.5em; }

/* 禁用态：官方不公开/接口采不到（如视频号收藏） */
.vi-inter-m.is-disabled {
  opacity: .32;
  cursor: help;
}
.vi-inter-m.is-disabled:hover { color: var(--color-ink-secondary, #5A6572); }

/* 强调态：当前聚焦/主导指标（如视频号的❤️推荐） */
.vi-inter-m.is-key { color: var(--color-ink, #0A1620); }
.vi-inter-m.is-key .n { font-weight: 500; }

/* 深色块内（.accent 容器）自动反色 */
.accent .vi-inter-m,
.vi-inter.on-dark { color: rgba(255,255,255,.72); }
.accent .vi-inter-m:hover,
.vi-inter.on-dark .vi-inter-m:hover { color: var(--color-coral-bright, #FF684A); }
.accent .vi-inter-m.is-key,
.vi-inter.on-dark .vi-inter-m.is-key { color: #fff; }

/* 平台徽标（与 nav.css .plat 同源，供互动行内联前缀使用） */
.vi-inter .vi-inter-plat {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--color-ink, #0A1620);
  display: inline-grid; place-items: center;
  flex: none;
}
.vi-inter .vi-inter-plat svg { width: 13px; height: 13px; color: #fff; }