/* ────────────────────────────────────────────────────────────────
 *  OpenCareer Resume Editor · 模板系统
 *
 *  设计：3 个高质量模板 = 3 组 CSS Custom Properties + 不同 .resume-preview
 *       渲染规则。切模板 = 改 body[data-template] attribute，CSS 全更新。
 *
 *  字号 / 字体 / 行距 / 颜色 / 间距是模板**之外**的自定义维度，由 App.setX()
 *  动态写到 :root 的 CSS Variables 上，叠加在模板预设之上。
 * ──────────────────────────────────────────────────────────────── */

/* ─── 默认值（任何模板都先继承）─── */
:root {
  --resume-accent: #2563eb;
  --resume-text: #1a1d21;
  --resume-muted: #57606a;
  --resume-line: #d0d7de;
  --resume-bg: #ffffff;

  --resume-font: "Inter", -apple-system, BlinkMacSystemFont, "Noto Sans SC", sans-serif;
  --resume-base-size: 11pt;
  --resume-line-height: 1.5;
  --resume-h-scale: 1.35;

  --resume-section-gap: 14pt;
  --resume-item-gap: 9pt;
  --resume-paragraph-gap: 4pt;

  --resume-name-size: 24pt;
  --resume-title-size: 13pt;
  --resume-h2-size: 12pt;
  --resume-h3-size: 11.5pt;
}

/* ─── 字体预设（由 App.setFont() 切换）─── */
body[data-font="inter"] {
  --resume-font: "Inter", -apple-system, BlinkMacSystemFont, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body[data-font="ibm-plex"] {
  --resume-font: "IBM Plex Sans", -apple-system, "Noto Sans SC", sans-serif;
}
body[data-font="noto-sans"] {
  --resume-font: "Noto Sans SC", "Inter", sans-serif;
}
body[data-font="source-serif"] {
  --resume-font: "Source Serif 4", "Source Serif Pro", "Noto Serif SC", Georgia, serif;
}
body[data-font="noto-serif"] {
  --resume-font: "Noto Serif SC", "Source Serif 4", Georgia, serif;
}
body[data-font="jetbrains"] {
  --resume-font: "JetBrains Mono", "Inter", monospace;
  --resume-base-size: 10pt;
}

/* ─── 字号预设 ─── */
body[data-size="compact"] {
  --resume-base-size: 10pt;
  --resume-name-size: 22pt;
  --resume-title-size: 12pt;
  --resume-h2-size: 11pt;
  --resume-h3-size: 10.5pt;
}
body[data-size="standard"] {
  --resume-base-size: 11pt;
  --resume-name-size: 24pt;
  --resume-title-size: 13pt;
  --resume-h2-size: 12pt;
  --resume-h3-size: 11.5pt;
}
body[data-size="large"] {
  --resume-base-size: 12pt;
  --resume-name-size: 26pt;
  --resume-title-size: 14pt;
  --resume-h2-size: 13pt;
  --resume-h3-size: 12.5pt;
}

/* ─── 段距预设 ─── */
body[data-spacing="compact"] {
  --resume-section-gap: 10pt;
  --resume-item-gap: 6pt;
  --resume-paragraph-gap: 3pt;
}
body[data-spacing="standard"] {
  --resume-section-gap: 14pt;
  --resume-item-gap: 9pt;
  --resume-paragraph-gap: 4pt;
}
body[data-spacing="spacious"] {
  --resume-section-gap: 18pt;
  --resume-item-gap: 12pt;
  --resume-paragraph-gap: 6pt;
}

/* ════════════════════════════════════════════════════════════════
 * 模板 1: Modern（默认 · 单栏 · 蓝 accent · Inter）
 * ════════════════════════════════════════════════════════════════ */
body[data-template="modern"] {
  --resume-name-color: var(--resume-text);
  --resume-h2-style: bold;
  --resume-h2-color: var(--resume-accent);
}

body[data-template="modern"] #resume-preview .r-header {
  text-align: center;
  margin-bottom: var(--resume-section-gap);
  padding-bottom: 8pt;
  border-bottom: 0.5pt solid var(--resume-line);
}
body[data-template="modern"] #resume-preview .r-name {
  font-size: var(--resume-name-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--resume-text);
  line-height: 1.1;
}
body[data-template="modern"] #resume-preview .r-title {
  font-size: var(--resume-title-size);
  color: var(--resume-muted);
  margin-top: 3pt;
  font-weight: 500;
}
body[data-template="modern"] #resume-preview .r-contact {
  font-size: calc(var(--resume-base-size) * 0.92);
  color: var(--resume-muted);
  margin-top: 6pt;
  display: flex; justify-content: center; gap: 16pt;
  flex-wrap: wrap;
}
body[data-template="modern"] #resume-preview .r-summary {
  margin-bottom: var(--resume-section-gap);
  color: var(--resume-text);
  text-align: justify;
}
body[data-template="modern"] #resume-preview h2 {
  font-size: var(--resume-h2-size);
  color: var(--resume-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: var(--resume-section-gap) 0 8pt;
  padding-bottom: 2pt;
  border-bottom: 1.5pt solid var(--resume-accent);
}
body[data-template="modern"] #resume-preview h2:first-child { margin-top: 0; }

