/* =========================================================
   Resume page — one HTML structure, four visual themes.
   Grid areas used by every theme: photo header contact summary
   experience education skills

   Modern and Elegant additionally wrap their sidebar/main elements in
   .r-col-a / .r-col-b (see js/app.js renderPreview()): each wrapper is a
   real flex column placed via grid-column, so the two sides stack to
   their own content height instead of sharing grid rows. Classic and
   Minimal don't need this and get an inert `display: contents` default
   on those wrappers, keeping their original flat per-element grid-area
   placement unchanged.
   ========================================================= */

.resume-preview {
  --d: 1;
  --accent: #2f6feb;
  --ink: #16181d;
  --ink-muted: #5b6169;
  --line: #dfe2e8;
  --sidebar-bg: #f3f5f9;
  --sidebar-ink: #16181d;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Noto Sans SC", "PingFang SC", Roboto, Helvetica, Arial, sans-serif;
  --font-head: var(--font-body);

  width: 210mm;
  min-height: 297mm;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 18px 40px rgba(0,0,0,0.12);
  display: grid;
  column-gap: 0;
  row-gap: 0;
  flex-shrink: 0;
}

.resume-preview * { box-sizing: border-box; }

.r-placeholder { opacity: 0.4; font-style: italic; }

/* generic area assignment, shared by all themes */
.r-photo { grid-area: photo; }
.r-header { grid-area: header; }
.r-contact { grid-area: contact; }
.r-summary { grid-area: summary; }
.r-experience { grid-area: experience; }
.r-projects { grid-area: projects; }
.r-education { grid-area: education; }
.r-skills { grid-area: skills; }
.r-extra { grid-area: extra; }

/* .r-col-a / .r-col-b wrap the sidebar/main groupings for two-column themes
   (see Modern, Elegant below) so each column can stack to its own content
   height instead of sharing grid rows with the other column. Themes that
   don't need the split (Classic, Minimal) get this safe default: the
   wrapper disappears from layout and its children become normal grid
   items again, positioned by their own grid-area exactly as before. */
.r-col-a, .r-col-b { display: contents; }

.r-summary[hidden], .r-experience[hidden], .r-education[hidden],
.r-skills[hidden], .r-contact-item[hidden], .r-photo[hidden],
.r-projects[hidden], .r-extra[hidden],
.r-certifications[hidden], .r-languages[hidden] { display: none !important; }

.r-extra .r-certifications, .r-extra .r-languages { margin-bottom: 14px; }
.r-extra .r-certifications:last-child, .r-extra .r-languages:last-child { margin-bottom: 0; }

/* ---------- shared content styles ---------- */
.r-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.r-header .r-name {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.r-header .r-headline {
  font-size: 14.5px;
  color: var(--accent);
  font-weight: 600;
  margin: 0;
}

.r-contact ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.r-contact li { display: flex; align-items: center; gap: 7px; font-size: 12px; word-break: break-word; }
.r-contact svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.75; }

.r-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 calc(10px * var(--d));
  color: var(--accent);
  page-break-after: avoid;
  break-after: avoid;
}

.r-summary p { margin: 0; font-size: 12.8px; line-height: calc(1.6 * var(--d)); color: var(--ink); text-align: justify; }

