/* calc-merge.css —— 合并工程样式(v1,2026-10-15 由计算器那条线加;配装器侧原有的 style.css 不动)
 * ============================================================================================
 * 只干三件事:
 *   ① 把左侧导航栏(#navGear / #navDps)接上后的少量样式(高亮/禁用态;本体在 style.css 里);
 *   ② .layout 加**第三列**给「推演结果」(#calcResultBox)—— 窗口不够宽时它整行落到下面;
 *   ③ 结果区里那两样东西的样式:「各技能伤害统计」表 + 「属性收益」柱状图
 *      (柱子的口径与计算器主页 test-sim.html 完全一致:柱宽 36、间距 18、黑字标签在柱上方、可超柱)。
 * 要撤掉这次合并的视觉效果:删掉本文件 + index.html 里那一行 <link> 即可(脚本同理,见 index.html 的注释)。
 * ============================================================================================ */

/* ---------- ② 右栏结果区:第三列(默认只比面板窄一点点,窗口够宽就撑开) ---------- */
.layout { grid-template-columns: minmax(0, 846px) 320px minmax(0, 1fr); max-width: none; }
#calcResultBox { grid-column: 3; grid-row: 2; min-width: 0; }
@media (max-width: 1700px) {
  /* 放不下三列 → 结果区整行落到最下面(仍然用满宽度) */
  .layout { grid-template-columns: minmax(0, 846px) 320px; }
  #calcResultBox { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- ③ 结果区内容 ---------- */
.ce-body { padding: 4px 2px 2px; }
.ce-empty { color: var(--fg-dim2); font-size: 12.5px; padding: 6px 2px; }
.ce-head { font-size: 13.5px; margin: 2px 2px 8px; }
.ce-head b { color: #2e7d32; font-size: 16px; }
.ce-dim { color: var(--fg-dim2); font-size: 11.5px; margin-left: 6px; }
.ce-cols { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ce-col-tbl { flex: 0 1 auto; min-width: 0; }
.ce-col-chart { flex: 1 1 380px; min-width: 300px; }
.ce-cap { font-size: 12px; color: var(--fg-dim); margin: 0 0 4px 2px; }

/* 技能伤害统计表(与计算器主页同一套列;表格本体不带外框,和那边一致) */
.ce-tbl { border-collapse: collapse; font-size: 12.5px; }
.ce-tbl th, .ce-tbl td { border-bottom: 1px solid var(--line); padding: 4px 10px; text-align: right; white-space: nowrap; }
.ce-tbl th { font-size: 12px; color: var(--fg-dim); font-weight: 600; background: var(--bg3); }
.ce-tbl td.l, .ce-tbl th.l { text-align: left; }
.ce-tbl td.l { font-weight: 600; }

/* 「?」悬浮说明(断潮次数;与计算器主页同一套文案机制,这里是配装器页内的轻量版) */
.ce-qm { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; margin-left: 4px;
         border-radius: 50%; background: #eef1f5; color: #456; font: bold 10.5px/15px inherit; cursor: help;
         position: relative; vertical-align: text-bottom; }
.ce-qm .ce-qmtip { display: none; position: absolute; right: 0; top: 17px; z-index: 60; width: 250px;
                   background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px;
                   box-shadow: 0 3px 12px rgba(0,0,0,.16); font: normal 12px/1.7 inherit; color: #333;
                   text-align: left; white-space: normal; }
.ce-qm:hover .ce-qmtip, .ce-qm:focus .ce-qmtip { display: block; }

/* 属性收益柱状图:整组左对齐、框体贴柱组、柱宽 36 / 间距 18、黑字两行标签在柱上方可超柱
   ★2026-10-15(用户报"结果区只有数字和百分比、没有柱子"):**必须给框一个确定高度** ——
   柱高是 renderGainChart 内联写的百分数(`style="height:X%"`),而**百分比高度只在父级高度确定时才算得出来**;
   以前这个框只有 padding、没有 height ⇒ 百分比按 auto 处理 ⇒ 柱子实际高度 0(只剩绝对定位的标签浮着)⇒ 看不见柱子。
   240px 与推演页那张图同量级(border-box 下:内容区 210px + 上面 30px 留给两行标签)。 */
.ce-chartwrap { display: flex; gap: 18px; align-items: flex-end; justify-content: flex-start; width: fit-content;
                height: 240px; padding: 30px 8px 0; border: 1px solid var(--line); border-radius: 5px; background: #fbfbfb; }
.ce-bar { flex: 0 0 36px; width: 36px; background: #4a7ebb; border-radius: 2px 2px 0 0; position: relative; height: 120px; }
.ce-bar.zero { background: #c9ced6; }
.ce-barlbl { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px;
             white-space: nowrap; text-align: center; font-size: 10.5px; line-height: 1.2; color: #333; }
.ce-axisrow { display: flex; gap: 18px; justify-content: flex-start; width: fit-content; padding: 2px 8px 0; }
.ce-axisrow span { flex: 0 0 36px; width: 36px; text-align: center; font-size: 11px; color: #555; white-space: nowrap; }

/* ---------- ★2026-10-15(用户):装备对比表(勾选「开启装备对比」后,每次换装重算一遍) ---------- */
#cmpBox { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ce-cmp-tbl td, .ce-cmp-tbl th { padding: 3px 8px; font-size: 12px; }
.ce-cmp-tbl tr.cur td { background: #eef4ee; font-weight: 600; }
.ce-cmp-tbl td.ce-d { font-variant-numeric: tabular-nums; }
.ce-cmp-tbl td.ce-d.up { color: #1f7a34; }
.ce-cmp-tbl td.ce-d.down { color: #b3261e; }
.ce-cmp-tbl td.ce-d.thr { color: #8a6d1a; font-size: 11.5px; }   /* ★跨加速阈值:不算 DPS,只标注 */
#cmpBody { max-height: 420px; overflow: auto; }

/* ---------- ★2026-10-15(用户):「设置增益」二级弹窗(点配装器的「设置增益」→ 由 calc-bridge.js 画) ----------
   用户原话:"会弹出一个二级页面弹窗,里面的内容是推演工具-参数设置中的『增益』部分…右下角有确认和取消按钮…
   这个弹窗的布局风格和配装器保持一致"。
   ⇒ 全部用配装器自己的设计变量/控件样式(--line/--line2/--fg/--shadow、.btn / .btn-gold 直接复用),
     这里只补"弹窗壳 + 增益行"这两层布局;配装器的 style.css 一个字节都不用动。 */
.ce-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; }
.ce-modal-mask { position: absolute; inset: 0; background: rgba(20, 30, 50, .38); }
.ce-modal-box {
  position: relative; margin-top: 9vh; width: min(760px, 92vw); max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; box-shadow: var(--shadow);
}
.ce-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.ce-modal-head b { font-size: 14px; color: var(--accent); font-weight: 600; }
.ce-modal-x { cursor: pointer; color: var(--fg-dim2); font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.ce-modal-x:hover { color: var(--fg); background: var(--bg3); }
.ce-modal-body { padding: 10px 14px 4px; overflow: auto; }
.ce-modal-waiting { color: var(--fg-dim2); font-size: 13px; padding: 14px 2px 18px; }
.ce-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
/* 增益行:阵眼两段式 + 自身增益三列(每列一框) —— 与推演页那边同构,但按配装器的配色/圆角画 */
.ce-gsec { font-size: 12.5px; color: var(--fg-dim); margin: 2px 0 6px; }
.ce-gsec + .ce-gcols { margin-bottom: 12px; }
.ce-gcols { display: grid; gap: 10px; align-items: flex-start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-gcols.one { grid-template-columns: minmax(0, 1fr); }   /* 阵眼那一块只一行,别被摊成三列 */
/* 阵眼那一块:下拉别拉满整行(与推演页同宽 211),五阵那行的覆盖率紧跟名字(不甩到最右) */
.ce-gcols.one .ce-gbox { max-width: 470px; }
/* ★2026-10-18(用户):T奶增益 = 两列(T/奶);每行 = 名称 + 下拉 + 层数输入(单层无输入) */
.ce-gcols.tn2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-gsub { font-size: 12px; color: var(--fg-dim); margin: 0 0 4px 2px; }
.ce-gcols.tn2 .ce-num { flex: 0 0 70px; }
/* ★2026-10-19(用户):T奶「一键全选」按钮(标题行右侧) */
.ce-gsec-row { display: flex; align-items: center; justify-content: space-between; }
.ce-tnall { font: inherit; font-size: 12px; padding: 2px 10px; cursor: pointer; background: #fff; color: var(--accent2); border: 1px solid var(--line); border-radius: 5px; }
.ce-tnall:hover { border-color: var(--accent); background: var(--sel); }
.ce-gcols.one select { max-width: 211px; }
.ce-gcols.one .ce-gname { flex: 0 0 auto; margin-right: 6px; }
.ce-gbox {
  min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg3);
}
.ce-grow { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.ce-gl { flex: 0 0 78px; font-size: 12.5px; color: var(--fg-dim); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-gname { flex: 1 1 auto; font-size: 12.5px; color: var(--fg); }
.ce-grow select {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 12.5px; color: var(--fg);
  background: #fff; border: 1px solid var(--line2); border-radius: 5px; padding: 3px 6px;
}
.ce-num {
  flex: 0 0 82px; font-family: inherit; font-size: 12.5px; color: var(--fg);
  background: #fff; border: 1px solid var(--line2); border-radius: 5px; padding: 3px 6px;
}
.ce-modal-foot .btn { padding: 5px 18px; font-size: 13px; }

/* ---------- ★2026-10-15(用户):「阵眼收益」柱状图(属性收益下面那张;推演页与配装器都是同款口径) ----------
   14 个阵眼 → 柱子收窄到 24px、间距 8px(整排 ≈ 440px);横轴只写两字前缀(藏剑/天策/…),全名在悬停浮窗里。
   ⚠️ 柱高是百分数 → 必须给确定高度(与属性收益那张同一个坑);窄了就给横向滚动,别挤掉标签。 */
.ce-cap2 { margin-top: 10px; }
.ce-zhenwrap { display: flex; gap: 8px; align-items: flex-end; justify-content: flex-start;
               width: 100%; box-sizing: border-box; height: 168px; padding: 26px 8px 0;
               border: 1px solid var(--line); border-radius: 5px; background: #fbfbfb; overflow-x: auto; }
.ce-zbar { flex: 0 0 24px; width: 24px; background: #4a7ebb; border-radius: 2px 2px 0 0; position: relative; height: 120px; }
.ce-zbar.zero { background: #c9ced6; }
.ce-zbarlbl { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px;
              white-space: nowrap; text-align: center; font-size: 10px; line-height: 1.2; color: #333; }
.ce-axisrow.zhen { gap: 8px; }
.ce-axisrow.zhen span { flex: 0 0 24px; width: 24px; font-size: 10.5px; }

/* ---------- ★2026-10-15(用户):「精简推演」+ ? 批注 挪到「推演结果」标题旁边 ----------
   用户原话:"把『精简推演』放到右侧『推演结果』旁边,包括批注"。纯搬家:类名/批注文字没动,
   这里只补**摆放**(标签比标题小一号、与标题基线对齐;? 跟它同一行)。
   样式本体仍在 style.css(`.cmp-right` / `.cmp-mode` / `.qmark` / `.qtip`),这份只加 .boxh 里的那点差别。 */
.boxh .cmp-right { margin-left: 8px; vertical-align: middle; }
.boxh .cmp-mode { font-weight: 400; letter-spacing: 0; }
.boxh .qmark { vertical-align: middle; }

/* ---------- ★2026-10-15(用户):右栏「目标选择 / 目标个数」与「延迟·按键」两行 ----------
   用户原话:"网络延迟和按键频率减小输入框宽度放到一排,然后在循环选择下方、按键频率上方增加一行,
   有两个下拉菜单,一个为『目标选择』一个为『目标个数』"。
   ⚠️ 2026-10-16: 配装器那条线(v0.37.1/0.37.2)把目标那行收成了**单行**(标签「目标选择」+ 目标下拉吃剩余宽 + 固定 88px 的目标个数下拉),
   布局规则进了**他们的** style.css(`#tgtLvSel`/`#tgtCntSel` 两条 id 规则)→ 我这边早先那套 `.opt-targets` 两列网格已成死代码,已删(他们在版本记录里点名请删)。
   下面这两条是延迟/按键那行仍在用的(窄输入框各占一半 = 86px/个)。 */
/* 延迟 / 按键:标签短、输入框窄,一行放两个 */
.opt-lab-t { flex: none; font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
.opt-row > input.asel { flex: 1 1 0; min-width: 0; }