/* report.css —— 任务结果页「自定义 HTML 产物」排版增强（新文件，被 status.html 引用；
   public/index.html 的免费体检结果卡也引入本文件，复用 .fa-compare-box 等少量规则）。
   沿用 style.css 里已有的 --accent/--border/--muted 等变量与 .report-section/.kv-list 设计语言，
   新增样式单独放这里，避免和其他并发改动在 style.css 里 append 冲突。
   <link> 顺序排在 style.css 之后，因此下面与 .report-body 相关的同选择器规则可以直接覆盖前者。 */

/* ---------- 通用：长词/长链接强制换行，任何产物都不能把视口撑宽 ---------- */
.report-body,
.report-body p,
.report-body li,
.report-body td,
.report-body th,
.report-body h2,
.report-body h3,
.report-body h4 {
  overflow-wrap: anywhere;
}
/* 代码块保留原始换行与横向滚动，不强行断词破坏代码可读性 */
.report-body pre,
.report-body pre * {
  overflow-wrap: normal;
}

/* ---------- 通用：表格全宽 + 横向滚动兜底 ----------
   style.css 里 .report-body table 用了 display:block 让表格可以整体横向滚动，
   但这会让 <tr>/<td> 失去撑满宽度的依据，表现为「又窄又小」的豆腐块。
   这里恢复标准表格布局，同时保留 overflow-x 滚动兜底，两者可以共存。 */
.report-body table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  overflow-x: auto;
}

/* ---------- 通用：关键数字行 → stat 徽章 ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 1.2rem; }
.stat-chip {
  display: inline-flex; align-items: baseline; gap: .35rem;
  background: var(--accent-soft); border: 1px solid rgba(0, 227, 160, .3);
  color: var(--accent); border-radius: 10px; padding: .5rem .9rem;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.stat-chip b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-chip--danger { background: rgba(255, 93, 104, .12); border-color: rgba(255, 93, 104, .3); color: var(--danger); }
.audit-summary-note { color: var(--muted); margin: 0 0 1.2rem; }

/* ---------- 通用：提示条（使用说明等） ---------- */
.tip-box {
  display: flex; gap: .6rem; align-items: flex-start;
  background: rgba(77, 159, 255, .08); border: 1px solid rgba(77, 159, 255, .25);
  border-radius: 10px; padding: .85rem 1rem; margin: 0 0 1.2rem;
  color: var(--text); font-size: .88rem; line-height: 1.7;
}
.tip-box::before { content: "💡"; flex: none; line-height: 1.5; }

/* ---------- baseline：引擎分组卡头 + 语言小徽章 ---------- */
.report-section > h3.engine-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.engine-badge {
  background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(0, 227, 160, .3);
  border-radius: 999px; padding: .3rem .8rem; font-size: .9rem; font-weight: 700;
}
.engine-count { color: var(--muted); font-size: .8rem; font-weight: 500; }

.lang-badge {
  display: inline-block; border-radius: 6px; padding: .12rem .5rem;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.lang-badge--zh { background: rgba(0, 227, 160, .14); color: var(--accent); }
.lang-badge--en { background: rgba(77, 159, 255, .16); color: var(--accent-2); }
.lang-badge--th { background: rgba(245, 165, 36, .16); color: var(--warn); }
.lang-badge--other { background: rgba(255, 255, 255, .08); color: var(--muted); }

/* ---------- audit：红绿灯清单 + 附加建议区区分 ---------- */
.report-body .audit-table td:first-child { text-align: center; width: 2.4rem; font-weight: 800; }
.report-body .audit-table tr:has(> td.fail) { background: rgba(255, 93, 104, .05); }
.report-body .audit-table td:last-child:not(:empty) { color: var(--warn); }

.audit-extras {
  background: rgba(245, 165, 36, .06); border: 1px dashed rgba(245, 165, 36, .35);
  border-radius: 12px; padding: 1rem 1.2rem;
}
.audit-extras h3 { margin-top: 0; }

/* ---------- 通用：配套文件卡片（audit/optimize 付费任务的整改包，status.html #files-card） ---------- */
.file-card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: .9rem 1rem; margin: .9rem 0; background: rgba(255, 255, 255, .02);
}
.file-card-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: .9rem; flex-wrap: wrap; }
.file-card-title svg { color: var(--muted); flex: none; }
.file-card-actions { display: flex; gap: .4rem; margin-left: auto; }
/* 交付物收件人标注（谁看这份文件），见 status.html fileHintHtml */
.file-card-hint { margin: 0 0 .6rem; font-size: .82rem; }
.file-card pre {
  margin: 0; max-height: 260px; overflow-y: auto; font-size: .78rem;
  background: rgba(0, 0, 0, .18); border-radius: 8px; padding: .7rem .8rem;
}

/* website 服务的「预览 xxx」<details> 已有 summary，直接卡片化即可 */
.report-body details {
  border: 1px solid var(--border); border-radius: 10px;
  padding: .3rem 1rem; margin: .9rem 0; background: rgba(255, 255, 255, .02);
}
.report-body details pre { margin: .6rem 0 .5rem; }

@media (max-width: 480px) {
  .stat-chip { flex: 1 1 auto; justify-content: center; }
  .report-body .audit-table { font-size: .82rem; }
}

/* ---------- 免费体检结果卡：复检对比区（public/free-audit.js #fa-compare）
   2026-08-19 方向修正：免费版对比只给达标数量与达标/退步计数，不逐项列名（逐项明细是付费
   体检口径，见 lib/free-audit.js getReportCompare 头部注释），样式相应简化为一行统计条 ---------- */
.fa-compare-box {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.2rem; margin: 0 0 1.2rem; background: rgba(255, 255, 255, .02);
}
.fa-compare-since { color: var(--muted); font-size: .82rem; margin: 0 0 .3rem; }
.fa-compare-headline { font-weight: 700; margin: 0 0 .6rem; }
.fa-compare-delta { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .82rem; }
.fa-compare-delta span { color: var(--muted); }
.fa-compare-delta b.up { color: var(--accent); }
.fa-compare-delta b.down { color: var(--danger); }

/* ---------- 免费体检结果卡：转化文案条（购买后可获得整改文件包） ---------- */
.fa-upsell-note {
  margin: .8rem 0; font-size: .82rem; color: var(--muted);
  border-left: 2px solid var(--accent); padding-left: .7rem;
}