/* ==================================================================
 * 线条图标（line icons）公共样式 —— 图标的「形」在 js/icons.js 里，
 * 这里只管摆放与随文字缩放。
 *
 * 为什么单独一个文件而不是塞进 style.css：
 *   图标是横切所有页面的基础样式，跟业务页面样式混在一起很容易被后续
 *   页面改动顺带覆盖掉；单独一份也方便一眼看出「整套图标只有这几条规则」。
 * ================================================================== */

/* 图标默认跟着正文走：vertical-align 用 em 而不是 px，
   这样任何字号下基线的相对位置都一致，不会在大标题里突然「飘起来」。
   -0.05em 是算出来的：24 的 viewBox 画到边缘，笔宽 1.6 会外溢 0.8，
   画到 em 框里上下各留 3.3%；要让它和文字视觉对齐就得往下压这么一点。 */
.ic {
  display: inline-block;
  vertical-align: -0.05em;
  flex: none;              /* 在 flex 容器里不许被挤扁 */
  overflow: visible;       /* 描边压在边缘的图标（比如圆圈）不被裁掉 */
}

/* 按钮里的图标不用额外留白 —— .btn 本身就是 flex + gap:6px，
   再给 margin 会变成 11px，图标和文字之间会裂开一道缝。
   这里只保证图标不被压扁、并且对齐到文字基线。 */
.btn > .ic { align-self: center; }
/* .btn.block 是纯 flex（没有 gap），那种情况补上间距 */
.btn.block > .ic { margin-right: 4px; }

/* ---- 大图标容器：HTML 里原本是给 emoji 用的字号规则，这里改成随字号缩放 ---- */
/* .dropzone .icon / .entry-ico 在 style.css 里定的是 font-size，
   而 <svg> 默认按 width/height 属性渲染，不会跟着 font-size 变，
   所以这里显式用 em 覆盖一次，让「改字号就能改图标大小」继续成立。 */
.dropzone .icon > .ic { width: 34px; height: 34px; }
.entry-ico > .ic { width: 22px; height: 22px; }

/* ---- 空状态的大图标 ----
   用回和原来 emoji 一样的 42px：emoji 的字形几乎占满整个字身框，
   线性图标在 24 格里留白更多，曾经一度压到 38px 想补偿，结果反而比原来小，
   所以调回来 —— 视觉体量交给图形本身的边界去决定，别再额外缩。 */
.empty .ei > .ic { width: 42px; height: 42px; }

/* ---- 提示条左侧的图标 ---- */
.alert .ico > .ic { width: 18px; height: 18px; }

/* ---- 底部导航：图标与文字垂直排布，图标略大一点压住视觉重心 ---- */
.nav button .ni > .ic { width: 22px; height: 22px; }

/* ---- 弹层关闭按钮 / 顶栏齿轮 ---- */
.icon-btn > .ic { width: 20px; height: 20px; }
.gear-btn > .ic { width: 19px; height: 19px; }
/* .modal-head .x 是 30px 的圆按钮（style.css），图标按 size 属性走即可，
   这里只保证它居中 —— 用 inline-block + vertical-align 会有 1~2px 的偏差 */
.modal-head .x > .ic { vertical-align: middle; }

/* ---- 登录门的大图标（.auth-logo 在 style.css 里是 font-size: 34px） ---- */
.auth-logo > .ic { width: 40px; height: 40px; }

/* ---- 预览图右上角的「重新选择」---- */
.preview-wrap .clear > .ic { width: 17px; height: 17px; }

/* ---- 题库/空白卷卡片角上的对错标记 ---- */
/* 这两个原本是 ✓ ✗ 单字符，line-height 撑着；换成 SVG 后要靠这里对位 */
.lib-mark > .ic { width: 15px; height: 15px; }

/* ---- 勾选组卷的圆圈勾选框 ----
   外圈是 24px 的圆（style.css 里的 .pick-box），勾要小一圈、
   并让描边走 --primary 反色后的白（.pick-box 的 color 默认就是 #fff） */
.pick-box > .ic { width: 14px; height: 14px; }

/* ---- 勾选组卷按钮：文案在「勾选组卷 / 退出勾选」之间切换 ----
   之所以把两份文案都渲染出来、只用 .on 切显隐，而不是改 textContent：
   图标是 SVG，textContent 会把它整块抹掉，要还原就得重新拼 innerHTML。
   代价只是多几个不显示的 span，点击路径上零成本。 */
#wPickMode .pick-on,
#wPickMode .pick-off,
#libPickMode .pick-on,
#libPickMode .pick-off { display: none; }
#wPickMode:not(.on) .pick-off,
#wPickMode.on .pick-on,
#libPickMode:not(.on) .pick-off,
#libPickMode.on .pick-on { display: inline-flex; align-items: center; }
/* 图标和它自己的文字在同一个 span 里，.btn 的 gap 管不到，自己补一点间距 */
.pick-on, .pick-off { gap: 4px; }

/* ---- 讲解区小标题（.explain h4）里的图标 ----
   style.css 里 .explain h4 已经是 flex + align-items:center，
   所以图标只要不缩、不被 flex 拉长就行；gap:5px 负责和文字的距离 */
.explain h4 > .ic { flex: none; }

/* ---- 段落里的小图标：跟着字号缩放，尺寸交给调用方用 size 控制 ---- */
.hint-row > .ic,
.muted > .ic { vertical-align: -0.1em; }

/* ---- 小徽章（.tag）里的图标 ----
   .tag 是 11.5px 的小药丸，图标不能按正文的基线走，否则会把药丸顶大一圈。
   往下压 -0.16em 让图形落在文字的中宫位置，药丸高度不变。 */
.tag > .ic { vertical-align: -0.16em; }

/* ---- 13px 以下：把线加粗一档 ----
   1.6 是给 20~24px 定的；缩到 13px 时线只有 0.87px，在 2x 屏上会碎成虚线，
   圈的形状就看不出来了。1.9 在缩略尺寸下才立得住。 */
.ic[width='13'],
.ic[width='14'] { stroke-width: 1.9; }

/* ---- 折叠箭头：和 .collapse-head .arrow 的旋转动画配合，
   旋转由外层 span 的 transform 完成，图标本身不用动 ---- */
.collapse-head .arrow > .ic { width: 14px; height: 14px; }

/* ---- 触摸目标：小按钮里的图标不要小到点不中 ---- */
@media (max-width: 380px) {
  .nav button .ni > .ic { width: 21px; height: 21px; }
}