/* ══════════════════════════════════════════════════════════════
   mix.css —— 「客户与产品」两页（mix.js）的样式。

   为什么单独一份：这两页由一条独立的开发线交付，样式若都塞进 app.css，
   三条线会在同一个文件的同一段上打架。类名一律 mx- 前缀，只加不覆盖 ——
   app.css 里的通用件（.panel / .tbl / .tblwrap / .caliber / .chip /
   .share-cell / .dlt / .up / .down / .flat / .npk / .npc）原样复用，
   这里一条都不重定义。

   颜色、圆角、字号全部走 app.css 已有的 CSS 变量与色卡（--brand /
   --good / --bad / --warn / --ink* / --line* / --r-* / --sp-*）——
   这一版定版方向是「靛蓝 Azulou」：整屏一层冷雾底 + 白卡，主角靠色相与
   面积立（页眉那块 .cl-title 浅靛蓝软卡就是主角区），不再有深漆面。
   所以本文件里一个硬编码色值都没有，红绿也只用在涨跌与「通过 / 未通过」
   两处语义上，不做装饰。

   ── 这两页在版式上要解决的三件事 ───────────────────────────
   ① **四个数各回答一件事**：卡片必须把「回答什么 / 值 / 陷阱」三段分层，
      陷阱那一段不能比值还轻 —— 它是这一页最容易被跳过、也最该被读到的。
   ② **双维 ABC 是二维的**：九宫格用真的 grid，不铺成一张长表。
      「收入A毛利C」「收入C毛利A」两格描边加重（它们是这一块的立论点），
      但**不上红绿** —— 红绿在本系统只表示涨跌。
   ③ **截断要看得见**：兜底行（.mx-fr）与普通行在明度上分开，
      占比恒等式条（.mx-idt）常驻表下，通过与不通过都出现。
   ══════════════════════════════════════════════════════════════ */

/* ── 页眉软卡（沿用 .cl-title 的底与影，这里只排内部） ─────────── */
.mx-head{ display:flex; align-items:flex-start; gap:var(--sp-5); flex-wrap:wrap; }
.mx-head .mx-hl{ flex:1 1 340px; min-width:0; }
.mx-head .mx-hl p{ margin:var(--sp-2) 0 0; color:var(--dk-ink2); font-size:13px;
                   line-height:1.75; max-width:76ch; }
.mx-head .mx-hl p b{ color:var(--dk-ink); font-weight:650; }
.mx-head .mx-hr{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.mx-head .mx-hr>.fl{ font-size:12px; color:var(--dk-ink3); }
/* 筛选与导出各自一行：期间 / 基期 / 条数是「看哪一屏」，渠道 / 品类是
   「这一屏的分母范围」—— 两类挤成一排，读者分不清哪个改的是范围。
   flex:1 1 100% 让它在 .cl-title 这个 flex 容器里自己占满一行。 */
.mx-head .mx-hb{ flex:1 1 100%; display:flex; align-items:center; gap:var(--sp-3);
                 flex-wrap:wrap; margin-top:var(--sp-3);
                 padding-top:var(--sp-3); border-top:1px solid var(--dk-line); }
/* 导出推到右端：它不是筛选条件的一员，是「把这一屏带走」。
   它左边那行小字写的是「导的就是这一屏：期间 … 渠道 …」，与按钮上的
   参数由同一个对象渲染 —— 说明与实际不可能不一致。 */
.mx-head .mx-hb>.mx-xnote{ margin-left:auto; font-size:10.5px; color:var(--dk-ink3);
                           line-height:1.6; text-align:right; }
/* chip 现在是 <button>（壳把导出改成 button + fetch + blob 下载，
   留 href 会让中键新开页仍旧蹦裸 JSON）—— 这里只管别被 flex 压扁。 */
.mx-head .mx-hb>.chip{ flex:none; }

/* ── 「算不出」的统一写法：一个「—」加一句理由，绝不落成 0 ────── */
.mx-na{ color:var(--ink3); font-weight:500; }
.mx-why{ color:var(--ink3); font-size:11px; margin-left:4px; font-weight:400;
         white-space:normal; }
.mx-dim{ color:var(--ink3); font-size:11px; font-weight:400; }
.mx-bad{ color:var(--bad); font-weight:650; }

/* ── 「与基期的关系」一格 ─────────────────────────────────────
   三种取值三种读法，全部用服务端的 status_label 原文。
   unknown 走中性灰、**不走**「新增」那支蓝：它不是一个状态，是一个
   「答不了」——把它染成和 new 一样，读者就会把两件事读成一件。 */
.tbl td.mx-rel{ text-align:left; white-space:normal; font-family:inherit;
                font-size:11.5px; max-width:200px; line-height:1.6; }
.mx-st{ display:inline-block; font-size:10.5px; padding:2px 9px;
        border-radius:var(--r-pill); border:1px solid var(--line-2);
        background:var(--panel-2); color:var(--ink2); }
.mx-st.both{ background:var(--panel-2); color:var(--ink3); }
.mx-st.new{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-border); }
.mx-st.unknown{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line);
                font-weight:600; }