.r-entry { margin-bottom: calc(14px * var(--d)); page-break-inside: avoid; break-inside: avoid; }
.r-entry:last-child { margin-bottom: 0; }
.r-entry-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.r-entry-title { font-size: 13.5px; font-weight: 700; }
.r-entry-sub { font-size: 12.5px; color: var(--ink-muted); font-style: italic; }
.r-entry-dates { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.r-entry-loc { font-size: 11.5px; color: var(--ink-muted); }
.r-entry ul { margin: calc(6px * var(--d)) 0 0; padding-left: 16px; font-size: 12.3px; line-height: calc(1.55 * var(--d)); text-align: justify; }
.r-entry ul li { margin-bottom: calc(2px * var(--d)); }
.r-entry-link { font-size: 11.5px; color: var(--accent); word-break: break-all; }

.r-skills .chips, .r-languages .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r-skills .chip, .r-languages .chip {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sidebar-bg);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* =========================================================
   THEME: Classic — single column, serif, ATS-friendly
   ========================================================= */
.theme-classic {
  --font-head: Georgia, "Times New Roman", serif;
  --accent: #1f2430;
  padding: 20mm 18mm;
  grid-template-columns: 1fr;
  grid-template-areas: "photo" "header" "contact" "summary" "experience" "projects" "education" "skills" "extra";
  row-gap: calc(14px * var(--d));
}
.theme-classic .r-photo { width: 76px; margin-bottom: 4px; }
.theme-classic .r-photo img { border-radius: 6px; }
.theme-classic .r-header { border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.theme-classic .r-contact ul { flex-direction: row; flex-wrap: wrap; gap: 14px; }
.theme-classic .r-section-title { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 4px; }

/* =========================================================
   THEME: Modern — left sidebar, sans-serif, accent color
   ========================================================= */
.theme-modern {
  --accent: #2f6feb;
  --sidebar-bg: #eef3ff;
  grid-template-columns: 72mm 1fr;
  align-items: stretch;
  align-content: start;
}
/* Sidebar (col-a) and main (col-b) are real flex columns now, each
   stacking to its own content height -- no shared grid rows between them.
   Education stacks in the main column (col-b) after projects.
   align-items: stretch (above) makes both columns fill the row's height,
   which is set by whichever column is taller; the background on .r-col-a
   below carries the sidebar color down to match, so the sidebar never
   looks like it stops short. */
.theme-modern .r-col-a { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; background: var(--sidebar-bg); }
.theme-modern .r-col-b { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
.theme-modern .r-photo,
.theme-modern .r-contact,
.theme-modern .r-skills,
.theme-modern .r-extra {
  background: var(--sidebar-bg);
  padding: 5mm 10mm;
}
.theme-modern .r-photo img { border-radius: 10px; }
.theme-modern .r-header, .theme-modern .r-summary, .theme-modern .r-experience, .theme-modern .r-projects, .theme-modern .r-education {
  padding: 5mm 10mm;
}
.theme-modern .r-skills .chip, .theme-modern .r-languages .chip { background: #fff; }

/* =========================================================
   THEME: Minimal — top photo + name row, airy spacing
   ========================================================= */
.theme-minimal {
  --accent: #16181d;
  --font-head: "Helvetica Neue", Arial, sans-serif;
  padding: 22mm 20mm;
  grid-template-columns: 22mm 1fr;
  column-gap: 10mm;
  row-gap: calc(16px * var(--d));
  grid-template-areas:
    "photo header"
    "contact contact"
    "summary summary"
    "experience experience"
    "projects projects"
    "education education"
    "skills skills"
    "extra extra";
}
.theme-minimal .r-photo img { border-radius: 50%; }
.theme-minimal .r-header { align-self: center; }
.theme-minimal .r-header .r-name { font-weight: 300; font-size: 30px; }
.theme-minimal .r-header .r-headline { color: var(--ink-muted); font-weight: 400; }
.theme-minimal .r-contact { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; }
.theme-minimal .r-contact ul { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.theme-minimal .r-section-title { font-weight: 600; color: var(--ink-muted); }
.theme-minimal .r-skills .chip, .theme-minimal .r-languages .chip { background: #fff; border-radius: 2px; }
.theme-minimal .r-extra { display: flex; gap: 32px; flex-wrap: wrap; }
.theme-minimal .r-extra .r-certifications, .theme-minimal .r-extra .r-languages { flex: 1; min-width: 200px; }

/* =========================================================
   THEME: Elegant — right sidebar, dark, rounded photo
   ========================================================= */
.theme-elegant {
  --accent: #c9a24b;
  --sidebar-bg: #1f2430;
  --sidebar-ink: #f3f5f9;
  grid-template-columns: 1fr 68mm;
  align-items: stretch;
  align-content: start;
}
/* Same split as Modern: col-a (sidebar, right) and col-b (main, left) are
   independent flex columns, no shared grid rows. Education stacks in the
   main column (col-b) after projects.
   align-items: stretch (above) makes both columns fill the row's height,
   which is set by whichever column is taller; the background on .r-col-a
   below carries the sidebar color down to match, so the sidebar never
   looks like it stops short. */
.theme-elegant .r-col-b { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.theme-elegant .r-col-a { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; background: var(--sidebar-bg); color: var(--sidebar-ink); }
.theme-elegant .r-photo,
.theme-elegant .r-contact,
.theme-elegant .r-skills,
.theme-elegant .r-extra {
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  padding: 5mm 10mm;
}
.theme-elegant .r-photo { text-align: center; }
.theme-elegant .r-photo img { width: 34mm; border-radius: 50%; margin: 0 auto; border: 3px solid var(--accent); }
.theme-elegant .r-contact li { color: var(--sidebar-ink); }
.theme-elegant .r-contact svg { color: var(--accent); opacity: 1; }
.theme-elegant .r-skills .r-section-title,
.theme-elegant .r-extra .r-section-title,
.theme-elegant .r-contact .r-section-title { color: var(--accent); }
.theme-elegant .r-skills .chip, .theme-elegant .r-languages .chip { background: rgba(255,255,255,0.08); color: var(--sidebar-ink); border-color: rgba(255,255,255,0.18); }
.theme-elegant .r-header { padding: 5mm 10mm; }
.theme-elegant .r-header .r-name { font-family: Georgia, serif; }
.theme-elegant .r-summary { padding: 5mm 10mm; }
.theme-elegant .r-experience { padding: 5mm 10mm; }
.theme-elegant .r-projects, .theme-elegant .r-education { padding: 5mm 10mm; }
.theme-elegant .r-extra .r-entry-title,
.theme-elegant .r-extra .r-entry-sub,
.theme-elegant .r-extra .r-entry-dates,
.theme-elegant .r-extra .r-entry-loc { color: var(--sidebar-ink); opacity: 0.85; }
.theme-elegant .r-extra .r-entry-title { opacity: 1; }

/* =========================================================
   Density — scales spacing between entries/bullets only;
   page size and margins stay fixed so print pagination
   never breaks.
   ========================================================= */
.resume-preview.density-compact { --d: 0.62; }
.resume-preview.density-cozy { --d: 1; }
.resume-preview.density-spacious { --d: 1.5; }

/* =========================================================
   Print
   ========================================================= */
@media print {
  @page { size: A4; 
    margin: 0;
    margin-top: 25mm;
    margin-bottom: 20mm;
   }
@page :first {
  margin-top: 0;
}
  html, body { background: #fff; }
  .resume-preview {
    box-shadow: none;
    transform: none;
    width: 210mm;
    min-height: 0;
    margin: 0;
  }
  .resume-preview, .resume-preview * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
}