/* ============================================================
   AI衍策 · 持有周期验证卡 · 共享样式（唯一所有者）

   为什么独立成文件而不是各页写一遍
   --------------------------------
   这块内容出现在**两个入口**（手机端详情页 / 电脑端详情页）。两处各写一份
   `<style>` + 一份 markup，就必然出现"同一个策略在两个页面显示两个数"
   —— 这是本项目反复吃过的亏（4 套涨跌色、13 份转义、3 处指标实现）。
   所以结构、类名、规则都收在这一个文件里，页面只负责引入。

   变量用**带兜底的链**，因为两页的 token 命名不同：
     手机端自包含（--ink2/--ink3/--line/--card/--fill）
     电脑端走 tokens.css（--ink-4/--edge-1/--surface/--panel）
   写法 `var(--手机名, var(--桌面名, 兜底值))` 让同一个类名在两页都拿到合理灰阶，
   且**不需要任何一页额外声明映射**（少一处就会漂）。
   ============================================================ */

.hc-card{
  --hc-ink:   var(--ink, var(--ink-1, #1c1c1e));
  --hc-ink2:  var(--ink2, var(--ink-4, #6e6e73));
  --hc-ink3:  var(--ink3, var(--ink-5, #8e8e93));
  --hc-line:  var(--line, var(--edge-1, rgba(60,60,67,.1)));
  --hc-card:  var(--card, var(--surface, #fff));
  --hc-fill:  var(--fill, var(--panel, #f6f6f8));
  --hc-up:    var(--up, #E84545);          /* A股 红涨 */
  --hc-down:  var(--down, #1fa84d);        /* A股 绿跌 */
  background:var(--hc-card);
  border:1px solid var(--hc-line);
  border-radius:var(--r-md, 16px);
  padding:14px 14px 12px;
  margin:10px 0;
}
.hc-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.hc-title{ font-size:15px; font-weight:700; color:var(--hc-ink); letter-spacing:-.01em; }
.hc-sub{ margin-left:auto; font-size:11px; color:var(--hc-ink3); font-variant-numeric:tabular-nums; }
/* 一句话结论 —— 用户 3 秒要看到的东西。放卡头下、图之前。 */
.hc-sum{ margin:7px 0 2px; font-size:12.5px; line-height:1.6; color:var(--hc-ink2); }
.hc-sum b{ color:var(--hc-ink); font-weight:700; }

/* ── 解释性内容收进 ⓘ（默认收起）─────────────────────────────────────
   2026-09-16 爸爸：「你不觉得次数太多了吗？…是否可以折叠隐藏，就是通过那个圈圈感叹号的符号」。
   屏上只留**一句人话结论**（.hc-sum），"为什么这么算"收在这里。
   ⚠️ 用**原生 <details>**，不用页面级 helpBtn/helpBox：本组件被手机端与电脑端共用，
      而那套开关只在 m/index.html 里定义 —— 挂它会变成电脑端一个点了没反应的假符号。
   ⚠️ 收起的只是"为什么"；"这是哪天的 / 数据从哪来"仍然常驻（见 .hc-note）。 */
.hc-info{ margin:1px 0 0; }
.hc-info>summary{ display:block; list-style:none; cursor:pointer; text-align:right;
  color:var(--hc-ink3); line-height:1; padding:2px 0; }
.hc-info>summary::-webkit-details-marker{ display:none; }
.hc-info>summary .q{ display:inline-flex; width:15px; height:15px; border-radius:50%;
  border:1px solid currentColor; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; line-height:1; }
.hc-info[open]>summary{ color:var(--hc-ink2); }
.hc-info-bd{ margin:6px 0 2px; padding:8px 9px; border-radius:8px; background:var(--hc-fill);
  font-size:11px; line-height:1.7; color:var(--hc-ink2); }
.hc-info-bd b{ color:var(--hc-ink); font-weight:700; }

/* ── 超额收益衰减图（零线居中：往上=正超额，往下=负超额）──────────
   为什么用柱状而不是折线：持有期是**离散档位**（1..10,15,20），
   柱状一眼看出"哪档有优势、从哪档开始塌"；折线会暗示档位之间有连续值。
   ⚠️ 零线必须画出来 —— 没有零线的柱图读不出正负，等于没画。
   ⚠️ 柱长必须**相对最大绝对值**等比（`|v|/maxAbs`），不然"哪档最强"看不出来。 */
.hc-chart{ position:relative; margin:12px 0 2px; }
.hc-bars{ position:relative; height:92px; display:flex; gap:3px; }
.hc-bar{ position:relative; flex:1 1 0; min-width:0; }
.hc-bar i{ position:absolute; left:0; right:0; display:block; border-radius:3px; }
.hc-bar.up i{ bottom:50%; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.hc-bar.dn i{ top:50%; border-top-left-radius:0; border-top-right-radius:0; }
.hc-bar.off i{ opacity:.32; }                    /* 样本不足：淡显，不参与结论 */
.hc-zero{ position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--hc-line); pointer-events:none; }
.hc-xlab{ display:flex; gap:3px; margin-top:6px; }
.hc-xlab span{ flex:1 1 0; min-width:0; text-align:center; font-size:9.5px;
  color:var(--hc-ink3); font-variant-numeric:tabular-nums; }
.hc-xlab span.off{ opacity:.45; }

/* ── 明细表（折叠内；折叠实现见 hold-card.js）─────────────────── */
.hc-fold{ margin-top:10px; border-top:1px solid var(--hc-line); padding-top:9px; }
.hc-fold summary{ cursor:pointer; list-style:none; font-size:12px; color:var(--hc-ink2);
  display:flex; align-items:center; gap:6px; }
.hc-fold summary::-webkit-details-marker{ display:none; }
.hc-fold summary .ar{ margin-left:auto; transition:transform .2s; color:var(--hc-ink3); }
.hc-fold[open] summary .ar{ transform:rotate(90deg); }
.hc-tbl{ width:100%; border-collapse:collapse; margin-top:9px;
  font-size:11.5px; font-variant-numeric:tabular-nums; }
.hc-tbl th{ font-weight:500; color:var(--hc-ink3); text-align:right; padding:4px 3px;
  border-bottom:1px solid var(--hc-line); white-space:nowrap; }
.hc-tbl th:first-child, .hc-tbl td:first-child{ text-align:left; }
.hc-tbl td{ padding:5px 3px; text-align:right; color:var(--hc-ink);
  border-bottom:1px solid var(--hc-line); white-space:nowrap; }
.hc-tbl tr:last-child td{ border-bottom:0; }
.hc-tbl tr.off td{ color:var(--hc-ink3); }        /* 样本不足整行降级，数字仍如实显示 */
.hc-tbl td.h{ font-weight:600; }
.hc-tbl .pos{ color:var(--hc-up); }
.hc-tbl .neg{ color:var(--hc-down); }
.hc-tbl .ped{ font-size:10px; color:var(--hc-ink3); margin-left:3px; }
/* 窄屏（手机）藏掉次要列：先保"持有/均值/中位/超额/样本"这五个。
   ⚠️ 用 nth-child 会随列数变化而错位，这里给列挂类名，按类名藏。 */
@media (max-width:600px){
  .hc-tbl .col-x{ display:none; }
}
.hc-note{ margin-top:9px; font-size:10.5px; line-height:1.6; color:var(--hc-ink3); }
.hc-empty{ font-size:12.5px; color:var(--hc-ink3); padding:8px 2px; line-height:1.6; }
.hc-tag{ display:inline-block; font-size:10px; padding:1px 5px; border-radius:5px;
  background:var(--hc-fill); color:var(--hc-ink3); margin-right:4px; }