/* ── 范围条：分母的范围必须与数字同屏 ───────────────────────── */
.mx-scope{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
           background:var(--panel-2); border:1px solid var(--line);
           border-radius:var(--r-sm); padding:10px 14px; margin:0 0 16px;
           font-size:12px; color:var(--ink2); }
.mx-scope>b{ font-size:10.5px; letter-spacing:.06em; color:var(--ink3); font-weight:650; }
.mx-scope .sb{ background:var(--panel); border:1px solid var(--line-2);
               border-radius:var(--r-pill); padding:3px 11px; white-space:nowrap; }
.mx-scope .sb i{ font-style:normal; color:var(--ink3); margin-right:6px; font-size:11px; }
.mx-scope em{ flex:1 1 300px; min-width:0; font-style:normal; color:var(--ink3);
              font-size:11px; line-height:1.7; }

/* ── 四问卡 ────────────────────────────────────────────────── */
.mx-asks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
          gap:var(--sp-3); }
.mx-ask{ border:1px solid var(--line); border-radius:var(--r-sm);
         background:var(--panel-2); padding:14px 15px 12px; display:flex;
         flex-direction:column; gap:6px; }
.mx-ask .q{ font-size:11.5px; color:var(--ink2); font-weight:600; line-height:1.6; }
.mx-ask .v{ font-size:15px; line-height:1.25; display:flex; align-items:baseline;
            gap:6px; flex-wrap:wrap; }
.mx-ask .v b.tnum{ font-size:26px; font-weight:650; letter-spacing:-.03em; color:var(--ink); }
.mx-ask .v .u{ font-size:11.5px; color:var(--ink3); }
.mx-ask .v .bd{ font-size:11px; padding:2px 9px; border-radius:var(--r-pill);
                background:var(--brand-soft); color:var(--brand);
                border:1px solid var(--brand-border); font-weight:600; }
/* 陷阱那一段刻意与值同一个明度档 —— 它被跳过一次，这一页就白做了。 */
.mx-ask .t{ margin:2px 0 0; font-size:11.5px; line-height:1.7; color:var(--warn);
            background:var(--warn-soft); border:1px solid var(--warn-line);
            border-radius:var(--r-xs); padding:7px 9px; }
.mx-ask .t i{ font-style:normal; font-weight:700; margin-right:6px; letter-spacing:.04em; }
.mx-ask .s{ margin:0; font-size:11px; line-height:1.75; color:var(--ink3); }
.mx-foot{ margin:14px 0 0; font-size:11.5px; line-height:1.8; color:var(--ink3); }
.mx-foot b{ color:var(--ink2); font-weight:650; }

/* ── HHI 刻度条 ───────────────────────────────────────────── */
.mx-hhi{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
         gap:var(--sp-5); align-items:start; }
.mx-hhi .sc{ position:relative; display:flex; flex-wrap:wrap;
             border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden;
             background:var(--panel-2); }
.mx-hhi .sc .z{ flex:1 1 0; min-width:0; text-align:center; font-size:10.5px;
                padding:22px 4px 20px; color:var(--ink3); white-space:nowrap;
                border-right:1px solid var(--line-2); }
/* 三档只用同色系的三级浅底 —— 「高度集中」不是坏事也不是好事，
   给它染红就等于替读者下了结论。 */
.mx-hhi .sc .z.a{ background:var(--panel); }
.mx-hhi .sc .z.b{ background:var(--bg); }
.mx-hhi .sc .z.c{ background:var(--bg-2); border-right:0; }
.mx-hhi .sc .pin{ position:absolute; top:0; bottom:26px; width:2px;
                  background:var(--brand); }
.mx-hhi .sc .pin::after{ content:''; position:absolute; left:-4px; top:-1px;
                         width:10px; height:10px; border-radius:50%;
                         background:var(--brand); border:2px solid var(--panel); }