body[data-template="modern"] #resume-preview .r-item {
  margin-bottom: var(--resume-item-gap);
}
body[data-template="modern"] #resume-preview .r-item-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12pt;
  margin-bottom: 2pt;
}
body[data-template="modern"] #resume-preview .r-item-role {
  font-weight: 700;
  font-size: var(--resume-h3-size);
  color: var(--resume-text);
}
body[data-template="modern"] #resume-preview .r-item-org {
  color: var(--resume-muted);
  font-style: italic;
  font-weight: 500;
}
body[data-template="modern"] #resume-preview .r-item-date {
  color: var(--resume-muted);
  font-size: calc(var(--resume-base-size) * 0.95);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body[data-template="modern"] #resume-preview .r-item-loc {
  color: var(--resume-muted);
  font-size: calc(var(--resume-base-size) * 0.9);
  margin-bottom: 3pt;
}
body[data-template="modern"] #resume-preview .r-bullets {
  margin: 4pt 0 0;
  padding-left: 16pt;
}
body[data-template="modern"] #resume-preview .r-bullets li {
  margin-bottom: var(--resume-paragraph-gap);
}
body[data-template="modern"] #resume-preview .r-skill-group {
  margin-bottom: var(--resume-paragraph-gap);
}
body[data-template="modern"] #resume-preview .r-skill-group b {
  color: var(--resume-text);
  font-weight: 700;
}

/* customSections 内容：自由段落 */
#resume-preview .r-custom-content {
  color: var(--resume-text);
  font-size: calc(var(--resume-base-size) * 0.95);
  line-height: var(--resume-line-height);
  white-space: pre-wrap;
}

/* ════════════════════════════════════════════════════════════════
 * 模板 2: Minimal / Serif（单栏 · 黑 accent · Source Serif）
 * ════════════════════════════════════════════════════════════════ */
body[data-template="minimal"] {
  --resume-accent: #1a1d21;
  --resume-text: #1a1d21;
  --resume-font: "Source Serif 4", "Source Serif Pro", "Noto Serif SC", Georgia, serif;
}

body[data-template="minimal"] #resume-preview .r-header {
  text-align: left;
  margin-bottom: var(--resume-section-gap);
}
body[data-template="minimal"] #resume-preview .r-name {
  font-size: var(--resume-name-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--resume-text);
  line-height: 1.1;
}
body[data-template="minimal"] #resume-preview .r-title {
  font-size: var(--resume-title-size);
  color: var(--resume-muted);
  margin-top: 3pt;
  font-style: italic;
}
body[data-template="minimal"] #resume-preview .r-contact {
  font-size: calc(var(--resume-base-size) * 0.9);
  color: var(--resume-muted);
  margin-top: 6pt;
  display: flex; gap: 14pt;
  flex-wrap: wrap;
}
body[data-template="minimal"] #resume-preview .r-summary {
  margin-bottom: var(--resume-section-gap);
  color: var(--resume-text);
  border-left: 2pt solid var(--resume-text);
  padding-left: 10pt;
  font-style: italic;
}
body[data-template="minimal"] #resume-preview h2 {
  font-size: var(--resume-h2-size);
  color: var(--resume-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin: var(--resume-section-gap) 0 8pt;
  padding-bottom: 3pt;
  border-bottom: 0.5pt solid var(--resume-line);
}
body[data-template="minimal"] #resume-preview h2:first-child { margin-top: 0; }

body[data-template="minimal"] #resume-preview .r-item {
  margin-bottom: var(--resume-item-gap);
}
body[data-template="minimal"] #resume-preview .r-item-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12pt; margin-bottom: 2pt;
}
body[data-template="minimal"] #resume-preview .r-item-role {
  font-weight: 600;
  font-size: var(--resume-h3-size);
  color: var(--resume-text);
}
body[data-template="minimal"] #resume-preview .r-item-org {
  color: var(--resume-muted);
}
body[data-template="minimal"] #resume-preview .r-item-org::before { content: "·  "; }
body[data-template="minimal"] #resume-preview .r-item-date {
  color: var(--resume-muted);
  font-size: calc(var(--resume-base-size) * 0.95);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body[data-template="minimal"] #resume-preview .r-item-loc {
  color: var(--resume-muted);
  font-size: calc(var(--resume-base-size) * 0.9);
  margin-bottom: 3pt;
}
body[data-template="minimal"] #resume-preview .r-bullets {
  margin: 4pt 0 0;
  padding-left: 16pt;
}
body[data-template="minimal"] #resume-preview .r-bullets li {
  margin-bottom: var(--resume-paragraph-gap);
}
body[data-template="minimal"] #resume-preview .r-skill-group b {
  font-weight: 700;
  color: var(--resume-text);
}

