/* ============================================================
 * CalcElf v8.8 · 手绘 SVG 图标集（第一批 6 个）—— 尺寸 / 对齐 / 双色
 * ------------------------------------------------------------
 * 配套：ce-icons.js（图标本体 + 注入逻辑）
 * 目标：替换用户最常看到的 6 个 emoji —— 🎤 🎬 📷 🔍 🎯 🪙
 *
 * ★ 本文件【不动】components.css / v565.css 的任何既有规则语义 ✗
 *   只做两件事：① 给新图标一个默认尺寸与基线对齐 ✓
 *               ② 把两处强调色抽成 CSS 变量 ✓（可换色 / 可换主题 ✓）
 *   加载顺序：排在 v565.css 之后 ✗（同特异性时后加载的赢 ✓）
 *
 * ★ 为什么没有 <defs>/<linearGradient> ✗✗
 *   内联 SVG 会在同一页里出现多次 ✗ 带固定 id 的渐变会【互相覆盖】✗
 *   （后出现的 <defs> 抢走同一个 id → 先出现的图标渲染错色 ✓）
 *   ⇒ 需要"渐变感"的地方一律用【多段纯色】解决 ✓
 *     本文件里的两个强调色就是这两段纯色 ✓
 * ============================================================ */

:root{
  /* 双色系统的两个强调色 —— 全部取自品牌色板 ✓ 不发明新颜色 ✓
     --ce-icon-teal  #12b3a0  青绿主色 → "输入 / 采集"一族：🎤 🎬 📷
     --ce-icon-gold  #e8b33c  金       → "目标 / 奖励"一族：🔍 🎯 🪙
     ★ 写成变量而不是写死 ✗ 以后要换品牌色 / 加暗色主题只改这两行 ✓ */
  --ce-icon-teal:#12b3a0;
  --ce-icon-gold:#e8b33c;
}

/* ---------- 图标本体 ----------
   ★ 每个 <svg> 自己带 width="1em" height="1em" ✓ 这里是"页面里的实际尺寸" ✓
     1.15em：与它替换掉的 emoji 视觉大小相当 ✓（emoji 的字形盒约 1.16em ✓）
     仍是 em 单位 ✗ 所以字号一变图标跟着变 ✓（大字号无障碍设置也走得通 ✓） */
svg.ce-svg{
  width:1.15em;height:1.15em;
  vertical-align:-.22em;          /* 图标中心落在文字视觉中心（≈0.36em）上 ✓ */
  flex:0 0 auto;display:inline-block;
}

/* ---------- 双色：主形状用 currentColor ✗ 强调部分用品牌色 ✓ ----------
   ★ 每个强调元素【同时】带内联描边/填充色 ✓
     CSS 在时用变量 ✓ CSS 万一没加载 → 退回内联品牌色 ✓（不会变黑/变透明 ✓） */
svg.ce-svg .ce-a {stroke:var(--ce-icon-teal,#12b3a0)}
svg.ce-svg .ce-b {stroke:var(--ce-icon-gold,#e8b33c)}
svg.ce-svg .ce-af{fill:var(--ce-icon-teal,#12b3a0);stroke:none}
svg.ce-svg .ce-bf{fill:var(--ce-icon-gold,#e8b33c);stroke:none}

/* ---------- ceIcon() 的图标槽（外层 span ✓） ----------
   图标与文字的分隔沿用"原文里那个空格" ✗ 不额外加 margin ✓
   这样 11 种语言的空格习惯（中英混排 / RTL）都不会被改掉 ✓ */
.ce-ic{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;vertical-align:-.22em;line-height:0;
}
.ce-ic>svg.ce-svg{vertical-align:0}

/* ---------- 各槽位的微调（都是 em 单位 ✓ 跟着字号走 ✓） ---------- */

/* label 是 13px ✓ .pill 是 11px ✓ 这类小字号位置 icon 相对要再大一点点 ✓ */
label>svg.ce-svg,label>.ce-ic>svg.ce-svg{width:1.18em;height:1.18em}
.pill>svg.ce-svg,.pill>.ce-ic>svg.ce-svg{width:1.2em;height:1.2em;vertical-align:-.24em}

/* 游客卡的三个卖点：外层 <span class="ic"> 自带 font-size:16px ✓
   ★ 实测坑：这个 span 是 flex 子项 ✗ 里面 svg 的 vertical-align 会把它自己顶下去 ✗
     第一版 -0.18em → 图标中心比文字中心低 4.94px ✗（肉眼能看出来 ✓）
   ⇒ 改成 flex 居中 + 行高归零 + vertical-align:0 ✓ 实测降到 0.0px ✓ */
.ce-guest-perk>.ic{display:flex;align-items:center;justify-content:center;line-height:0}
.ce-guest-perk>.ic>svg.ce-svg{vertical-align:0}

/* 标题 chip（.ticon 30×30 / 圆角 10px）里沿用站点既有 19px ✓ 不改观感 ✓ */
.ticon>svg.ce-svg{width:19px;height:19px;vertical-align:0}

/* Start solving：沿用既有 1.15em ✓ 只把物理方向换成逻辑方向 ✗
   （原来写死 margin-right:4px ✓ 阿语/波斯语 RTL 下间距会跑到错误的一侧 ✓） */
#solveBtn svg.ce-svg{margin-inline-end:4px;margin-right:0;vertical-align:-.2em}

/* 动画"生成中"占位（app.js 里 font-size:40px 的那一处 ✓） */
.anim-loading svg.ce-svg,.anim-loading>.ce-ic>svg.ce-svg{width:1em;height:1em}