.mx-hhi .sc .cap{ position:absolute; left:0; right:0; bottom:0; text-align:center;
                  font-style:normal; font-size:10.5px; color:var(--ink3);
                  padding:0 8px 6px; }
.mx-hhi .kv>div{ padding:9px 0; border-bottom:1px solid var(--line); }
.mx-hhi .kv>div:last-child{ border-bottom:0; }
.mx-hhi .kv span{ font-size:10.5px; color:var(--ink3); letter-spacing:.06em;
                  display:block; margin-bottom:3px; }
.mx-hhi .kv b{ font-size:16px; font-weight:650; color:var(--ink); }
.mx-hhi .kv em{ display:block; font-style:normal; font-size:11px; color:var(--ink3);
                line-height:1.7; margin-top:3px; }
@media(max-width:900px){ .mx-hhi{ grid-template-columns:1fr; } }

/* ── 说明 / 提醒的四个档 ───────────────────────────────────── */
.mx-lead{ margin:0 0 14px; font-size:12.5px; line-height:1.85; color:var(--ink2);
          max-width:82ch; }
.mx-lead b{ color:var(--ink); font-weight:650; }
.mx-note{ margin:12px 0 0; font-size:11.5px; line-height:1.8; color:var(--ink3);
          max-width:88ch; }
.mx-sub{ margin:8px 0 0; font-size:11.5px; line-height:1.75; color:var(--ink3); }
.mx-blank{ margin:8px 0 0; font-size:13px; line-height:1.8; color:var(--ink2); }
/* 口径原文：与口径盒同一套语气，摆在它该被读到的那一段旁边（原文，不摘编） */
.mx-cal{ margin:10px 0 0; font-size:11.5px; line-height:1.8; color:var(--ink2);
         background:var(--panel-2); border:1px solid var(--line);
         border-left:3px solid var(--brand); border-radius:var(--r-xs);
         padding:9px 12px; }
.mx-cal b{ display:block; font-size:10px; letter-spacing:.08em; color:var(--ink3);
           font-weight:650; margin-bottom:3px; }
.mx-warn{ margin:12px 0 0; font-size:12px; line-height:1.8; color:var(--warn);
          background:var(--warn-soft); border:1px solid var(--warn-line);
          border-radius:var(--r-sm); padding:10px 13px; }
.mx-warn b{ margin-right:8px; font-weight:700; color:var(--warn); }
.mx-warn.key{ font-size:12.5px; }
.mx-warn.crit{ color:var(--bad); background:var(--deny-soft); border-color:var(--deny-line); }
.mx-warn.crit b{ color:var(--bad); }

/* ── 图 ───────────────────────────────────────────────────── */
.mx-fig{ border:1px solid var(--line); border-radius:var(--r-sm);
         background:var(--panel-2); padding:12px 14px 10px; margin:14px 0 0; }
.mx-fig .ft{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
             margin-bottom:8px; }
.mx-fig .ft b{ font-size:12.5px; font-weight:650; color:var(--ink); }
.mx-fig .ft span{ font-size:11px; color:var(--ink3); line-height:1.6; }

/* ── 表格里的三个附件：名次、兜底行、标签 ─────────────────── */
.mx-rk{ display:inline-block; min-width:20px; margin-right:8px; font-size:10.5px;
        color:var(--ink3); text-align:right; }
/* 兜底行（已截断 / 未归属）压成一档灰：它们是**汇总**不是明细，
   但必须在表里，不能只写在脚注上 —— 恒等式要在表上闭合。 */
.tbl tbody tr.mx-fr td{ background:var(--panel-2); color:var(--ink2);
                        border-top:1px solid var(--line-2); font-style:italic; }
.tbl tbody tr.mx-fr:hover td{ background:var(--bg-2); }
.mx-tag{ display:inline-block; margin-left:8px; font-size:10px; padding:1px 8px;
         border-radius:var(--r-pill); font-weight:600; letter-spacing:.03em; }
.mx-tag.hold{ background:var(--bg-2); color:var(--ink2); border:1px solid var(--line-2); }
.mx-q{ display:inline-block; margin-left:8px; font-size:10px; padding:1px 7px;
       border-radius:var(--r-xs); background:var(--bg-2); color:var(--ink2);
       border:1px solid var(--line-2); }
.mx-cls{ display:inline-block; min-width:22px; text-align:center; font-size:11px;
         font-weight:700; padding:1px 7px; border-radius:var(--r-xs);
         border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink2); }
