/*!
 * 在线简历 · 预览纸张样式（P3-G242）——编辑页 /tools/resume-builder 与分享页 /tools/resume/<shareId> **共用的唯一一份**。
 *
 * 为什么必须单独成文件（与 /js/tools/resume-render.js 同一个理由）：
 *   这两页在 G239 时把同一段纸张 CSS 各抄了一份，到 G242 已经飘了——编辑页内边距 `p-6`、分享页 `p-6 md:p-8`，
 *   也就是说"你预览看到的"和"HR 打开链接看到的"本来就不一样。抄第二份必然漂移，所以排版只住在这里。
 *   门禁 tools-tests/g239-resume-builder-test/check-faq-parity.js 钉死：两个模板都只许 <link> 这一个文件、
 *   版本号必须相同、模板里再出现 .rb-p / .rb-tpl- 规则就报错。
 *
 * 三条打印口径（简历是拿来打印的，不是只拿来好看的）：
 *   1) `print-color-adjust: exact`——左栏浅灰底、应届款头部色块在打印时必须保留，浏览器默认会把背景全部洗掉；
 *   2) 纸张内边距只在屏幕上存在，打印时归零，边距交给 `@page { margin: 12mm }`，否则会叠成 21mm 的宽边；
 *   3) 条目与左侧栏 `break-inside: avoid`、小节标题 `break-after: avoid`——绝不能出现"标题在上一页、内容在下一页"。
 */

/* ---------- 版面基线：屏幕上是缩放过的 A4，打印时按 @page 真实出纸 ---------- */
.rb-p {
  --rb-ink: #16202e;        /* 姓名、条目标题 */
  --rb-body: #334155;       /* 正文 */
  --rb-mute: #6b7686;       /* 时间、次要信息 */
  --rb-rule: #e6eaf0;       /* 分隔细线 */
  /* 主色轴（P3-G250 修的正是这里）：模板给 default，用户选的色走 --rb-accent-user。
     两个名字是**必需的**，不是为了好看——用户色由 JS 设在 .rb-p 这个元素上，而模板规则
     作用在 rbRender 输出的内层 .rb-tpl-* 上；同名时内层那条是"自有声明"，优先级高于继承，
     会把外层传下来的用户色整块盖掉（实测 7/7 套模板换色后画出来的颜色毫无变化）。 */
  --rb-accent-default: #0f2e59;
  --rb-accent-soft-default: #eef2f8;
  --rb-accent: var(--rb-accent-user, var(--rb-accent-default));
  --rb-accent-soft: var(--rb-accent-soft-user, var(--rb-accent-soft-default));
  /* 字号只有两个旋钮：内容 / 标题（单位 px，P3-G245 用户提的可调字号）。
     默认值三处必须一致：这里的初值、resume-render.js 的 STYLE_DEFAULT、Java 端 ResumeContentSanitizer
     的钳制默认值——check-faq-parity.js 现读这三个文件对账，谁漂了谁红。
     下面其余字号全部写成 calc(旋钮 × 系数)，系数＝改版前的像素值 ÷ 当时基准值，
     所以拖滑块是"整版等比缩放"，不是只把正文放大、标题原地不动。 */
  --rb-fs-body: 12.6px;
  --rb-fs-head: 12.4px;
  position: relative;
  background: #fff;
  color: var(--rb-body);
  font-family: "Inter", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: var(--rb-fs-body);
  line-height: 1.53;
  padding: 32px 36px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
/* 纸张宽度上限（P3-G251）：这条管的不是"好不好看"，而是"屏幕上一行放多少字 ＝ 打印出来一行放多少字"。
   775 不是挑的整数：@page 是 A4（210mm）减 12mm×2 页边距 → 打印内容宽 186mm ≈ 703px；
   屏幕上这 703px 之外还要加纸张自己的左右内边距 36px×2 → 775px。
   为什么非写不可：纸张宽度跟随列宽。body 从 1280 加宽到 1536 之后预览列跟着变宽，纸就会比 A4
   打印件宽出一截——屏幕上不换行的句子打印出来会换行，"所见即所得"当场变成假话（改之前是反过来：
   两列各 630px，纸只有 614px，比打印件还窄，屏幕上换行比打印件更早）。
   窄屏不受影响：预览列不足 775 时仍然是铺满，只是不再顶住左边。两页共用本文件，所以"编辑页预览"
   与"HR 打开链接看到的"也终于同宽、同换行。
   数字不许抄第二份：门禁 tools-tests/g239-resume-builder-test/test-layout.js 用这里的 @page 边距
   与 padding 现算 (210−2×12)mm→703、再加 36×2 来对账，改了 padding 忘了这里就会红。 */
@media screen {
  .rb-p {
    min-height: 900px; box-shadow: 0 2px 4px rgba(15, 46, 89, .06), 0 12px 32px rgba(15, 46, 89, .10);
    max-width: 775px; margin-left: auto; margin-right: auto;
  }
}

/* ---------- 头部 ---------- */
.rb-p .rb-hd { margin-bottom: 2px; }
.rb-p .rb-hd-row { display: flex; align-items: flex-start; gap: 16px; }
.rb-p .rb-hd-t { flex: 1 1 auto; min-width: 0; }
.rb-p h1.rb-nm {
  margin: 0; font-size: calc(var(--rb-fs-head) * 2.016); line-height: 1.2; font-weight: 700;
  color: var(--rb-ink); letter-spacing: .5px;
}
.rb-p .rb-role { margin-top: 2px; font-size: calc(var(--rb-fs-body) * 1.071); font-weight: 600; color: var(--rb-accent); }
.rb-p .rb-intent { margin-top: 4px; font-size: calc(var(--rb-fs-body) * 0.952); color: var(--rb-mute); }
.rb-p .rb-contact { margin-top: 6px; font-size: calc(var(--rb-fs-body) * 0.921); color: var(--rb-mute); line-height: 1.7; }
.rb-p .rb-contact span { overflow-wrap: anywhere; }
.rb-p .rb-contact i { font-style: normal; margin: 0 6px; color: #c3cbd8; }
.rb-p .rb-blank { padding: 96px 0; text-align: center; color: #9aa5b5; font-size: calc(var(--rb-fs-body) * 0.992); }
.rb-p .rb-photo {
  flex: none; width: 76px; height: 101px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--rb-rule);
}

/* ---------- 小节标题：文字 + 向右延伸的细线（比通栏粗线轻，简历显得干净） ---------- */
.rb-p h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 11px 0 6px; font-size: var(--rb-fs-head); font-weight: 700; letter-spacing: .04em;
  color: var(--rb-accent);
}
.rb-p h3::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right, var(--rb-rule), rgba(230, 234, 240, 0));
}
.rb-p > h3:first-of-type, .rb-p .rb-main > h3:first-child, .rb-p .rb-side > h3:first-child { margin-top: 11px; }