/* ════════════════════════════════════════════════════════════════
 * 模板 3: Compact / Two-Column（双栏 · IBM Plex Sans · 紧凑）
 * 左侧栏 (sidebar): 基本信息 + 技能 + 教育
 * 右主区 (main): 简介 + 工作经历 + 项目
 * ════════════════════════════════════════════════════════════════ */
body[data-template="compact"] {
  --resume-font: "IBM Plex Sans", -apple-system, "Noto Sans SC", sans-serif;
  --resume-base-size: 10pt;
  --resume-line-height: 1.45;
  --resume-section-gap: 10pt;
  --resume-item-gap: 7pt;
  --resume-h2-size: 11pt;
  --resume-name-size: 20pt;
  --resume-title-size: 11.5pt;
}

body[data-template="compact"] #resume-preview {
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 14pt;
}
body[data-template="compact"] #resume-preview .r-sidebar {
  background: color-mix(in srgb, var(--resume-accent) 8%, transparent);
  padding: 10pt;
  border-radius: 2pt;
}
body[data-template="compact"] #resume-preview .r-main {
  /* main column */
}
body[data-template="compact"] #resume-preview .r-header {
  margin-bottom: 8pt;
}
body[data-template="compact"] #resume-preview .r-name {
  font-size: var(--resume-name-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--resume-text);
  line-height: 1.1;
}
body[data-template="compact"] #resume-preview .r-title {
  font-size: var(--resume-title-size);
  color: var(--resume-accent);
  margin-top: 3pt;
  font-weight: 500;
}
body[data-template="compact"] #resume-preview .r-contact {
  font-size: calc(var(--resume-base-size) * 0.88);
  color: var(--resume-muted);
  margin-top: 4pt;
  display: flex; flex-direction: column; gap: 2pt;
}

body[data-template="compact"] #resume-preview .r-summary {
  margin-bottom: var(--resume-section-gap);
  color: var(--resume-text);
  font-size: calc(var(--resume-base-size) * 0.96);
}

body[data-template="compact"] #resume-preview h2 {
  font-size: var(--resume-h2-size);
  color: var(--resume-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin: var(--resume-section-gap) 0 6pt;
}
body[data-template="compact"] #resume-preview .r-sidebar h2:first-child,
body[data-template="compact"] #resume-preview .r-main h2:first-child { margin-top: 0; }

body[data-template="compact"] #resume-preview .r-item {
  margin-bottom: var(--resume-item-gap);
}
body[data-template="compact"] #resume-preview .r-item-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8pt; margin-bottom: 2pt;
}
body[data-template="compact"] #resume-preview .r-item-role {
  font-weight: 700;
  font-size: var(--resume-h3-size);
  color: var(--resume-text);
}
body[data-template="compact"] #resume-preview .r-item-org {
  color: var(--resume-accent);
  font-weight: 500;
}
body[data-template="compact"] #resume-preview .r-item-date {
  color: var(--resume-muted);
  font-size: calc(var(--resume-base-size) * 0.92);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body[data-template="compact"] #resume-preview .r-bullets {
  margin: 3pt 0 0;
  padding-left: 14pt;
}
body[data-template="compact"] #resume-preview .r-bullets li {
  margin-bottom: var(--resume-paragraph-gap);
  font-size: calc(var(--resume-base-size) * 0.95);
}

/* sidebar 内的 skill / education 紧凑展示 */
body[data-template="compact"] #resume-preview .r-sidebar .r-skill-group {
  margin-bottom: 6pt;
}
body[data-template="compact"] #resume-preview .r-sidebar .r-skill-group b {
  display: block;
  color: var(--resume-text);
  font-size: calc(var(--resume-base-size) * 0.92);
  font-weight: 600;
  margin-bottom: 2pt;
}
body[data-template="compact"] #resume-preview .r-sidebar .r-skill-group span {
  font-size: calc(var(--resume-base-size) * 0.88);
  color: var(--resume-muted);
}
/* sidebar 内的 r-item 用紧凑 block 排版（不是 flex），避免在窄列被挤压 */
body[data-template="compact"] #resume-preview .r-sidebar .r-item {
  font-size: calc(var(--resume-base-size) * 0.92);
  margin-bottom: 6pt;
}
body[data-template="compact"] #resume-preview .r-sidebar .r-item-head {
  display: block;
  margin-bottom: 1pt;
}
body[data-template="compact"] #resume-preview .r-sidebar .r-item-role {
  font-size: calc(var(--resume-base-size) * 0.95);
  font-weight: 700;
  display: block;
  line-height: 1.3;
}
body[data-template="compact"] #resume-preview .r-sidebar .r-item-org {
  font-size: calc(var(--resume-base-size) * 0.85);
  color: var(--resume-muted);
  font-weight: 400;
  display: block;
  margin-top: 1pt;
}
body[data-template="compact"] #resume-preview .r-sidebar .r-item-date {
  font-size: calc(var(--resume-base-size) * 0.82);
  color: var(--resume-muted);
  display: block;
  margin-top: 1pt;
  font-variant-numeric: tabular-nums;
}