.mx-cls.cA{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-border); }
.mx-cls.cB{ background:var(--bg-2); color:var(--ink2); }
.mx-cls.cC{ background:var(--panel-2); color:var(--ink3); }

/* ── 占比恒等式条 ─────────────────────────────────────────── */
.mx-idt{ margin:12px 0 0; display:flex; gap:12px; align-items:baseline;
         flex-wrap:wrap; border-radius:var(--r-sm); padding:9px 13px;
         font-size:11.5px; line-height:1.8; }
.mx-idt.ok{ background:var(--good-soft); border:1px solid var(--good-line); color:var(--good); }
.mx-idt.bad{ background:var(--deny-soft); border:1px solid var(--deny-line); color:var(--bad); }
.mx-idt b{ font-weight:700; white-space:nowrap; }
.mx-idt span{ flex:1 1 340px; min-width:0; color:var(--ink2); }
.mx-idt.bad span{ color:var(--bad); }

/* ── 两栏（新增/流失、头部/尾部、两张单维 ABC 表）───────────── */
.mx-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
         gap:var(--sp-4); margin-top:var(--sp-4); }
.mx-side{ border:1px solid var(--line); border-radius:var(--r-sm);
          background:var(--panel-2); padding:12px 14px; min-width:0; }
.mx-side h4{ margin:0 0 8px; font-size:13px; font-weight:650; color:var(--ink);
             display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mx-side h4 span{ font-size:11px; font-weight:400; color:var(--ink3); }
.mx-side>em{ display:block; font-style:normal; font-size:11px; color:var(--ink3);
             line-height:1.8; margin-top:8px; word-break:break-all; }
.mx-side .kv>div{ padding:6px 0; }
.mx-side .kv span{ font-size:10.5px; color:var(--ink3); letter-spacing:.06em;
                   display:block; margin-bottom:2px; }
.mx-side .kv b{ font-size:16px; font-weight:650; }
.mx-side .kv em{ display:block; font-style:normal; font-size:11px; color:var(--ink3);
                 line-height:1.7; margin-top:2px; }
.mx-side .tbl{ font-size:12px; }
.mx-side .tbl td{ padding:8px 10px; }
/* 左缘一道色条区分两侧。绿 / 红在这里表示的仍然是「盘子变大 / 变小」，
   与全站涨跌色同一语义，不是装饰。 */
.mx-side.new{ border-left:3px solid var(--good); }
.mx-side.lost{ border-left:3px solid var(--bad); }

/* ── 双维 ABC 九宫格 ──────────────────────────────────────── */
.mx-grid{ display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr));
          gap:6px; }
.mx-grid .hd{ font-size:10.5px; letter-spacing:.06em; color:var(--ink3);
              font-weight:650; display:flex; align-items:center;
              justify-content:center; padding:6px 8px; }
.mx-grid .hd.corner{ justify-content:flex-end; text-align:right; line-height:1.5; }
.mx-grid .hd.side{ justify-content:flex-end; }
.mx-grid .cell{ border:1px solid var(--line); border-radius:var(--r-sm);
                background:var(--panel-2); padding:11px 12px; min-width:0;
                display:flex; flex-direction:column; gap:3px; }
.mx-grid .cell .lb{ font-size:12px; font-weight:650; color:var(--ink); }
.mx-grid .cell .n{ font-size:11px; color:var(--ink3); }
.mx-grid .cell .v{ font-size:14px; font-weight:650; color:var(--ink); }
.mx-grid .cell .s{ font-size:11px; color:var(--ink2); }
.mx-grid .cell em{ font-style:normal; font-size:11px; line-height:1.7;
                   color:var(--ink3); margin-top:3px; }
/* 立论点那两格加重描边 —— 用靛蓝（可交互 / 主数据那一支），不用红绿：
   「收入A毛利C」不是「跌」，它是一个需要被看见的**事实**。 */
.mx-grid .cell.key{ border-color:var(--brand-border); background:var(--brand-soft);
                    box-shadow:inset 0 0 0 1px var(--brand-border); }
.mx-grid .cell.key em{ color:var(--brand); }
.mx-grid .cell.core{ border-color:var(--line-2); background:var(--panel); }
.mx-grid .cell.none{ background:transparent; border-style:dashed;
                     align-items:center; justify-content:center; text-align:center; }
