/*
 * 报告结论区样式（详情页 / 打印页 / 简版共用）
 *
 * 为什么要单独一个文件：
 *   结论区在设计上要「比正文大两档」，如果写在 app.css 里，会和全站正文基准字号
 *   同处一个层，改结论字号时很容易顺手把正文也带跑（这是本次并行改动里明确要避开的）。
 *   抽成独立表后，只影响 .cc-* 这一组类，site.css / admin.css 的字号层一行都不用动。
 *
 * 配色一律取 app.css 的 :root 变量，不在这里新造色值：
 *   正向（越高越好 / 越短越好）用 --brand-2，警示用 --warn，负向用 --danger，
 *   缺数据用 --muted。硬编码色值会在换主题时变成孤儿颜色。
 */

/* ---------- 容器 ---------- */
.cc {
    margin-top: 14px;
    /* 底部留白比顶部少 2px 是刻意的：最后一行是 .cc-sides，它自己还有内边距，
       再加 18px 会显得这一块浮在卡片中间。v2.6.0 从 16px 调到 20px ——
       底部那行「门店竞争 / 租金压力」原来是贴边的。 */
    padding: 18px 20px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #101826 0%, #0c1220 100%);
    /* min-width:0 是给 flex/grid 父容器用的：不写的话长结论文字会把整页撑出横向滚动条 */
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.cc-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cc-eyebrow {
    font-size: var(--fs-xs, 13px);
    letter-spacing: 1px;
    color: var(--brand-2);
    border-left: 3px solid var(--brand-2);
    padding-left: 8px;
    line-height: 1.2;
}

.cc-cat {
    font-size: var(--fs-xs, 13px);
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ---------- 结论正文 ----------
   字号用 em 而不是 px：全站正文基准正在统一成随屏宽变化的字号（1440 下 15px、
   1920 下 16px），写死 20px 在大屏上只比正文大 1 档，结论就不再是「第一落点」了。
   1.5em 在两种基准下分别是 22.5 / 24px，稳定比正文大两档以上。 */
.cc-verdict {
    font-size: 1.5em;
    line-height: 1.95;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 16px;
    /* 结论是长段落：两端对齐会让中文竖排间隙忽大忽小，这里保持自然左对齐 */
    text-align: left;
}

/* ---------- 两个主数字 ---------- */
.cc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.cc-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #0b1119;
}

.cc-k {
    font-size: var(--fs-xs, 13px);
    color: var(--text-2);
}

.cc-v {
    font-family: var(--mono);
    font-size: var(--fs-num, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
    /* 数字用等宽字体 + 固定字形宽度，回本周期从 9.8 变成 128.0 时不会左右跳动 */
    font-variant-numeric: tabular-nums;
}

.cc-u {
    font-size: var(--fs-sm, 14px);
    font-weight: 600;
    margin-left: 4px;
    letter-spacing: 0;
    opacity: .85;
}

.cc-n {
    font-size: var(--fs-xs, 13px);
    color: var(--muted);
    line-height: 1.6;
}

/* ---------- 语义配色：越高越好 / 越差越警示 ---------- */
.cc-tone-pos .cc-v { color: var(--brand-2); }
.cc-tone-warn .cc-v { color: var(--warn); }
.cc-tone-neg .cc-v { color: var(--danger); }
.cc-tone-mask .cc-v { color: var(--muted); }

.cc-tone-pos { border-color: rgba(23, 184, 166, .32); }
.cc-tone-warn { border-color: rgba(240, 169, 46, .32); }
.cc-tone-neg { border-color: rgba(239, 77, 90, .32); }

/* ---------- 次级指标：越高越差的一组 ----------
   v2.6.0 改成两行网格，修「门店竞争 / 租金压力 这一行文字错乱、与卡片底部间距过近」。
   原来 span + b + em 三个都是同一行的 flex 子项、align-items:baseline，
   于是「门店竞争」「68」「家」「1km 同品类 · 饱和度 74（越高越拥挤）」挤成一条长句，
   读起来分不清哪个是标签、哪个是数字、哪个是解释；由于这一行是卡片最后一个元素，
   16px 的正文字压在 8px 内边距里，看着就贴在卡片底边上。
   现在：标签左、数字右各占一列，解释文字独占第二行整宽。 */
.cc-sides {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.cc-side {
    flex: 1 1 240px;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 3px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(47, 129, 247, .05);
    border: 1px solid var(--line-soft);
    font-size: var(--fs-xs, 13px);
    color: var(--text-2);
}

/* 标签：第一列；数字：第二列并右对齐 —— 两张卡的数字能上下对齐成一条竖线 */
.cc-side > span { grid-column: 1; grid-row: 1; }
.cc-side > b {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-family: var(--mono);
    font-size: var(--fs-md, 15px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cc-side em {
    grid-column: 1 / -1;
    grid-row: 2;
    font-style: normal;
    font-size: var(--fs-xs, 13px);
    line-height: 1.55;
    color: var(--muted);
}

.cc-side.cc-tone-pos b { color: var(--brand-2); }
.cc-side.cc-tone-warn b { color: var(--warn); }
.cc-side.cc-tone-neg b { color: var(--danger); }
.cc-side.cc-tone-mask b { color: var(--muted); }

/* ---------- 窄屏：大号数字改成上下堆叠 ----------
   390 宽下两个 190px 的块并排放不下，auto-fit 已经会自动折行；
   这里再把字号收一档，保证「机会指数」四个字与数字不会各占一行。 */
@media (max-width: 640px) {
    .cc { padding: 14px 14px 12px; }
    .cc-verdict { font-size: 1.25em; line-height: 1.85; margin-bottom: 13px; }
    .cc-v { font-size: var(--fs-xl, 26px); }
    .cc-kpis { grid-template-columns: 1fr; }
    .cc-sides { gap: 8px; }
    .cc-side { flex: 1 1 100%; }
}

/* ---------- 打印 / 导出 PDF ----------
   打印件是白底（report_print 的 .print-wrap、sample_print 的 .sample-paper），
   深色渐变底会把整块压成黑油墨，--text-2 的浅灰小字在白底上也读不出来，
   所以在容器里直接改回白底 + 深字。不写在 @media print 里：
   用户点「导出 PDF」之前先在浏览器里看这一页，那时也必须是白底。 */
.print-wrap .cc, .sample-paper .cc,
.print-wrap .cc-kpi, .sample-paper .cc-kpi,
.print-wrap .cc-side, .sample-paper .cc-side {
    background: #fff !important;
    border-color: #dfe4ea !important;
    box-shadow: none !important;
}
.print-wrap .cc-k, .sample-paper .cc-k,
.print-wrap .cc-n, .sample-paper .cc-n,
.print-wrap .cc-cat, .sample-paper .cc-cat,
.print-wrap .cc-side em, .sample-paper .cc-side em { color: #5c6a7a !important; }
.print-wrap .cc-verdict, .sample-paper .cc-verdict { color: #16202e !important; }
.print-wrap .cc-side, .sample-paper .cc-side { color: #34404e !important; }

@media print {
    .cc { background: #fff !important; border-color: #dfe4ea !important; box-shadow: none !important; }
    .cc-kpi { background: #fff !important; border-color: #dfe4ea !important; }
    .cc-verdict { color: #16202e !important; }
    .cc-side { background: #fff !important; border-color: #dfe4ea !important; }
}