/* ---------- 条目：标题一行、时间靠右、正文用带悬挂缩进的项目符号 ---------- */
.rb-p .rb-it { margin-bottom: 8px; break-inside: avoid; }
.rb-p .rb-it:last-child { margin-bottom: 0; }
.rb-p .rb-it-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rb-p .rb-it-t { font-size: calc(var(--rb-fs-head) * 1.04); font-weight: 650; color: var(--rb-ink); }
.rb-p .rb-it-s { color: var(--rb-body); }
.rb-p .rb-it-d {
  margin-left: auto; padding-left: 12px; font-size: calc(var(--rb-fs-body) * 0.905); color: var(--rb-mute);
  white-space: nowrap; letter-spacing: .01em;
}
.rb-p .rb-desc { margin-top: 3px; }
.rb-p .rb-li { position: relative; padding-left: 12px; margin-top: 1.5px; color: var(--rb-body); }
.rb-p .rb-li::before {
  content: ""; position: absolute; left: 1px; top: .63em;
  width: 3.5px; height: 3.5px; border-radius: 50%; background: #b9c4d4;
}
.rb-p .rb-li:first-child { margin-top: 0; }
/* 个人总结是段落，不是清单：给它自己的类，绝不带项目符号（P3-G242 第一版误用了 rb-li，读起来像清单） */
.rb-p .rb-sum { margin-top: 2px; color: var(--rb-body); }
.rb-p .rb-sum:first-child { margin-top: 0; }

