/*
 * 学生个人筛查报告的专有样式。
 *
 * A4 骨架（纸张尺寸、页眉页脚、.rs-table、色板、打印规则）全部复用
 * report-summary.css —— 综合报告和个人报告是同一个系统出的两份文档，
 * 不该看起来像两套东西。这里只写个人报告特有的那几块：
 * 抬头、基本信息、总检结论、待办清单、分项块、纵向回顾、落款。
 *
 * 尺寸一律用 mm/pt：屏幕上按 96dpi 折算，打印时切回物理单位，
 * 否则会出现「屏幕上排得下、打印溢出到下一页」。
 */

/*
 * 量高度用的离屏页。必须**真正参与布局**（不能 display:none），
 * 否则量出来的全是 0；所以移到视口外而不是隐藏起来。
 * 它在装箱结束后就被移除，打印时不存在。
 */
.rs-probe {
  position: absolute;
  left: -99999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

/*
 * 章节标题比骨架紧一档。综合报告的章节标题前面有一条章级大标题（.rs-h1）压着，
 * 8mm 上边距是为了和它拉开距离；个人报告没有章级标题、六个小节直接连排，
 * 照用 8mm 会在每个标题上方留一道空档，六处加起来就是小半页纸。
 */
.rs-doc .rs-h2 {
  margin: 5mm 0 2.6mm;
}

/* ---------------- 抬头 ---------------- */

/*
 * 抬头而不是封面页。个人报告是一张张打印发下去的，独立封面会让每个孩子
 * 多废一张纸；机构名压在标题上方、下面一条细双线，是体检报告的常见做法。
 */
/*
 * 间距是按「首页要装下抬头 + 基本信息 + 总检结论 + 待办 + 各项总览」调的。
 * 松一格就会把总览表挤到第二页，整份报告多出一张纸 —— 改这里之前先看
 * 屏幕上的填充率（装箱逻辑见 student-report-app.js 末尾）。
 */
.rp-masthead {
  text-align: center;
  padding-bottom: 3mm;
  margin-bottom: 4mm;
  border-bottom: 3px double var(--rs-ink);
}

.rp-mh-org {
  font-size: 10.5pt;
  letter-spacing: .28em;
  color: var(--rs-soft);
  margin-bottom: 1.5mm;
}

.rp-mh-title {
  margin: 0 0 1.5mm;
  font-size: 20pt;
  font-weight: 700;
  letter-spacing: .12em;
}

.rp-mh-sub {
  font-size: 10.5pt;
  color: #4a5568;
  margin-bottom: 3mm;
}

.rp-mh-meta {
  display: flex;
  justify-content: center;
  gap: 8mm;
  font-size: 8.6pt;
  color: var(--rs-soft);
}

.rp-mh-meta b {
  color: var(--rs-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 基本信息 ---------------- */

/*
 * 四列网格。跟人一辈子的信息（姓名性别年龄档案号）排第一行，
 * 跟学年变的（学校年级学号）排第二行 —— 这条口径在档案页立起来的（§4.15）：
 * 家长看三年前的报告，上面的年级就该是三年前那个年级。
 */
.rp-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 4mm;
  border: 1px solid #d9dee6;
  border-radius: 2px;
  overflow: hidden;
}

.rp-fact {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  padding: 1.8mm 3mm;
  border-right: 1px solid #eaedf1;
  border-bottom: 1px solid #eaedf1;
  font-size: 9.2pt;
  min-width: 0;
}

.rp-fact:nth-child(4n) {
  border-right: 0;
}

.rp-fact:nth-last-child(-n+4) {
  border-bottom: 0;
}

.rp-fact dt {
  flex: none;
  color: var(--rs-soft);
  font-size: 8.6pt;
}

.rp-fact dd {
  margin: 0;
  min-width: 0;
  word-break: break-all;
}

.rp-fact dd b {
  font-weight: 600;
}

/* 附注（出生日期、学号、监护人关系）压小一号跟在主值后面，不另占一格 */
.rp-fact dd i {
  font-style: normal;
  margin-left: 1.5mm;
  font-size: 8pt;
  color: var(--rs-soft);
}

.rp-name {
  font-size: 11pt;
  letter-spacing: .05em;
}

/* ---------------- 总检结论 ---------------- */

/*
 * 报告里唯一必须一眼看到的东西。左侧一条粗色带按档位换色，
 * 家长翻开就知道这次是「没事」还是「要去医院」。
 */
.rp-verdict {
  margin: 0 0 4mm;
  border: 1px solid #e3e8ef;
  border-left: 2.2mm solid var(--rs-soft);
  border-radius: 2px;
  background: #fbfcfd;
  break-inside: avoid;
}

.rp-verdict.ok { border-left-color: #19be6b; background: #f6fdf9; }
.rp-verdict.done { border-left-color: #2d8cf0; background: #f7fbff; }
.rp-verdict.warn { border-left-color: #ff9900; background: #fffbf4; }
.rp-verdict.bad { border-left-color: #ed4014; background: #fff8f7; }

.rp-vd-head {
  display: flex;
  align-items: center;
  gap: 3mm;
  padding: 2.5mm 4mm 1.6mm;
}

.rp-vd-tag {
  flex: none;
  padding: .8mm 2.2mm;
  border-radius: 2px;
  background: var(--rs-ink);
  color: #fff;
  font-size: 8.4pt;
  letter-spacing: .1em;
}

.rp-vd-head b {
  font-size: 12pt;
  font-weight: 700;
}

.rp-vd-body {
  padding: 0 4mm 2.5mm;
}

.rp-vd-body p {
  margin: 0 0 1.2mm;
  font-size: 9.4pt;
  line-height: 1.68;
  text-align: justify;
}

.rp-vd-body p:last-child {
  margin-bottom: 0;
}

/* ---------------- 需要家长做的事 ---------------- */

/*
 * 一条一件事。总检结论那段话是概述，这里是可执行清单 ——
 * 家长照着做的是这一块，所以项目名、档位、动作三段分开排，扫一眼就能对应。
 */
.rp-actions {
  margin: 0 0 2mm;
  padding-left: 6mm;
  font-size: 9.4pt;
  line-height: 1.7;
}

.rp-actions li {
  margin-bottom: 2.2mm;
  break-inside: avoid;
}

.rp-ac-item {
  display: inline-block;
  padding: .3mm 1.8mm;
  margin-right: 2mm;
  border-left: 1mm solid var(--rs-soft);
  background: #f7f8fa;
  font-weight: 600;
}

.rp-ac-lv {
  margin-right: 2mm;
  font-size: 8.8pt;
  font-weight: 600;
}

.rp-ac-text {
  color: #3d4757;
}

/* ---------------- 判定档位小徽标 ---------------- */

/* 表格里的判定格。iview 的 tag 在打印时颜色会掉，所以自己写一套 */
.lv-chip {
  display: inline-block;
  padding: .4mm 2mm;
  border-radius: 2px;
  font-size: 8.6pt;
  font-weight: 600;
  white-space: nowrap;
}

.lv-chip.ok { background: #eaf8f0; color: #0f7a45; }
.lv-chip.done { background: #eef3fb; color: #1c4e80; }
.lv-chip.wait { background: #fff6e6; color: #a05c00; }
.lv-chip.bad { background: #fdeeee; color: #a8121a; }
.lv-chip.mute { background: #f5f6f8; color: #6b7280; }

/* 纵向回顾表里的档位。列多格窄，只留一个色点加短名 */
.lv-dot {
  display: inline-block;
  font-size: 8.2pt;
  white-space: nowrap;
}

.lv-dot::before {
  content: '';
  display: inline-block;
  width: 1.6mm;
  height: 1.6mm;
  border-radius: 50%;
  margin-right: 1mm;
  vertical-align: middle;
  background: currentColor;
}

.lv-dot.ok { color: #19be6b; }
.lv-dot.done { color: #2d8cf0; }
.lv-dot.wait { color: #ff9900; }
.lv-dot.bad { color: #ed4014; }
.lv-dot.mute { color: #a9aeb8; }

/* ---------------- 五项总览 ---------------- */

/*
 * 行高比骨架默认的紧一档（1.8mm → 1.3mm）。六行下来省出约 28px，
 * 正好让这张表跟着总检结论留在第一页 —— 它被挤到第二页，整份报告就多一张纸。
 */
.rp-overview th,
.rp-overview td {
  padding: 1.3mm 2mm;
}

.rp-overview td,
.rp-overview th {
  text-align: left;
}

.rp-overview tbody th {
  font-weight: 600;
}

.rp-overview td.soft b {
  color: var(--rs-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 两张图 ---------------- */

/*
 * 图都是手写的内联 SVG（见 student-report-app.js），不引图表库：
 * canvas 打印经常糊，而 SVG 是矢量的，打到纸上多大都清楚。
 *
 * 字号要按**缩放后的物理尺寸**算，不能看 viewBox 里的数字。
 * 雷达图 viewBox 宽 336、占 68mm，一个单位约合 0.2mm，所以 14 的字
 * 落到纸上是 8pt；标尺 viewBox 宽 600、占满 162mm 的内容宽，一个单位
 * 0.27mm，10 的字是 7.7pt。改宽度就要回头核字号，否则纸上会变成蚊子腿。
 */
.rp-radar-wrap {
  display: flex;
  align-items: center;
  gap: 5mm;
  margin: 0 0 3.5mm;
  padding: 2mm 3mm;
  border: 1px solid #e6e9ee;
  border-radius: 2px;
  background: #fcfdfe;
  break-inside: avoid;
}

.rp-radar {
  flex: none;
  width: 68mm;
  height: auto;
}

.rd-grid {
  fill: none;
  stroke: #e3e7ee;
  stroke-width: 1;
}

.rd-grid.out {
  stroke: #c3cad6;
}

.rd-axis {
  stroke: #dfe4ec;
  stroke-width: 1;
}

/* 未检的轴画成虚线，配合「跳过这个顶点」一起说明那一项没有结论 */
.rd-axis.off {
  stroke: #e6e9ee;
  stroke-dasharray: 3 3;
}

.rd-area {
  fill: rgba(45, 140, 240, .13);
  stroke: #2d8cf0;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* 顶点描白边：挨着网格线时不会糊成一团 */
.rd-dot {
  stroke: #fff;
  stroke-width: 1.2;
}

.rd-label {
  font-size: 14px;
  font-weight: 600;
  fill: var(--rs-ink);
}

.rd-sub {
  font-size: 12px;
  font-weight: 400;
  fill: var(--rs-soft);
}

.rd-sub.off {
  fill: #b6bbc4;
}

.rp-rd-side {
  flex: 1;
  min-width: 0;
}

.rp-rd-title {
  font-size: 9pt;
  font-weight: 600;
  margin-bottom: 1.5mm;
}

.rp-rd-legend {
  margin: 0 0 2mm;
  padding: 0;
  list-style: none;
  font-size: 8.6pt;
}

.rp-rd-legend li {
  display: flex;
  align-items: center;
  gap: 1.8mm;
  margin-bottom: .8mm;
}

.rp-rd-legend i {
  flex: none;
  width: 2.2mm;
  height: 2.2mm;
  border-radius: 50%;
}

.rp-rd-legend b {
  font-weight: 600;
}

.rp-rd-legend span {
  color: var(--rs-soft);
  font-size: 8pt;
}

.rp-rd-say {
  margin: 0 0 1.2mm;
  font-size: 8.6pt;
  line-height: 1.6;
  color: #4a5568;
  text-align: justify;
}

.rp-rd-say b {
  color: var(--rs-ink);
  font-weight: 600;
}

.rp-rd-say.mute {
  color: var(--rs-soft);
  margin-bottom: 0;
}

/*
 * 判定标尺。把「界值 正常≥5.0 / 轻度=4.9」画成一条轴，
 * 家长最想知道的「离正常还有多远」看图一眼就懂。
 *
 * 它长在 .rp-basis 里面，不自带标题：判定依据那段文字说的就是测量值与界值，
 * 图画的是同一件事，分两块各挂一个标题等于把同样的信息印两遍。
 */
.rp-scale {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.2mm;
}

.sb-note {
  margin-top: .6mm;
  font-size: 8pt;
  color: var(--rs-soft);
}

.sb-band.ok { fill: #cdeedd; }
.sb-band.done { fill: #d9e7fa; }
.sb-band.wait { fill: #ffe7c2; }
.sb-band.bad { fill: #fbd5d3; }
.sb-band.mute { fill: #eceef2; }

.sb-bl {
  font-size: 10px;
  fill: #46536b;
}

.sb-tick {
  stroke: #9aa3b0;
  stroke-width: 1;
}

.sb-num {
  font-size: 10px;
  fill: var(--rs-soft);
  font-variant-numeric: tabular-nums;
}

/* 学生本人的位置：一个指下来的三角，比在条上打点显眼 */
.sb-mark {
  fill: var(--rs-ink);
}

.sb-mtext {
  font-size: 11px;
  fill: var(--rs-soft);
}

.sb-mtext .v {
  fill: var(--rs-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 分项明细 ---------------- */

/*
 * 项与项之间的间距是按「一页装得下三项」定的。
 *
 * 一项约 290px、可用页高 887px，三项刚好；松到 340px 就只能装两项，每页白扔
 * 200px，五项要多占一整张纸。加了判定标尺之后一度就是这样（6 页、末页只印满
 * 一半）。所以这里的 mm 数不是随手调的版式偏好，改之前先看屏幕上的填充率。
 */
.rp-item {
  margin-bottom: 2.8mm;
  padding-bottom: 2.5mm;
  border-bottom: 1px dashed #dfe3e9;
  break-inside: avoid;
}

.rp-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.rp-item-head {
  display: flex;
  align-items: center;
  gap: 3mm;
  margin-bottom: 2.4mm;
  padding-bottom: 1.2mm;
  border-bottom: 1px solid var(--rs-line);
}

.rp-it-name {
  font-size: 11.5pt;
  font-weight: 700;
}

/* 数值表：左列是采集分组名，右列把该组的字段横排 */
.rp-vals {
  margin-bottom: 2mm;
}

.rp-vals tbody th {
  width: 22%;
  text-align: left;
  color: var(--rs-soft);
  font-weight: 500;
  font-size: 8.8pt;
  vertical-align: top;
}

.rp-vals td {
  text-align: left;
}

.rp-v {
  display: inline-block;
  margin-right: 5mm;
  white-space: nowrap;
  font-size: 9.2pt;
}

.rp-v i {
  font-style: normal;
  color: var(--rs-soft);
  font-size: 8.6pt;
  margin-right: 1.2mm;
}

.rp-v b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
 * 判定依据。带测量值和界值，回答「凭什么判成这一档」——
 * 家长最容易质疑的就是这一点，就近给出比放在末页的标准表有用。
 */
.rp-basis {
  margin-bottom: 2mm;
  padding: 1.5mm 2.5mm;
  background: #f7f8fa;
  border-left: .8mm solid #cdd4de;
  font-size: 8.8pt;
  color: #4a5568;
  break-inside: avoid;
}

.rp-bs-text span {
  color: var(--rs-soft);
  margin-right: 2mm;
}

.rp-say {
  display: flex;
  gap: 3mm;
  margin-bottom: 1.2mm;
  font-size: 9.2pt;
  line-height: 1.62;
}

.rp-say-k {
  flex: none;
  width: 12mm;
  color: var(--rs-soft);
}

.rp-say-v {
  flex: 1;
  text-align: justify;
}

.rp-item.pending .rp-it-name {
  color: var(--rs-soft);
}

/* ---------------- 纵向回顾 ---------------- */

.rp-hist tbody th {
  text-align: left;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rp-hist tbody th i {
  display: block;
  font-style: normal;
  font-size: 7.8pt;
  color: var(--rs-soft);
  font-weight: 400;
}

.rp-hist th,
.rp-hist td {
  padding: 1.1mm 1.5mm;
}

/* ---------------- 本次判定标准 ---------------- */

/* 一个项目一块（分页时能单独挪），块间距由内部的 .rp-std-block 给 */
.rp-std {
  margin: 0;
}

.rp-std-block {
  margin-bottom: 2.5mm;
  break-inside: avoid;
}

.rp-std-block h5 {
  margin: 0 0 1mm;
  font-size: 9.4pt;
  font-weight: 600;
}

.rp-std-block p {
  margin: 0;
  padding-left: 4mm;
  font-size: 8.6pt;
  line-height: 1.6;
  color: #4a5568;
}

.rp-band {
  display: inline-block;
  margin-right: 4mm;
}

.rp-band b {
  color: var(--rs-ink);
  font-weight: 600;
}

.it-dot {
  display: inline-block;
  width: 2mm;
  height: 2mm;
  border-radius: 50%;
  margin-right: 1.5mm;
  vertical-align: middle;
}

/* ---------------- 落款与盖章 ---------------- */

.rp-sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10mm;
  margin-top: 6mm;
  padding-top: 4mm;
  border-top: 1px solid var(--rs-line);
}

.rp-sign-col {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5mm 3mm;
  font-size: 9pt;
}

.rp-sg-k {
  color: var(--rs-soft);
}

.rp-sg-v {
  font-weight: 600;
}

/* 盖章位。留白是给真章用的，不画假章 */
.rp-stamp {
  flex: none;
  width: 34mm;
  height: 24mm;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c5cbd6;
  border-radius: 2px;
  color: #b0b6c1;
  font-size: 8.4pt;
}

/* ---------------- 窄屏 ---------------- */

@media screen and (max-width: 900px) {
  .rp-facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .rp-fact:nth-child(4n) {
    border-right: 1px solid #eaedf1;
  }

  .rp-fact:nth-child(2n) {
    border-right: 0;
  }

  .rp-fact:nth-last-child(-n+4) {
    border-bottom: 1px solid #eaedf1;
  }

  .rp-fact:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .rp-mh-meta {
    flex-wrap: wrap;
    gap: 2mm 5mm;
  }
}