.mx-grid .cell.none em{ margin-top:2px; }
@media(max-width:820px){
  /* 窄屏下九宫格竖着排会失去「二维」这一层信息，但横滚更糟（读者看不到
     行头就分不清哪格是哪格）。折中：格子压小、字号不动，仍保持 3 列。 */
  .mx-grid{ gap:4px; }
  .mx-grid .cell{ padding:8px 9px; }
  .mx-grid .cell .v{ font-size:12.5px; }
}

/* ── 头条数字块 ───────────────────────────────────────────── */
.mx-tiles .tg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
               gap:var(--sp-3); }
.mx-tiles .tl{ border:1px solid var(--line); border-radius:var(--r-sm);
               background:var(--panel-2); padding:12px 14px; }
.mx-tiles .tl>span{ display:block; font-size:10.5px; letter-spacing:.06em;
                    color:var(--ink3); margin-bottom:5px; }
.mx-tiles .tl b.tnum{ font-size:19px; font-weight:650; letter-spacing:-.02em; }
.mx-tiles .tl em{ display:block; font-style:normal; font-size:11px; color:var(--ink3);
                  line-height:1.7; margin-top:5px; }

/* ── 长尾：头部 / 尾部 两块 + 四个 KPI ─────────────────────── */
.mx-tail{ border:1px solid var(--line); border-radius:var(--r-sm);
          background:var(--panel-2); padding:12px 14px; min-width:0; }
.mx-tail h4{ margin:0 0 6px; font-size:13px; font-weight:650; display:flex;
             align-items:baseline; gap:10px; flex-wrap:wrap; }
.mx-tail h4 span{ font-size:11px; font-weight:400; color:var(--ink3); }
.mx-tail.head{ border-left:3px solid var(--brand); }
.mx-tail.tail{ border-left:3px solid var(--pg-slate); }
.mx-tail .kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
              gap:var(--sp-3); }
.mx-tail .kv span{ display:block; font-size:10.5px; color:var(--ink3);
                   letter-spacing:.06em; margin-bottom:3px; }
.mx-tail .kv b{ font-size:16px; font-weight:650; }
.mx-tail .kv em{ display:block; font-style:normal; font-size:10.5px; color:var(--ink3);
                 line-height:1.65; margin-top:3px; }
.mx-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
          gap:var(--sp-3); margin-top:var(--sp-4); }
.mx-kpis .k{ border:1px solid var(--line); border-radius:var(--r-sm);
             background:var(--panel); padding:12px 14px; }
.mx-kpis .k>span{ display:block; font-size:10.5px; letter-spacing:.06em;
                  color:var(--ink3); margin-bottom:5px; }
.mx-kpis .k b.tnum{ font-size:19px; font-weight:650; }
.mx-kpis .k em{ display:block; font-style:normal; font-size:10.5px; color:var(--ink3);
                line-height:1.7; margin-top:5px; }
/* 「算不出」的那一格描红边：它不是一个待补的空位，是一条 critical 口径。 */
.mx-kpis .k.crit{ border-color:var(--deny-line); background:var(--deny-soft); }
.mx-kpis .k.crit em{ color:var(--bad); }

/* ── 新老结构的三块拆分条 ─────────────────────────────────── */
.mx-split{ margin-top:var(--sp-4); display:grid; gap:8px; }
.mx-split .sp{ display:grid; grid-template-columns:120px 92px minmax(0,1fr);
               gap:12px; align-items:center; font-size:12px; }
.mx-split .sp>span{ color:var(--ink2); }
.mx-split .sp>b{ text-align:right; font-weight:650; }
.mx-split .sp>i{ display:block; height:8px; border-radius:4px; background:var(--bg-2);
                 overflow:hidden; box-shadow:inset 0 1px 1px rgba(28,38,90,.10); }
.mx-split .sp>i>u{ display:block; height:100%; border-radius:4px;
                   background:linear-gradient(90deg,#9aa5f2,var(--brand)); }
@media(max-width:640px){ .mx-split .sp{ grid-template-columns:1fr 90px; }
                         .mx-split .sp>i{ grid-column:1/3; } }

/* ── 清退候选 ─────────────────────────────────────────────── */
.mx-crit{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.mx-crit span{ font-size:11.5px; background:var(--panel-2); border:1px solid var(--line-2);
               border-radius:var(--r-pill); padding:4px 12px; color:var(--ink2); }
.mx-retire .tbl td.rs{ text-align:left; white-space:normal; font-family:inherit;
                       font-size:11.5px; color:var(--ink2); max-width:420px; }
.mx-retire .tbl td.rs ul{ margin:0; padding-left:1.05em; }
.mx-retire .tbl td.rs li{ line-height:1.7; }