/* ---------- 技能：默认是浅底标签 ---------- */
.rb-p .rb-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin: 0 5px 5px 0; padding: 1.5px 9px;
  border: 1px solid var(--rb-rule); border-radius: 999px;
  background: #f8fafc; color: var(--rb-body); font-size: calc(var(--rb-fs-body) * 0.913); line-height: 1.5;
}
.rb-p .rb-chip-l { color: var(--rb-mute); font-size: calc(var(--rb-fs-body) * 0.873); }

/* ---------- 模板一：经典单页（通用、ATS 友好） ---------- */
.rb-tpl-classic { --rb-accent-default: #0f2e59; --rb-accent: var(--rb-accent-user, var(--rb-accent-default)); }
.rb-tpl-classic .rb-hd { border-bottom: 1.5px solid var(--rb-accent); padding-bottom: 11px; }
.rb-tpl-classic h1.rb-nm { color: var(--rb-accent); }

/* ---------- 模板二：左右分栏（信息碎、技能/证书多的岗位） ---------- */
.rb-tpl-sidebar { --rb-accent-default: #334155; --rb-accent-soft-default: #f4f6fa; --rb-accent: var(--rb-accent-user, var(--rb-accent-default)); --rb-accent-soft: var(--rb-accent-soft-user, var(--rb-accent-soft-default)); }
.rb-tpl-sidebar .rb-hd { border-bottom: 1px solid var(--rb-rule); padding-bottom: 10px; }
.rb-tpl-sidebar .rb-body { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; }
.rb-tpl-sidebar .rb-side {
  flex: none; width: 33%; padding: 12px 13px; border-radius: 6px;
  background: var(--rb-accent-soft); break-inside: avoid;
}
.rb-tpl-sidebar .rb-side .rb-photo { width: 100%; height: auto; aspect-ratio: 3 / 4; margin-bottom: 10px; }
.rb-tpl-sidebar .rb-main { flex: 1 1 auto; min-width: 0; }
.rb-tpl-sidebar h3 { margin: 14px 0 6px; font-size: calc(var(--rb-fs-head) * 0.952); }
.rb-tpl-sidebar h3::after { display: none; }
.rb-tpl-sidebar h3::before {
  content: ""; flex: none; width: 3px; height: 11px; border-radius: 2px; background: var(--rb-accent);
}
.rb-tpl-sidebar .rb-chip {
  display: flex; justify-content: space-between; gap: 8px; width: 100%;
  margin: 0; padding: 3px 0; border: 0; border-bottom: 1px dashed #dfe4ec;
  border-radius: 0; background: transparent;
}
.rb-tpl-sidebar .rb-chip:last-child { border-bottom: 0; }

/* ---------- 模板三：应届·转行（教育/项目优先，多一点颜色） ---------- */
.rb-tpl-fresh { --rb-accent-default: #1d4ed8; --rb-accent-soft-default: #eff5ff; --rb-accent: var(--rb-accent-user, var(--rb-accent-default)); --rb-accent-soft: var(--rb-accent-soft-user, var(--rb-accent-soft-default)); }
.rb-tpl-fresh .rb-hd {
  background: var(--rb-accent-soft); border-left: 3px solid var(--rb-accent);
  border-radius: 5px; padding: 11px 14px;
}
.rb-tpl-fresh h1.rb-nm { color: var(--rb-accent); }
/* 应届款的小节比通用款多（教育/项目提到前面），间距单独收一点，示例才装得进一页 A4 */
.rb-tpl-fresh h3 { margin: 10px 0 5px; }
.rb-tpl-fresh .rb-role { color: #334155; }
.rb-tpl-fresh .rb-chip { border-color: #dbe6ff; background: #f2f6ff; color: #1e3a8a; }
.rb-tpl-fresh .rb-chip-l { color: #6478b8; }


/* ---------- 模板四：极简（sans，P3-G249）----------
   差别不在配色，在「去掉一切装饰」：没有色块、没有下划线、没有标题右侧延伸线，分段全靠留白；
   时间从行尾挪到标题下面一行——这套的主角是内容，时间只是脚注。适合设计/产品/内容岗。 */
.rb-tpl-sans { --rb-accent-default: #16202e; --rb-accent-soft-default: #f5f6f8; --rb-accent: var(--rb-accent-user, var(--rb-accent-default)); --rb-accent-soft: var(--rb-accent-soft-user, var(--rb-accent-soft-default)); }
.rb-tpl-sans .rb-hd { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
/* 这一套以前只写着 --rb-accent 却没有任何属性用它，主色按钮点了必然没反应（P3-G250）；
   接在姓名与小节标题上，default 就是原来的墨色，所以"跟随模板"时观感一字不变。 */
.rb-tpl-sans h1.rb-nm { color: var(--rb-accent); letter-spacing: .01em; }
.rb-tpl-sans .rb-role { color: var(--rb-body); }
.rb-tpl-sans h3 {
  margin: 17px 0 5px; font-size: calc(var(--rb-fs-head) * 0.9);
  letter-spacing: .14em; color: var(--rb-accent);
}
.rb-tpl-sans h3::after { display: none; }
.rb-tpl-sans .rb-it { margin-bottom: 11px; }
.rb-tpl-sans .rb-it-h { display: block; }
.rb-tpl-sans .rb-it-d { display: block; margin-top: 1px; padding-left: 0; white-space: normal; }

/* ---------- 模板五：时间轴（line，P3-G249）----------
   左列固定宽度放时间、右列放内容，一条竖线加圆点把经历串起来——给 3 年以上、换过两三次工作的人：
   这类简历要解决的是「脉络看得清」，不是「内容多」。仍是单栏文本流，ATS 解析不受影响。 */
.rb-tpl-line { --rb-accent-default: #1f2937; --rb-accent-soft-default: #f3f4f6; --rb-accent: var(--rb-accent-user, var(--rb-accent-default)); --rb-accent-soft: var(--rb-accent-soft-user, var(--rb-accent-soft-default)); }
.rb-tpl-line .rb-hd { border-bottom: 1.5px solid var(--rb-accent); padding-bottom: 10px; }
.rb-tpl-line .rb-it { position: relative; padding-left: 108px; margin-bottom: 12px; }
.rb-tpl-line .rb-it::before {
  content: ""; position: absolute; left: 92px; top: 8px; bottom: -12px; width: 1.5px; background: var(--rb-rule);
}
/* 最后一条不许把线拖进空白里（分页时那条尾巴尤其难看） */
.rb-tpl-line .rb-it:last-child::before { bottom: auto; height: 4px; }
.rb-tpl-line .rb-it::after {
  content: ""; position: absolute; left: 89px; top: 4px; width: 7px; height: 7px;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--rb-accent);
}
.rb-tpl-line .rb-it-d {
  position: absolute; left: 0; top: 1px; width: 84px; margin: 0; padding: 0;
  text-align: right; white-space: normal;
}

/* ---------- 模板六：一页紧凑（dense，P3-G249）----------
   只压留白、不压字号：行高、段距、条距一起收，技能从浅底标签改成内联一句。
   刻意不缩基线字号——字号是用户自己的旋钮（G245），用缩字骗过一页等于把可读性换成一页纸。
   也刻意**不改纸张内边距**：那是"纸"的属性、两页共用的锚，版式只该管纸上的排版
   （布局门禁会钉住每一条模板规则都不许改 .rb-p 的 padding）。 */
/* default 用墨黑而不是檀棕：这一套的卖点是"内容多也能塞进一页、投传统行业"，默认黑标题更稳，
     檀棕是色板里的一个选项，不是我们替用户定的默认色。 */
.rb-tpl-dense { --rb-accent-default: #16202e; --rb-accent-soft-default: #f7f0e7; --rb-accent: var(--rb-accent-user, var(--rb-accent-default)); --rb-accent-soft: var(--rb-accent-soft-user, var(--rb-accent-soft-default)); line-height: 1.42; }
.rb-tpl-dense h1.rb-nm { color: var(--rb-accent); }
.rb-tpl-dense h3 { color: var(--rb-accent); }
.rb-tpl-dense .rb-hd { border-bottom: 1px solid var(--rb-rule); padding-bottom: 7px; }
.rb-tpl-dense h3 { margin: 8px 0 3px; }
.rb-tpl-dense .rb-it { margin-bottom: 5px; }
.rb-tpl-dense .rb-desc { margin-top: 1px; }
.rb-tpl-dense .rb-li { margin-top: 0; }
.rb-tpl-dense .rb-photo { width: 66px; height: 88px; }
.rb-p .rb-skills { font-size: calc(var(--rb-fs-body) * 0.96); color: var(--rb-body); }
.rb-p .rb-sk { display: inline; }
.rb-p .rb-sk + .rb-sk::before { content: " · "; color: var(--rb-mute); }
.rb-p .rb-sk i { font-style: normal; margin-left: 3px; color: var(--rb-mute); font-size: calc(var(--rb-fs-body) * 0.86); }

/* ---------- 模板七：品牌色块（brand，P3-G249）----------
   通栏色块头部 + 反白姓名 + 圆形照片，正文保持单栏（分栏交给 sidebar，两件事不混在一套里）。
   色块里是文字，所以仍在文本流里、可被提取；但部分老 ATS 会打乱通栏头部与正文的先后顺序——
   页面与 FAQ 因此诚实写着「投大厂海投建议用经典单页／时间轴」，不假装它万能。
   头部外扩的负 margin 只在屏幕上有（抵消纸张内边距做出通栏）；打印时纸张内边距本来就是 0，
   负 margin 会把色块推出纸外，所以下面 @media print 里必须收回来。 */
.rb-tpl-brand { --rb-accent-default: #1d4ed8; --rb-accent-soft-default: #eff5ff; --rb-accent: var(--rb-accent-user, var(--rb-accent-default)); --rb-accent-soft: var(--rb-accent-soft-user, var(--rb-accent-soft-default)); }
.rb-tpl-brand .rb-hd {
  background: var(--rb-accent); color: #fff;
  margin: -32px -36px 12px; padding: 20px 36px 18px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rb-tpl-brand .rb-hd-row { flex-direction: row-reverse; gap: 18px; }
.rb-tpl-brand h1.rb-nm { color: #fff; }
.rb-tpl-brand .rb-role { color: rgba(255, 255, 255, .92); }
.rb-tpl-brand .rb-intent, .rb-tpl-brand .rb-contact { color: rgba(255, 255, 255, .82); }
.rb-tpl-brand .rb-contact i { color: rgba(255, 255, 255, .5); }
.rb-tpl-brand .rb-photo { width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .72); }
.rb-tpl-brand h3 { margin: 13px 0 5px; }
.rb-tpl-brand h3::after { background: linear-gradient(to right, var(--rb-accent-soft), rgba(239, 245, 255, 0)); }
.rb-tpl-brand .rb-chip { border-color: var(--rb-accent-soft); background: var(--rb-accent-soft); }
/* ---------- 手机：把内边距让给内容（打印不受影响，打印时内边距本来就是 0） ---------- */
@media screen and (max-width: 480px) {
  .rb-p { padding: 22px 18px; }
  .rb-p h1.rb-nm { font-size: calc(var(--rb-fs-head) * 1.774); }
  .rb-tpl-sidebar .rb-body { display: block; }
  .rb-tpl-sidebar .rb-side { width: auto; margin-bottom: 12px; }
  /* 手机上不许为了竖线牺牲正文宽度：轴收掉、时间回到标题下面一行（390px 宽里 84px 时间列＝正文只剩一半） */
  .rb-tpl-line .rb-it { padding-left: 0; }
  .rb-tpl-line .rb-it::before, .rb-tpl-line .rb-it::after { display: none; }
  .rb-tpl-line .rb-it-d { position: static; width: auto; text-align: left; display: block; }
  /* 通栏色块的外扩量跟着纸张内边距改（上面 .rb-p 在手机上换成 22px 18px，外扩必须同步，否则左右露白边） */
  .rb-tpl-brand .rb-hd { margin: -22px -18px 10px; padding: 16px 18px 14px; }
  .rb-tpl-brand .rb-photo { width: 68px; height: 68px; }
}
/* ---------- 打印：纸张边距交给 @page，颜色必须保留，标题不许落单 ---------- */
@page { size: A4; margin: 12mm; }
@media print {
  .rb-p {
    padding: 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .rb-p h3 { break-after: avoid; break-inside: avoid; }
  .rb-p .rb-hd { break-after: avoid; }
  .rb-p .rb-it, .rb-p .rb-side, .rb-p .rb-li { break-inside: avoid; }
  .rb-p .rb-body { break-inside: auto; }
  a[href]::after { content: "" !important; }
  /* 打印时纸张内边距为 0，色块不许再用负 margin 往纸外撑（撑出去就被裁掉一半） */
  .rb-tpl-brand .rb-hd { margin: 0 0 10px; padding: 14px 18px; }
}